mjs/nebula
mjs/nebula
1
0
Fork 0
mirror of https://github.com/onsonr/nebula.git synced 2025-03-10 17:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

deploy: c1c1a608c27766aeadef2556fc5482afb9984838

Browse Source
This commit is contained in:
prnk28 2025-01-07 20:03:48 +00:00
parent defea16637
commit 3ae5eaf9b5
145 changed files with 1787 additions and 1787 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/search.json
View File

File diff suppressed because one or more lines are too long

20
components/breadcrumb-item/index.html
View File

@ -485,9 +485,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-37">
<div class="code-preview__source-group" id="code-preview-source-group-43">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-224"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-240"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Home
@ -495,11 +495,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Clothing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Shirts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-224"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-240"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-225"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-241"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
@ -513,7 +513,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Shirts</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-225"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-241"></sl-copy-button></pre>
</div>
</div>
@ -522,7 +522,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-37"
aria-controls="code-preview-source-group-43"
>
Source
<svg
@ -597,7 +597,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-226"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-226"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-242"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-242"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -612,17 +612,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-227"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-227"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-243"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-243"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-228"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-228"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-244"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-244"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-229"><span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-229"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-245"><span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-245"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

80
components/breadcrumb/index.html
View File

@ -497,19 +497,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-38">
<div class="code-preview__source-group" id="code-preview-source-group-37">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-230"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-224"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Catalog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Clothing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Women's<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Shirts <span class="token entity named-entity" title="&amp;">&amp;amp;</span> Tops<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-230"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-224"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-231"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-225"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -520,7 +520,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Shirts &amp;amp; Tops</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-231"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-225"></sl-copy-button></pre>
</div>
</div>
@ -529,7 +529,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-38"
aria-controls="code-preview-source-group-37"
>
Source
<svg
@ -606,9 +606,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-39">
<div class="code-preview__source-group" id="code-preview-source-group-38">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-232"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-226"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/home<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Homepage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/home/services<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Our Services<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
@ -617,11 +617,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/home/services/digital/web-design<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Web Design<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-232"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-226"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-233"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-227"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -635,7 +635,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlBreadcrumbItem</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/home/services/digital/web-design<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Web Design</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-233"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-227"></sl-copy-button></pre>
</div>
</div>
@ -644,7 +644,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-39"
aria-controls="code-preview-source-group-38"
>
Source
<svg
@ -726,9 +726,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-40">
<div class="code-preview__source-group" id="code-preview-source-group-39">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-234"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-228"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dot<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>separator<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Second<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
@ -752,11 +752,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Second<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Third<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-234"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-228"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-235"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-229"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
@ -788,7 +788,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-235"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-229"></sl-copy-button></pre>
</div>
</div>
@ -797,7 +797,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-40"
aria-controls="code-preview-source-group-39"
>
Source
<svg
@ -860,9 +860,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-41">
<div class="code-preview__source-group" id="code-preview-source-group-40">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-236"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-230"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Home
@ -870,11 +870,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Articles<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Traveling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-236"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-230"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-237"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-231"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
@ -888,7 +888,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Traveling</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-237"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-231"></sl-copy-button></pre>
</div>
</div>
@ -897,7 +897,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-41"
aria-controls="code-preview-source-group-40"
>
Source
<svg
@ -960,9 +960,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-42">
<div class="code-preview__source-group" id="code-preview-source-group-41">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-238"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-232"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Documents<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Policies<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
@ -970,11 +970,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shield-lock<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-238"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-232"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-239"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-233"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
@ -988,7 +988,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-239"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-233"></sl-copy-button></pre>
</div>
</div>
@ -997,7 +997,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-42"
aria-controls="code-preview-source-group-41"
>
Source
<svg
@ -1070,9 +1070,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-43">
<div class="code-preview__source-group" id="code-preview-source-group-42">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-240"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-234"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Homepage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Our Services<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>Digital Media<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
@ -1090,11 +1090,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dropdown</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-breadcrumb</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-240"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-234"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-241"><span class="token keyword">import</span> <span class="token punctuation">{</span>
<pre><code class="language-jsx" id="code-block-235"><span class="token keyword">import</span> <span class="token punctuation">{</span>
SlBreadcrumb<span class="token punctuation">,</span>
SlBreadcrumbItem<span class="token punctuation">,</span>
SlButton<span class="token punctuation">,</span>
@ -1126,7 +1126,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-241"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-235"></sl-copy-button></pre>
</div>
</div>
@ -1135,7 +1135,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-43"
aria-controls="code-preview-source-group-42"
>
Source
<svg
@ -1204,7 +1204,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-242"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-242"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-236"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-236"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1219,17 +1219,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-243"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-243"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-237"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-237"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-244"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb/breadcrumb.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-244"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-238"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb/breadcrumb.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-238"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-245"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-245"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-239"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-239"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

172
components/button/index.html
View File

@ -489,17 +489,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-57">
<div class="code-preview__source-group" id="code-preview-source-group-52">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-280"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-266"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-281"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-267"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Button</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
</div>
</div>
@ -508,7 +508,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-57"
aria-controls="code-preview-source-group-52"
>
Source
<svg
@ -572,19 +572,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-58">
<div class="code-preview__source-group" id="code-preview-source-group-53">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-282"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-268"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-283"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-269"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -596,7 +596,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
</div>
</div>
@ -605,7 +605,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-58"
aria-controls="code-preview-source-group-53"
>
Source
<svg
@ -661,16 +661,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-59">
<div class="code-preview__source-group" id="code-preview-source-group-54">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-284"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-270"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-285"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-271"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -679,7 +679,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
</div>
</div>
@ -688,7 +688,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-59"
aria-controls="code-preview-source-group-54"
>
Source
<svg
@ -749,19 +749,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-60">
<div class="code-preview__source-group" id="code-preview-source-group-55">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-286"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-272"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-287"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-273"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -785,7 +785,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
</div>
</div>
@ -794,7 +794,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-60"
aria-controls="code-preview-source-group-55"
>
Source
<svg
@ -852,16 +852,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-61">
<div class="code-preview__source-group" id="code-preview-source-group-56">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-288"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-274"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-274"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-289"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-275"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -876,7 +876,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
</div>
</div>
@ -885,7 +885,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-61"
aria-controls="code-preview-source-group-56"
>
Source
<svg
@ -954,9 +954,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-62">
<div class="code-preview__source-group" id="code-preview-source-group-57">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-290"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-276"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -967,11 +967,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-291"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-277"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -987,7 +987,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
</div>
</div>
@ -996,7 +996,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-62"
aria-controls="code-preview-source-group-57"
>
Source
<svg
@ -1057,16 +1057,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-63">
<div class="code-preview__source-group" id="code-preview-source-group-58">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-292"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-278"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-293"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-279"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1081,7 +1081,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-293"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
</div>
</div>
@ -1090,7 +1090,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-63"
aria-controls="code-preview-source-group-58"
>
Source
<svg
@ -1154,17 +1154,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-64">
<div class="code-preview__source-group" id="code-preview-source-group-59">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-294"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-280"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>New Window<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/images/wordmark.svg<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shoelace.svg<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Download<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-294"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-295"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-281"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1180,7 +1180,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-295"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
</div>
</div>
@ -1189,7 +1189,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-64"
aria-controls="code-preview-source-group-59"
>
Source
<svg
@ -1265,16 +1265,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-65">
<div class="code-preview__source-group" id="code-preview-source-group-60">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-296"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-282"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-296"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-297"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-283"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1289,7 +1289,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
</div>
</div>
@ -1298,7 +1298,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-65"
aria-controls="code-preview-source-group-60"
>
Source
<svg
@ -1407,9 +1407,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-66">
<div class="code-preview__source-group" id="code-preview-source-group-61">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-298"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-284"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Settings
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -1460,11 +1460,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Open
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-299"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-285"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1524,7 +1524,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-299"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
</div>
</div>
@ -1533,7 +1533,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-66"
aria-controls="code-preview-source-group-61"
>
Source
<svg
@ -1592,16 +1592,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-67">
<div class="code-preview__source-group" id="code-preview-source-group-62">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-300"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-286"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-301"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-287"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1616,7 +1616,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
</div>
</div>
@ -1625,7 +1625,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-67"
aria-controls="code-preview-source-group-62"
>
Source
<svg
@ -1689,19 +1689,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-68">
<div class="code-preview__source-group" id="code-preview-source-group-63">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-302"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-288"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-303"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-289"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1725,7 +1725,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
</div>
</div>
@ -1734,7 +1734,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-68"
aria-controls="code-preview-source-group-63"
>
Source
<svg
@ -1795,19 +1795,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-69">
<div class="code-preview__source-group" id="code-preview-source-group-64">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-304"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-290"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-305"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-291"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1836,7 +1836,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
</div>
</div>
@ -1845,7 +1845,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-69"
aria-controls="code-preview-source-group-64"
>
Source
<svg
@ -1943,9 +1943,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-70">
<div class="code-preview__source-group" id="code-preview-source-group-65">
<div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-306"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pink<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Pink Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-292"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pink<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Pink Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">sl-button.pink::part(base)</span> <span class="token punctuation">{</span>
@ -1982,7 +1982,7 @@
<span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
</div>
</div>
@ -1991,7 +1991,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-70"
aria-controls="code-preview-source-group-65"
>
Source
<svg
@ -2052,7 +2052,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-307"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-293"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-293"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -2067,17 +2067,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-308"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-294"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-294"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-309"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-295"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-295"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-310"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-296"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-296"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

68
components/card/index.html
View File

@ -508,9 +508,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-52">
<div class="code-preview__source-group" id="code-preview-source-group-66">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-266"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-297"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80<span class="token punctuation">"</span></span>
@ -542,11 +542,11 @@
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-267"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-298"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
@ -590,7 +590,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
</div>
</div>
@ -599,7 +599,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-52"
aria-controls="code-preview-source-group-66"
>
Source
<svg
@ -666,9 +666,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-53">
<div class="code-preview__source-group" id="code-preview-source-group-67">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-268"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-basic<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-299"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-basic<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This is just a basic card. No image, no header, and no footer. Just your content.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-card</span><span class="token punctuation">&gt;</span></span>
@ -677,11 +677,11 @@
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-299"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-269"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-300"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.card-basic {
@ -698,7 +698,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
</div>
</div>
@ -707,7 +707,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-53"
aria-controls="code-preview-source-group-67"
>
Source
<svg
@ -790,9 +790,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-54">
<div class="code-preview__source-group" id="code-preview-source-group-68">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-270"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-301"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Header Title
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon-button</span><span class="token punctuation">&gt;</span></span>
@ -820,11 +820,11 @@
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-font-size-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-271"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-302"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -860,7 +860,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
</div>
</div>
@ -869,7 +869,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-54"
aria-controls="code-preview-source-group-68"
>
Source
<svg
@ -944,9 +944,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-55">
<div class="code-preview__source-group" id="code-preview-source-group-69">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-272"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-303"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This card has a footer. You can put all sorts of things in it!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
@ -966,11 +966,11 @@
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-273"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-304"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
@ -1001,7 +1001,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
</div>
</div>
@ -1010,7 +1010,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-55"
aria-controls="code-preview-source-group-69"
>
Source
<svg
@ -1077,9 +1077,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-56">
<div class="code-preview__source-group" id="code-preview-source-group-70">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-274"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-image<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-305"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-image<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80<span class="token punctuation">"</span></span>
@ -1093,11 +1093,11 @@
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-274"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-275"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-306"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.card-image {
@ -1119,7 +1119,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
</div>
</div>
@ -1128,7 +1128,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-56"
aria-controls="code-preview-source-group-70"
>
Source
<svg
@ -1197,7 +1197,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-276"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-307"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1212,17 +1212,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-277"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-308"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-278"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-309"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-279"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-310"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

92
components/checkbox/index.html
View File

@ -482,17 +482,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-84">
<div class="code-preview__source-group" id="code-preview-source-group-99">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-345"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-345"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-383"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-383"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-346"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-384"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Checkbox</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-346"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
</div>
</div>
@ -501,7 +501,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-84"
aria-controls="code-preview-source-group-99"
>
Source
<svg
@ -567,17 +567,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-85">
<div class="code-preview__source-group" id="code-preview-source-group-100">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-347"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-347"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-385"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-385"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-348"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-386"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Checked</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-348"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
</div>
</div>
@ -586,7 +586,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-85"
aria-controls="code-preview-source-group-100"
>
Source
<svg
@ -642,17 +642,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-86">
<div class="code-preview__source-group" id="code-preview-source-group-101">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-349"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">&gt;</span></span>Indeterminate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-349"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-387"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">&gt;</span></span>Indeterminate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-350"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-388"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">indeterminate</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Indeterminate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-350"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
</div>
</div>
@ -661,7 +661,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-86"
aria-controls="code-preview-source-group-101"
>
Source
<svg
@ -717,17 +717,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-87">
<div class="code-preview__source-group" id="code-preview-source-group-102">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-351"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-351"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-389"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-352"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-390"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-352"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-390"></sl-copy-button></pre>
</div>
</div>
@ -736,7 +736,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-87"
aria-controls="code-preview-source-group-102"
>
Source
<svg
@ -794,18 +794,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-88">
<div class="code-preview__source-group" id="code-preview-source-group-103">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-353"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-391"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-353"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-354"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-392"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -816,7 +816,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-354"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-392"></sl-copy-button></pre>
</div>
</div>
@ -825,7 +825,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-88"
aria-controls="code-preview-source-group-103"
>
Source
<svg
@ -884,17 +884,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-89">
<div class="code-preview__source-group" id="code-preview-source-group-104">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-355"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the checkbox?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-355"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-393"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the checkbox?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-356"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-394"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Label</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-356"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-394"></sl-copy-button></pre>
</div>
</div>
@ -903,7 +903,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-89"
aria-controls="code-preview-source-group-104"
>
Source
<svg
@ -991,9 +991,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-90">
<div class="code-preview__source-group" id="code-preview-source-group-105">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-357"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-395"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>Check me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-checkbox</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -1020,11 +1020,11 @@
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-357"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-358"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-396"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
@ -1057,7 +1057,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-358"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
</div>
</div>
@ -1066,7 +1066,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-90"
aria-controls="code-preview-source-group-105"
>
Source
<svg
@ -1135,7 +1135,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-359"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-359"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-397"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-397"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1150,17 +1150,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-360"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-360"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-398"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-398"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-361"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-361"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-399"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-399"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-362"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-362"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-400"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

92
components/color-picker/index.html
View File

@ -483,17 +483,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-99">
<div class="code-preview__source-group" id="code-preview-source-group-84">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-383"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-383"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-345"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-345"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-384"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-346"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-346"></sl-copy-button></pre>
</div>
</div>
@ -502,7 +502,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-99"
aria-controls="code-preview-source-group-84"
>
Source
<svg
@ -568,17 +568,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-100">
<div class="code-preview__source-group" id="code-preview-source-group-85">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-385"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-385"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-347"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-347"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-386"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-348"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-348"></sl-copy-button></pre>
</div>
</div>
@ -587,7 +587,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-100"
aria-controls="code-preview-source-group-85"
>
Source
<svg
@ -646,17 +646,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-101">
<div class="code-preview__source-group" id="code-preview-source-group-86">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-387"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#f5a623ff<span class="token punctuation">"</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-349"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#f5a623ff<span class="token punctuation">"</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-349"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-388"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-350"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-350"></sl-copy-button></pre>
</div>
</div>
@ -665,7 +665,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-101"
aria-controls="code-preview-source-group-86"
>
Source
<svg
@ -729,17 +729,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-102">
<div class="code-preview__source-group" id="code-preview-source-group-87">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-389"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-351"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rgb<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rgb(80, 227, 194)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsl<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsl(290, 87%, 47%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-351"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-390"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-352"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -749,7 +749,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-390"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-352"></sl-copy-button></pre>
</div>
</div>
@ -758,7 +758,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-102"
aria-controls="code-preview-source-group-87"
>
Source
<svg
@ -824,20 +824,20 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-103">
<div class="code-preview__source-group" id="code-preview-source-group-88">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-391"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span>
<pre><code class="language-html" id="code-block-353"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span>
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span>
<span class="token attr-name">swatches</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
<span class="token punctuation">"</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-353"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-392"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-354"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span>
@ -848,7 +848,7 @@
<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-392"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-354"></sl-copy-button></pre>
</div>
</div>
@ -857,7 +857,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-103"
aria-controls="code-preview-source-group-88"
>
Source
<svg
@ -913,16 +913,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-104">
<div class="code-preview__source-group" id="code-preview-source-group-89">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-393"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-355"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-355"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-394"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-356"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -931,7 +931,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-394"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-356"></sl-copy-button></pre>
</div>
</div>
@ -940,7 +940,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-104"
aria-controls="code-preview-source-group-89"
>
Source
<svg
@ -996,17 +996,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-105">
<div class="code-preview__source-group" id="code-preview-source-group-90">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-395"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-357"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-357"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-396"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-358"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-358"></sl-copy-button></pre>
</div>
</div>
@ -1015,7 +1015,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-105"
aria-controls="code-preview-source-group-90"
>
Source
<svg
@ -1084,7 +1084,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-397"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-397"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-359"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-359"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1099,17 +1099,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-398"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-398"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-360"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-360"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-399"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-399"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-361"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-361"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-400"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-362"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-362"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/format-bytes/index.html
View File

@ -487,9 +487,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-140">
<div class="code-preview__source-group" id="code-preview-source-group-144">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-488"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-bytes-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-500"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-bytes-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
The file is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span> in size. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number to Format<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -501,11 +501,11 @@
input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>formatter<span class="token punctuation">.</span>value <span class="token operator">=</span> input<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-500"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-489"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-501"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -528,7 +528,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-501"></sl-copy-button></pre>
</div>
</div>
@ -537,7 +537,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-140"
aria-controls="code-preview-source-group-144"
>
Source
<svg
@ -599,17 +599,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-141">
<div class="code-preview__source-group" id="code-preview-source-group-145">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-490"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-502"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-502"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-491"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-503"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -622,7 +622,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-503"></sl-copy-button></pre>
</div>
</div>
@ -631,7 +631,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-141"
aria-controls="code-preview-source-group-145"
>
Source
<svg
@ -690,17 +690,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-142">
<div class="code-preview__source-group" id="code-preview-source-group-146">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-492"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-504"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-504"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-493"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-505"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -713,7 +713,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-505"></sl-copy-button></pre>
</div>
</div>
@ -722,7 +722,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-142"
aria-controls="code-preview-source-group-146"
>
Source
<svg
@ -781,17 +781,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-143">
<div class="code-preview__source-group" id="code-preview-source-group-147">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-494"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-506"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-506"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-495"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-507"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -804,7 +804,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-507"></sl-copy-button></pre>
</div>
</div>
@ -813,7 +813,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-143"
aria-controls="code-preview-source-group-147"
>
Source
<svg
@ -882,7 +882,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-496"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-496"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-508"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-508"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -897,17 +897,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-497"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-497"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-509"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-509"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-498"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-498"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-510"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-510"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-499"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-499"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-511"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-511"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/format-date/index.html
View File

@ -486,18 +486,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-144">
<div class="code-preview__source-group" id="code-preview-source-group-140">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-500"><span class="token comment">&lt;!-- Nebula 2 release date 🎉 --&gt;</span>
<pre><code class="language-html" id="code-block-488"><span class="token comment">&lt;!-- Nebula 2 release date 🎉 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-500"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-501"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-489"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-501"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
</div>
</div>
@ -506,7 +506,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-144"
aria-controls="code-preview-source-group-140"
>
Source
<svg
@ -627,9 +627,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-145">
<div class="code-preview__source-group" id="code-preview-source-group-141">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-502"><span class="token comment">&lt;!-- Human-readable date --&gt;</span>
<pre><code class="language-html" id="code-block-490"><span class="token comment">&lt;!-- Human-readable date --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">month</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span> <span class="token attr-name">day</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">year</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token comment">&lt;!-- Time --&gt;</span>
@ -646,11 +646,11 @@
<span class="token comment">&lt;!-- No formatting options --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-502"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-503"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-491"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -678,7 +678,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatDate</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-503"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
</div>
</div>
@ -687,7 +687,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-145"
aria-controls="code-preview-source-group-141"
>
Source
<svg
@ -747,15 +747,15 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-146">
<div class="code-preview__source-group" id="code-preview-source-group-142">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-504"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-492"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-504"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-505"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-493"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -764,7 +764,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-505"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
</div>
</div>
@ -773,7 +773,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-146"
aria-controls="code-preview-source-group-142"
>
Source
<svg
@ -831,16 +831,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-147">
<div class="code-preview__source-group" id="code-preview-source-group-143">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-506">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-494">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
French: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fr<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-date</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-506"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-507"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-495"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -851,7 +851,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-507"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
</div>
</div>
@ -860,7 +860,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-147"
aria-controls="code-preview-source-group-143"
>
Source
<svg
@ -929,7 +929,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-508"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-508"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-496"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-496"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -944,17 +944,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-509"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-509"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-497"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-497"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-510"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-510"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-498"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-498"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-511"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-511"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-499"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-499"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

32
components/image-comparer/index.html
View File

@ -494,9 +494,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-164">
<div class="code-preview__source-group" id="code-preview-source-group-185">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-555"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-image-comparer</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-613"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-image-comparer</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>before<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80&amp;sat=-100&amp;bri=-5<span class="token punctuation">"</span></span>
@ -508,11 +508,11 @@
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Color version of kittens in a basket looking around.<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-image-comparer</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-555"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-613"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-556"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-614"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -528,7 +528,7 @@
<span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-556"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-614"></sl-copy-button></pre>
</div>
</div>
@ -537,7 +537,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-164"
aria-controls="code-preview-source-group-185"
>
Source
<svg
@ -610,9 +610,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-165">
<div class="code-preview__source-group" id="code-preview-source-group-186">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-557"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-image-comparer</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-615"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-image-comparer</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>before<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80<span class="token punctuation">"</span></span>
@ -624,11 +624,11 @@
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A person sitting on a yellow curb tying shoelaces on a boot.<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-image-comparer</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-557"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-615"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-558"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-616"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlImageComparer</span></span> <span class="token attr-name">position</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">25</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -644,7 +644,7 @@
<span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-558"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-616"></sl-copy-button></pre>
</div>
</div>
@ -653,7 +653,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-165"
aria-controls="code-preview-source-group-186"
>
Source
<svg
@ -722,7 +722,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-559"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-559"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-617"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-617"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -737,17 +737,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-560"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-560"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-618"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-618"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-561"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-561"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-619"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-619"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-562"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-562"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-620"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-620"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

24
components/include/index.html
View File

@ -482,17 +482,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-166">
<div class="code-preview__source-group" id="code-preview-source-group-164">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-563"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-include</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-563"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-555"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-include</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-555"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-564"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-556"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInclude</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-564"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-556"></sl-copy-button></pre>
</div>
</div>
@ -501,7 +501,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-166"
aria-controls="code-preview-source-group-164"
>
Source
<svg
@ -558,7 +558,7 @@
<code>event.detail.status</code> will contain the resulting HTTP status code of the request, e.g. 404 (not
found).
</p>
<pre><code class="language-html" id="code-block-565"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-include</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-557"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-include</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> include <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-include'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -575,7 +575,7 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-565"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-557"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -604,7 +604,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-566"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-566"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-558"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-558"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -619,17 +619,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-567"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-567"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-559"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-559"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-568"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-568"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-560"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-560"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-569"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-569"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-561"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-561"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

160
components/input/index.html
View File

@ -488,17 +488,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-168">
<div class="code-preview__source-group" id="code-preview-source-group-165">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-576"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-576"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-562"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-562"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-577"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-563"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-577"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-563"></sl-copy-button></pre>
</div>
</div>
@ -507,7 +507,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-168"
aria-controls="code-preview-source-group-165"
>
Source
<svg
@ -574,18 +574,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-169">
<div class="code-preview__source-group" id="code-preview-source-group-166">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-578"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-578"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-564"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-564"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-579"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-565"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-579"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-565"></sl-copy-button></pre>
</div>
</div>
@ -594,7 +594,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-169"
aria-controls="code-preview-source-group-166"
>
Source
<svg
@ -653,18 +653,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-170">
<div class="code-preview__source-group" id="code-preview-source-group-167">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-580"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-580"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-566"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-566"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-581"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-567"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-581"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-567"></sl-copy-button></pre>
</div>
</div>
@ -673,7 +673,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-170"
aria-controls="code-preview-source-group-167"
>
Source
<svg
@ -729,17 +729,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-171">
<div class="code-preview__source-group" id="code-preview-source-group-168">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-582"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-582"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-568"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-568"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-583"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-569"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-583"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-569"></sl-copy-button></pre>
</div>
</div>
@ -748,7 +748,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-171"
aria-controls="code-preview-source-group-168"
>
Source
<svg
@ -804,17 +804,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-172">
<div class="code-preview__source-group" id="code-preview-source-group-169">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-584"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-584"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-570"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-570"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-585"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-571"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-585"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-571"></sl-copy-button></pre>
</div>
</div>
@ -823,7 +823,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-172"
aria-controls="code-preview-source-group-169"
>
Source
<svg
@ -882,17 +882,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-173">
<div class="code-preview__source-group" id="code-preview-source-group-170">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-586"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-586"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-572"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-572"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-587"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-573"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-587"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-573"></sl-copy-button></pre>
</div>
</div>
@ -901,7 +901,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-173"
aria-controls="code-preview-source-group-170"
>
Source
<svg
@ -957,17 +957,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-174">
<div class="code-preview__source-group" id="code-preview-source-group-171">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-588"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-588"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-574"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-574"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-589"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-575"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-589"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-575"></sl-copy-button></pre>
</div>
</div>
@ -976,7 +976,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-174"
aria-controls="code-preview-source-group-171"
>
Source
<svg
@ -1032,17 +1032,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-175">
<div class="code-preview__source-group" id="code-preview-source-group-172">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-590"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-590"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-576"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-576"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-591"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-577"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-591"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-577"></sl-copy-button></pre>
</div>
</div>
@ -1051,7 +1051,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-175"
aria-controls="code-preview-source-group-172"
>
Source
<svg
@ -1109,18 +1109,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-176">
<div class="code-preview__source-group" id="code-preview-source-group-173">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-592"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-578"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-578"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-593"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-579"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1131,7 +1131,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-579"></sl-copy-button></pre>
</div>
</div>
@ -1140,7 +1140,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-176"
aria-controls="code-preview-source-group-173"
>
Source
<svg
@ -1198,18 +1198,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-177">
<div class="code-preview__source-group" id="code-preview-source-group-174">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-594"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-580"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-580"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-595"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-581"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1220,7 +1220,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-581"></sl-copy-button></pre>
</div>
</div>
@ -1229,7 +1229,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-177"
aria-controls="code-preview-source-group-174"
>
Source
<svg
@ -1289,18 +1289,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-178">
<div class="code-preview__source-group" id="code-preview-source-group-175">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-596"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-582"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-582"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-597"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-583"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1311,7 +1311,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-583"></sl-copy-button></pre>
</div>
</div>
@ -1320,7 +1320,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-178"
aria-controls="code-preview-source-group-175"
>
Source
<svg
@ -1392,9 +1392,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-179">
<div class="code-preview__source-group" id="code-preview-source-group-176">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-598"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-584"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chat<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
@ -1408,11 +1408,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chat<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-598"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-584"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-599"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-585"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1433,7 +1433,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlInput</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-585"></sl-copy-button></pre>
</div>
</div>
@ -1442,7 +1442,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-179"
aria-controls="code-preview-source-group-176"
>
Source
<svg
@ -1533,9 +1533,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-180">
<div class="code-preview__source-group" id="code-preview-source-group-177">
<div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-600"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your name<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-586"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your name<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your email<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Tell us something about yourself<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
@ -1564,7 +1564,7 @@
<span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-586"></sl-copy-button></pre>
</div>
</div>
@ -1573,7 +1573,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-180"
aria-controls="code-preview-source-group-177"
>
Source
<svg
@ -1634,7 +1634,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-601"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-587"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-587"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1649,17 +1649,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-602"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-588"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-588"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-603"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-589"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-589"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-604"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-604"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-590"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-590"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

80
components/menu-item/index.html
View File

@ -497,9 +497,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-204">
<div class="code-preview__source-group" id="code-preview-source-group-178">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-668"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-591"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -516,11 +516,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heart<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-591"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-669"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-592"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -546,7 +546,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
</div>
</div>
@ -555,7 +555,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-204"
aria-controls="code-preview-source-group-178"
>
Source
<svg
@ -634,9 +634,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-205">
<div class="code-preview__source-group" id="code-preview-source-group-179">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-670"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-593"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Home
@ -655,11 +655,11 @@
Settings
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-670"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-671"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-594"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -688,7 +688,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-671"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
</div>
</div>
@ -697,7 +697,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-205"
aria-controls="code-preview-source-group-179"
>
Source
<svg
@ -757,18 +757,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-206">
<div class="code-preview__source-group" id="code-preview-source-group-180">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-672"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-595"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-672"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-673"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-596"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -778,7 +778,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-673"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
</div>
</div>
@ -787,7 +787,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-206"
aria-controls="code-preview-source-group-180"
>
Source
<svg
@ -850,18 +850,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-207">
<div class="code-preview__source-group" id="code-preview-source-group-181">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-674"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-597"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-674"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-675"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-598"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -871,7 +871,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-598"></sl-copy-button></pre>
</div>
</div>
@ -880,7 +880,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-207"
aria-controls="code-preview-source-group-181"
>
Source
<svg
@ -947,18 +947,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-208">
<div class="code-preview__source-group" id="code-preview-source-group-182">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-676"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-599"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Autosave<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Check Spelling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Word Wrap<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-677"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-600"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -970,7 +970,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Word Wrap</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
</div>
</div>
@ -979,7 +979,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-208"
aria-controls="code-preview-source-group-182"
>
Source
<svg
@ -1065,9 +1065,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-209">
<div class="code-preview__source-group" id="code-preview-source-group-183">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-678"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu-value<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-601"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu-value<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -1091,11 +1091,11 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-679"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-602"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -1117,7 +1117,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-679"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
</div>
</div>
@ -1126,7 +1126,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-209"
aria-controls="code-preview-source-group-183"
>
Source
<svg
@ -1195,7 +1195,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-680"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-680"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-603"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1210,17 +1210,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-681"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-681"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-604"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-604"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-682"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-682"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-605"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-605"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-683"><span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-606"><span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-606"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

20
components/menu-label/index.html
View File

@ -481,9 +481,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-167">
<div class="code-preview__source-group" id="code-preview-source-group-184">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-570"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-607"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-label</span><span class="token punctuation">&gt;</span></span>Fruits<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Apple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>banana<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Banana<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -494,11 +494,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carrot<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Carrot<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zucchini<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Zucchini<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-570"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-607"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-571"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-608"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -516,7 +516,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zucchini<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Zucchini</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-571"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
</div>
</div>
@ -525,7 +525,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-167"
aria-controls="code-preview-source-group-184"
>
Source
<svg
@ -594,7 +594,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-572"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-572"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-609"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -609,17 +609,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-573"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-573"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-610"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-574"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-574"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-611"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-611"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-575"><span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-575"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-612"><span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-612"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

44
components/menu/index.html
View File

@ -488,9 +488,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-181">
<div class="code-preview__source-group" id="code-preview-source-group-187">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-605"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-621"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>undo<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Undo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>redo<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Redo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-divider</span><span class="token punctuation">&gt;</span></span>
@ -499,11 +499,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paste<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-605"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-621"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-606"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-622"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -518,7 +518,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Delete</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-606"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-622"></sl-copy-button></pre>
</div>
</div>
@ -527,7 +527,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-181"
aria-controls="code-preview-source-group-187"
>
Source
<svg
@ -600,9 +600,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-182">
<div class="code-preview__source-group" id="code-preview-source-group-188">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-607"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-623"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">&gt;</span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cut<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -610,11 +610,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paste<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dropdown</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-607"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-623"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-608"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-624"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -629,7 +629,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-624"></sl-copy-button></pre>
</div>
</div>
@ -638,7 +638,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-182"
aria-controls="code-preview-source-group-188"
>
Source
<svg
@ -721,9 +721,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-183">
<div class="code-preview__source-group" id="code-preview-source-group-189">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-609"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-625"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>undo<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Undo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>redo<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Redo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-divider</span><span class="token punctuation">&gt;</span></span>
@ -748,11 +748,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-625"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-610"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-626"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -783,7 +783,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-626"></sl-copy-button></pre>
</div>
</div>
@ -792,7 +792,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-183"
aria-controls="code-preview-source-group-189"
>
Source
<svg
@ -865,7 +865,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-611"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-611"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-627"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-627"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -880,17 +880,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-612"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-612"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-628"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-628"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-613"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-613"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-629"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-629"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-614"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-614"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-630"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-630"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

32
components/mutation-observer/index.html
View File

@ -536,9 +536,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-184">
<div class="code-preview__source-group" id="code-preview-source-group-190">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-615"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-631"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-mutation-observer</span> <span class="token attr-name">attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>variant<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Click to mutate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-mutation-observer</span><span class="token punctuation">&gt;</span></span>
@ -571,11 +571,11 @@
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-615"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-631"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-616"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-632"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span>
@ -613,7 +613,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-616"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-632"></sl-copy-button></pre>
</div>
</div>
@ -622,7 +622,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-184"
aria-controls="code-preview-source-group-190"
>
Source
<svg
@ -737,9 +737,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-185">
<div class="code-preview__source-group" id="code-preview-source-group-191">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-617"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-child-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-633"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-child-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-mutation-observer</span> <span class="token attr-name">child-list</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Add button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -787,11 +787,11 @@
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-617"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-633"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-618"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-634"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span>
@ -838,7 +838,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-618"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-634"></sl-copy-button></pre>
</div>
</div>
@ -847,7 +847,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-185"
aria-controls="code-preview-source-group-191"
>
Source
<svg
@ -916,7 +916,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-619"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-619"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-635"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-635"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -931,17 +931,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-620"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-620"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-636"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-636"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-621"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-621"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-637"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-637"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-622"><span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-622"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-638"><span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-638"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

40
components/option/index.html
View File

@ -490,18 +490,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-186">
<div class="code-preview__source-group" id="code-preview-source-group-192">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-623"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-639"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-623"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-624"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-640"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -511,7 +511,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-624"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
</div>
</div>
@ -520,7 +520,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-186"
aria-controls="code-preview-source-group-192"
>
Source
<svg
@ -583,18 +583,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-187">
<div class="code-preview__source-group" id="code-preview-source-group-193">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-625"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-641"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-625"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-626"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-642"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -606,7 +606,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-626"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
</div>
</div>
@ -615,7 +615,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-187"
aria-controls="code-preview-source-group-193"
>
Source
<svg
@ -691,9 +691,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-188">
<div class="code-preview__source-group" id="code-preview-source-group-194">
<div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-627"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-643"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>envelope<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Email
@ -712,7 +712,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>patch-check<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-627"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
</div>
</div>
@ -721,7 +721,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-188"
aria-controls="code-preview-source-group-194"
>
Source
<svg
@ -782,7 +782,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-628"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-628"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-644"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-644"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -797,17 +797,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-629"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-629"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-645"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-645"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-630"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-630"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-646"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-646"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-631"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-631"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-647"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-647"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

196
components/popup/index.html
View File

@ -617,9 +617,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-189">
<div class="code-preview__source-group" id="code-preview-source-group-206">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-632"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-678"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -705,11 +705,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-632"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-633"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-679"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -828,7 +828,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-633"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-679"></sl-copy-button></pre>
</div>
</div>
@ -837,7 +837,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-189"
aria-controls="code-preview-source-group-206"
>
Source
<svg
@ -943,9 +943,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-190">
<div class="code-preview__source-group" id="code-preview-source-group-207">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-634"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-active<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-680"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-active<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -979,11 +979,11 @@
active<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>active <span class="token operator">=</span> active<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-634"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-680"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-635"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-681"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -1025,7 +1025,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-635"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-681"></sl-copy-button></pre>
</div>
</div>
@ -1034,7 +1034,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-190"
aria-controls="code-preview-source-group-207"
>
Source
<svg
@ -1116,9 +1116,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-191">
<div class="code-preview__source-group" id="code-preview-source-group-208">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-636"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-682"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1140,11 +1140,11 @@
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-636"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-682"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-637"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-683"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
#external-anchor {
@ -1176,7 +1176,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-637"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
</div>
</div>
@ -1185,7 +1185,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-191"
aria-controls="code-preview-source-group-208"
>
Source
<svg
@ -1301,9 +1301,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-192">
<div class="code-preview__source-group" id="code-preview-source-group-209">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-638"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-placement<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-684"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-placement<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1353,11 +1353,11 @@
select<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>placement <span class="token operator">=</span> select<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-638"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-684"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-639"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-685"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -1414,7 +1414,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-685"></sl-copy-button></pre>
</div>
</div>
@ -1423,7 +1423,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-192"
aria-controls="code-preview-source-group-209"
>
Source
<svg
@ -1520,9 +1520,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-193">
<div class="code-preview__source-group" id="code-preview-source-group-210">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-640"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-distance<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-686"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-distance<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1559,11 +1559,11 @@
distance<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>distance <span class="token operator">=</span> distance<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-686"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-641"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-687"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
@ -1613,7 +1613,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-687"></sl-copy-button></pre>
</div>
</div>
@ -1622,7 +1622,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-193"
aria-controls="code-preview-source-group-210"
>
Source
<svg
@ -1719,9 +1719,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-194">
<div class="code-preview__source-group" id="code-preview-source-group-211">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-642"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-skidding<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-688"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-skidding<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1758,11 +1758,11 @@
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-688"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-643"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-689"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
@ -1812,7 +1812,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
</div>
</div>
@ -1821,7 +1821,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-194"
aria-controls="code-preview-source-group-211"
>
Source
<svg
@ -1968,9 +1968,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-195">
<div class="code-preview__source-group" id="code-preview-source-group-212">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-644"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-arrow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-690"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-arrow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">arrow</span> <span class="token attr-name">arrow-placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -2052,11 +2052,11 @@
arrow<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>arrow <span class="token operator">=</span> arrow<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-644"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-690"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-645"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-691"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -2157,7 +2157,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-645"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
</div>
</div>
@ -2166,7 +2166,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-195"
aria-controls="code-preview-source-group-212"
>
Source
<svg
@ -2274,9 +2274,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-196">
<div class="code-preview__source-group" id="code-preview-source-group-213">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-646"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-sync<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-692"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-sync<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -2321,11 +2321,11 @@
sync<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>sync <span class="token operator">=</span> sync<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-646"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-692"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-647"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-693"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -2376,7 +2376,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-647"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
</div>
</div>
@ -2385,7 +2385,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-196"
aria-controls="code-preview-source-group-213"
>
Source
<svg
@ -2519,9 +2519,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-197">
<div class="code-preview__source-group" id="code-preview-source-group-214">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-648"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-strategy<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-694"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-strategy<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2567,11 +2567,11 @@
fixed<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>strategy <span class="token operator">=</span> fixed<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'fixed'</span> <span class="token operator">:</span> <span class="token string">'absolute'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-694"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-649"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-695"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -2625,7 +2625,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-695"></sl-copy-button></pre>
</div>
</div>
@ -2634,7 +2634,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-197"
aria-controls="code-preview-source-group-214"
>
Source
<svg
@ -2739,9 +2739,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-198">
<div class="code-preview__source-group" id="code-preview-source-group-215">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-650"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-696"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2784,11 +2784,11 @@
flip<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>flip <span class="token operator">=</span> flip<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-696"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-651"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-697"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -2839,7 +2839,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
</div>
</div>
@ -2848,7 +2848,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-198"
aria-controls="code-preview-source-group-215"
>
Source
<svg
@ -2957,9 +2957,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-199">
<div class="code-preview__source-group" id="code-preview-source-group-216">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-652"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip-fallbacks<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-698"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip-fallbacks<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">flip-fallback-placements</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right bottom<span class="token punctuation">"</span></span> <span class="token attr-name">flip-fallback-strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>initial<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2991,11 +2991,11 @@
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-653"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-699"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.popup-flip-fallbacks .overflow {
@ -3037,7 +3037,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-699"></sl-copy-button></pre>
</div>
</div>
@ -3046,7 +3046,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-199"
aria-controls="code-preview-source-group-216"
>
Source
<svg
@ -3147,9 +3147,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-200">
<div class="code-preview__source-group" id="code-preview-source-group-217">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-654"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-shift<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-700"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-shift<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">shift</span> <span class="token attr-name">shift-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -3190,11 +3190,11 @@
shift<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>shift <span class="token operator">=</span> shift<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-655"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-701"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3243,7 +3243,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-701"></sl-copy-button></pre>
</div>
</div>
@ -3252,7 +3252,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-200"
aria-controls="code-preview-source-group-217"
>
Source
<svg
@ -3372,9 +3372,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-201">
<div class="code-preview__source-group" id="code-preview-source-group-218">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-656"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-auto-size<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-702"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-auto-size<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>both<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -3424,11 +3424,11 @@
autoSize<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>autoSize <span class="token operator">=</span> autoSize<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'both'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-657"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-703"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3486,7 +3486,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
</div>
</div>
@ -3495,7 +3495,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-201"
aria-controls="code-preview-source-group-218"
>
Source
<svg
@ -3608,9 +3608,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-202">
<div class="code-preview__source-group" id="code-preview-source-group-219">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-658"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-hover-bridge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-704"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-hover-bridge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">hover-bridge</span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -3660,11 +3660,11 @@
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
hoverBridge<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>hoverBridge <span class="token operator">=</span> hoverBridge<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-659"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-705"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3738,7 +3738,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
</div>
</div>
@ -3747,7 +3747,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-202"
aria-controls="code-preview-source-group-219"
>
Source
<svg
@ -3805,13 +3805,13 @@
>
object as shown below.
</p>
<pre><code class="language-ts" id="code-block-660"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
<pre><code class="language-ts" id="code-block-706"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
<p>
This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to
properly view it.
@ -3904,9 +3904,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-203">
<div class="code-preview__source-group" id="code-preview-source-group-220">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-661"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-virtual-element<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-707"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-virtual-element<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-popup</span><span class="token punctuation">&gt;</span></span>
@ -3979,11 +3979,11 @@
<span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">scale</span><span class="token punctuation">:</span> 1.1<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-707"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-662"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-708"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -4065,7 +4065,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
</div>
</div>
@ -4074,7 +4074,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-203"
aria-controls="code-preview-source-group-220"
>
Source
<svg
@ -4120,14 +4120,14 @@
Sometimes the <code>getBoundingClientRects</code> might be derived from a real element. In this case provide
the anchor element as context to ensure clipping and position updates for the popup work well.
</p>
<pre><code class="language-ts" id="code-block-663"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
<pre><code class="language-ts" id="code-block-709"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
contextElement<span class="token operator">:</span> anchorElement
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -4156,7 +4156,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-664"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-710"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -4171,17 +4171,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-665"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-711"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-666"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-712"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-667"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-713"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

68
components/progress-bar/index.html
View File

@ -478,17 +478,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-210">
<div class="code-preview__source-group" id="code-preview-source-group-201">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-684"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-684"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-664"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-685"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-665"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-685"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
</div>
</div>
@ -497,7 +497,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-210"
aria-controls="code-preview-source-group-201"
>
Source
<svg
@ -557,17 +557,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-211">
<div class="code-preview__source-group" id="code-preview-source-group-202">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-686"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-686"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-666"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-687"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-667"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-687"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
</div>
</div>
@ -576,7 +576,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-211"
aria-controls="code-preview-source-group-202"
>
Source
<svg
@ -632,17 +632,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-212">
<div class="code-preview__source-group" id="code-preview-source-group-203">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-688"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-688"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-668"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-689"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-669"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--height'</span><span class="token operator">:</span> <span class="token string">'6px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
</div>
</div>
@ -651,7 +651,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-212"
aria-controls="code-preview-source-group-203"
>
Source
<svg
@ -732,9 +732,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-213">
<div class="code-preview__source-group" id="code-preview-source-group-204">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-690"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar-values<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-670"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar-values<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
@ -758,11 +758,11 @@
progressBar<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-690"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-670"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-691"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-671"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
@ -793,7 +793,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-671"></sl-copy-button></pre>
</div>
</div>
@ -802,7 +802,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-213"
aria-controls="code-preview-source-group-204"
>
Source
<svg
@ -862,17 +862,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-214">
<div class="code-preview__source-group" id="code-preview-source-group-205">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-692"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-692"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-672"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-bar</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-bar</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-672"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-693"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-673"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-673"></sl-copy-button></pre>
</div>
</div>
@ -881,7 +881,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-214"
aria-controls="code-preview-source-group-205"
>
Source
<svg
@ -950,7 +950,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-694"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-694"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-674"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-674"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -965,17 +965,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-695"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-695"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-675"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-696"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-696"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-676"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-697"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-677"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

80
components/progress-ring/index.html
View File

@ -487,17 +487,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-220">
<div class="code-preview__source-group" id="code-preview-source-group-195">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-712"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-648"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-713"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-649"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
</div>
</div>
@ -506,7 +506,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-220"
aria-controls="code-preview-source-group-195"
>
Source
<svg
@ -563,17 +563,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-221">
<div class="code-preview__source-group" id="code-preview-source-group-196">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-714"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-650"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-715"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-651"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--size'</span><span class="token operator">:</span> <span class="token string">'200px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
</div>
</div>
@ -582,7 +582,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-221"
aria-controls="code-preview-source-group-196"
>
Source
<svg
@ -644,17 +644,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-222">
<div class="code-preview__source-group" id="code-preview-source-group-197">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-716"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--track-width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">--indicator-width</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-652"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--track-width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">--indicator-width</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-717"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-653"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--track-width'</span><span class="token operator">:</span> <span class="token string">'6px'</span><span class="token punctuation">,</span> <span class="token string-property property">'--indicator-width'</span><span class="token operator">:</span> <span class="token string">'12px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-717"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
</div>
</div>
@ -663,7 +663,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-222"
aria-controls="code-preview-source-group-197"
>
Source
<svg
@ -720,20 +720,20 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-223">
<div class="code-preview__source-group" id="code-preview-source-group-198">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-718"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span>
<pre><code class="language-html" id="code-block-654"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span>
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span>
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
--track-color: pink;
--indicator-color: deeppink;
<span class="token punctuation">"</span></span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-719"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-655"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span>
@ -744,7 +744,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-719"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
</div>
</div>
@ -753,7 +753,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-223"
aria-controls="code-preview-source-group-198"
>
Source
<svg
@ -810,17 +810,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-224">
<div class="code-preview__source-group" id="code-preview-source-group-199">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-720"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-656"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-721"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-657"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
</div>
</div>
@ -829,7 +829,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-224"
aria-controls="code-preview-source-group-199"
>
Source
<svg
@ -912,9 +912,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-225">
<div class="code-preview__source-group" id="code-preview-source-group-200">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-722"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-ring-values<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-658"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-ring-values<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
@ -938,11 +938,11 @@
progressRing<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-723"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-659"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
@ -975,7 +975,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
</div>
</div>
@ -984,7 +984,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-225"
aria-controls="code-preview-source-group-200"
>
Source
<svg
@ -1053,7 +1053,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-724"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-724"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-660"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1068,17 +1068,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-725"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-661"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-726"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-726"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-662"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-727"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-727"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-663"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

68
components/qr-code/index.html
View File

@ -526,9 +526,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-215">
<div class="code-preview__source-group" id="code-preview-source-group-221">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-698"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-714"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Scan this code to visit Nebula on the web!<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
@ -555,11 +555,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-699"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-715"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -589,7 +589,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-699"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
</div>
</div>
@ -598,7 +598,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-215"
aria-controls="code-preview-source-group-221"
>
Source
<svg
@ -658,17 +658,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-216">
<div class="code-preview__source-group" id="code-preview-source-group-222">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-700"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-716"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-701"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-717"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-701"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-717"></sl-copy-button></pre>
</div>
</div>
@ -677,7 +677,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-216"
aria-controls="code-preview-source-group-222"
>
Source
<svg
@ -731,17 +731,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-217">
<div class="code-preview__source-group" id="code-preview-source-group-223">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-702"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-718"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-703"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-719"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-719"></sl-copy-button></pre>
</div>
</div>
@ -750,7 +750,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-217"
aria-controls="code-preview-source-group-223"
>
Source
<svg
@ -804,17 +804,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-218">
<div class="code-preview__source-group" id="code-preview-source-group-224">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-704"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-720"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-705"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-721"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
</div>
</div>
@ -823,7 +823,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-218"
aria-controls="code-preview-source-group-224"
>
Source
<svg
@ -903,9 +903,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-219">
<div class="code-preview__source-group" id="code-preview-source-group-225">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-706"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-error-correction<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-722"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-error-correction<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>L<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Q<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
@ -919,11 +919,11 @@
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-707"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-723"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.qr-error-correction {
@ -947,7 +947,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-707"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
</div>
</div>
@ -956,7 +956,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-219"
aria-controls="code-preview-source-group-225"
>
Source
<svg
@ -1025,7 +1025,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-708"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-724"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-724"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1040,17 +1040,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-709"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-725"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-710"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-726"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-726"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-711"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-727"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-727"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

88
components/radio-group/index.html
View File

@ -495,18 +495,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-233">
<div class="code-preview__source-group" id="code-preview-source-group-236">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-746"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-758"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-746"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-758"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-747"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-759"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -516,7 +516,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-747"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-759"></sl-copy-button></pre>
</div>
</div>
@ -525,7 +525,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-233"
aria-controls="code-preview-source-group-236"
>
Source
<svg
@ -596,18 +596,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-234">
<div class="code-preview__source-group" id="code-preview-source-group-237">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-748"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Choose the most appropriate option.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-760"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Choose the most appropriate option.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-748"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-760"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-749"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-761"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -617,7 +617,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-749"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-761"></sl-copy-button></pre>
</div>
</div>
@ -626,7 +626,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-234"
aria-controls="code-preview-source-group-237"
>
Source
<svg
@ -695,18 +695,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-235">
<div class="code-preview__source-group" id="code-preview-source-group-238">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-750"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option that makes you proud.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-762"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option that makes you proud.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-750"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-762"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-751"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-763"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -716,7 +716,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-751"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-763"></sl-copy-button></pre>
</div>
</div>
@ -725,7 +725,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-235"
aria-controls="code-preview-source-group-238"
>
Source
<svg
@ -788,18 +788,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-236">
<div class="code-preview__source-group" id="code-preview-source-group-239">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-752"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-764"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-752"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-753"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-765"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -811,7 +811,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-753"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
</div>
</div>
@ -820,7 +820,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-236"
aria-controls="code-preview-source-group-239"
>
Source
<svg
@ -870,7 +870,7 @@
<a href="/components/radio-buttons">Radio Buttons</a> will be determined by the Radio Group’s
<code>size</code> attribute.
</p>
<pre><code class="language-html" id="code-block-754"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio-group-size<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-766"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio-group-size<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
@ -883,8 +883,8 @@
radioGroup<span class="token punctuation">.</span>size <span class="token operator">=</span> radioGroup<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-754"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-755"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-767"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
@ -907,7 +907,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-755"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
<div role="alert" class="callout callout--tip">
<p>
<a href="/components/radio">Radios</a> and <a href="/components/radio-button">Radio Buttons</a> also have
@ -952,9 +952,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-237">
<div class="code-preview__source-group" id="code-preview-source-group-240">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-756"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validation<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-768"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validation<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
@ -973,11 +973,11 @@
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-756"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-757"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-769"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
@ -1007,7 +1007,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-757"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
</div>
</div>
@ -1016,7 +1016,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-237"
aria-controls="code-preview-source-group-240"
>
Source
<svg
@ -1109,9 +1109,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-238">
<div class="code-preview__source-group" id="code-preview-source-group-241">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-758"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-770"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Not me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Me neither<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
@ -1143,11 +1143,11 @@
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-758"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-759"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-771"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
@ -1183,7 +1183,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-759"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-771"></sl-copy-button></pre>
</div>
</div>
@ -1192,7 +1192,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-238"
aria-controls="code-preview-source-group-241"
>
Source
<svg
@ -1261,7 +1261,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-760"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-760"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-772"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1276,17 +1276,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-761"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-761"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-773"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-773"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-762"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-762"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-774"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-763"><span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-763"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-775"><span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-775"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

52
components/radio/index.html
View File

@ -484,18 +484,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-239">
<div class="code-preview__source-group" id="code-preview-source-group-233">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-764"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-746"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-746"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-765"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-747"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -505,7 +505,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-747"></sl-copy-button></pre>
</div>
</div>
@ -514,7 +514,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-239"
aria-controls="code-preview-source-group-233"
>
Source
<svg
@ -587,18 +587,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-240">
<div class="code-preview__source-group" id="code-preview-source-group-234">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-766"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-748"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-748"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-767"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-749"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -608,7 +608,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-749"></sl-copy-button></pre>
</div>
</div>
@ -617,7 +617,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-240"
aria-controls="code-preview-source-group-234"
>
Source
<svg
@ -677,18 +677,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-241">
<div class="code-preview__source-group" id="code-preview-source-group-235">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-768"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-750"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-750"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-769"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-751"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -700,7 +700,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-751"></sl-copy-button></pre>
</div>
</div>
@ -709,7 +709,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-241"
aria-controls="code-preview-source-group-235"
>
Source
<svg
@ -756,7 +756,7 @@
Add the <code>size</code> attribute to the <a href="/components/radio-group">Radio Group</a> to change the
radios’ size.
</p>
<pre><code class="language-html" id="code-block-770"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-752"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
@ -777,8 +777,8 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-771"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-752"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-753"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -805,7 +805,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-771"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-753"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -834,7 +834,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-772"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-754"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-754"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -849,17 +849,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-773"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-773"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-755"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-755"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-774"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-756"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-756"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-775"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-775"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-757"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-757"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

128
components/rating/index.html
View File

@ -485,17 +485,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-252">
<div class="code-preview__source-group" id="code-preview-source-group-256">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-800"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-800"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-812"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-812"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-801"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-813"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-801"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-813"></sl-copy-button></pre>
</div>
</div>
@ -504,7 +504,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-252"
aria-controls="code-preview-source-group-256"
>
Source
<svg
@ -564,17 +564,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-253">
<div class="code-preview__source-group" id="code-preview-source-group-257">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-802"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-814"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-814"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-803"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-815"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-803"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-815"></sl-copy-button></pre>
</div>
</div>
@ -583,7 +583,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-253"
aria-controls="code-preview-source-group-257"
>
Source
<svg
@ -639,17 +639,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-254">
<div class="code-preview__source-group" id="code-preview-source-group-258">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-804"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-804"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-816"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-816"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-805"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-817"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-817"></sl-copy-button></pre>
</div>
</div>
@ -658,7 +658,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-254"
aria-controls="code-preview-source-group-258"
>
Source
<svg
@ -714,17 +714,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-255">
<div class="code-preview__source-group" id="code-preview-source-group-259">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-806"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-818"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-807"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-819"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0.5</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2.5</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-819"></sl-copy-button></pre>
</div>
</div>
@ -733,7 +733,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-255"
aria-controls="code-preview-source-group-259"
>
Source
<svg
@ -789,17 +789,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-256">
<div class="code-preview__source-group" id="code-preview-source-group-260">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-808"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-808"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-820"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-809"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-821"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--symbol-size'</span><span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-809"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-821"></sl-copy-button></pre>
</div>
</div>
@ -808,7 +808,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-256"
aria-controls="code-preview-source-group-260"
>
Source
<svg
@ -864,17 +864,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-257">
<div class="code-preview__source-group" id="code-preview-source-group-261">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-810"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-810"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-822"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-811"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-823"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-811"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-823"></sl-copy-button></pre>
</div>
</div>
@ -883,7 +883,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-257"
aria-controls="code-preview-source-group-261"
>
Source
<svg
@ -939,17 +939,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-258">
<div class="code-preview__source-group" id="code-preview-source-group-262">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-812"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-812"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-824"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-813"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-825"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-813"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-825"></sl-copy-button></pre>
</div>
</div>
@ -958,7 +958,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-258"
aria-controls="code-preview-source-group-262"
>
Source
<svg
@ -1060,9 +1060,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-259">
<div class="code-preview__source-group" id="code-preview-source-group-263">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-814"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detect-hover<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-826"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detect-hover<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1098,11 +1098,11 @@
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-814"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-815"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-827"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> terms <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'No rating'</span><span class="token punctuation">,</span> <span class="token string">'Terrible'</span><span class="token punctuation">,</span> <span class="token string">'Bad'</span><span class="token punctuation">,</span> <span class="token string">'OK'</span><span class="token punctuation">,</span> <span class="token string">'Good'</span><span class="token punctuation">,</span> <span class="token string">'Excellent'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
@ -1147,7 +1147,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-815"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-827"></sl-copy-button></pre>
</div>
</div>
@ -1156,7 +1156,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-259"
aria-controls="code-preview-source-group-263"
>
Source
<svg
@ -1219,19 +1219,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-260">
<div class="code-preview__source-group" id="code-preview-source-group-264">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-816"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-hearts<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-color-active</span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-828"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-hearts<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-color-active</span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> rating <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.rating-hearts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
rating<span class="token punctuation">.</span><span class="token function-variable function">getSymbol</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">'&lt;sl-icon name="heart-fill"&gt;&lt;/sl-icon&gt;'</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-816"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-817"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-829"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span>
@ -1240,7 +1240,7 @@
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--symbol-color-active'</span><span class="token operator">:</span> <span class="token string">'#ff4136'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-817"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
</div>
</div>
@ -1249,7 +1249,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-260"
aria-controls="code-preview-source-group-264"
>
Source
<svg
@ -1322,9 +1322,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-261">
<div class="code-preview__source-group" id="code-preview-source-group-265">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-818"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-emojis<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-830"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-emojis<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-rating</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> rating <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.rating-emojis'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1334,11 +1334,11 @@
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;sl-icon name="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>icons<span class="token punctuation">[</span>value <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"&gt;&lt;/sl-icon&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-819"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-831"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">getSymbol</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'emoji-angry'</span><span class="token punctuation">,</span> <span class="token string">'emoji-frown'</span><span class="token punctuation">,</span> <span class="token string">'emoji-expressionless'</span><span class="token punctuation">,</span> <span class="token string">'emoji-smile'</span><span class="token punctuation">,</span> <span class="token string">'emoji-laughing'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
@ -1346,7 +1346,7 @@
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">getSymbol</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>getSymbol<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-819"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
</div>
</div>
@ -1355,7 +1355,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-261"
aria-controls="code-preview-source-group-265"
>
Source
<svg
@ -1424,7 +1424,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-820"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-832"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1439,17 +1439,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-821"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-821"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-833"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-822"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-834"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-823"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-823"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-835"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-835"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/relative-time/index.html
View File

@ -486,18 +486,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-263">
<div class="code-preview__source-group" id="code-preview-source-group-252">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-830"><span class="token comment">&lt;!-- Nebula 2 release date 🎉 --&gt;</span>
<pre><code class="language-html" id="code-block-800"><span class="token comment">&lt;!-- Nebula 2 release date 🎉 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-800"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-831"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-801"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-801"></sl-copy-button></pre>
</div>
</div>
@ -506,7 +506,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-263"
aria-controls="code-preview-source-group-252"
>
Source
<svg
@ -609,9 +609,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-264">
<div class="code-preview__source-group" id="code-preview-source-group-253">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-832"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative-time-sync<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-802"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative-time-sync<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">sync</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -621,16 +621,16 @@
relativeTime<span class="token punctuation">.</span>date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-833"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-803"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>date<span class="token punctuation">}</span></span> <span class="token attr-name">sync</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-803"></sl-copy-button></pre>
</div>
</div>
@ -639,7 +639,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-264"
aria-controls="code-preview-source-group-253"
>
Source
<svg
@ -700,16 +700,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-265">
<div class="code-preview__source-group" id="code-preview-source-group-254">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-834"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>narrow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-804"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>narrow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>short<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-804"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-835"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-805"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -720,7 +720,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-835"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
</div>
</div>
@ -729,7 +729,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-265"
aria-controls="code-preview-source-group-254"
>
Source
<svg
@ -789,18 +789,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-266">
<div class="code-preview__source-group" id="code-preview-source-group-255">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-836">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<pre><code class="language-html" id="code-block-806">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Chinese: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
German: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Greek: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-837"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-807"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -815,7 +815,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-837"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
</div>
</div>
@ -824,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-266"
aria-controls="code-preview-source-group-255"
>
Source
<svg
@ -893,7 +893,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-838"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-808"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-808"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -908,17 +908,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-839"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-839"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-809"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-809"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-840"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-810"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-810"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-841"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-811"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-811"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

20
components/resize-observer/index.html
View File

@ -527,9 +527,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-262">
<div class="code-preview__source-group" id="code-preview-source-group-266">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-824"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resize-observer-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-836"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resize-observer-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-resize-observer</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Resize this box and watch the console 👉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-resize-observer</span><span class="token punctuation">&gt;</span></span>
@ -554,11 +554,11 @@
<span class="token property">padding</span><span class="token punctuation">:</span> 4rem 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-825"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-837"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.resize-observer-overview div {
@ -582,7 +582,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-825"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-837"></sl-copy-button></pre>
</div>
</div>
@ -591,7 +591,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-262"
aria-controls="code-preview-source-group-266"
>
Source
<svg
@ -660,7 +660,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-826"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-838"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -675,17 +675,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-827"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-827"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-839"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-839"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-828"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-840"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-829"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-841"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

184
components/select/index.html
View File

@ -497,9 +497,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-277">
<div class="code-preview__source-group" id="code-preview-source-group-267">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-870"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-842"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -507,11 +507,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-871"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-843"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -524,7 +524,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-871"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
</div>
</div>
@ -533,7 +533,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-277"
aria-controls="code-preview-source-group-267"
>
Source
<svg
@ -604,18 +604,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-278">
<div class="code-preview__source-group" id="code-preview-source-group-268">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-872"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-844"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-872"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-873"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-845"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -625,7 +625,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-873"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
</div>
</div>
@ -634,7 +634,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-278"
aria-controls="code-preview-source-group-268"
>
Source
<svg
@ -697,18 +697,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-279">
<div class="code-preview__source-group" id="code-preview-source-group-269">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-874"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Experience<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us your skill level.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-846"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Experience<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us your skill level.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Novice<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Intermediate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-874"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-875"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-847"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -718,7 +718,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Advanced</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-847"></sl-copy-button></pre>
</div>
</div>
@ -727,7 +727,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-279"
aria-controls="code-preview-source-group-269"
>
Source
<svg
@ -787,18 +787,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-280">
<div class="code-preview__source-group" id="code-preview-source-group-270">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-876"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-848"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-876"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-848"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-877"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-849"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -808,7 +808,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-877"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-849"></sl-copy-button></pre>
</div>
</div>
@ -817,7 +817,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-280"
aria-controls="code-preview-source-group-270"
>
Source
<svg
@ -880,18 +880,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-281">
<div class="code-preview__source-group" id="code-preview-source-group-271">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-878"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">clearable</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-850"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">clearable</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-850"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-879"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-851"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -901,7 +901,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
</div>
</div>
@ -910,7 +910,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-281"
aria-controls="code-preview-source-group-271"
>
Source
<svg
@ -970,18 +970,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-282">
<div class="code-preview__source-group" id="code-preview-source-group-272">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-880"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-852"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-881"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-853"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -991,7 +991,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
</div>
</div>
@ -1000,7 +1000,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-282"
aria-controls="code-preview-source-group-272"
>
Source
<svg
@ -1058,18 +1058,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-283">
<div class="code-preview__source-group" id="code-preview-source-group-273">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-882"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-854"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-883"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-855"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1079,7 +1079,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-883"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
</div>
</div>
@ -1088,7 +1088,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-283"
aria-controls="code-preview-source-group-273"
>
Source
<svg
@ -1148,18 +1148,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-284">
<div class="code-preview__source-group" id="code-preview-source-group-274">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-884"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-856"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-884"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-885"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-857"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1169,7 +1169,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-885"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
</div>
</div>
@ -1178,7 +1178,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-284"
aria-controls="code-preview-source-group-274"
>
Source
<svg
@ -1245,9 +1245,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-285">
<div class="code-preview__source-group" id="code-preview-source-group-275">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-886"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a Few<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2 option-3<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-858"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a Few<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2 option-3<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1255,11 +1255,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-886"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-887"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-859"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1272,7 +1272,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-887"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
</div>
</div>
@ -1281,7 +1281,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-285"
aria-controls="code-preview-source-group-275"
>
Source
<svg
@ -1357,19 +1357,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-286">
<div class="code-preview__source-group" id="code-preview-source-group-276">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-888"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-860"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-888"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-889"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-861"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
@ -1380,7 +1380,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-889"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
</div>
</div>
@ -1389,7 +1389,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-286"
aria-controls="code-preview-source-group-276"
>
Source
<svg
@ -1458,9 +1458,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-287">
<div class="code-preview__source-group" id="code-preview-source-group-277">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-890"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-862"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>Section 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1471,11 +1471,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-891"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-863"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1488,7 +1488,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-863"></sl-copy-button></pre>
</div>
</div>
@ -1497,7 +1497,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-287"
aria-controls="code-preview-source-group-277"
>
Source
<svg
@ -1574,9 +1574,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-288">
<div class="code-preview__source-group" id="code-preview-source-group-278">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-892"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-864"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1597,11 +1597,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-864"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-893"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-865"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1629,7 +1629,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-865"></sl-copy-button></pre>
</div>
</div>
@ -1638,7 +1638,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-288"
aria-controls="code-preview-source-group-278"
>
Source
<svg
@ -1702,18 +1702,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-289">
<div class="code-preview__source-group" id="code-preview-source-group-279">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-894"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-866"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-866"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-895"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-867"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1723,7 +1723,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
);
</span></code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
</span></code><sl-copy-button class="copy-code-button" from="code-block-867"></sl-copy-button></pre>
</div>
</div>
@ -1732,7 +1732,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-289"
aria-controls="code-preview-source-group-279"
>
Source
<svg
@ -1807,9 +1807,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-290">
<div class="code-preview__source-group" id="code-preview-source-group-280">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-896"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-868"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1829,11 +1829,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-897"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-869"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
@ -1861,7 +1861,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-869"></sl-copy-button></pre>
</div>
</div>
@ -1870,7 +1870,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-290"
aria-controls="code-preview-source-group-280"
>
Source
<svg
@ -1988,9 +1988,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-291">
<div class="code-preview__source-group" id="code-preview-source-group-281">
<div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-898"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span>
<pre><code class="language-html" id="code-block-870"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span>
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email phone<span class="token punctuation">"</span></span>
<span class="token attr-name">multiple</span>
@ -2027,7 +2027,7 @@
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
</div>
</div>
@ -2036,7 +2036,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-291"
aria-controls="code-preview-source-group-281"
>
Source
<svg
@ -2104,7 +2104,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-899"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-871"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-871"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -2119,17 +2119,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-900"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-900"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-872"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-872"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-901"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-901"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-873"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-873"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-902"><span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-902"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-874"><span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-874"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

80
components/skeleton/index.html
View File

@ -538,9 +538,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-267">
<div class="code-preview__source-group" id="code-preview-source-group-282">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-842"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-875"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -583,11 +583,11 @@
<span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-843"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-876"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-overview header {
@ -638,7 +638,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-876"></sl-copy-button></pre>
</div>
</div>
@ -647,7 +647,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-267"
aria-controls="code-preview-source-group-282"
>
Source
<svg
@ -729,9 +729,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-268">
<div class="code-preview__source-group" id="code-preview-source-group-283">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-844"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-effects<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-877"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-effects<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
None
@ -751,11 +751,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-877"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-845"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-878"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-effects {
@ -781,7 +781,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
</div>
</div>
@ -790,7 +790,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-268"
aria-controls="code-preview-source-group-283"
>
Source
<svg
@ -870,9 +870,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-269">
<div class="code-preview__source-group" id="code-preview-source-group-284">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-846"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-paragraphs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-879"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-paragraphs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -897,11 +897,11 @@
<span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-847"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-880"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-paragraphs sl-skeleton {
@ -934,7 +934,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-847"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
</div>
</div>
@ -943,7 +943,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-269"
aria-controls="code-preview-source-group-284"
>
Source
<svg
@ -1020,9 +1020,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-270">
<div class="code-preview__source-group" id="code-preview-source-group-285">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-848"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-avatars<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-881"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-avatars<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -1044,11 +1044,11 @@
<span class="token property">--border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-848"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-849"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-882"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-avatars sl-skeleton {
@ -1078,7 +1078,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-849"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
</div>
</div>
@ -1087,7 +1087,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-270"
aria-controls="code-preview-source-group-285"
>
Source
<svg
@ -1204,9 +1204,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-271">
<div class="code-preview__source-group" id="code-preview-source-group-286">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-850"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-shapes<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-883"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-shapes<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>square<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triangle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -1261,11 +1261,11 @@
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-850"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-883"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-851"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-884"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-shapes sl-skeleton {
@ -1315,7 +1315,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-884"></sl-copy-button></pre>
</div>
</div>
@ -1324,7 +1324,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-271"
aria-controls="code-preview-source-group-286"
>
Source
<svg
@ -1383,14 +1383,14 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-272">
<div class="code-preview__source-group" id="code-preview-source-group-287">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-852"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span> <span class="token property">--sheen-color</span><span class="token punctuation">:</span> #ffb094<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-885"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span> <span class="token property">--sheen-color</span><span class="token punctuation">:</span> #ffb094<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-885"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-853"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-886"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.skeleton-avatars sl-skeleton {
@ -1410,7 +1410,7 @@
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSkeleton</span></span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--color'</span><span class="token operator">:</span> <span class="token string">'tomato'</span><span class="token punctuation">,</span> <span class="token string-property property">'--sheen-color'</span><span class="token operator">:</span> <span class="token string">'#ffb094'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-886"></sl-copy-button></pre>
</div>
</div>
@ -1419,7 +1419,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-272"
aria-controls="code-preview-source-group-287"
>
Source
<svg
@ -1488,7 +1488,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-854"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-887"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-887"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1503,17 +1503,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-855"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-888"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-888"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-856"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-889"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-889"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-857"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-890"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/spinner/index.html
View File

@ -475,17 +475,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-273">
<div class="code-preview__source-group" id="code-preview-source-group-288">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-858"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-891"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-859"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-892"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
</div>
</div>
@ -494,7 +494,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-273"
aria-controls="code-preview-source-group-288"
>
Source
<svg
@ -556,16 +556,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-274">
<div class="code-preview__source-group" id="code-preview-source-group-289">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-860"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-893"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-861"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-894"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -574,7 +574,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'3rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
</div>
</div>
@ -583,7 +583,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-274"
aria-controls="code-preview-source-group-289"
>
Source
<svg
@ -641,14 +641,14 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-275">
<div class="code-preview__source-group" id="code-preview-source-group-290">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-862"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">--track-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-895"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">--track-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-863"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-896"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span>
@ -658,7 +658,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-863"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
</div>
</div>
@ -667,7 +667,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-275"
aria-controls="code-preview-source-group-290"
>
Source
<svg
@ -724,14 +724,14 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-276">
<div class="code-preview__source-group" id="code-preview-source-group-291">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-864"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">--indicator-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token property">--track-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-864"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-897"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">--indicator-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token property">--track-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-spinner</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-865"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-898"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span>
@ -742,7 +742,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-865"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
</div>
</div>
@ -751,7 +751,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-276"
aria-controls="code-preview-source-group-291"
>
Source
<svg
@ -820,7 +820,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-866"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-866"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-899"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -835,17 +835,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-867"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-867"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-900"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-900"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-868"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-901"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-901"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-869"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-869"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-902"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-902"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/switch/index.html
View File

@ -483,15 +483,15 @@
<div class="code-preview__source-group" id="code-preview-source-group-311">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-952"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span><span class="token punctuation">&gt;</span></span>Switch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-956"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span><span class="token punctuation">&gt;</span></span>Switch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-956"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-953"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-957"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Switch</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
</div>
</div>
@ -568,15 +568,15 @@
<div class="code-preview__source-group" id="code-preview-source-group-312">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-954"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-954"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-958"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-958"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-955"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-959"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Checked</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-955"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-959"></sl-copy-button></pre>
</div>
</div>
@ -643,15 +643,15 @@
<div class="code-preview__source-group" id="code-preview-source-group-313">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-956"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-956"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-960"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-960"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-957"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-961"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-961"></sl-copy-button></pre>
</div>
</div>
@ -720,16 +720,16 @@
<div class="code-preview__source-group" id="code-preview-source-group-314">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-958"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-962"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-958"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-962"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-959"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-963"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -740,7 +740,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-959"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-963"></sl-copy-button></pre>
</div>
</div>
@ -810,15 +810,15 @@
<div class="code-preview__source-group" id="code-preview-source-group-315">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-960"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-960"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-964"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-964"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-961"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-965"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Label</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-961"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-965"></sl-copy-button></pre>
</div>
</div>
@ -885,12 +885,12 @@
<div class="code-preview__source-group" id="code-preview-source-group-316">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-962"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">--thumb-size</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Really big<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-962"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-966"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">--thumb-size</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Really big<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-966"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-963"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-967"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span>
@ -901,7 +901,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-963"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-967"></sl-copy-button></pre>
</div>
</div>
@ -979,7 +979,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-964"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-964"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-968"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -994,17 +994,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-965"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-965"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-969"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-966"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-966"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-970"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-967"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-967"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-971"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

92
components/tab-group/index.html
View File

@ -504,9 +504,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-303">
<div class="code-preview__source-group" id="code-preview-source-group-304">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-928"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-934"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -517,11 +517,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-929"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-935"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -546,7 +546,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-929"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
</div>
</div>
@ -555,7 +555,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-303"
aria-controls="code-preview-source-group-304"
>
Source
<svg
@ -624,9 +624,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-304">
<div class="code-preview__source-group" id="code-preview-source-group-305">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-930"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-936"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -637,11 +637,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-930"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-931"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-937"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -666,7 +666,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-931"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-937"></sl-copy-button></pre>
</div>
</div>
@ -675,7 +675,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-304"
aria-controls="code-preview-source-group-305"
>
Source
<svg
@ -741,9 +741,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-305">
<div class="code-preview__source-group" id="code-preview-source-group-306">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-932"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-938"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -754,11 +754,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-933"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-939"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -783,7 +783,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-933"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
</div>
</div>
@ -792,7 +792,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-305"
aria-controls="code-preview-source-group-306"
>
Source
<svg
@ -858,9 +858,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-306">
<div class="code-preview__source-group" id="code-preview-source-group-307">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-934"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-940"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -871,11 +871,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-940"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-935"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-941"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -900,7 +900,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-941"></sl-copy-button></pre>
</div>
</div>
@ -909,7 +909,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-306"
aria-controls="code-preview-source-group-307"
>
Source
<svg
@ -998,9 +998,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-307">
<div class="code-preview__source-group" id="code-preview-source-group-308">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-936"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-closable<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-942"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-closable<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closable-1<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>Closable 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closable-2<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>Closable 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -1029,11 +1029,11 @@
panel<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-942"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-937"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-943"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -1074,7 +1074,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-937"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-943"></sl-copy-button></pre>
</div>
</div>
@ -1083,7 +1083,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-307"
aria-controls="code-preview-source-group-308"
>
Source
<svg
@ -1181,9 +1181,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-308">
<div class="code-preview__source-group" id="code-preview-source-group-309">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-938"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-944"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Tab 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Tab 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Tab 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -1226,11 +1226,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-19<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Tab panel 19<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-20<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Tab panel 20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-944"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-939"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-945"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -1319,7 +1319,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-20<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Tab panel 20</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-945"></sl-copy-button></pre>
</div>
</div>
@ -1328,7 +1328,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-308"
aria-controls="code-preview-source-group-309"
>
Source
<svg
@ -1399,9 +1399,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-309">
<div class="code-preview__source-group" id="code-preview-source-group-310">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-940"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">activation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-946"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span> <span class="token attr-name">activation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -1412,11 +1412,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-940"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-946"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-941"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-947"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -1441,7 +1441,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-941"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-947"></sl-copy-button></pre>
</div>
</div>
@ -1450,7 +1450,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-309"
aria-controls="code-preview-source-group-310"
>
Source
<svg
@ -1519,7 +1519,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-942"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-942"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-948"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-948"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1534,17 +1534,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-943"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-943"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-949"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-949"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-944"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-944"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-950"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-950"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-945"><span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-945"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-951"><span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-951"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

20
components/tab-panel/index.html
View File

@ -485,9 +485,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-310">
<div class="code-preview__source-group" id="code-preview-source-group-303">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-946"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-928"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab</span><span class="token punctuation">&gt;</span></span>
@ -498,11 +498,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-panel</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tab-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-946"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-947"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-929"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
@ -527,7 +527,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-947"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-929"></sl-copy-button></pre>
</div>
</div>
@ -536,7 +536,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-310"
aria-controls="code-preview-source-group-303"
>
Source
<svg
@ -609,7 +609,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-948"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-948"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-930"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-930"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -624,17 +624,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-949"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-949"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-931"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-931"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-950"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-950"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-932"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-951"><span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-951"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-933"><span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-933"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

8
components/tab/index.html
View File

@ -499,7 +499,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-968"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-952"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -514,17 +514,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-969"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-953"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-970"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-954"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-954"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-971"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-955"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-955"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/tag/index.html
View File

@ -482,18 +482,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-335">
<div class="code-preview__source-group" id="code-preview-source-group-317">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1017"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-972"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1018"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-973"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -504,7 +504,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1018"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
</div>
</div>
@ -513,7 +513,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-335"
aria-controls="code-preview-source-group-317"
>
Source
<svg
@ -572,16 +572,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-336">
<div class="code-preview__source-group" id="code-preview-source-group-318">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1019"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-974"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1020"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-975"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -590,7 +590,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
</div>
</div>
@ -599,7 +599,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-336"
aria-controls="code-preview-source-group-318"
>
Source
<svg
@ -655,16 +655,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-337">
<div class="code-preview__source-group" id="code-preview-source-group-319">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1021"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-976"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-976"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1022"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-977"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -679,7 +679,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-977"></sl-copy-button></pre>
</div>
</div>
@ -688,7 +688,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-337"
aria-controls="code-preview-source-group-319"
>
Source
<svg
@ -766,9 +766,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-338">
<div class="code-preview__source-group" id="code-preview-source-group-320">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1023"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tags-removable<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-978"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tags-removable<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
@ -789,11 +789,11 @@
<span class="token property">transition</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-transition-medium<span class="token punctuation">)</span> opacity<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-978"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1024"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-979"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.tags-removable sl-tag {
@ -828,7 +828,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
</div>
</div>
@ -837,7 +837,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-338"
aria-controls="code-preview-source-group-320"
>
Source
<svg
@ -906,7 +906,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-1025"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-980"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-980"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -921,17 +921,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-1026"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-981"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-981"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1027"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-982"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-982"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1028"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-983"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-983"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

128
components/textarea/index.html
View File

@ -484,17 +484,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-317">
<div class="code-preview__source-group" id="code-preview-source-group-321">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-972"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-984"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-984"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-973"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-985"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-985"></sl-copy-button></pre>
</div>
</div>
@ -503,7 +503,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-317"
aria-controls="code-preview-source-group-321"
>
Source
<svg
@ -570,17 +570,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-318">
<div class="code-preview__source-group" id="code-preview-source-group-322">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-974"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-986"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-986"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-975"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-987"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-987"></sl-copy-button></pre>
</div>
</div>
@ -589,7 +589,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-318"
aria-controls="code-preview-source-group-322"
>
Source
<svg
@ -648,17 +648,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-319">
<div class="code-preview__source-group" id="code-preview-source-group-323">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-976"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-976"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-988"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-988"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-977"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-989"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-977"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-989"></sl-copy-button></pre>
</div>
</div>
@ -667,7 +667,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-319"
aria-controls="code-preview-source-group-323"
>
Source
<svg
@ -721,17 +721,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-320">
<div class="code-preview__source-group" id="code-preview-source-group-324">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-978"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-978"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-990"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-990"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-979"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-991"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">rows</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-991"></sl-copy-button></pre>
</div>
</div>
@ -740,7 +740,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-320"
aria-controls="code-preview-source-group-324"
>
Source
<svg
@ -796,17 +796,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-321">
<div class="code-preview__source-group" id="code-preview-source-group-325">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-980"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-980"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-992"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-992"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-981"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-993"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-981"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-993"></sl-copy-button></pre>
</div>
</div>
@ -815,7 +815,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-321"
aria-controls="code-preview-source-group-325"
>
Source
<svg
@ -871,17 +871,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-322">
<div class="code-preview__source-group" id="code-preview-source-group-326">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-982"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-982"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-994"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-994"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-983"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-995"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-983"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-995"></sl-copy-button></pre>
</div>
</div>
@ -890,7 +890,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-322"
aria-controls="code-preview-source-group-326"
>
Source
<svg
@ -946,17 +946,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-323">
<div class="code-preview__source-group" id="code-preview-source-group-327">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-984"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-984"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-996"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-996"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-985"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-997"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-985"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-997"></sl-copy-button></pre>
</div>
</div>
@ -965,7 +965,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-323"
aria-controls="code-preview-source-group-327"
>
Source
<svg
@ -1023,18 +1023,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-324">
<div class="code-preview__source-group" id="code-preview-source-group-328">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-986"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-998"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-986"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-998"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-987"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-999"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1045,7 +1045,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTextarea</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-987"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-999"></sl-copy-button></pre>
</div>
</div>
@ -1054,7 +1054,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-324"
aria-controls="code-preview-source-group-328"
>
Source
<svg
@ -1113,17 +1113,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-325">
<div class="code-preview__source-group" id="code-preview-source-group-329">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-988"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-988"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1000"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1000"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-989"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1001"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-989"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1001"></sl-copy-button></pre>
</div>
</div>
@ -1132,7 +1132,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-325"
aria-controls="code-preview-source-group-329"
>
Source
<svg
@ -1191,17 +1191,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-326">
<div class="code-preview__source-group" id="code-preview-source-group-330">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-990"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-990"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1002"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-textarea</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1002"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-991"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1003"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-991"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1003"></sl-copy-button></pre>
</div>
</div>
@ -1210,7 +1210,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-326"
aria-controls="code-preview-source-group-330"
>
Source
<svg
@ -1279,7 +1279,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-992"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-992"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1004"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1004"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1294,17 +1294,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-993"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-993"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1005"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1005"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-994"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-994"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1006"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1006"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-995"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-995"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1007"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1007"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

108
components/tooltip/index.html
View File

@ -496,16 +496,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-327">
<div class="code-preview__source-group" id="code-preview-source-group-331">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-996"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1008"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Hover Me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-996"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-997"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1009"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -513,7 +513,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-997"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
</div>
</div>
@ -522,7 +522,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-327"
aria-controls="code-preview-source-group-331"
>
Source
<svg
@ -670,9 +670,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-328">
<div class="code-preview__source-group" id="code-preview-source-group-332">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-998"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1010"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -762,11 +762,11 @@
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>40px * 3<span class="token punctuation">)</span> + <span class="token punctuation">(</span>0.25rem * 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-998"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-999"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1011"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -864,7 +864,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-999"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
</div>
</div>
@ -873,7 +873,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-328"
aria-controls="code-preview-source-group-332"
>
Source
<svg
@ -934,16 +934,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-329">
<div class="code-preview__source-group" id="code-preview-source-group-333">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1000"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1012"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Click to Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1000"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1001"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1013"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -951,7 +951,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Click to Toggle</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1001"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
</div>
</div>
@ -960,7 +960,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-329"
aria-controls="code-preview-source-group-333"
>
Source
<svg
@ -1032,9 +1032,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-330">
<div class="code-preview__source-group" id="code-preview-source-group-334">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1002"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Toggle Manually<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1014"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>Toggle Manually<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is an avatar<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual-tooltip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-avatar</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-avatar</span><span class="token punctuation">&gt;</span></span>
@ -1046,11 +1046,11 @@
toggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>tooltip<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>tooltip<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1002"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1003"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1015"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlAvatar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/avatar'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
@ -1070,7 +1070,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1003"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
</div>
</div>
@ -1079,7 +1079,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-330"
aria-controls="code-preview-source-group-334"
>
Source
<svg
@ -1140,16 +1140,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-331">
<div class="code-preview__source-group" id="code-preview-source-group-335">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1004"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1016"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>No Arrow<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1004"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1005"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1017"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1163,7 +1163,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1005"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
</div>
</div>
@ -1172,7 +1172,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-331"
aria-controls="code-preview-source-group-335"
>
Source
<svg
@ -1217,10 +1217,10 @@
<p>
To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
</p>
<pre><code class="language-css" id="code-block-1006"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<pre><code class="language-css" id="code-block-1018"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1006"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1018"></sl-copy-button></pre>
<h3 id="html-in-tooltips" class="anchor-heading">
HTML in Tooltips<a href="#html-in-tooltips" aria-label='Direct link to "HTML in Tooltips"'></a>
</h3>
@ -1243,18 +1243,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-332">
<div class="code-preview__source-group" id="code-preview-source-group-336">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1007"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1019"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>I'm not <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>just<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span> a tooltip, I'm a <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">&gt;</span></span>tooltip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">&gt;</span></span> with HTML!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1007"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1008"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1020"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1266,7 +1266,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
</div>
</div>
@ -1275,7 +1275,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-332"
aria-controls="code-preview-source-group-336"
>
Source
<svg
@ -1339,16 +1339,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-333">
<div class="code-preview__source-group" id="code-preview-source-group-337">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1009"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--max-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1021"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--max-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1010"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1022"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1356,7 +1356,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
</div>
</div>
@ -1365,7 +1365,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-333"
aria-controls="code-preview-source-group-337"
>
Source
<svg
@ -1458,9 +1458,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-334">
<div class="code-preview__source-group" id="code-preview-source-group-338">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1011"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1023"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>No Hoist<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
@ -1478,11 +1478,11 @@
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1012"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1024"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -1509,7 +1509,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
</div>
</div>
@ -1518,7 +1518,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-334"
aria-controls="code-preview-source-group-338"
>
Source
<svg
@ -1587,7 +1587,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-1013"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1025"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1602,17 +1602,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-1014"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1026"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1015"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1027"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1016"><span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1028"><span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

56
components/tree-item/index.html
View File

@ -490,9 +490,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-339">
<div class="code-preview__source-group" id="code-preview-source-group-345">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1029"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1045"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -502,11 +502,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1030"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1046"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -521,7 +521,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
</div>
</div>
@ -530,7 +530,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-339"
aria-controls="code-preview-source-group-345"
>
Source
<svg
@ -603,9 +603,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-340">
<div class="code-preview__source-group" id="code-preview-source-group-346">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1031"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1047"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -620,11 +620,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1032"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1048"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -644,7 +644,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
</div>
</div>
@ -653,7 +653,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-340"
aria-controls="code-preview-source-group-346"
>
Source
<svg
@ -718,9 +718,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-341">
<div class="code-preview__source-group" id="code-preview-source-group-347">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1033"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1049"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">selected</span><span class="token punctuation">&gt;</span></span>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -730,11 +730,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1034"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1050"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -749,7 +749,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
</div>
</div>
@ -758,7 +758,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-341"
aria-controls="code-preview-source-group-347"
>
Source
<svg
@ -828,9 +828,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-342">
<div class="code-preview__source-group" id="code-preview-source-group-348">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1035"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1051"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
@ -845,11 +845,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1036"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1052"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -869,7 +869,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
</div>
</div>
@ -878,7 +878,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-342"
aria-controls="code-preview-source-group-348"
>
Source
<svg
@ -947,7 +947,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-1037"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1053"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1053"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -962,17 +962,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-1038"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1038"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1054"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1054"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1039"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1039"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1055"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1055"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1040"><span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1040"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1056"><span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1056"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

80
components/tree/index.html
View File

@ -517,9 +517,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-343">
<div class="code-preview__source-group" id="code-preview-source-group-339">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1041"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1029"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
Deciduous
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -546,11 +546,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Fern<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1042"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1030"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -582,7 +582,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
</div>
</div>
@ -591,7 +591,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-343"
aria-controls="code-preview-source-group-339"
>
Source
<svg
@ -689,9 +689,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-344">
<div class="code-preview__source-group" id="code-preview-source-group-340">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1043"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selection-mode<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Selection<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1031"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selection-mode<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Selection<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Single<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Multiple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Leaf<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -724,11 +724,11 @@
tree<span class="token punctuation">.</span>selection <span class="token operator">=</span> selectionMode<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1044"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1032"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -762,7 +762,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
</div>
</div>
@ -771,7 +771,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-344"
aria-controls="code-preview-source-group-340"
>
Source
<svg
@ -863,9 +863,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-345">
<div class="code-preview__source-group" id="code-preview-source-group-341">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1045"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-lines<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1033"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-lines<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
Deciduous
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -898,11 +898,11 @@
<span class="token property">--indent-guide-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1046"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1034"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -934,7 +934,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
</div>
</div>
@ -943,7 +943,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-345"
aria-controls="code-preview-source-group-341"
>
Source
<svg
@ -1030,9 +1030,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-346">
<div class="code-preview__source-group" id="code-preview-source-group-342">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1047"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1035"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">lazy</span><span class="token punctuation">&gt;</span></span>Available Trees<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
@ -1055,11 +1055,11 @@
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1048"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1036"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -1087,7 +1087,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
</div>
</div>
@ -1096,7 +1096,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-346"
aria-controls="code-preview-source-group-342"
>
Source
<svg
@ -1195,9 +1195,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-347">
<div class="code-preview__source-group" id="code-preview-source-group-343">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1049"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1037"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>expand-icon<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dash-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collapse-icon<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
@ -1234,11 +1234,11 @@
<span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1050"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1038"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1273,7 +1273,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1038"></sl-copy-button></pre>
</div>
</div>
@ -1282,7 +1282,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-347"
aria-controls="code-preview-source-group-343"
>
Source
<svg
@ -1377,9 +1377,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-348">
<div class="code-preview__source-group" id="code-preview-source-group-344">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1051"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-icons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<pre><code class="language-html" id="code-block-1039"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-icons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Documents
@ -1419,11 +1419,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1039"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1052"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-1040"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
@ -1467,7 +1467,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1040"></sl-copy-button></pre>
</div>
</div>
@ -1476,7 +1476,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-348"
aria-controls="code-preview-source-group-344"
>
Source
<svg
@ -1545,7 +1545,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-1053"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1053"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-1041"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="import">
@ -1560,17 +1560,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-1054"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1054"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1042"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1055"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1055"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1043"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1056"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1056"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-1044"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
</sl-tab-panel>
</sl-tab-group>

2
dist/chunks/chunk.FAGJVQML.js → dist/chunks/chunk.6FY4P7QM.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAlert
} from "./chunk.EA27M3TE.js";
} from "./chunk.WF5XVJPW.js";
// src/react/alert/index.ts
import * as React from "react";

2
dist/chunks/chunk.SSHR2JDI.js → dist/chunks/chunk.6PGWJ74B.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAnimation
} from "./chunk.ZPH3EXSL.js";
} from "./chunk.UYEAPXNR.js";
// src/components/animation/animation.ts
var animation_default = SlAnimation;

2
dist/chunks/chunk.JFXHKZRL.js → dist/chunks/chunk.DVKVYUVC.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAnimatedImage
} from "./chunk.THDZPG3S.js";
} from "./chunk.FKYLS2FH.js";
// src/react/animated-image/index.ts
import * as React from "react";

6
dist/chunks/chunk.THDZPG3S.js → dist/chunks/chunk.FKYLS2FH.js vendored
View File

@ -1,6 +1,9 @@
import {
SlIcon
} from "./chunk.QQHXFE7X.js";
import {
animated_image_styles_default
} from "./chunk.WIDVIH73.js";
import {
watch
} from "./chunk.FA5RT4K4.js";
@ -13,9 +16,6 @@ import {
n,
r
} from "./chunk.URGPTPT3.js";
import {
animated_image_styles_default
} from "./chunk.WIDVIH73.js";
import {
x
} from "./chunk.CXZZ2LVK.js";

2
dist/chunks/chunk.P63VQA7M.js → dist/chunks/chunk.GQVYY2ON.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAnimation
} from "./chunk.ZPH3EXSL.js";
} from "./chunk.UYEAPXNR.js";
// src/react/animation/index.ts
import * as React from "react";

2
dist/chunks/chunk.TQRRFFWX.js → dist/chunks/chunk.RALGEJU5.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAnimatedImage
} from "./chunk.THDZPG3S.js";
} from "./chunk.FKYLS2FH.js";
// src/components/animated-image/animated-image.ts
var animated_image_default = SlAnimatedImage;

2
dist/chunks/chunk.ZDSL2GV6.js → dist/chunks/chunk.T7XEDVND.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAlert
} from "./chunk.EA27M3TE.js";
} from "./chunk.WF5XVJPW.js";
// src/components/alert/alert.ts
var alert_default = SlAlert;

6
dist/chunks/chunk.ZPH3EXSL.js → dist/chunks/chunk.UYEAPXNR.js vendored
View File

@ -1,6 +1,3 @@
import {
animation_styles_default
} from "./chunk.UG4GPH4N.js";
import {
dist_exports
} from "./chunk.RAB4VAMR.js";
@ -15,6 +12,9 @@ import {
n,
r2 as r
} from "./chunk.URGPTPT3.js";
import {
animation_styles_default
} from "./chunk.UG4GPH4N.js";
import {
x
} from "./chunk.CXZZ2LVK.js";

6
dist/chunks/chunk.EA27M3TE.js → dist/chunks/chunk.WF5XVJPW.js vendored
View File

@ -18,12 +18,12 @@ import {
import {
HasSlotController
} from "./chunk.NYIIDP5N.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
alert_styles_default
} from "./chunk.M2WZ4AXO.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
watch
} from "./chunk.FA5RT4K4.js";

6
dist/components/alert/alert.component.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAlert
} from "../../chunks/chunk.EA27M3TE.js";
} from "../../chunks/chunk.WF5XVJPW.js";
import "../../chunks/chunk.EUMKZFJV.js";
import "../../chunks/chunk.OGR6IZGY.js";
import "../../chunks/chunk.RCZVQXWP.js";
@ -12,9 +12,9 @@ import "../../chunks/chunk.QPSNFEB2.js";
import "../../chunks/chunk.O27EHOBW.js";
import "../../chunks/chunk.2URMUHDY.js";
import "../../chunks/chunk.NYIIDP5N.js";
import "../../chunks/chunk.M2WZ4AXO.js";
import "../../chunks/chunk.UZVKBFXH.js";
import "../../chunks/chunk.UP75L23G.js";
import "../../chunks/chunk.M2WZ4AXO.js";
import "../../chunks/chunk.QQHXFE7X.js";
import "../../chunks/chunk.2L6GHXIJ.js";
import "../../chunks/chunk.7KGEATF3.js";
@ -23,10 +23,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

8
dist/components/alert/alert.js vendored
View File

@ -1,7 +1,7 @@
import {
alert_default
} from "../../chunks/chunk.ZDSL2GV6.js";
import "../../chunks/chunk.EA27M3TE.js";
} from "../../chunks/chunk.T7XEDVND.js";
import "../../chunks/chunk.WF5XVJPW.js";
import "../../chunks/chunk.EUMKZFJV.js";
import "../../chunks/chunk.OGR6IZGY.js";
import "../../chunks/chunk.RCZVQXWP.js";
@ -13,9 +13,9 @@ import "../../chunks/chunk.QPSNFEB2.js";
import "../../chunks/chunk.O27EHOBW.js";
import "../../chunks/chunk.2URMUHDY.js";
import "../../chunks/chunk.NYIIDP5N.js";
import "../../chunks/chunk.M2WZ4AXO.js";
import "../../chunks/chunk.UZVKBFXH.js";
import "../../chunks/chunk.UP75L23G.js";
import "../../chunks/chunk.M2WZ4AXO.js";
import "../../chunks/chunk.QQHXFE7X.js";
import "../../chunks/chunk.2L6GHXIJ.js";
import "../../chunks/chunk.7KGEATF3.js";
@ -24,10 +24,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

6
dist/components/animated-image/animated-image.component.js vendored
View File

@ -1,6 +1,6 @@
import {
SlAnimatedImage
} from "../../chunks/chunk.THDZPG3S.js";
} from "../../chunks/chunk.FKYLS2FH.js";
import "../../chunks/chunk.QQHXFE7X.js";
import "../../chunks/chunk.2L6GHXIJ.js";
import "../../chunks/chunk.7KGEATF3.js";
@ -9,11 +9,11 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.WIDVIH73.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.WIDVIH73.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

8
dist/components/animated-image/animated-image.js vendored
View File

@ -1,7 +1,7 @@
import {
animated_image_default
} from "../../chunks/chunk.TQRRFFWX.js";
import "../../chunks/chunk.THDZPG3S.js";
} from "../../chunks/chunk.RALGEJU5.js";
import "../../chunks/chunk.FKYLS2FH.js";
import "../../chunks/chunk.QQHXFE7X.js";
import "../../chunks/chunk.2L6GHXIJ.js";
import "../../chunks/chunk.7KGEATF3.js";
@ -10,11 +10,11 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.WIDVIH73.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.WIDVIH73.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

4
dist/components/animation/animation.component.js vendored
View File

@ -1,11 +1,11 @@
import {
SlAnimation
} from "../../chunks/chunk.ZPH3EXSL.js";
import "../../chunks/chunk.UG4GPH4N.js";
} from "../../chunks/chunk.UYEAPXNR.js";
import "../../chunks/chunk.RAB4VAMR.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.UG4GPH4N.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

6
dist/components/animation/animation.js vendored
View File

@ -1,12 +1,12 @@
import {
animation_default
} from "../../chunks/chunk.SSHR2JDI.js";
import "../../chunks/chunk.ZPH3EXSL.js";
import "../../chunks/chunk.UG4GPH4N.js";
} from "../../chunks/chunk.6PGWJ74B.js";
import "../../chunks/chunk.UYEAPXNR.js";
import "../../chunks/chunk.RAB4VAMR.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.UG4GPH4N.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/avatar/avatar.component.js vendored
View File

@ -12,10 +12,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/avatar/avatar.js vendored
View File

@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/breadcrumb/breadcrumb.component.js vendored
View File

@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/breadcrumb/breadcrumb.js vendored
View File

@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/button/button.component.js vendored
View File

@ -21,10 +21,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/button/button.js vendored
View File

@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/carousel/carousel.component.js vendored
View File

@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/carousel/carousel.js vendored
View File

@ -20,10 +20,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/checkbox/checkbox.component.js vendored
View File

@ -18,10 +18,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/checkbox/checkbox.js vendored
View File

@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/color-picker/color-picker.component.js vendored
View File

@ -43,10 +43,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/color-picker/color-picker.js vendored
View File

@ -44,10 +44,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/copy-button/copy-button.component.js vendored
View File

@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/copy-button/copy-button.js vendored
View File

@ -23,10 +23,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/details/details.component.js vendored
View File

@ -18,10 +18,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/details/details.js vendored
View File

@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/dialog/dialog.component.js vendored
View File

@ -26,10 +26,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/dialog/dialog.js vendored
View File

@ -27,10 +27,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/drawer/drawer.component.js vendored
View File

@ -26,10 +26,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/drawer/drawer.js vendored
View File

@ -27,10 +27,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/icon-button/icon-button.component.js vendored
View File

@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/icon-button/icon-button.js vendored
View File

@ -15,10 +15,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/icon/icon.component.js vendored
View File

@ -8,10 +8,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/icon/icon.js vendored
View File

@ -9,10 +9,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/image-comparer/image-comparer.component.js vendored
View File

@ -15,10 +15,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/image-comparer/image-comparer.js vendored
View File

@ -16,10 +16,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/input/input.component.js vendored
View File

@ -21,10 +21,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/input/input.js vendored
View File

@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/menu-item/menu-item.component.js vendored
View File

@ -21,10 +21,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/menu-item/menu-item.js vendored
View File

@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/option/option.component.js vendored
View File

@ -15,10 +15,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/option/option.js vendored
View File

@ -16,10 +16,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/radio/radio.component.js vendored
View File

@ -12,10 +12,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/radio/radio.js vendored
View File

@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/rating/rating.component.js vendored
View File

@ -15,10 +15,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/rating/rating.js vendored
View File

@ -16,10 +16,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/select/select.component.js vendored
View File

@ -32,10 +32,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/select/select.js vendored
View File

@ -33,10 +33,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tab-group/tab-group.component.js vendored
View File

@ -20,10 +20,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tab-group/tab-group.js vendored
View File

@ -21,10 +21,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tab/tab.component.js vendored
View File

@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tab/tab.js vendored
View File

@ -20,10 +20,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tag/tag.component.js vendored
View File

@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tag/tag.js vendored
View File

@ -20,10 +20,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tree-item/tree-item.component.js vendored
View File

@ -27,10 +27,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tree-item/tree-item.js vendored
View File

@ -28,10 +28,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

2
dist/components/tree/tree.component.js vendored
View File

@ -30,10 +30,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
import "../../chunks/chunk.X772EESY.js";
import "../../chunks/chunk.4UBLNU4Z.js";
import "../../chunks/chunk.33QRBYPI.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.FA5RT4K4.js";
import "../../chunks/chunk.K23QWHWK.js";
import "../../chunks/chunk.URGPTPT3.js";
import "../../chunks/chunk.3Y6SB6QS.js";
import "../../chunks/chunk.CXZZ2LVK.js";
import "../../chunks/chunk.KIILAQWQ.js";
export {

Some files were not shown because too many files have changed in this diff Show More