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: 405d74df4a56bd93402a4bbf8dd8eb41b46d8db8

Browse Source
This commit is contained in:
prnk28 2025-01-07 20:25:07 +00:00
parent 8afee0b034
commit e47ea8032b
187 changed files with 3272 additions and 3272 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

104
components/button-group/index.html
View File

@ -484,18 +484,18 @@
</div> </div>
</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-44">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-277"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-246"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token 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>Left<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>Left<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>Center<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>Center<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>Right<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>Right<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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-246"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-278"><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-247"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-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> <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">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Right</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">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Right</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">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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-278"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-247"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -514,7 +514,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-58" aria-controls="code-preview-source-group-44"
> >
Source Source
<svg <svg
@ -593,9 +593,9 @@
</div> </div>
</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-45">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-279"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-248"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token 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">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>Left<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>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Left<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>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Center<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>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Center<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>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Right<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>small<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -616,11 +616,11 @@
<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>Center<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>Center<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>Right<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>Right<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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-248"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-280"><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-249"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-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> <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>
@ -650,7 +650,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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">SlButtonGroup</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><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-280"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-249"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -659,7 +659,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-59" aria-controls="code-preview-source-group-45"
> >
Source Source
<svg <svg
@ -751,9 +751,9 @@
</div> </div>
</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-46">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-281"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-250"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token 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>Left<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>Left<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>Center<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>Center<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>Right<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>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -790,11 +790,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>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Center<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>Center<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>Right<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>Right<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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></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-250"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-282"><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-251"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-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> <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>
@ -842,7 +842,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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">SlButtonGroup</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><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-282"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-251"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -851,7 +851,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-60" aria-controls="code-preview-source-group-46"
> >
Source Source
<svg <svg
@ -927,9 +927,9 @@
</div> </div>
</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-47">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-283"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-252"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token 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">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>Left<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>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Left<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>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Center<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>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Center<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>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Right<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>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">&gt;</span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -950,11 +950,11 @@
<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>Center<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>Center<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>Right<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>Right<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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></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-252"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-284"><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-253"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-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> <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>
@ -1002,7 +1002,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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">SlButtonGroup</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><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-284"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-253"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1011,7 +1011,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-61" aria-controls="code-preview-source-group-47"
> >
Source Source
<svg <svg
@ -1084,9 +1084,9 @@
</div> </div>
</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-48">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-285"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-254"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Example Button Group<span class="token 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>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>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>
<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> <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>
<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-dropdown</span><span class="token punctuation">&gt;</span></span>
@ -1098,11 +1098,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</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> <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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></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-254"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-286"><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-255"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1124,7 +1124,7 @@
</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><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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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-286"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-255"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1133,7 +1133,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-62" aria-controls="code-preview-source-group-48"
> >
Source Source
<svg <svg
@ -1205,9 +1205,9 @@
</div> </div>
</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-49">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-287"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-256"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Example Button Group<span class="token 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>Save<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>Save<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-dropdown</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-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-dropdown</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-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-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">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">caret</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">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">caret</span><span class="token punctuation">&gt;</span></span>
@ -1220,11 +1220,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</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> <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-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></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-256"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-288"><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-257"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1243,7 +1243,7 @@
</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><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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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-288"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-257"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1252,7 +1252,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-63" aria-controls="code-preview-source-group-49"
> >
Source Source
<svg <svg
@ -1323,9 +1323,9 @@
</div> </div>
</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-50">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-289"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-258"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button-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>Alignment<span class="token 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>I'm on the left<span class="token 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>I'm on the left<span class="token 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>Left<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>Left<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> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
@ -1338,11 +1338,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Right<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>Right<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> <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>sl-button-group</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button-group</span><span class="token punctuation">&gt;</span></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-258"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-290"><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-259"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</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">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
@ -1363,7 +1363,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButtonGroup</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">SlButtonGroup</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><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-290"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-259"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1372,7 +1372,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-64" aria-controls="code-preview-source-group-50"
> >
Source Source
<svg <svg
@ -1467,9 +1467,9 @@
</div> </div>
</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-51">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-291"><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>button-group-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-260"><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>button-group-toolbar<span class="token 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-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>History<span class="token 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-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>History<span class="token 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>Undo<span class="token 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>Undo<span class="token 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-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>arrow-counterclockwise<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>Undo<span class="token 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> <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-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>arrow-counterclockwise<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>Undo<span class="token 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>
@ -1509,11 +1509,11 @@
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-x-small<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-x-small<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> </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-291"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-260"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-292"><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-261"><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> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</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> 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> 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">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
@ -1580,7 +1580,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>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><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-292"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-261"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1589,7 +1589,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-65" aria-controls="code-preview-source-group-51"
> >
Source Source
<svg <svg
@ -1658,7 +1658,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<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-group/button-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-293"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-262"><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-group/button-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-262"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1673,17 +1673,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<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-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-294"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-263"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-263"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-295"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-295"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-264"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-264"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-296"><span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-296"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-265"><span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-265"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

172
components/button/index.html
View File

@ -489,17 +489,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-44"> <div class="code-preview__source-group" id="code-preview-source-group-52">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-246"><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> <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-246"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-247"><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> <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-247"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -508,7 +508,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-44" aria-controls="code-preview-source-group-52"
> >
Source Source
<svg <svg
@ -572,19 +572,19 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-45"> <div class="code-preview__source-group" id="code-preview-source-group-53">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-248"><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>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>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>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>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> <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-248"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-249"><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 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"> <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 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><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-249"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -605,7 +605,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-45" aria-controls="code-preview-source-group-53"
> >
Source Source
<svg <svg
@ -661,16 +661,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-46"> <div class="code-preview__source-group" id="code-preview-source-group-54">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-250"><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>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> <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-250"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-251"><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 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"> <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 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><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-251"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -688,7 +688,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-46" aria-controls="code-preview-source-group-54"
> >
Source Source
<svg <svg
@ -749,19 +749,19 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-47"> <div class="code-preview__source-group" id="code-preview-source-group-55">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-252"><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>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>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>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>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> <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-252"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-253"><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 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"> <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 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><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-253"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -794,7 +794,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-47" aria-controls="code-preview-source-group-55"
> >
Source Source
<svg <svg
@ -852,16 +852,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-48"> <div class="code-preview__source-group" id="code-preview-source-group-56">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-254"><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>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> <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-254"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-274"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-255"><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 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"> <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 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><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-255"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -885,7 +885,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-48" aria-controls="code-preview-source-group-56"
> >
Source Source
<svg <svg
@ -954,9 +954,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-49"> <div class="code-preview__source-group" id="code-preview-source-group-57">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-256"><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-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> <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-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-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> <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-256"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-257"><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">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> <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 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><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-257"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -996,7 +996,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-49" aria-controls="code-preview-source-group-57"
> >
Source Source
<svg <svg
@ -1057,16 +1057,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-50"> <div class="code-preview__source-group" id="code-preview-source-group-58">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-258"><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>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> <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-258"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-259"><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 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"> <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 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><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-259"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1090,7 +1090,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-50" aria-controls="code-preview-source-group-58"
> >
Source Source
<svg <svg
@ -1154,17 +1154,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-51"> <div class="code-preview__source-group" id="code-preview-source-group-59">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-260"><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>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>/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> <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-260"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-261"><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 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"> <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 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><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-261"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1189,7 +1189,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-51" aria-controls="code-preview-source-group-59"
> >
Source Source
<svg <svg
@ -1265,16 +1265,16 @@
</div> </div>
</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-60">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-262"><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>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> <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-262"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-263"><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 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"> <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 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><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-263"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1298,7 +1298,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-52" aria-controls="code-preview-source-group-60"
> >
Source Source
<svg <svg
@ -1407,9 +1407,9 @@
</div> </div>
</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-61">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-264"><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> <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 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> <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> <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 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> <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-264"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-265"><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">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> <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 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><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-265"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1533,7 +1533,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-53" aria-controls="code-preview-source-group-61"
> >
Source Source
<svg <svg
@ -1592,16 +1592,16 @@
</div> </div>
</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-62">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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>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> <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-266"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-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 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"> <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 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><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-267"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1625,7 +1625,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-54" aria-controls="code-preview-source-group-62"
> >
Source Source
<svg <svg
@ -1689,19 +1689,19 @@
</div> </div>
</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-63">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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>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>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>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>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> <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-268"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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 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"> <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 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><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-269"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1734,7 +1734,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-55" aria-controls="code-preview-source-group-63"
> >
Source Source
<svg <svg
@ -1795,19 +1795,19 @@
</div> </div>
</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-64">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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>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>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>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>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> <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-270"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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 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"> <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 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><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-271"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1845,7 +1845,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-56" aria-controls="code-preview-source-group-64"
> >
Source Source
<svg <svg
@ -1943,9 +1943,9 @@
</div> </div>
</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-65">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--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-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 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> <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 property">outline-offset</span><span class="token punctuation">:</span> 4px<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> </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-292"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1991,7 +1991,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-57" aria-controls="code-preview-source-group-65"
> >
Source Source
<svg <svg
@ -2052,7 +2052,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-273"><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-273"></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>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -2067,17 +2067,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-274"><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-274"></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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-275"><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-275"></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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-276"><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-276"></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-panel>
</sl-tab-group> </sl-tab-group>

68
components/card/index.html
View File

@ -508,9 +508,9 @@
</div> </div>
</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-67">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <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-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 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">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> <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 property">align-items</span><span class="token punctuation">:</span> center<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> </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-297"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <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> 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> <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>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><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-298"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -599,7 +599,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-66" aria-controls="code-preview-source-group-67"
> >
Source Source
<svg <svg
@ -666,9 +666,9 @@
</div> </div>
</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-68">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <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-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. 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> <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 property">max-width</span><span class="token punctuation">:</span> 300px<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> </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-299"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <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"> <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 { .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>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><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-300"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -707,7 +707,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-67" aria-controls="code-preview-source-group-68"
> >
Source Source
<svg <svg
@ -790,9 +790,9 @@
</div> </div>
</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-69">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-307"><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> <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 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> <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 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 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></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-301"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-308"><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">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"> <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>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><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-302"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -869,7 +869,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-68" aria-controls="code-preview-source-group-69"
> >
Source Source
<svg <svg
@ -944,9 +944,9 @@
</div> </div>
</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-70">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-309"><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! 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> <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 property">align-items</span><span class="token punctuation">:</span> center<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> </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-303"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" 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>
<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> 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> <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>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><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-304"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1010,7 +1010,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-69" aria-controls="code-preview-source-group-70"
> >
Source Source
<svg <svg
@ -1077,9 +1077,9 @@
</div> </div>
</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-71">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-311"><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 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">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> <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 property">max-width</span><span class="token punctuation">:</span> 300px<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> </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-305"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-311"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-312"><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"> <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 { .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>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><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-306"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-312"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1128,7 +1128,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-70" aria-controls="code-preview-source-group-71"
> >
Source Source
<svg <svg
@ -1197,7 +1197,7 @@
> >
using a script tag: using a script tag:
</p> </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/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> <pre><code class="language-html" id="code-block-313"><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-313"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1212,17 +1212,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/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> <pre><code class="language-js" id="code-block-314"><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-314"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/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> <pre><code class="language-js" id="code-block-315"><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-315"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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> <pre><code class="language-js" id="code-block-316"><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-316"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -504,9 +504,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-71"> <div class="code-preview__source-group" id="code-preview-source-group-66">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-311"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-carousel</span> <span class="token attr-name">pagination</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-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-carousel-item</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-carousel-item</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash<span class="token punctuation">"</span></span>
@ -538,11 +538,11 @@
<span class="token punctuation">/&gt;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-carousel-item</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-carousel-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-carousel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-carousel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-311"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-312"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-298"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-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> <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>
@ -579,7 +579,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCarouselItem</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">SlCarouselItem</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">SlCarousel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCarousel</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-312"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -588,7 +588,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-71" aria-controls="code-preview-source-group-66"
> >
Source Source
<svg <svg
@ -661,7 +661,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-313"><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/carousel-item/carousel-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-313"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-299"><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/carousel-item/carousel-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-299"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -676,17 +676,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-314"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-314"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-300"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-315"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-315"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-301"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-316"><span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-316"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-302"><span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -483,17 +483,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-91"> <div class="code-preview__source-group" id="code-preview-source-group-103">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-363"><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> <pre><code class="language-html" id="code-block-394"><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-363"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-394"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-364"><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-395"><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> <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-364"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -502,7 +502,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-91" aria-controls="code-preview-source-group-103"
> >
Source Source
<svg <svg
@ -568,17 +568,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-92"> <div class="code-preview__source-group" id="code-preview-source-group-104">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-365"><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> <pre><code class="language-html" id="code-block-396"><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-365"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-366"><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-397"><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> <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-366"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-397"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -587,7 +587,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-92" aria-controls="code-preview-source-group-104"
> >
Source Source
<svg <svg
@ -646,17 +646,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-93"> <div class="code-preview__source-group" id="code-preview-source-group-105">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-367"><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> <pre><code class="language-html" id="code-block-398"><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-367"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-398"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-368"><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-399"><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> <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-368"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-399"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -665,7 +665,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-93" aria-controls="code-preview-source-group-105"
> >
Source Source
<svg <svg
@ -729,17 +729,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-94"> <div class="code-preview__source-group" id="code-preview-source-group-106">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-369"><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-400"><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>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>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> <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-369"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-370"><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-401"><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 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"> <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 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><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-370"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-401"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -758,7 +758,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-94" aria-controls="code-preview-source-group-106"
> >
Source Source
<svg <svg
@ -824,20 +824,20 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-95"> <div class="code-preview__source-group" id="code-preview-source-group-107">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-371"><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-402"><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">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> <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; #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff; #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
<span class="token punctuation">"</span></span> <span class="token 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 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-371"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-402"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-372"><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-403"><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 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> <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">"</span></span>
<span class="token punctuation">/&gt;</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-372"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-403"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -857,7 +857,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-95" aria-controls="code-preview-source-group-107"
> >
Source Source
<svg <svg
@ -913,16 +913,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-96"> <div class="code-preview__source-group" id="code-preview-source-group-108">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-373"><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-404"><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>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> <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-373"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-404"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-374"><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-405"><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 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"> <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 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><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-374"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-405"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -940,7 +940,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-96" aria-controls="code-preview-source-group-108"
> >
Source Source
<svg <svg
@ -996,17 +996,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-97"> <div class="code-preview__source-group" id="code-preview-source-group-109">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-375"><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> <pre><code class="language-html" id="code-block-406"><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-375"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-406"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-376"><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-407"><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> <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-376"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-407"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1015,7 +1015,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-97" aria-controls="code-preview-source-group-109"
> >
Source Source
<svg <svg
@ -1084,7 +1084,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-377"><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-377"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-408"><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-408"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1099,17 +1099,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-378"><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-378"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-409"><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-409"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-379"><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-379"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-410"><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-410"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-380"><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-380"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-411"><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-411"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

104
components/copy-button/index.html
View File

@ -484,19 +484,19 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-98"> <div class="code-preview__source-group" id="code-preview-source-group-91">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-381"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>Nebula rocks!<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-363"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>Nebula rocks!<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-381"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-363"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-382"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-364"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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 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">SlCopyButton</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>Nebula rocks!<span class="token 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">SlCopyButton</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>Nebula rocks!<span class="token punctuation">"</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-382"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-364"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -505,7 +505,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-98" aria-controls="code-preview-source-group-91"
> >
Source Source
<svg <svg
@ -572,19 +572,19 @@
</div> </div>
</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-92">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-button</span> <pre><code class="language-html" id="code-block-365"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>Custom labels are easy<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>Custom labels are easy<span class="token punctuation">"</span></span>
<span class="token attr-name">copy-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to copy<span class="token punctuation">"</span></span> <span class="token attr-name">copy-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to copy<span class="token punctuation">"</span></span>
<span class="token attr-name">success-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You did it!<span class="token punctuation">"</span></span> <span class="token attr-name">success-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You did it!<span class="token punctuation">"</span></span>
<span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token punctuation">"</span></span> <span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-copy-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-383"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-365"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-366"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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 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">SlCopyButton</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCopyButton</span></span>
@ -594,7 +594,7 @@
<span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token punctuation">"</span></span> <span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</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-384"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-366"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -603,7 +603,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-99" aria-controls="code-preview-source-group-92"
> >
Source Source
<svg <svg
@ -667,18 +667,18 @@
</div> </div>
</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-93">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-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>Copied from a custom button<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-367"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>Copied from a custom button<span class="token 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>copy-icon<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>clipboard<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>copy-icon<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>clipboard<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success-icon<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>clipboard-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-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>success-icon<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>clipboard-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-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>error-icon<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>clipboard-x<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error-icon<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>clipboard-x<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-copy-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-385"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-367"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-368"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> SlIcon <span class="token punctuation">}</span> <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> <span class="token punctuation">{</span> SlIcon <span class="token punctuation">}</span> <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> <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>
@ -690,7 +690,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlCopyButton</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">SlCopyButton</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><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-386"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-368"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -699,7 +699,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-100" aria-controls="code-preview-source-group-93"
> >
Source Source
<svg <svg
@ -806,9 +806,9 @@
</div> </div>
</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-94">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-387"><span class="token comment">&lt;!-- Copies the span's textContent --&gt;</span> <pre><code class="language-html" id="code-block-369"><span class="token comment">&lt;!-- Copies the span's textContent --&gt;</span>
<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>my-phone<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>+1 (234) 456-7890<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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-phone<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>+1 (234) 456-7890<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-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-phone<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-phone<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span>
@ -823,11 +823,11 @@
<span class="token comment">&lt;!-- Copies the link's "href" attribute --&gt;</span> <span class="token comment">&lt;!-- Copies the link's "href" attribute --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</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>my-link<span class="token punctuation">"</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://shoelace.style/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Nebula Website<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</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>my-link<span class="token punctuation">"</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://shoelace.style/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Nebula Website<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-369"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-370"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> SlInput <span class="token punctuation">}</span> <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">import</span> <span class="token punctuation">{</span> SlInput <span class="token punctuation">}</span> <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 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>
@ -849,7 +849,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<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 class="token class-name">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<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><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-388"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-370"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -858,7 +858,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-101" aria-controls="code-preview-source-group-94"
> >
Source Source
<svg <svg
@ -922,19 +922,19 @@
</div> </div>
</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-95">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-371"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token 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-copy-button</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-371"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-372"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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 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">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token 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">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token punctuation">"</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-390"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-372"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -943,7 +943,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-102" aria-controls="code-preview-source-group-95"
> >
Source Source
<svg <svg
@ -999,19 +999,19 @@
</div> </div>
</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-96">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-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>You can't copy me<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-copy-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-373"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>You can't copy me<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-copy-button</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-373"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-374"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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 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">SlCopyButton</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>You can't copy me<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><span class="token class-name">SlCopyButton</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>You can't copy me<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><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-392"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-374"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1020,7 +1020,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-103" aria-controls="code-preview-source-group-96"
> >
Source Source
<svg <svg
@ -1082,19 +1082,19 @@
</div> </div>
</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-97">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-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>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>250<span class="token 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-copy-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-375"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>250<span class="token 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-copy-button</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-375"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-376"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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 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">SlCopyButton</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>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">250</span><span class="token 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">SlCopyButton</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>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">250</span><span class="token punctuation">}</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-394"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-376"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1103,7 +1103,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-104" aria-controls="code-preview-source-group-97"
> >
Source Source
<svg <svg
@ -1195,9 +1195,9 @@
</div> </div>
</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-98">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-copy-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>I'm so stylish<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>custom-styles<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-377"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-copy-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>I'm so stylish<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>custom-styles<span class="token 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>copy-icon<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>asterisk<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>copy-icon<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>asterisk<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success-icon<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>check-lg<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success-icon<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>check-lg<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error-icon<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>x-lg<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error-icon<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>x-lg<span class="token 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>
@ -1232,11 +1232,11 @@
<span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<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> </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-395"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-377"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-378"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-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"> <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">
.custom-styles { .custom-styles {
@ -1275,7 +1275,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>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><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-396"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-378"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1284,7 +1284,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-105" aria-controls="code-preview-source-group-98"
> >
Source Source
<svg <svg
@ -1353,7 +1353,7 @@
> >
using a script tag: using a script tag:
</p> </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/copy-button/copy-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-397"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-379"><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/copy-button/copy-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-379"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1368,17 +1368,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/copy-button/copy-button.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-380"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-380"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/copy-button/copy-button.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-381"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-381"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> SlCopyButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</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-382"><span class="token keyword">import</span> SlCopyButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-382"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

52
components/details/index.html
View File

@ -486,17 +486,17 @@
</div> </div>
</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-99">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-489"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-383"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-details</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-details</span><span class="token punctuation">&gt;</span></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-383"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-490"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-384"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</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 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">SlDetails</span></span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlDetails</span></span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -504,7 +504,7 @@
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDetails</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDetails</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-490"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -513,7 +513,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-140" aria-controls="code-preview-source-group-99"
> >
Source Source
<svg <svg
@ -576,17 +576,17 @@
</div> </div>
</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-100">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-491"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</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-385"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-details</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-details</span><span class="token punctuation">&gt;</span></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-385"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-492"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-386"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</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 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">SlDetails</span></span> <span class="token attr-name">summary</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 plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlDetails</span></span> <span class="token attr-name">summary</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 plain-text">
@ -594,7 +594,7 @@
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDetails</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDetails</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-492"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -603,7 +603,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-141" aria-controls="code-preview-source-group-100"
> >
Source Source
<svg <svg
@ -680,9 +680,9 @@
</div> </div>
</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-101">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-493"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<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>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-387"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<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>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>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> <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>
@ -696,11 +696,11 @@
<span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> none<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> </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-493"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-494"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-388"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</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> 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> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <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">
@ -723,7 +723,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>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><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-494"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -732,7 +732,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-142" aria-controls="code-preview-source-group-101"
> >
Source Source
<svg <svg
@ -830,9 +830,9 @@
</div> </div>
</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-102">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-495"><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>details-group-example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-389"><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>details-group-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>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>First<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>First<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -865,7 +865,7 @@
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-2x-small<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-2x-small<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> </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-495"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -874,7 +874,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-143" aria-controls="code-preview-source-group-102"
> >
Source Source
<svg <svg
@ -935,7 +935,7 @@
> >
using a script tag: using a script tag:
</p> </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/details/details.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-390"><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/details/details.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-390"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -950,17 +950,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/details/details.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-391"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/details/details.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-392"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-392"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</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-393"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/dialog/index.html
View File

@ -509,9 +509,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-106"> <div class="code-preview__source-group" id="code-preview-source-group-110">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-401"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-412"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-dialog</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dialog</span><span class="token punctuation">&gt;</span></span>
@ -526,11 +526,11 @@
openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</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> </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-401"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-412"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-402"><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-413"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
@ -550,7 +550,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><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>
<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-402"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-413"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -559,7 +559,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-106" aria-controls="code-preview-source-group-110"
> >
Source Source
<svg <svg
@ -634,9 +634,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-107"> <div class="code-preview__source-group" id="code-preview-source-group-111">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-403"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-width<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> 50vw<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-414"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-width<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> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-dialog</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dialog</span><span class="token punctuation">&gt;</span></span>
@ -651,11 +651,11 @@
openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</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> </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-403"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-414"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-404"><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-415"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
@ -675,7 +675,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><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>
<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-404"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-415"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -684,7 +684,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-107" aria-controls="code-preview-source-group-111"
> >
Source Source
<svg <svg
@ -761,9 +761,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-108"> <div class="code-preview__source-group" id="code-preview-source-group-112">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-405"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-416"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-scrolling<span class="token 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 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> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<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>div</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> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<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>p</span><span class="token punctuation">&gt;</span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>div</span><span class="token punctuation">&gt;</span></span>
@ -780,11 +780,11 @@
openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</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> </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-405"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-416"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-406"><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-417"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
@ -813,7 +813,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><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>
<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-406"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-417"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -822,7 +822,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-108" aria-controls="code-preview-source-group-112"
> >
Source Source
<svg <svg
@ -900,9 +900,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-109"> <div class="code-preview__source-group" id="code-preview-source-group-113">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-407"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-418"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-header-actions<span class="token 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<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>header-actions<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-button</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<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>header-actions<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-button</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -920,11 +920,11 @@
closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
newWindowButton<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> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> newWindowButton<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> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<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></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-407"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-418"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-408"><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-419"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</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">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>
@ -951,7 +951,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><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>
<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-408"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-419"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -960,7 +960,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-109" aria-controls="code-preview-source-group-113"
> >
Source Source
<svg <svg
@ -1055,9 +1055,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-110"> <div class="code-preview__source-group" id="code-preview-source-group-114">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-409"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-420"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This dialog will not close when you click on the overlay. This dialog will not close when you click on the overlay.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-dialog</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dialog</span><span class="token punctuation">&gt;</span></span>
@ -1079,11 +1079,11 @@
<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 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></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-409"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-420"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-410"><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-421"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
@ -1110,7 +1110,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><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>
<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-410"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-421"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1119,7 +1119,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-110" aria-controls="code-preview-source-group-114"
> >
Source Source
<svg <svg
@ -1199,9 +1199,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-111"> <div class="code-preview__source-group" id="code-preview-source-group-115">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-411"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-focus<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-422"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dialog</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>Dialog<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>dialog-focus<span class="token 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 attr-name">autofocus</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>I will have focus when the dialog is opened<span class="token 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">autofocus</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>I will have focus when the dialog is opened<span class="token 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-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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-dialog</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-dialog</span><span class="token punctuation">&gt;</span></span>
@ -1217,11 +1217,11 @@
openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> dialog<span class="token punctuation">.</span><span class="token function">hide</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> </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-411"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-422"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-412"><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-423"><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> 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> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</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">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -1242,7 +1242,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><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>
<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-412"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-423"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1251,7 +1251,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-111" aria-controls="code-preview-source-group-115"
> >
Source Source
<svg <svg
@ -1327,7 +1327,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-413"><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/dialog/dialog.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-413"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-424"><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/dialog/dialog.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-424"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1342,17 +1342,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-414"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-414"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-425"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-425"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-415"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-415"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-426"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-426"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-416"><span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-416"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-427"><span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-427"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/divider/index.html
View File

@ -477,17 +477,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-112"> <div class="code-preview__source-group" id="code-preview-source-group-116">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-417"><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> <pre><code class="language-html" id="code-block-428"><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>
</code><sl-copy-button class="copy-code-button" from="code-block-417"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-428"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-418"><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-429"><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">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">SlDivider</span></span> <span class="token punctuation">/&gt;</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">SlDivider</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-418"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-429"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -496,7 +496,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-112" aria-controls="code-preview-source-group-116"
> >
Source Source
<svg <svg
@ -553,17 +553,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-113"> <div class="code-preview__source-group" id="code-preview-source-group-117">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-419"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</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> 4px<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-divider</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-430"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</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> 4px<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-divider</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-419"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-430"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-420"><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-431"><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">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">SlDivider</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">'--width'</span><span class="token operator">:</span> <span class="token string">'4px'</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 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">SlDivider</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">'--width'</span><span class="token operator">:</span> <span class="token string">'4px'</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-420"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-431"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -572,7 +572,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-113" aria-controls="code-preview-source-group-117"
> >
Source Source
<svg <svg
@ -626,17 +626,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-114"> <div class="code-preview__source-group" id="code-preview-source-group-118">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-421"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</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><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-divider</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-432"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</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><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-divider</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-421"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-432"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-422"><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-433"><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">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">SlDivider</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 punctuation">}</span></span> <span class="token punctuation">/&gt;</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">SlDivider</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 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-422"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-433"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -645,7 +645,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-114" aria-controls="code-preview-source-group-118"
> >
Source Source
<svg <svg
@ -708,18 +708,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-115"> <div class="code-preview__source-group" id="code-preview-source-group-119">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-423"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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">text-align</span><span class="token punctuation">:</span> center<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-434"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
Above Above
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</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">--spacing</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-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 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">--spacing</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-divider</span><span class="token punctuation">&gt;</span></span>
Below Below
<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>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-423"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-434"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-424"><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-435"><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">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 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"> <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">
@ -728,7 +728,7 @@
Below Below
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span> </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-424"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-435"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -737,7 +737,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-115" aria-controls="code-preview-source-group-119"
> >
Source Source
<svg <svg
@ -802,20 +802,20 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-116"> <div class="code-preview__source-group" id="code-preview-source-group-120">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-425"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</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> <pre><code class="language-html" id="code-block-436"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</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>
First First
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</span> <span class="token attr-name">vertical</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 attr-name">vertical</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>
Middle Middle
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-divider</span> <span class="token attr-name">vertical</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 attr-name">vertical</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>
Last Last
<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>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-425"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-436"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-426"><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-437"><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">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 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>div</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
@ -832,7 +832,7 @@
Last Last
</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><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-426"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-437"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -841,7 +841,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-116" aria-controls="code-preview-source-group-120"
> >
Source Source
<svg <svg
@ -905,9 +905,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-117"> <div class="code-preview__source-group" id="code-preview-source-group-121">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-427"><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-438"><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>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>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>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>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>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> <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>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>
@ -916,11 +916,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>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-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>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-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>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-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>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-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-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-427"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-438"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-428"><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-439"><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> 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">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>
@ -935,7 +935,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>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">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">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>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">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><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-428"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-439"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -944,7 +944,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-117" aria-controls="code-preview-source-group-121"
> >
Source Source
<svg <svg
@ -1013,7 +1013,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-429"><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/divider/divider.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-429"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-440"><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/divider/divider.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-440"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1028,17 +1028,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-430"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-430"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-441"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-441"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-431"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-431"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-442"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-442"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-432"><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></code><sl-copy-button class="copy-code-button" from="code-block-432"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-443"><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></code><sl-copy-button class="copy-code-button" from="code-block-443"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

128
components/drawer/index.html
View File

@ -513,9 +513,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-118"> <div class="code-preview__source-group" id="code-preview-source-group-122">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-433"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-444"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -530,11 +530,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-433"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-444"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-434"><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-445"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -554,7 +554,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><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>
<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-434"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-445"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -563,7 +563,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-118" aria-controls="code-preview-source-group-122"
> >
Source Source
<svg <svg
@ -641,9 +641,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-119"> <div class="code-preview__source-group" id="code-preview-source-group-123">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-435"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>start<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>drawer-placement-start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-446"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>start<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>drawer-placement-start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This drawer slides in from the start. This drawer slides in from the start.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -658,11 +658,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-435"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-446"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-436"><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-447"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -682,7 +682,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><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>
<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-436"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-447"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -691,7 +691,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-119" aria-controls="code-preview-source-group-123"
> >
Source Source
<svg <svg
@ -763,9 +763,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-120"> <div class="code-preview__source-group" id="code-preview-source-group-124">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-437"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-top<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-448"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-top<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This drawer slides in from the top. This drawer slides in from the top.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -780,11 +780,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-437"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-448"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-438"><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-449"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -804,7 +804,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><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>
<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-438"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-449"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -813,7 +813,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-120" aria-controls="code-preview-source-group-124"
> >
Source Source
<svg <svg
@ -888,9 +888,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-121"> <div class="code-preview__source-group" id="code-preview-source-group-125">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-439"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>bottom<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>drawer-placement-bottom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-450"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>bottom<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>drawer-placement-bottom<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This drawer slides in from the bottom. This drawer slides in from the bottom.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -905,11 +905,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-439"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-450"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-440"><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-451"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -929,7 +929,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><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>
<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-440"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-451"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -938,7 +938,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-121" aria-controls="code-preview-source-group-125"
> >
Source Source
<svg <svg
@ -1041,9 +1041,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-122"> <div class="code-preview__source-group" id="code-preview-source-group-126">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-441"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <pre><code class="language-html" id="code-block-452"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-panel-border-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<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 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">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-panel-border-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<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> <span class="token punctuation">&gt;</span></span>
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens. The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
@ -1064,11 +1064,11 @@
openButton<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>drawer<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>drawer<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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>drawer<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>drawer<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-441"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-452"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-442"><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-453"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -1107,7 +1107,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><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>
<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-442"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-453"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1116,7 +1116,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-122" aria-controls="code-preview-source-group-126"
> >
Source Source
<svg <svg
@ -1191,9 +1191,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-123"> <div class="code-preview__source-group" id="code-preview-source-group-127">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-443"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-custom-size<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> 50vw<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-454"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-custom-size<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> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
This drawer is always 50% of the viewport. This drawer is always 50% of the viewport.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -1208,11 +1208,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-443"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-454"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-444"><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-455"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -1232,7 +1232,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><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>
<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-444"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-455"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1241,7 +1241,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-123" aria-controls="code-preview-source-group-127"
> >
Source Source
<svg <svg
@ -1318,9 +1318,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-124"> <div class="code-preview__source-group" id="code-preview-source-group-128">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-445"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-456"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-scrolling<span class="token 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 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> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<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>div</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> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<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>p</span><span class="token punctuation">&gt;</span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>div</span><span class="token punctuation">&gt;</span></span>
@ -1337,11 +1337,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-445"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-456"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-446"><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-457"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -1369,7 +1369,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><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>
<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-446"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-457"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1378,7 +1378,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-124" aria-controls="code-preview-source-group-128"
> >
Source Source
<svg <svg
@ -1456,9 +1456,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-125"> <div class="code-preview__source-group" id="code-preview-source-group-129">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-447"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-458"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-header-actions<span class="token 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<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>header-actions<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-button</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<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>header-actions<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-button</span><span class="token punctuation">&gt;</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -1476,11 +1476,11 @@
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
newWindowButton<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> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> newWindowButton<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> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<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></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-447"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-458"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-448"><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-459"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</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">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>
@ -1502,7 +1502,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><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>
<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-448"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-459"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1511,7 +1511,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-125" aria-controls="code-preview-source-group-129"
> >
Source Source
<svg <svg
@ -1606,9 +1606,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-126"> <div class="code-preview__source-group" id="code-preview-source-group-130">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-449"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-460"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
This drawer will not close when you click on the overlay. This drawer will not close when you click on the overlay.
<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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -1630,11 +1630,11 @@
<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 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></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-449"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-460"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-450"><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-461"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
@ -1661,7 +1661,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><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>
<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-450"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-461"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1670,7 +1670,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-126" aria-controls="code-preview-source-group-130"
> >
Source Source
<svg <svg
@ -1750,9 +1750,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-127"> <div class="code-preview__source-group" id="code-preview-source-group-131">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-451"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-focus<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-462"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-drawer</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>Drawer<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>drawer-focus<span class="token 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 attr-name">autofocus</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>I will have focus when the drawer is opened<span class="token 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">autofocus</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>I will have focus when the drawer is opened<span class="token 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-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>footer<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 punctuation">&gt;</span></span>Close<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">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 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>Close<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-drawer</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-drawer</span><span class="token punctuation">&gt;</span></span>
@ -1768,11 +1768,11 @@
openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> openButton<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> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> closeButton<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> drawer<span class="token punctuation">.</span><span class="token function">hide</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> </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-451"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-462"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-452"><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-463"><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> 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> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</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">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -1793,7 +1793,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><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>
<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-452"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-463"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1802,7 +1802,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-127" aria-controls="code-preview-source-group-131"
> >
Source Source
<svg <svg
@ -1878,7 +1878,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-453"><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/drawer/drawer.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-453"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-464"><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/drawer/drawer.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-464"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1893,17 +1893,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-454"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-454"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-465"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-465"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-455"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-455"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-466"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-466"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-456"><span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-456"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-467"><span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-467"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

104
components/dropdown/index.html
View File

@ -513,9 +513,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-128"> <div class="code-preview__source-group" id="code-preview-source-group-132">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-457"><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-468"><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>Dropdown<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">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>Dropdown<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</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>Dropdown Item 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>Dropdown Item 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>
@ -535,11 +535,11 @@
<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>
<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</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> <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-457"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-468"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-458"><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-469"><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> 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> 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> 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> 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> 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> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
@ -572,7 +572,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-458"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-469"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -581,7 +581,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-128" aria-controls="code-preview-source-group-132"
> >
Source Source
<svg <svg
@ -669,9 +669,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-129"> <div class="code-preview__source-group" id="code-preview-source-group-133">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-459"><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>dropdown-selection<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-470"><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>dropdown-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-dropdown</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>
<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-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</span><span class="token punctuation">&gt;</span></span>
@ -691,11 +691,11 @@
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selectedItem<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selectedItem<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 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> </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-459"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-470"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-460"><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-471"><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> 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> 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">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>
@ -719,7 +719,7 @@
</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><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> <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>
</code><sl-copy-button class="copy-code-button" from="code-block-460"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-471"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -728,7 +728,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-129" aria-controls="code-preview-source-group-133"
> >
Source Source
<svg <svg
@ -806,9 +806,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-130"> <div class="code-preview__source-group" id="code-preview-source-group-134">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-461"><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>dropdown-selection-alt<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-472"><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>dropdown-selection-alt<span class="token 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-dropdown</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>
<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-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</span><span class="token punctuation">&gt;</span></span>
@ -829,11 +829,11 @@
copy<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> copy<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
paste<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'paste'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> paste<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'paste'</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> </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-461"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-472"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-462"><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-473"><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> 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> 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">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>
@ -864,7 +864,7 @@
</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><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> <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>
</code><sl-copy-button class="copy-code-button" from="code-block-462"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-473"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -873,7 +873,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-130" aria-controls="code-preview-source-group-134"
> >
Source Source
<svg <svg
@ -942,9 +942,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-131"> <div class="code-preview__source-group" id="code-preview-source-group-135">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-463"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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> <pre><code class="language-html" id="code-block-474"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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 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-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</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>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> <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>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>
@ -955,11 +955,11 @@
<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>Replace<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>Replace<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-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> <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-463"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-474"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-464"><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-475"><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> 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> 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> 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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -980,7 +980,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-464"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-475"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -989,7 +989,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-131" aria-controls="code-preview-source-group-135"
> >
Source Source
<svg <svg
@ -1058,9 +1058,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-132"> <div class="code-preview__source-group" id="code-preview-source-group-136">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-465"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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>30<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-476"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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>30<span class="token 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">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-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</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>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> <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>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>
@ -1071,11 +1071,11 @@
<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>Replace<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>Replace<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-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> <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-465"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-476"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-466"><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-477"><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> 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> 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> 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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1096,7 +1096,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-466"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-477"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1105,7 +1105,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-132" aria-controls="code-preview-source-group-136"
> >
Source Source
<svg <svg
@ -1174,9 +1174,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-133"> <div class="code-preview__source-group" id="code-preview-source-group-137">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-467"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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>30<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-478"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-dropdown</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>30<span class="token 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">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-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</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>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> <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>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>
@ -1187,11 +1187,11 @@
<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>Replace<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>Replace<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-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> <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-467"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-478"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-468"><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-479"><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> 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> 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> 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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1212,7 +1212,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-468"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-479"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1221,7 +1221,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-133" aria-controls="code-preview-source-group-137"
> >
Source Source
<svg <svg
@ -1308,9 +1308,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-134"> <div class="code-preview__source-group" id="code-preview-source-group-138">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-469"><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-480"><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-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 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</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>
@ -1339,11 +1339,11 @@
<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>
<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</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> <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-469"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-480"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-470"><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-481"><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> 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> 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> 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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1390,7 +1390,7 @@
</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><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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span> </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-470"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-481"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1399,7 +1399,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-134" aria-controls="code-preview-source-group-138"
> >
Source Source
<svg <svg
@ -1505,9 +1505,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-135"> <div class="code-preview__source-group" id="code-preview-source-group-139">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-471"><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>dropdown-hoist<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-482"><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>dropdown-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-dropdown</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>
<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>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-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>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-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</span><span class="token punctuation">&gt;</span></span>
@ -1535,11 +1535,11 @@
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<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> </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-471"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-482"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-472"><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-483"><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> 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> 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> 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> 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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -1582,7 +1582,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>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><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-472"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-483"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1591,7 +1591,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-135" aria-controls="code-preview-source-group-139"
> >
Source Source
<svg <svg
@ -1660,7 +1660,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-473"><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/dropdown/dropdown.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-473"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-484"><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/dropdown/dropdown.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-484"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1675,17 +1675,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-474"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-474"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-485"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-485"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-475"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-475"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-486"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-486"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-476"><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></code><sl-copy-button class="copy-code-button" from="code-block-476"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-487"><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></code><sl-copy-button class="copy-code-button" from="code-block-487"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -487,9 +487,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-136"> <div class="code-preview__source-group" id="code-preview-source-group-140">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-477"><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-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>
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> 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>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> <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> 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> </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-477"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-478"><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-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>
<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> 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> 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> <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><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>
<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-478"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -537,7 +537,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-136" aria-controls="code-preview-source-group-140"
> >
Source Source
<svg <svg
@ -599,17 +599,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-137"> <div class="code-preview__source-group" id="code-preview-source-group-141">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-479"><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-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>
<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>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>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> <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-479"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-480"><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-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>
<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 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"> <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 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><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-480"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -631,7 +631,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-137" aria-controls="code-preview-source-group-141"
> >
Source Source
<svg <svg
@ -690,17 +690,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-138"> <div class="code-preview__source-group" id="code-preview-source-group-142">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-481"><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-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>
<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>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>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> <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-481"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-482"><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-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>
<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 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"> <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 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><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-482"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -722,7 +722,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-138" aria-controls="code-preview-source-group-142"
> >
Source Source
<svg <svg
@ -781,17 +781,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-139"> <div class="code-preview__source-group" id="code-preview-source-group-143">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-483"><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-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>
<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>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>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> <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-483"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-484"><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-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>
<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 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"> <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 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><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-484"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -813,7 +813,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-139" aria-controls="code-preview-source-group-143"
> >
Source Source
<svg <svg
@ -882,7 +882,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-485"><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-485"></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-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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -897,17 +897,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-486"><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-486"></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-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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-487"><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-487"></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-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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-488"><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-488"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -499,9 +499,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-160"> <div class="code-preview__source-group" id="code-preview-source-group-148">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-543"><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-number-overview<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-512"><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-number-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-format-number</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-number</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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-number</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>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>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>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>
@ -514,11 +514,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> 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> </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-543"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-512"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-544"><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-513"><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> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</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">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -540,7 +540,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><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>
<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-544"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-513"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -549,7 +549,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-160" aria-controls="code-preview-source-group-148"
> >
Source Source
<svg <svg
@ -612,18 +612,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-161"> <div class="code-preview__source-group" id="code-preview-source-group-149">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-545"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>percent<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>0<span class="token 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-number</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-514"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>percent<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>0<span class="token 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-number</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-number</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>percent<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>0.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-format-number</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-number</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>percent<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>0.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-format-number</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-number</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>percent<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>0.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-format-number</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-number</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>percent<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>0.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-format-number</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-number</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>percent<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>0.75<span class="token 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-number</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-number</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>percent<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>0.75<span class="token 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-number</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-number</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>percent<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-format-number</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>percent<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-format-number</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-545"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-514"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-546"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-515"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</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 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"> <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">
@ -638,7 +638,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatNumber</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>percent<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">1</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 class="token class-name">SlFormatNumber</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>percent<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">1</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><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-546"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-515"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -647,7 +647,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-161" aria-controls="code-preview-source-group-149"
> >
Source Source
<svg <svg
@ -705,16 +705,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-162"> <div class="code-preview__source-group" id="code-preview-source-group-150">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-547">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>2000<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<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</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-format-number</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-516">English: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>2000<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<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</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-format-number</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-format-number</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>2000<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 attr-name">minimum-fraction-digits</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-format-number</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-format-number</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>2000<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 attr-name">minimum-fraction-digits</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-format-number</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-number</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>2000<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 attr-name">minimum-fraction-digits</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-format-number</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-number</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>2000<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 attr-name">minimum-fraction-digits</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-format-number</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-547"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-516"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-548"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-517"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</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 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"> <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">
@ -725,7 +725,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">SlFormatNumber</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>2000<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 attr-name">minimum-fraction-digits</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 plain-text"> Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatNumber</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>2000<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 attr-name">minimum-fraction-digits</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 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><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-548"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-517"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -734,7 +734,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-162" aria-controls="code-preview-source-group-150"
> >
Source Source
<svg <svg
@ -798,18 +798,18 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-163"> <div class="code-preview__source-group" id="code-preview-source-group-151">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-549"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<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>2000<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-format-number</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-518"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<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>2000<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-format-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>GBP<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>2000<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-GB<span class="token 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-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>GBP<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>2000<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-GB<span class="token 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-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>EUR<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>2000<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-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>EUR<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>2000<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-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>RUB<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>2000<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-format-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>RUB<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>2000<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-format-number</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-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<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>2000<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-format-number</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-number</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<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>2000<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-format-number</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-549"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-518"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-550"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-519"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</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 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"> <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">
@ -824,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatNumber</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<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>2000<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 plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatNumber</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>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<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>2000<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 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><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-550"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-519"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -833,7 +833,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-163" aria-controls="code-preview-source-group-151"
> >
Source Source
<svg <svg
@ -902,7 +902,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-551"><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-number/format-number.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-551"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-520"><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-number/format-number.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-520"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -917,17 +917,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-552"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-552"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-521"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-521"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-553"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-553"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-522"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-522"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-554"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-554"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-523"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-523"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/icon-button/index.html
View File

@ -493,17 +493,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-148"> <div class="code-preview__source-group" id="code-preview-source-group-152">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-512"><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> <pre><code class="language-html" id="code-block-524"><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>
</code><sl-copy-button class="copy-code-button" from="code-block-512"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-524"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-513"><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> <pre><code class="language-jsx" id="code-block-525"><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> <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">SlIconButton</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 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 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">SlIconButton</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 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 punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-513"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-525"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -512,7 +512,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-148" aria-controls="code-preview-source-group-152"
> >
Source Source
<svg <svg
@ -571,16 +571,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-149"> <div class="code-preview__source-group" id="code-preview-source-group-153">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-514"><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>pencil<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>Edit<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">font-size</span><span class="token punctuation">:</span> 1.5rem<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-icon-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-526"><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>pencil<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>Edit<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">font-size</span><span class="token punctuation">:</span> 1.5rem<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-icon-button</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<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>Edit<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">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-icon-button</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<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>Edit<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">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-icon-button</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<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>Edit<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">font-size</span><span class="token punctuation">:</span> 2.5rem<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-icon-button</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<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>Edit<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">font-size</span><span class="token punctuation">:</span> 2.5rem<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-icon-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-514"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-526"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-515"><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> <pre><code class="language-jsx" id="code-block-527"><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> <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 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"> <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">
@ -589,7 +589,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIconButton</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>pencil<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>Edit<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 literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'2.5rem'</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 class="token class-name">SlIconButton</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>pencil<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>Edit<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 literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'2.5rem'</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><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-515"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-527"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -598,7 +598,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-149" aria-controls="code-preview-source-group-153"
> >
Source Source
<svg <svg
@ -674,9 +674,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-150"> <div class="code-preview__source-group" id="code-preview-source-group-154">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-516"><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>icon-button-color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-528"><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>icon-button-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-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>type-bold<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>Bold<span class="token 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> <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>type-bold<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>Bold<span class="token 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>
<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>type-italic<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>Italic<span class="token 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> <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>type-italic<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>Italic<span class="token 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>
<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>type-underline<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>Underline<span class="token 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> <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>type-underline<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>Underline<span class="token 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>
@ -696,11 +696,11 @@
<span class="token property">color</span><span class="token punctuation">:</span> #960077<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #960077<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> </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-516"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-517"><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> <pre><code class="language-jsx" id="code-block-529"><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"> <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">
.icon-button-color sl-icon-button::part(base) { .icon-button-color sl-icon-button::part(base) {
@ -728,7 +728,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>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><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-517"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-529"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -737,7 +737,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-150" aria-controls="code-preview-source-group-154"
> >
Source Source
<svg <svg
@ -793,17 +793,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-151"> <div class="code-preview__source-group" id="code-preview-source-group-155">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-518"><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 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><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> <pre><code class="language-html" id="code-block-530"><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 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><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>
</code><sl-copy-button class="copy-code-button" from="code-block-518"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-530"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-519"><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> <pre><code class="language-jsx" id="code-block-531"><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> <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">SlIconButton</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 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 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><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">SlIconButton</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 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 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><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-519"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-531"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -812,7 +812,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-151" aria-controls="code-preview-source-group-155"
> >
Source Source
<svg <svg
@ -873,16 +873,16 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-152"> <div class="code-preview__source-group" id="code-preview-source-group-156">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-520"><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>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-532"><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>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 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> <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>
<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>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-520"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-532"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-521"><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> <pre><code class="language-jsx" id="code-block-533"><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">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">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> <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>
@ -890,7 +890,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIconButton</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 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 plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIconButton</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 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 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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-521"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-533"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -899,7 +899,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-152" aria-controls="code-preview-source-group-156"
> >
Source Source
<svg <svg
@ -955,17 +955,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-153"> <div class="code-preview__source-group" id="code-preview-source-group-157">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-522"><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 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-icon-button</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-534"><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 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-icon-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-522"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-534"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-523"><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> <pre><code class="language-jsx" id="code-block-535"><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> <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">SlIconButton</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 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 attr-name">disabled</span> <span class="token punctuation">/&gt;</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">SlIconButton</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 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 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-523"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-535"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -974,7 +974,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-153" aria-controls="code-preview-source-group-157"
> >
Source Source
<svg <svg
@ -1043,7 +1043,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-524"><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/icon-button/icon-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-524"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-536"><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/icon-button/icon-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-536"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1058,17 +1058,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-525"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-525"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-537"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-537"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-526"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-526"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-538"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-538"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-527"><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></code><sl-copy-button class="copy-code-button" from="code-block-527"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-539"><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></code><sl-copy-button class="copy-code-button" from="code-block-539"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

76
components/icon/index.html
View File

@ -503,8 +503,8 @@
All available icons in the <code>default</code> icon library are shown below. Click or tap on any icon to All available icons in the <code>default</code> icon library are shown below. Click or tap on any icon to
copy its name, then you can use it in your HTML like this. copy its name, then you can use it in your HTML like this.
</p> </p>
<pre><code class="language-html" id="code-block-528"><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>icon-name-here<span class="token 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> <pre><code class="language-html" id="code-block-540"><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>icon-name-here<span class="token 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>
</code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-540"></sl-copy-button></pre>
<div class="icon-search"> <div class="icon-search">
<div class="icon-search-controls"> <div class="icon-search-controls">
<sl-input placeholder="Search Icons" clearable=""> <sl-input placeholder="Search Icons" clearable="">
@ -560,9 +560,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-154"> <div class="code-preview__source-group" id="code-preview-source-group-158">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-529"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> #4a90e2<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-541"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> #4a90e2<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-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>exclamation-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-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>exclamation-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-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>archive<span class="token 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>archive<span class="token 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>battery-charging<span class="token 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>battery-charging<span class="token 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>
@ -586,11 +586,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>star<span class="token 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>star<span class="token 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>trash<span class="token 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>trash<span class="token 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>div</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-529"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-541"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-530"><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-542"><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> <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"> <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">
@ -620,7 +620,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 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 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><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-530"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-542"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -629,7 +629,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-154" aria-controls="code-preview-source-group-158"
> >
Source Source
<svg <svg
@ -703,9 +703,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-155"> <div class="code-preview__source-group" id="code-preview-source-group-159">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-531"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 32px<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-543"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 32px<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-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>exclamation-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-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>exclamation-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-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>archive<span class="token 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>archive<span class="token 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>battery-charging<span class="token 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>battery-charging<span class="token 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>
@ -723,7 +723,7 @@
<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>star<span class="token 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>star<span class="token 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>trash<span class="token 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>trash<span class="token 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>div</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-531"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-543"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -732,7 +732,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-155" aria-controls="code-preview-source-group-159"
> >
Source Source
<svg <svg
@ -778,17 +778,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-156"> <div class="code-preview__source-group" id="code-preview-source-group-160">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-532"><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>star-fill<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>Add to favorites<span class="token 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> <pre><code class="language-html" id="code-block-544"><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>star-fill<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>Add to favorites<span class="token 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>
</code><sl-copy-button class="copy-code-button" from="code-block-532"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-544"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-533"><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-545"><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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</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>star-fill<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>Add to favorites<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</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">SlIcon</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>star-fill<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>Add to favorites<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-533"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-545"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -797,7 +797,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-156" aria-controls="code-preview-source-group-160"
> >
Source Source
<svg <svg
@ -917,9 +917,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-157"> <div class="code-preview__source-group" id="code-preview-source-group-161">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-534"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 24px<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-546"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 24px<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-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>passkey<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>passkey<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>docs<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>docs<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>social-github<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>social-github<span class="token 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>
@ -949,7 +949,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>sol<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>sol<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>usdc<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sonr<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>usdc<span class="token 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>div</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-534"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-546"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -958,7 +958,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-157" aria-controls="code-preview-source-group-161"
> >
Source Source
<svg <svg
@ -1034,9 +1034,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-158"> <div class="code-preview__source-group" id="code-preview-source-group-162">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-535"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 24px<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-547"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> 24px<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-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>SNR<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>SNR<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>BTC<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>BTC<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>ETH<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>ETH<span class="token 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>
@ -1059,7 +1059,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>SOL<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>SOL<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>STARZ<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crypto<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>STARZ<span class="token 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>div</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-535"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-547"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1068,7 +1068,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-158" aria-controls="code-preview-source-group-162"
> >
Source Source
<svg <svg
@ -1171,9 +1171,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-159"> <div class="code-preview__source-group" id="code-preview-source-group-163">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-536"><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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> <pre><code class="language-html" id="code-block-548"><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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'fa'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'fa'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
@ -1210,7 +1210,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<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>fab-opera<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<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>fab-opera<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<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>fab-microsoft<span class="token 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">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<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>fab-microsoft<span class="token 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>div</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-536"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-548"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1219,7 +1219,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-159" aria-controls="code-preview-source-group-163"
> >
Source Source
<svg <svg
@ -1270,14 +1270,14 @@
provide all of the icons that are required by components. You can reference provide all of the icons that are required by components. You can reference
<code>src/components/library.system.ts</code> for a complete list of system icons used by Nebula. <code>src/components/library.system.ts</code> for a complete list of system icons used by Nebula.
</p> </p>
<pre><code class="language-html" id="code-block-537"><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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> <pre><code class="language-html" id="code-block-549"><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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'system'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'system'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function-variable function">resolver</span><span class="token operator">:</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/path/to/custom/icons/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.svg</span><span class="token template-punctuation string">`</span></span> <span class="token function-variable function">resolver</span><span class="token operator">:</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/path/to/custom/icons/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.svg</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 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></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-537"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-549"></sl-copy-button></pre>
<!-- Supporting scripts and styles for the search utility --> <!-- Supporting scripts and styles for the search utility -->
<script> <script>
function wrapWithTooltip(item) { function wrapWithTooltip(item) {
@ -1466,8 +1466,8 @@
} }
} }
</style> </style>
<pre><code id="code-block-538"> <pre><code id="code-block-550">
</code><sl-copy-button class="copy-code-button" from="code-block-538"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-550"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading"> <h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a> Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -1496,7 +1496,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-539"><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/icon/icon.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-539"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-551"><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/icon/icon.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-551"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1511,17 +1511,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-540"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-540"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-552"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-552"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-541"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-541"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-553"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-553"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-542"><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></code><sl-copy-button class="copy-code-button" from="code-block-542"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-554"><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></code><sl-copy-button class="copy-code-button" from="code-block-554"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

24
components/include/index.html
View File

@ -482,17 +482,17 @@
</div> </div>
</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-185">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-608"><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-592"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-609"><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> <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-593"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -501,7 +501,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-179" aria-controls="code-preview-source-group-185"
> >
Source Source
<svg <svg
@ -558,7 +558,7 @@
<code>event.detail.status</code> will contain the resulting HTTP status code of the request, e.g. 404 (not <code>event.detail.status</code> will contain the resulting HTTP status code of the request, e.g. 404 (not
found). found).
</p> </p>
<pre><code class="language-html" id="code-block-594"><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-610"><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 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> <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 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> </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-594"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading"> <h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a> Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -604,7 +604,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-595"><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-595"></sl-copy-button></pre> <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/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-611"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -619,17 +619,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-596"><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-596"></sl-copy-button></pre> <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/include/include.js'</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-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-597"><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-597"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-613"><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-613"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-598"><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-598"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-614"><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-614"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -497,9 +497,9 @@
</div> </div>
</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-179">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-592"><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 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 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-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-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-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-menu</span><span class="token punctuation">&gt;</span></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-592"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-600"><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-593"><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> 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> 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">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">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><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-600"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -555,7 +555,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-180" aria-controls="code-preview-source-group-179"
> >
Source Source
<svg <svg
@ -634,9 +634,9 @@
</div> </div>
</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-180">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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 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-594"><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-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> <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 Home
@ -655,11 +655,11 @@
Settings 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-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-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-602"><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-595"><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> 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> 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> 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">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><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-602"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -697,7 +697,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-181" aria-controls="code-preview-source-group-180"
> >
Source Source
<svg <svg
@ -757,18 +757,18 @@
</div> </div>
</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-181">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-603"><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-596"><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 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 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-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> <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-603"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-604"><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-597"><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">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> <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">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><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-604"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -787,7 +787,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-182" aria-controls="code-preview-source-group-181"
> >
Source Source
<svg <svg
@ -850,18 +850,18 @@
</div> </div>
</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-182">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-598"><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 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 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-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> <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-598"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-599"><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">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> <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">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><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-606"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -880,7 +880,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-183" aria-controls="code-preview-source-group-182"
> >
Source Source
<svg <svg
@ -947,18 +947,18 @@
</div> </div>
</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-183">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-600"><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 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 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-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> <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-607"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-601"><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">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> <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">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><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-608"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -979,7 +979,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-184" aria-controls="code-preview-source-group-183"
> >
Source Source
<svg <svg
@ -1065,9 +1065,9 @@
</div> </div>
</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-184">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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 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-602"><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-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-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> <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 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> </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-609"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-603"><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">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> <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><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>
<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-610"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1126,7 +1126,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-185" aria-controls="code-preview-source-group-184"
> >
Source Source
<svg <svg
@ -1195,7 +1195,7 @@
> >
using a script tag: using a script tag:
</p> </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-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-611"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-604"><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-604"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1210,17 +1210,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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-item/menu-item.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-605"><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-605"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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-item/menu-item.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-606"><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-606"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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-614"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-607"><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-607"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

40
components/option/index.html
View File

@ -490,18 +490,18 @@
</div> </div>
</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-224">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-721"><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-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-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-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> <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-639"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-722"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</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-722"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -520,7 +520,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-192" aria-controls="code-preview-source-group-224"
> >
Source Source
<svg <svg
@ -583,18 +583,18 @@
</div> </div>
</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-225">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-723"><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-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-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-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> <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-641"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-724"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</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-724"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -615,7 +615,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-193" aria-controls="code-preview-source-group-225"
> >
Source Source
<svg <svg
@ -691,9 +691,9 @@
</div> </div>
</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-226">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<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> <pre><code class="language-html" id="code-block-725"><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-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> <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 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-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-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> <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-643"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -721,7 +721,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-194" aria-controls="code-preview-source-group-226"
> >
Source Source
<svg <svg
@ -782,7 +782,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<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> <pre><code class="language-html" id="code-block-726"><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-726"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -797,17 +797,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<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> <pre><code class="language-js" id="code-block-727"><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-727"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<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> <pre><code class="language-js" id="code-block-728"><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-728"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<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> <pre><code class="language-js" id="code-block-729"><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-729"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

196
components/popup/index.html
View File

@ -617,9 +617,9 @@
</div> </div>
</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-192">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-overview<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>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>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>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> <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 property">margin-top</span><span class="token punctuation">:</span> 1rem<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> </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-648"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-640"><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> 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> 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> <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><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>
<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-640"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -837,7 +837,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-195" aria-controls="code-preview-source-group-192"
> >
Source Source
<svg <svg
@ -943,9 +943,9 @@
</div> </div>
</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-193">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-active<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>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>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>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> <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> 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> </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-641"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-642"><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> 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> <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><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>
<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-642"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1034,7 +1034,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-196" aria-controls="code-preview-source-group-193"
> >
Source Source
<svg <svg
@ -1116,9 +1116,9 @@
</div> </div>
</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-194">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-643"><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>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> <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 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 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></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-643"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-644"><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"> <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 { #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><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>
<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-644"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1185,7 +1185,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-197" aria-controls="code-preview-source-group-194"
> >
Source Source
<svg <svg
@ -1301,9 +1301,9 @@
</div> </div>
</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-195">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-placement<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-645"><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>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>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> <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> 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> </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-645"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-646"><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> 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> 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> <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><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>
<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-646"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1423,7 +1423,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-198" aria-controls="code-preview-source-group-195"
> >
Source Source
<svg <svg
@ -1520,9 +1520,9 @@
</div> </div>
</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-196">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-distance<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-647"><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>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>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> <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> 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> </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-647"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-648"><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> 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> 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><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>
<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-648"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1622,7 +1622,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-199" aria-controls="code-preview-source-group-196"
> >
Source Source
<svg <svg
@ -1719,9 +1719,9 @@
</div> </div>
</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-197">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-skidding<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-649"><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>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>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> <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> 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> </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-649"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-650"><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> 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> 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><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>
<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-650"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1821,7 +1821,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-200" aria-controls="code-preview-source-group-197"
> >
Source Source
<svg <svg
@ -1968,9 +1968,9 @@
</div> </div>
</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-198">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-660"><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-651"><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>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>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> <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> 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></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> <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-660"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-661"><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-652"><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> 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> 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> <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><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>
<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-661"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2166,7 +2166,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-201" aria-controls="code-preview-source-group-198"
> >
Source Source
<svg <svg
@ -2274,9 +2274,9 @@
</div> </div>
</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-199">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-662"><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-653"><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>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>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> <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> 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> </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-662"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-663"><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-654"><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> 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> 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> <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><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>
<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-663"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2385,7 +2385,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-202" aria-controls="code-preview-source-group-199"
> >
Source Source
<svg <svg
@ -2519,9 +2519,9 @@
</div> </div>
</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-200">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-664"><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-655"><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>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>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> <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> 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> </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-664"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-665"><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-656"><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> 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> <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><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>
<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-665"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2634,7 +2634,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-203" aria-controls="code-preview-source-group-200"
> >
Source Source
<svg <svg
@ -2739,9 +2739,9 @@
</div> </div>
</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-201">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-666"><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-657"><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>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>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> <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> 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> </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-666"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-667"><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-658"><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> 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> <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><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>
<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-667"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2848,7 +2848,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-204" aria-controls="code-preview-source-group-201"
> >
Source Source
<svg <svg
@ -2957,9 +2957,9 @@
</div> </div>
</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-202">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-659"><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>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>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> <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 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 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></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-668"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-660"><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"> <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 { .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><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>
<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-669"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -3046,7 +3046,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-205" aria-controls="code-preview-source-group-202"
> >
Source Source
<svg <svg
@ -3147,9 +3147,9 @@
</div> </div>
</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-203">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-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-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>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>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> <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> 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> </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-670"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <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-662"><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> 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> <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><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>
<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-671"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -3252,7 +3252,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-206" aria-controls="code-preview-source-group-203"
> >
Source Source
<svg <svg
@ -3372,9 +3372,9 @@
</div> </div>
</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-204">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-663"><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>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>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> <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> 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> </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-672"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <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-664"><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> 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> <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><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>
<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-673"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -3495,7 +3495,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-207" aria-controls="code-preview-source-group-204"
> >
Source Source
<svg <svg
@ -3608,9 +3608,9 @@
</div> </div>
</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-205">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-665"><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>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>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> <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> 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> 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> </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-674"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <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-666"><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> 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> 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> <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><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>
<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-675"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -3747,7 +3747,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-208" aria-controls="code-preview-source-group-205"
> >
Source Source
<svg <svg
@ -3805,13 +3805,13 @@
> >
object as shown below. object as shown below.
</p> </p>
<pre><code class="language-ts" id="code-block-676"><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-667"><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 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 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 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><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-676"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
<p> <p>
This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to
properly view it. properly view it.
@ -3904,9 +3904,9 @@
</div> </div>
</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-206">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-677"><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-668"><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>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>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> <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 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 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></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-677"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-678"><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-669"><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> 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> <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><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>
<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-678"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -4074,7 +4074,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-209" aria-controls="code-preview-source-group-206"
> >
Source Source
<svg <svg
@ -4120,14 +4120,14 @@
Sometimes the <code>getBoundingClientRects</code> might be derived from a real element. In this case provide 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. the anchor element as context to ensure clipping and position updates for the popup work well.
</p> </p>
<pre><code class="language-ts" id="code-block-679"><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-670"><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 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 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 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><span class="token punctuation">,</span>
contextElement<span class="token operator">:</span> anchorElement contextElement<span class="token operator">:</span> anchorElement
<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-670"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading"> <h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a> Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -4156,7 +4156,7 @@
> >
using a script tag: using a script tag:
</p> </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/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-680"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-671"><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-671"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -4171,17 +4171,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/popup/popup.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-672"><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-672"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/popup/popup.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-673"><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-673"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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-683"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-674"><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-674"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -478,17 +478,17 @@
</div> </div>
</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-212">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-689"><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> </code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-690"><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> <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-690"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -497,7 +497,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-210" aria-controls="code-preview-source-group-212"
> >
Source Source
<svg <svg
@ -557,17 +557,17 @@
</div> </div>
</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-213">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-691"><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> </code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-692"><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> <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-692"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -576,7 +576,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-211" aria-controls="code-preview-source-group-213"
> >
Source Source
<svg <svg
@ -632,17 +632,17 @@
</div> </div>
</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-214">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-693"><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> </code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-694"><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> <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-694"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -651,7 +651,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-212" aria-controls="code-preview-source-group-214"
> >
Source Source
<svg <svg
@ -732,9 +732,9 @@
</div> </div>
</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-215">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-695"><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> <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> 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 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></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-695"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-696"><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> 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> 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> <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><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>
<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-696"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -802,7 +802,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-213" aria-controls="code-preview-source-group-215"
> >
Source Source
<svg <svg
@ -862,17 +862,17 @@
</div> </div>
</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-216">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-697"><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> </code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-698"><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> <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-698"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -881,7 +881,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-214" aria-controls="code-preview-source-group-216"
> >
Source Source
<svg <svg
@ -950,7 +950,7 @@
> >
using a script tag: using a script tag:
</p> </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-699"><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-699"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -965,17 +965,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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-700"><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-700"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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-701"><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-701"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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-702"><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-702"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -487,17 +487,17 @@
</div> </div>
</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-227">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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> <pre><code class="language-html" id="code-block-730"><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-698"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-730"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-731"><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> <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-699"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-731"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -506,7 +506,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-215" aria-controls="code-preview-source-group-227"
> >
Source Source
<svg <svg
@ -563,17 +563,17 @@
</div> </div>
</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-228">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-732"><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-700"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-732"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-733"><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> <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-701"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-733"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -582,7 +582,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-216" aria-controls="code-preview-source-group-228"
> >
Source Source
<svg <svg
@ -644,17 +644,17 @@
</div> </div>
</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-229">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-734"><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-702"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-734"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-735"><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> <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-703"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-735"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -663,7 +663,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-217" aria-controls="code-preview-source-group-229"
> >
Source Source
<svg <svg
@ -720,20 +720,20 @@
</div> </div>
</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-230">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-progress-ring</span> <pre><code class="language-html" id="code-block-736"><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">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 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; --track-color: pink;
--indicator-color: deeppink; --indicator-color: deeppink;
<span class="token punctuation">"</span></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> <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-704"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-736"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-737"><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 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> <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">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-705"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -753,7 +753,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-218" aria-controls="code-preview-source-group-230"
> >
Source Source
<svg <svg
@ -810,17 +810,17 @@
</div> </div>
</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-231">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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> <pre><code class="language-html" id="code-block-738"><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-706"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-738"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-739"><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> <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-707"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-739"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -829,7 +829,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-219" aria-controls="code-preview-source-group-231"
> >
Source Source
<svg <svg
@ -912,9 +912,9 @@
</div> </div>
</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-232">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-708"><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-740"><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> <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> 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 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></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> </code><sl-copy-button class="copy-code-button" from="code-block-740"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-709"><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-741"><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> 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> 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> <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><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>
<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-709"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -984,7 +984,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-220" aria-controls="code-preview-source-group-232"
> >
Source Source
<svg <svg
@ -1053,7 +1053,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<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/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-710"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-742"><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-742"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1068,17 +1068,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<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/progress-ring/progress-ring.js'</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-743"><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-743"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-712"><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-712"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-744"><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-744"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" 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></code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-745"><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-745"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -526,9 +526,9 @@
</div> </div>
</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-207">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-675"><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>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> <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 property">margin-top</span><span class="token punctuation">:</span> 1rem<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> </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-714"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> <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-676"><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> 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> <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><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>
<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-715"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -598,7 +598,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-221" aria-controls="code-preview-source-group-207"
> >
Source Source
<svg <svg
@ -658,17 +658,17 @@
</div> </div>
</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-208">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-677"><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> </code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-678"><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> <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-717"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -677,7 +677,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-222" aria-controls="code-preview-source-group-208"
> >
Source Source
<svg <svg
@ -731,17 +731,17 @@
</div> </div>
</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-209">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-679"><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> </code><sl-copy-button class="copy-code-button" from="code-block-679"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-680"><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> <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-719"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-680"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -750,7 +750,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-223" aria-controls="code-preview-source-group-209"
> >
Source Source
<svg <svg
@ -804,17 +804,17 @@
</div> </div>
</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-210">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-681"><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> </code><sl-copy-button class="copy-code-button" from="code-block-681"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-682"><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> <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-721"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-682"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -823,7 +823,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-224" aria-controls="code-preview-source-group-210"
> >
Source Source
<svg <svg
@ -903,9 +903,9 @@
</div> </div>
</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-211">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-683"><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>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>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> <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 property">gap</span><span class="token punctuation">:</span> 1rem<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> </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-722"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-684"><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"> <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 { .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><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>
<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-684"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -956,7 +956,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-225" aria-controls="code-preview-source-group-211"
> >
Source Source
<svg <svg
@ -1025,7 +1025,7 @@
> >
using a script tag: using a script tag:
</p> </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/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> <pre><code class="language-html" id="code-block-685"><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-685"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1040,17 +1040,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/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> <pre><code class="language-js" id="code-block-686"><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-686"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/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> <pre><code class="language-js" id="code-block-687"><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-687"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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> <pre><code class="language-js" id="code-block-688"><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-688"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

92
components/radio-button/index.html
View File

@ -499,18 +499,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-226"> <div class="code-preview__source-group" id="code-preview-source-group-217">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-728"><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-703"><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-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>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>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-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> <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-728"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-729"><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-704"><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">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> <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">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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-729"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -529,7 +529,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-226" aria-controls="code-preview-source-group-217"
> >
Source Source
<svg <svg
@ -595,18 +595,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-227"> <div class="code-preview__source-group" id="code-preview-source-group-218">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-730"><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-705"><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-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>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>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-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> <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-730"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-731"><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-706"><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">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> <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>
@ -616,7 +616,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-731"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -625,7 +625,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-227" aria-controls="code-preview-source-group-218"
> >
Source Source
<svg <svg
@ -685,18 +685,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-228"> <div class="code-preview__source-group" id="code-preview-source-group-219">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-732"><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-707"><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-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>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 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-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 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-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-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> <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-732"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-707"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-733"><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-708"><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">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> <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>
@ -708,7 +708,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-733"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -717,7 +717,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-228" aria-controls="code-preview-source-group-219"
> >
Source Source
<svg <svg
@ -791,9 +791,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-229"> <div class="code-preview__source-group" id="code-preview-source-group-220">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-734"><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">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-709"><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">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-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>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>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-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>
@ -814,11 +814,11 @@
<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>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-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> <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-734"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-735"><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-710"><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">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> <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>
@ -844,7 +844,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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-735"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -853,7 +853,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-229" aria-controls="code-preview-source-group-220"
> >
Source Source
<svg <svg
@ -929,9 +929,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-230"> <div class="code-preview__source-group" id="code-preview-source-group-221">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-736"><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">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-711"><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">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-button</span> <span class="token attr-name">pill</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">pill</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">pill</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">pill</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">pill</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-button</span> <span class="token attr-name">pill</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>
@ -952,11 +952,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">pill</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">pill</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">pill</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-button</span> <span class="token attr-name">pill</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> <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-736"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-737"><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-712"><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">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> <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>
@ -982,7 +982,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">pill</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">SlRadioButton</span></span> <span class="token attr-name">pill</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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -991,7 +991,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-230" aria-controls="code-preview-source-group-221"
> >
Source Source
<svg <svg
@ -1066,9 +1066,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-231"> <div class="code-preview__source-group" id="code-preview-source-group-222">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-738"><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-713"><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-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> <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>
<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>archive<span class="token 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">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>archive<span class="token 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>
Option 1 Option 1
@ -1085,11 +1085,11 @@
Option 3 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-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> <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-738"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-739"><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-714"><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> 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> 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">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>
@ -1112,7 +1112,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 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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-739"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1121,7 +1121,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-231" aria-controls="code-preview-source-group-222"
> >
Source Source
<svg <svg
@ -1200,9 +1200,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-232"> <div class="code-preview__source-group" id="code-preview-source-group-223">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-740"><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>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-715"><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>neutral<span class="token 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>angry<span class="token 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>angry<span class="token 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>emoji-angry<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>Angry<span class="token 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>emoji-angry<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>Angry<span class="token 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-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 punctuation">&gt;</span></span>
@ -1223,11 +1223,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>emoji-laughing<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>Laughing<span class="token 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>emoji-laughing<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>Laughing<span class="token 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-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 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> <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-740"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-741"><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-716"><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> 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> 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">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>
@ -1254,7 +1254,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 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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1263,7 +1263,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-232" aria-controls="code-preview-source-group-223"
> >
Source Source
<svg <svg
@ -1332,7 +1332,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-742"><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-button/radio-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-742"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-717"><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-button/radio-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-717"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1347,17 +1347,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-743"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-743"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-718"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-744"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-744"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-719"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-719"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-745"><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></code><sl-copy-button class="copy-code-button" from="code-block-745"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-720"><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></code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

52
components/radio/index.html
View File

@ -484,18 +484,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-249"> <div class="code-preview__source-group" id="code-preview-source-group-239">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-788"><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>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>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</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> <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-788"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-789"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-789"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -514,7 +514,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-249" aria-controls="code-preview-source-group-239"
> >
Source Source
<svg <svg
@ -587,18 +587,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-250"> <div class="code-preview__source-group" id="code-preview-source-group-240">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-790"><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-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>
<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>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>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</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> <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-790"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-791"><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-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>
<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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-791"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -617,7 +617,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-250" aria-controls="code-preview-source-group-240"
> >
Source Source
<svg <svg
@ -677,18 +677,18 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-251"> <div class="code-preview__source-group" id="code-preview-source-group-241">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-792"><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-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>
<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>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>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</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> <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-792"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-793"><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-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>
<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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-793"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -709,7 +709,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-251" aria-controls="code-preview-source-group-241"
> >
Source Source
<svg <svg
@ -756,7 +756,7 @@
Add the <code>size</code> attribute to the <a href="/components/radio-group">Radio Group</a> to change the Add the <code>size</code> attribute to the <a href="/components/radio-group">Radio Group</a> to change the
radios’ size. radios’ size.
</p> </p>
<pre><code class="language-html" id="code-block-794"><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-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>
<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>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>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> <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>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</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> <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-794"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-795"><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-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>
<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 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"> <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 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><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-795"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-771"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading"> <h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a> Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -834,7 +834,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-796"><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-796"></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/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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -849,17 +849,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-797"><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-797"></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/radio.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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-798"><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-798"></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/radio.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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-799"><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-799"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

128
components/range/index.html
View File

@ -493,17 +493,17 @@
</div> </div>
</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-278">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-range</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-range</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-867"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-range</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-867"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-868"><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">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">SlRange</span></span> <span class="token punctuation">/&gt;</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">SlRange</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-765"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -512,7 +512,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-239" aria-controls="code-preview-source-group-278"
> >
Source Source
<svg <svg
@ -579,17 +579,17 @@
</div> </div>
</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-279">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-range</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>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token 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-range</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-869"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</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>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token 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-range</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-869"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-870"><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">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">SlRange</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>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</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">SlRange</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>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</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-767"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -598,7 +598,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-240" aria-controls="code-preview-source-group-279"
> >
Source Source
<svg <svg
@ -662,17 +662,17 @@
</div> </div>
</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-280">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-range</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>Volume<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>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token 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-range</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-871"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</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>Volume<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>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token 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-range</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-871"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-872"><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">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">SlRange</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>Volume<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>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</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">SlRange</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>Volume<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>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</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-769"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-872"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -681,7 +681,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-241" aria-controls="code-preview-source-group-280"
> >
Source Source
<svg <svg
@ -741,17 +741,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-242"> <div class="code-preview__source-group" id="code-preview-source-group-281">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-770"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">min</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">max</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">step</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-range</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-873"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">min</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">max</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">step</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-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-873"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-771"><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> <pre><code class="language-jsx" id="code-block-874"><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">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">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">10</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</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">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">10</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</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-771"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-874"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -760,7 +760,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-242" aria-controls="code-preview-source-group-281"
> >
Source Source
<svg <svg
@ -816,17 +816,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-243"> <div class="code-preview__source-group" id="code-preview-source-group-282">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-772"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</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-range</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>sl-range</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-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-773"><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> <pre><code class="language-jsx" id="code-block-876"><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">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">SlRange</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</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">SlRange</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-773"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-876"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -835,7 +835,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-243" aria-controls="code-preview-source-group-282"
> >
Source Source
<svg <svg
@ -894,17 +894,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-244"> <div class="code-preview__source-group" id="code-preview-source-group-283">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-774"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">tooltip</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-range</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>sl-range</span> <span class="token attr-name">tooltip</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-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-877"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-775"><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> <pre><code class="language-jsx" id="code-block-878"><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">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">SlRange</span></span> <span class="token attr-name">tooltip</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 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">SlRange</span></span> <span class="token attr-name">tooltip</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 punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-775"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -913,7 +913,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-244" aria-controls="code-preview-source-group-283"
> >
Source Source
<svg <svg
@ -969,17 +969,17 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-245"> <div class="code-preview__source-group" id="code-preview-source-group-284">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-776"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">tooltip</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-range</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>sl-range</span> <span class="token attr-name">tooltip</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-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-776"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-777"><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> <pre><code class="language-jsx" id="code-block-880"><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">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">SlRange</span></span> <span class="token attr-name">tooltip</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> <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">SlRange</span></span> <span class="token attr-name">tooltip</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-777"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -988,7 +988,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-245" aria-controls="code-preview-source-group-284"
> >
Source Source
<svg <svg
@ -1052,19 +1052,19 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-246"> <div class="code-preview__source-group" id="code-preview-source-group-285">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-778"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <pre><code class="language-html" id="code-block-881"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</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 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-active: var(--sl-color-primary-600); --track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100); --track-color-inactive: var(--sl-color-primary-100);
<span class="token punctuation">"</span></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-range</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-778"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-779"><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> <pre><code class="language-jsx" id="code-block-882"><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">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 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">SlRange</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRange</span></span>
@ -1074,7 +1074,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-779"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1083,7 +1083,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-246" aria-controls="code-preview-source-group-285"
> >
Source Source
<svg <svg
@ -1150,9 +1150,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-247"> <div class="code-preview__source-group" id="code-preview-source-group-286">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-780"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <pre><code class="language-html" id="code-block-883"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span>
<span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-100<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-100<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>100<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>100<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 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>
@ -1161,11 +1161,11 @@
--track-active-offset: 50%; --track-active-offset: 50%;
<span class="token punctuation">"</span></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-range</span><span class="token punctuation">&gt;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-range</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-780"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-883"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-781"><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> <pre><code class="language-jsx" id="code-block-884"><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">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 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">SlRange</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRange</span></span>
@ -1178,7 +1178,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-781"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-884"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1187,7 +1187,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-247" aria-controls="code-preview-source-group-286"
> >
Source Source
<svg <svg
@ -1256,22 +1256,22 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-248"> <div class="code-preview__source-group" id="code-preview-source-group-287">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-782"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range-with-custom-formatter<span class="token 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-range</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-885"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-range</span> <span class="token attr-name">min</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">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range-with-custom-formatter<span class="token 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-range</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 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> range <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">'.range-with-custom-formatter'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> range <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">'.range-with-custom-formatter'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
range<span class="token punctuation">.</span><span class="token function-variable function">tooltipFormatter</span> <span class="token operator">=</span> <span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </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> range<span class="token punctuation">.</span><span class="token function-variable function">tooltipFormatter</span> <span class="token operator">=</span> <span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </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></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></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-782"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-885"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-783"><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> <pre><code class="language-jsx" id="code-block-886"><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">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">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">tooltipFormatter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </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> <span class="token punctuation">/&gt;</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">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><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">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">tooltipFormatter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </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> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-783"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-886"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1280,7 +1280,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-248" aria-controls="code-preview-source-group-287"
> >
Source Source
<svg <svg
@ -1349,7 +1349,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-784"><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/range/range.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-784"></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/range/range.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>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1364,17 +1364,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-785"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-785"></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/range/range.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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-786"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-786"></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/range/range.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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-787"><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></code><sl-copy-button class="copy-code-button" from="code-block-787"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-890"><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></code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

128
components/rating/index.html
View File

@ -485,17 +485,17 @@
</div> </div>
</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-242">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-776"><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> </code><sl-copy-button class="copy-code-button" from="code-block-776"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-777"><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> <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-777"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -504,7 +504,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-252" aria-controls="code-preview-source-group-242"
> >
Source Source
<svg <svg
@ -564,17 +564,17 @@
</div> </div>
</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-243">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-778"><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> </code><sl-copy-button class="copy-code-button" from="code-block-778"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-779"><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> <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-779"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -583,7 +583,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-253" aria-controls="code-preview-source-group-243"
> >
Source Source
<svg <svg
@ -639,17 +639,17 @@
</div> </div>
</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-244">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-780"><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> </code><sl-copy-button class="copy-code-button" from="code-block-780"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-781"><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> <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-781"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -658,7 +658,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-254" aria-controls="code-preview-source-group-244"
> >
Source Source
<svg <svg
@ -714,17 +714,17 @@
</div> </div>
</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-245">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-782"><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> </code><sl-copy-button class="copy-code-button" from="code-block-782"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-783"><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> <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-783"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -733,7 +733,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-255" aria-controls="code-preview-source-group-245"
> >
Source Source
<svg <svg
@ -789,17 +789,17 @@
</div> </div>
</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-246">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-784"><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> </code><sl-copy-button class="copy-code-button" from="code-block-784"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-785"><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> <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-785"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -808,7 +808,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-256" aria-controls="code-preview-source-group-246"
> >
Source Source
<svg <svg
@ -864,17 +864,17 @@
</div> </div>
</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-247">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-786"><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> </code><sl-copy-button class="copy-code-button" from="code-block-786"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-787"><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> <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-787"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -883,7 +883,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-257" aria-controls="code-preview-source-group-247"
> >
Source Source
<svg <svg
@ -939,17 +939,17 @@
</div> </div>
</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-248">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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> <pre><code class="language-html" id="code-block-788"><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> </code><sl-copy-button class="copy-code-button" from="code-block-788"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-789"><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> <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-789"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -958,7 +958,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-258" aria-controls="code-preview-source-group-248"
> >
Source Source
<svg <svg
@ -1060,9 +1060,9 @@
</div> </div>
</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-249">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-790"><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>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>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> <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 property">display</span><span class="token punctuation">:</span> none<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> </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-790"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-791"><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">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> <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><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>
<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-791"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1156,7 +1156,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-259" aria-controls="code-preview-source-group-249"
> >
Source Source
<svg <svg
@ -1219,19 +1219,19 @@
</div> </div>
</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-250">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-792"><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 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> <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> 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> </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-792"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-793"><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 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> <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 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">/&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-817"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-793"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1249,7 +1249,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-260" aria-controls="code-preview-source-group-250"
> >
Source Source
<svg <svg
@ -1322,9 +1322,9 @@
</div> </div>
</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-251">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-794"><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 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> <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 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 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></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-794"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-795"><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">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> <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 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> <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-795"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1355,7 +1355,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-261" aria-controls="code-preview-source-group-251"
> >
Source Source
<svg <svg
@ -1424,7 +1424,7 @@
> >
using a script tag: using a script tag:
</p> </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-796"><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-796"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1439,17 +1439,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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-797"><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-797"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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-798"><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-798"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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-799"><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-799"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -486,18 +486,18 @@
</div> </div>
</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-252">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-824"><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> <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-824"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-800"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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> <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-825"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-801"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -506,7 +506,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-262" aria-controls="code-preview-source-group-252"
> >
Source Source
<svg <svg
@ -609,9 +609,9 @@
</div> </div>
</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-253">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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>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>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> <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> 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> </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-826"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-827"><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> 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> <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-827"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-803"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -639,7 +639,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-263" aria-controls="code-preview-source-group-253"
> >
Source Source
<svg <svg
@ -700,16 +700,16 @@
</div> </div>
</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-254">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-828"><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>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> <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-828"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-804"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-829"><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 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"> <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 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><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-829"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -729,7 +729,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-264" aria-controls="code-preview-source-group-254"
> >
Source Source
<svg <svg
@ -789,18 +789,18 @@
</div> </div>
</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-255">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-830">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> 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> 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> 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> 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-830"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-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 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"> <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"> 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><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-831"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -824,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-265" aria-controls="code-preview-source-group-255"
> >
Source Source
<svg <svg
@ -893,7 +893,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
> >
using a script tag: using a script tag:
</p> </p>
<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/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-832"></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>
<sl-tab-panel name="import"> <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: using a JavaScript import:
</p> </p>
<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/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-833"></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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-834"><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-834"></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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" 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></code><sl-copy-button class="copy-code-button" from="code-block-835"></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-panel>
</sl-tab-group> </sl-tab-group>

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

@ -527,9 +527,9 @@
</div> </div>
</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-256">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-812"><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>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>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> <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 property">padding</span><span class="token punctuation">:</span> 4rem 2rem<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> </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-836"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-812"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-813"><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"> <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 { .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>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><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-837"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-813"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -591,7 +591,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-266" aria-controls="code-preview-source-group-256"
> >
Source Source
<svg <svg
@ -660,7 +660,7 @@
> >
using a script tag: using a script tag:
</p> </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/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> <pre><code class="language-html" id="code-block-814"><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-814"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -675,17 +675,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/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> <pre><code class="language-js" id="code-block-815"><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-815"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/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> <pre><code class="language-js" id="code-block-816"><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-816"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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> <pre><code class="language-js" id="code-block-817"><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-817"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

184
components/select/index.html
View File

@ -497,9 +497,9 @@
</div> </div>
</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-257">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>sl-select</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-818"><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-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-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-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-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-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> <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-842"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-819"><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">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> <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">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><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> <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-819"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -533,7 +533,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-267" aria-controls="code-preview-source-group-257"
> >
Source Source
<svg <svg
@ -604,18 +604,18 @@
</div> </div>
</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-258">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-820"><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-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-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-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> <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-844"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-821"><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">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> <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">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><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> <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-821"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -634,7 +634,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-268" aria-controls="code-preview-source-group-258"
> >
Source Source
<svg <svg
@ -697,18 +697,18 @@
</div> </div>
</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-259">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-822"><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>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>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-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> <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-846"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-823"><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">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> <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">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><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> <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-823"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -727,7 +727,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-269" aria-controls="code-preview-source-group-259"
> >
Source Source
<svg <svg
@ -787,18 +787,18 @@
</div> </div>
</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-260">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-824"><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-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-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-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> <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-848"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-825"><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">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> <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">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><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> <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-825"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -817,7 +817,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-270" aria-controls="code-preview-source-group-260"
> >
Source Source
<svg <svg
@ -880,18 +880,18 @@
</div> </div>
</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-261">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-826"><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-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-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-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> <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-850"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-827"><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">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> <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">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><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> <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-827"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -910,7 +910,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-271" aria-controls="code-preview-source-group-261"
> >
Source Source
<svg <svg
@ -970,18 +970,18 @@
</div> </div>
</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-262">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-select</span> <span class="token attr-name">filled</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-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-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-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-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> <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-852"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-829"><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">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> <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">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><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> <span class="token punctuation">)</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-829"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1000,7 +1000,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-272" aria-controls="code-preview-source-group-262"
> >
Source Source
<svg <svg
@ -1058,18 +1058,18 @@
</div> </div>
</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-263">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-830"><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-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-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-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> <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-854"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-831"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1088,7 +1088,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-273" aria-controls="code-preview-source-group-263"
> >
Source Source
<svg <svg
@ -1148,18 +1148,18 @@
</div> </div>
</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-264">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <pre><code class="language-html" id="code-block-832"><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-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-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-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> <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-856"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-833"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1178,7 +1178,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-274" aria-controls="code-preview-source-group-264"
> >
Source Source
<svg <svg
@ -1245,9 +1245,9 @@
</div> </div>
</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-265">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-834"><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-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-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-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-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-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> <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-858"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-835"><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">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> <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">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><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> <span class="token punctuation">)</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-835"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1281,7 +1281,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-275" aria-controls="code-preview-source-group-265"
> >
Source Source
<svg <svg
@ -1357,19 +1357,19 @@
</div> </div>
</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-266">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-836"><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-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-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-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-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> <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-860"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-837"><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> 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">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">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><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> <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-837"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1389,7 +1389,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-276" aria-controls="code-preview-source-group-266"
> >
Source Source
<svg <svg
@ -1458,9 +1458,9 @@
</div> </div>
</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"> <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-select</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-838"><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>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-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-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-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-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> <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-862"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-839"><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">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> <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">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><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> <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-839"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1497,7 +1497,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-277" aria-controls="code-preview-source-group-267"
> >
Source Source
<svg <svg
@ -1574,9 +1574,9 @@
</div> </div>
</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"> <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-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-840"><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-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-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-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-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-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> <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-864"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-841"><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">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> <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 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><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-865"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1638,7 +1638,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-278" aria-controls="code-preview-source-group-268"
> >
Source Source
<svg <svg
@ -1702,18 +1702,18 @@
</div> </div>
</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"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <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 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-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-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-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> <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-866"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <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">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> <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">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><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-867"></sl-copy-button></pre> </span></code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1732,7 +1732,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-279" aria-controls="code-preview-source-group-269"
> >
Source Source
<svg <svg
@ -1807,9 +1807,9 @@
</div> </div>
</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"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <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">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-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-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-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-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-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> <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-868"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <pre><code class="language-jsx" id="code-block-845"><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> 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">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 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><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-869"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1870,7 +1870,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-280" aria-controls="code-preview-source-group-270"
> >
Source Source
<svg <svg
@ -1988,9 +1988,9 @@
</div> </div>
</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"> <div class="code-preview__source code-preview__source--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> <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">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">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">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> <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><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 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></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-870"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2036,7 +2036,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-281" aria-controls="code-preview-source-group-271"
> >
Source Source
<svg <svg
@ -2104,7 +2104,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<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> <pre><code class="language-html" id="code-block-847"><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-847"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -2119,17 +2119,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<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> <pre><code class="language-js" id="code-block-848"><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-848"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<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> <pre><code class="language-js" id="code-block-849"><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-849"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<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> <pre><code class="language-js" id="code-block-850"><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-850"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/skeleton/index.html
View File

@ -538,9 +538,9 @@
</div> </div>
</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-272">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-887"><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-851"><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>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>
<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 property">width</span><span class="token punctuation">:</span> 80%<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> </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-887"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-888"><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-852"><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"> <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 { .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>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><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-888"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -647,7 +647,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-286" aria-controls="code-preview-source-group-272"
> >
Source Source
<svg <svg
@ -729,9 +729,9 @@
</div> </div>
</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-273">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-889"><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-853"><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> <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 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 property">margin-top</span><span class="token punctuation">:</span> 1rem<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> </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-889"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" 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> <pre><code class="language-jsx" id="code-block-854"><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"> <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 { .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>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><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-890"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -790,7 +790,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-287" aria-controls="code-preview-source-group-273"
> >
Source Source
<svg <svg
@ -870,9 +870,9 @@
</div> </div>
</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-274">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-891"><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-855"><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> <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 property">width</span><span class="token punctuation">:</span> 50%<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> </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-891"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-892"><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-856"><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"> <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 { .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>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><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-892"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -943,7 +943,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-288" aria-controls="code-preview-source-group-274"
> >
Source Source
<svg <svg
@ -1020,9 +1020,9 @@
</div> </div>
</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-275">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-893"><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-857"><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> <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 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 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></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-893"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-894"><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-858"><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"> <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 { .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>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><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-894"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1087,7 +1087,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-289" aria-controls="code-preview-source-group-275"
> >
Source Source
<svg <svg
@ -1204,9 +1204,9 @@
</div> </div>
</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-276">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-895"><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-859"><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>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>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> <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 property">margin-right</span><span class="token punctuation">:</span> 0.5rem<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> </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-895"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-896"><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-860"><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"> <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 { .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>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><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-896"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1324,7 +1324,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-290" aria-controls="code-preview-source-group-276"
> >
Source Source
<svg <svg
@ -1383,14 +1383,14 @@
</div> </div>
</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-277">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-897"><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> <pre><code class="language-html" id="code-block-861"><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-897"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-898"><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-862"><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"> <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 { .skeleton-avatars sl-skeleton {
@ -1410,7 +1410,7 @@
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </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> <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-898"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1419,7 +1419,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-291" aria-controls="code-preview-source-group-277"
> >
Source Source
<svg <svg
@ -1488,7 +1488,7 @@
> >
using a script tag: using a script tag:
</p> </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/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-899"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-863"><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-863"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1503,17 +1503,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/skeleton/skeleton.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-864"><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-864"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/skeleton/skeleton.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-865"><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-865"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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-902"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-866"><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-866"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

56
components/spinner/index.html
View File

@ -475,17 +475,17 @@
</div> </div>
</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-299">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-875"><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-916"><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-875"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-916"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-876"><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-917"><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> <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-876"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-917"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -494,7 +494,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-282" aria-controls="code-preview-source-group-299"
> >
Source Source
<svg <svg
@ -556,16 +556,16 @@
</div> </div>
</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-300">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-877"><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-918"><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> 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> <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-877"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-918"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-878"><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-919"><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 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"> <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 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><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-878"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-919"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -583,7 +583,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-283" aria-controls="code-preview-source-group-300"
> >
Source Source
<svg <svg
@ -641,14 +641,14 @@
</div> </div>
</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-301">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-879"><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> <pre><code class="language-html" id="code-block-920"><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-879"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-920"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-880"><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-921"><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 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> <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">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-880"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-921"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -667,7 +667,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-284" aria-controls="code-preview-source-group-301"
> >
Source Source
<svg <svg
@ -724,14 +724,14 @@
</div> </div>
</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-302">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-881"><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> <pre><code class="language-html" id="code-block-922"><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-881"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-922"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-882"><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-923"><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 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> <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">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-882"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-923"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -751,7 +751,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-285" aria-controls="code-preview-source-group-302"
> >
Source Source
<svg <svg
@ -820,7 +820,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-883"><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-883"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-924"><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-924"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -835,17 +835,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-884"><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-884"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-925"><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-925"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-885"><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-885"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-926"><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-926"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-886"><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-886"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-927"><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-927"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

136
components/split-panel/index.html
View File

@ -519,9 +519,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-292"> <div class="code-preview__source-group" id="code-preview-source-group-288">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-903"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-891"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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 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>start<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>start<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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -535,11 +535,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-903"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-904"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-892"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -569,7 +569,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-904"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -578,7 +578,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-292" aria-controls="code-preview-source-group-288"
> >
Source Source
<svg <svg
@ -667,9 +667,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-293"> <div class="code-preview__source-group" id="code-preview-source-group-289">
<div class="code-preview__source code-preview__source--html"> <div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-905"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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>75<span class="token punctuation">"</span></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-split-panel</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>75<span class="token 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 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>start<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>start<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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -683,7 +683,7 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-905"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -692,7 +692,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-293" aria-controls="code-preview-source-group-289"
> >
Source Source
<svg <svg
@ -773,9 +773,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-294"> <div class="code-preview__source-group" id="code-preview-source-group-290">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-906"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span> <span class="token attr-name">position-in-pixels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-894"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span> <span class="token attr-name">position-in-pixels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token 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 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>start<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>start<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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -789,11 +789,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-906"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-907"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-895"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</span></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>200<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</span></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>200<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -823,7 +823,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-907"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -832,7 +832,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-294" aria-controls="code-preview-source-group-290"
> >
Source Source
<svg <svg
@ -918,9 +918,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-295"> <div class="code-preview__source-group" id="code-preview-source-group-291">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-908"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span> <span class="token attr-name">vertical</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> 400px<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-896"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span> <span class="token attr-name">vertical</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> 400px<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>div</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>start<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>start<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> 100%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 100%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -934,11 +934,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-908"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-909"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-897"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</span></span> <span class="token attr-name">vertical</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">height</span><span class="token operator">:</span> <span class="token string">'400px'</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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">vertical</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">height</span><span class="token operator">:</span> <span class="token string">'400px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -968,7 +968,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-909"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -977,7 +977,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-295" aria-controls="code-preview-source-group-291"
> >
Source Source
<svg <svg
@ -1095,9 +1095,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-296"> <div class="code-preview__source-group" id="code-preview-source-group-292">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-910"><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>split-panel-snapping<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-898"><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>split-panel-snapping<span class="token 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-split-panel</span> <span class="token attr-name">snap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px 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-split-panel</span> <span class="token attr-name">snap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px 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>div</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>start<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>start<span class="token punctuation">"</span></span>
@ -1141,11 +1141,11 @@
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<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> </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-910"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-911"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-899"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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"> <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">
.split-panel-snapping { .split-panel-snapping {
@ -1209,7 +1209,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>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><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-911"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1218,7 +1218,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-296" aria-controls="code-preview-source-group-292"
> >
Source Source
<svg <svg
@ -1301,9 +1301,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-297"> <div class="code-preview__source-group" id="code-preview-source-group-293">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-912"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-900"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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>div</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>start<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>start<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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -1317,11 +1317,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-912"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-900"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-913"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-901"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1351,7 +1351,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-913"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-901"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1360,7 +1360,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-297" aria-controls="code-preview-source-group-293"
> >
Source Source
<svg <svg
@ -1470,9 +1470,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-298"> <div class="code-preview__source-group" id="code-preview-source-group-294">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-914"><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>split-panel-primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-902"><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>split-panel-primary<span class="token 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-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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 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>start<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>start<span class="token punctuation">"</span></span>
@ -1502,11 +1502,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>splitPanel<span class="token punctuation">.</span>primary <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> 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>splitPanel<span class="token punctuation">.</span>primary <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> </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-914"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-902"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-915"><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-903"><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> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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> 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> <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>
@ -1556,7 +1556,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><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>
<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-915"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-903"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1565,7 +1565,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-298" aria-controls="code-preview-source-group-294"
> >
Source Source
<svg <svg
@ -1657,9 +1657,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-299"> <div class="code-preview__source-group" id="code-preview-source-group-295">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-916"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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">--min</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">--max</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 150px<span class="token punctuation">)</span><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-904"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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">--min</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">--max</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 150px<span class="token punctuation">)</span><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>div</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>start<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>start<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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
@ -1673,11 +1673,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-916"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-904"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-917"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-905"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</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">'--min'</span><span class="token operator">:</span> <span class="token string">'150px'</span><span class="token punctuation">,</span> <span class="token string-property property">'--max'</span><span class="token operator">:</span> <span class="token string">'calc(100% - 150px)'</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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</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">'--min'</span><span class="token operator">:</span> <span class="token string">'150px'</span><span class="token punctuation">,</span> <span class="token string-property property">'--max'</span><span class="token operator">:</span> <span class="token string">'calc(100% - 150px)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1707,7 +1707,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-917"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-905"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1716,7 +1716,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-299" aria-controls="code-preview-source-group-295"
> >
Source Source
<svg <svg
@ -1816,9 +1816,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-300"> <div class="code-preview__source-group" id="code-preview-source-group-296">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-918"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-906"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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 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>start<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>start<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> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span><span class="token punctuation">"</span></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> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span><span class="token punctuation">"</span></span></span>
@ -1842,11 +1842,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-918"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-906"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-919"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-907"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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 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">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1892,7 +1892,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-919"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-907"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1901,7 +1901,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-300" aria-controls="code-preview-source-group-296"
> >
Source Source
<svg <svg
@ -1992,9 +1992,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-301"> <div class="code-preview__source-group" id="code-preview-source-group-297">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-920"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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">--divider-width</span><span class="token punctuation">:</span> 20px<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-908"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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">--divider-width</span><span class="token punctuation">:</span> 20px<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-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>divider<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>grip-vertical<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>divider<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>grip-vertical<span class="token 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>div</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>start<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>start<span class="token punctuation">"</span></span>
@ -2009,11 +2009,11 @@
End End
<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>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-split-panel</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-920"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-908"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-921"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-909"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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> 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> <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>
@ -2045,7 +2045,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 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 plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">&gt;</span></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSplitPanel</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-921"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-909"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2054,7 +2054,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-301" aria-controls="code-preview-source-group-297"
> >
Source Source
<svg <svg
@ -2164,9 +2164,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-302"> <div class="code-preview__source-group" id="code-preview-source-group-298">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-922"><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>split-panel-divider<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <pre><code class="language-html" id="code-block-910"><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>split-panel-divider<span class="token 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-split-panel</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-split-panel</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>divider<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>grip-vertical<span class="token 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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>divider<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>grip-vertical<span class="token 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>div</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
@ -2210,11 +2210,11 @@
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-0<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> </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-922"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-910"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-923"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span> <pre><code class="language-jsx" id="code-block-911"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</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> 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> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <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">
@ -2279,7 +2279,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>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><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-923"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-911"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -2288,7 +2288,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-302" aria-controls="code-preview-source-group-298"
> >
Source Source
<svg <svg
@ -2357,7 +2357,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-924"><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/split-panel/split-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-924"></sl-copy-button></pre> <pre><code class="language-html" id="code-block-912"><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/split-panel/split-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-912"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -2372,17 +2372,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-925"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-925"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-913"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-913"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-926"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-926"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-914"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-914"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-927"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-927"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-915"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-915"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/switch/index.html
View File

@ -481,17 +481,17 @@
</div> </div>
</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-310">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-946"><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-928"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-946"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-947"><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> <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-929"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-947"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -500,7 +500,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-303" aria-controls="code-preview-source-group-310"
> >
Source Source
<svg <svg
@ -566,17 +566,17 @@
</div> </div>
</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-311">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-948"><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-930"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-948"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-949"><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> <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-931"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-949"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -585,7 +585,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-304" aria-controls="code-preview-source-group-311"
> >
Source Source
<svg <svg
@ -641,17 +641,17 @@
</div> </div>
</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-312">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <pre><code class="language-html" id="code-block-950"><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-932"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-950"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-951"><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> <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-933"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-951"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -660,7 +660,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-305" aria-controls="code-preview-source-group-312"
> >
Source Source
<svg <svg
@ -718,18 +718,18 @@
</div> </div>
</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-313">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-952"><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>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>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>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> <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-934"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-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>
<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 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"> <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 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><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-935"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -749,7 +749,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-306" aria-controls="code-preview-source-group-313"
> >
Source Source
<svg <svg
@ -808,17 +808,17 @@
</div> </div>
</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-314">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <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">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-936"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-954"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-955"><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> <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-937"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-955"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -827,7 +827,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-307" aria-controls="code-preview-source-group-314"
> >
Source Source
<svg <svg
@ -883,14 +883,14 @@
</div> </div>
</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-315">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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> <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 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-938"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-956"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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 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> <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">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</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-939"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -910,7 +910,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-308" aria-controls="code-preview-source-group-315"
> >
Source Source
<svg <svg
@ -979,7 +979,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-940"><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-940"></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>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-958"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -994,17 +994,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-941"><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-941"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-959"><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-959"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-942"><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-942"></sl-copy-button></pre> <pre><code class="language-js" id="code-block-960"><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-960"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-943"><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-943"></sl-copy-button></pre> <pre><code class="language-js" 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></code><sl-copy-button class="copy-code-button" from="code-block-961"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

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

@ -504,9 +504,9 @@
</div> </div>
</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-303">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<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> <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>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>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> <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>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-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> <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-944"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<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> <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> 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> <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">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><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-945"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-929"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -555,7 +555,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-309" aria-controls="code-preview-source-group-303"
> >
Source Source
<svg <svg
@ -624,9 +624,9 @@
</div> </div>
</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-304">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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 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-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>
<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>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>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> <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>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-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> <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-930"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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-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>
<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> 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> <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">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><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-947"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-931"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -675,7 +675,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-310" aria-controls="code-preview-source-group-304"
> >
Source Source
<svg <svg
@ -741,9 +741,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-311"> <div class="code-preview__source-group" id="code-preview-source-group-305">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-948"><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-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>
<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>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>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> <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>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-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> <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-948"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-949"><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-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>
<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> 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> <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">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><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-949"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-933"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -792,7 +792,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-311" aria-controls="code-preview-source-group-305"
> >
Source Source
<svg <svg
@ -858,9 +858,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-312"> <div class="code-preview__source-group" id="code-preview-source-group-306">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-950"><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-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>
<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>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>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> <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>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-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> <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-950"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-951"><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> 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> <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">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><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-951"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -909,7 +909,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-312" aria-controls="code-preview-source-group-306"
> >
Source Source
<svg <svg
@ -998,9 +998,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-313"> <div class="code-preview__source-group" id="code-preview-source-group-307">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-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>
<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>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-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> <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> 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 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></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> </code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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> 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> <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><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>
<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-953"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-937"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1083,7 +1083,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-313" aria-controls="code-preview-source-group-307"
> >
Source Source
<svg <svg
@ -1181,9 +1181,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-314"> <div class="code-preview__source-group" id="code-preview-source-group-308">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-tab-group</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 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-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-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> <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-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-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> <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-954"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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> 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> <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">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><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-955"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1328,7 +1328,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-314" aria-controls="code-preview-source-group-308"
> >
Source Source
<svg <svg
@ -1399,9 +1399,9 @@
</div> </div>
</div> </div>
<div class="code-preview__source-group" id="code-preview-source-group-315"> <div class="code-preview__source-group" id="code-preview-source-group-309">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-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>
<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>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>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> <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>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-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> <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-956"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-940"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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> 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> <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">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><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-957"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-941"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1450,7 +1450,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-315" aria-controls="code-preview-source-group-309"
> >
Source Source
<svg <svg
@ -1519,7 +1519,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-958"><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-958"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1534,17 +1534,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-959"><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-959"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-960"><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-960"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-961"><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-961"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

8
components/tab/index.html
View File

@ -499,7 +499,7 @@
> >
using a script tag: using a script tag:
</p> </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-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/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-980"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -514,17 +514,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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-981"><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-981"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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-982"><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-982"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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-983"><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-983"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

40
components/tag/index.html
View File

@ -484,16 +484,16 @@
<div class="code-preview__source-group" id="code-preview-source-group-317"> <div class="code-preview__source-group" id="code-preview-source-group-317">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-968"><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>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>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>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> <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-972"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-969"><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 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"> <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 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><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-973"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -574,14 +574,14 @@
<div class="code-preview__source-group" id="code-preview-source-group-318"> <div class="code-preview__source-group" id="code-preview-source-group-318">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-970"><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>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> <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-974"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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-971"><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 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"> <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 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><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-975"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -657,14 +657,14 @@
<div class="code-preview__source-group" id="code-preview-source-group-319"> <div class="code-preview__source-group" id="code-preview-source-group-319">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-972"><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>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> <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-976"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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 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"> <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 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><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-977"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -768,7 +768,7 @@
<div class="code-preview__source-group" id="code-preview-source-group-320"> <div class="code-preview__source-group" id="code-preview-source-group-320">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-974"><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>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>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> <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 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 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></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-978"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <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 { .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><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>
<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-979"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -906,7 +906,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<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> <pre><code class="language-html" id="code-block-976"><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-976"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -921,17 +921,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<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> <pre><code class="language-js" id="code-block-977"><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-977"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<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> <pre><code class="language-js" id="code-block-978"><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-978"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<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> <pre><code class="language-js" 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></code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

108
components/tooltip/index.html
View File

@ -496,16 +496,16 @@
</div> </div>
</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-331">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1036"><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-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> <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-1036"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1037"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -522,7 +522,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-341" aria-controls="code-preview-source-group-331"
> >
Source Source
<svg <svg
@ -670,9 +670,9 @@
</div> </div>
</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-332">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1038"><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>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-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> <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 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 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></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-1038"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1039"><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">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"> <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>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><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-1039"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -873,7 +873,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-342" aria-controls="code-preview-source-group-332"
> >
Source Source
<svg <svg
@ -934,16 +934,16 @@
</div> </div>
</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-333">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1040"><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-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> <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-1040"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1041"><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">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> <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">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><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> <span class="token punctuation">)</span><span class="token punctuation">;</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-1013"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -960,7 +960,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-343" aria-controls="code-preview-source-group-333"
> >
Source Source
<svg <svg
@ -1032,9 +1032,9 @@
</div> </div>
</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-334">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1042"><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-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> <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> 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> </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-1042"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1043"><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> 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> 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">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><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>
<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-1043"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1079,7 +1079,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-344" aria-controls="code-preview-source-group-334"
> >
Source Source
<svg <svg
@ -1140,16 +1140,16 @@
</div> </div>
</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-335">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1044"><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-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> <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-1044"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1045"><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">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> <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><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><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-1045"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1172,7 +1172,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-345" aria-controls="code-preview-source-group-335"
> >
Source Source
<svg <svg
@ -1217,10 +1217,10 @@
<p> <p>
To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded. To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
</p> </p>
<pre><code class="language-css" id="code-block-1046"><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 property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<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-1046"></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"> <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> HTML in Tooltips<a href="#html-in-tooltips" aria-label='Direct link to "HTML in Tooltips"'></a>
</h3> </h3>
@ -1243,18 +1243,18 @@
</div> </div>
</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-336">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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>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-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> <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-1047"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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">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> <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">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><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> <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-1020"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1275,7 +1275,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-346" aria-controls="code-preview-source-group-336"
> >
Source Source
<svg <svg
@ -1339,16 +1339,16 @@
</div> </div>
</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-337">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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-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-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> <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-1049"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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">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> <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">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><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> <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-1022"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1365,7 +1365,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-347" aria-controls="code-preview-source-group-337"
> >
Source Source
<svg <svg
@ -1458,9 +1458,9 @@
</div> </div>
</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-338">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <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>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-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-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> <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 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 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></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-1051"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <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> 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">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"> <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>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><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-1052"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1518,7 +1518,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-348" aria-controls="code-preview-source-group-338"
> >
Source Source
<svg <svg
@ -1587,7 +1587,7 @@
> >
using a script tag: using a script tag:
</p> </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/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-1053"></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>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1602,17 +1602,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </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/tooltip/tooltip.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-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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <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/tooltip/tooltip.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-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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <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> 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-1056"></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-panel>
</sl-tab-group> </sl-tab-group>

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

@ -490,9 +490,9 @@
</div> </div>
</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-339">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1008"><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> <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 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> <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 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-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> <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-1008"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1009"><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">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> <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">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><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-1009"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -530,7 +530,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-331" aria-controls="code-preview-source-group-339"
> >
Source Source
<svg <svg
@ -603,9 +603,9 @@
</div> </div>
</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-340">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1010"><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-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>
<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 1 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> <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 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-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> <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-1010"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1011"><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">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> <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">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><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-1011"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -653,7 +653,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-332" aria-controls="code-preview-source-group-340"
> >
Source Source
<svg <svg
@ -718,9 +718,9 @@
</div> </div>
</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-341">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1012"><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-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>
<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> <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 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> <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 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-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> <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-1012"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1013"><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">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> <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">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><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-1013"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -758,7 +758,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-333" aria-controls="code-preview-source-group-341"
> >
Source Source
<svg <svg
@ -828,9 +828,9 @@
</div> </div>
</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-342">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1014"><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">expanded</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 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> <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 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-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> <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-1014"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1015"><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">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> <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">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><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-1015"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -878,7 +878,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-334" aria-controls="code-preview-source-group-342"
> >
Source Source
<svg <svg
@ -947,7 +947,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-1016"><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-1016"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -962,17 +962,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-1017"><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-1017"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1018"><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-1018"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1019"><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-1019"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

80
components/tree/index.html
View File

@ -517,9 +517,9 @@
</div> </div>
</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-343">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1020"><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-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>
<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>
Deciduous 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> <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>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-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> <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-1020"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1021"><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-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>
<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">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> <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">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><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-1021"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -591,7 +591,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-335" aria-controls="code-preview-source-group-343"
> >
Source Source
<svg <svg
@ -689,9 +689,9 @@
</div> </div>
</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-344">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1022"><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-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>
<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>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>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> <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> 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 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></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-1022"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1023"><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-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>
<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">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> <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><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>
<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-1023"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -771,7 +771,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-336" aria-controls="code-preview-source-group-344"
> >
Source Source
<svg <svg
@ -863,9 +863,9 @@
</div> </div>
</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-345">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1024"><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-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>
<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-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
Deciduous 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> <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 property">--indent-guide-width</span><span class="token punctuation">:</span> 1px<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> </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-1024"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1025"><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">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> <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">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><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-1025"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -943,7 +943,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-337" aria-controls="code-preview-source-group-345"
> >
Source Source
<svg <svg
@ -1030,9 +1030,9 @@
</div> </div>
</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-346">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1026"><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 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-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> <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 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 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></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-1026"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1027"><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">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> <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><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>
<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-1027"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1096,7 +1096,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-338" aria-controls="code-preview-source-group-346"
> >
Source Source
<svg <svg
@ -1195,9 +1195,9 @@
</div> </div>
</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-347">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1028"><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-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>
<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>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> <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 property">rotate</span><span class="token punctuation">:</span> none<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> </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-1028"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1029"><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">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> <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">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><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-1029"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1282,7 +1282,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-339" aria-controls="code-preview-source-group-347"
> >
Source Source
<svg <svg
@ -1377,9 +1377,9 @@
</div> </div>
</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-348">
<div class="code-preview__source code-preview__source--html" data-flavor="html"> <div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-1030"><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-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>
<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-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> <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 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-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> <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-1030"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
</div> </div>
<div class="code-preview__source code-preview__source--react" data-flavor="react"> <div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-1031"><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-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>
<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> 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">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><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>
<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-1031"></sl-copy-button></pre> </code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
</div> </div>
</div> </div>
@ -1476,7 +1476,7 @@
type="button" type="button"
class="code-preview__button code-preview__toggle" class="code-preview__button code-preview__toggle"
aria-expanded="false" aria-expanded="false"
aria-controls="code-preview-source-group-340" aria-controls="code-preview-source-group-348"
> >
Source Source
<svg <svg
@ -1545,7 +1545,7 @@
> >
using a script tag: using a script tag:
</p> </p>
<pre><code class="language-html" id="code-block-1032"><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-1032"></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/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>
</sl-tab-panel> </sl-tab-panel>
<sl-tab-panel name="import"> <sl-tab-panel name="import">
@ -1560,17 +1560,17 @@
> >
using a JavaScript import: using a JavaScript import:
</p> </p>
<pre><code class="language-js" id="code-block-1033"><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-1033"></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/tree.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>
<sl-tab-panel name="bundler"> <sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p> <p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1034"><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-1034"></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/tree.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>
<sl-tab-panel name="react"> <sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p> <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1035"><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-1035"></sl-copy-button></pre> <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>
</sl-tab-panel> </sl-tab-panel>
</sl-tab-group> </sl-tab-group>

2
dist/chunks/chunk.JJBJSV2E.js → dist/chunks/chunk.2A654XM4.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTreeItem SlTreeItem
} from "./chunk.XDXFLZH2.js"; } from "./chunk.I2VMJQGZ.js";
// src/react/tree-item/index.ts // src/react/tree-item/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.TKELPIBL.js → dist/chunks/chunk.2T47JI2Y.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlButton SlButton
} from "./chunk.EGLIH5AB.js"; } from "./chunk.ANK5P6NL.js";
// src/react/button/index.ts // src/react/button/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.WZGYB33R.js → dist/chunks/chunk.4RZCCS72.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlOption SlOption
} from "./chunk.WXSLRTXW.js"; } from "./chunk.RNPLPMI7.js";
// src/components/option/option.ts // src/components/option/option.ts
var option_default = SlOption; var option_default = SlOption;

6
dist/chunks/chunk.WSYTYDG3.js → dist/chunks/chunk.4S2NCH2A.js vendored
View File

@ -13,12 +13,12 @@ import {
import { import {
prefersReducedMotion prefersReducedMotion
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

6
dist/chunks/chunk.NH4RZLPV.js → dist/chunks/chunk.636GFVN7.js vendored
View File

@ -13,9 +13,6 @@ import {
import { import {
FormControlController FormControlController
} from "./chunk.JWVNKU5Y.js"; } from "./chunk.JWVNKU5Y.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
@ -25,6 +22,9 @@ import {
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

2
dist/chunks/chunk.VZJBXYUF.js → dist/chunks/chunk.A2BFSQ3C.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDialog SlDialog
} from "./chunk.MMXGNXHR.js"; } from "./chunk.QFY5BTZB.js";
// src/components/dialog/dialog.ts // src/components/dialog/dialog.ts
var dialog_default = SlDialog; var dialog_default = SlDialog;

6
dist/chunks/chunk.EGLIH5AB.js → dist/chunks/chunk.ANK5P6NL.js vendored
View File

@ -12,9 +12,6 @@ import {
n as n2, n as n2,
s s
} from "./chunk.LX7UG5WS.js"; } from "./chunk.LX7UG5WS.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
@ -24,6 +21,9 @@ import {
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.JRVKL7AO.js → dist/chunks/chunk.AYJVTYM4.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlSplitPanel SlSplitPanel
} from "./chunk.CMVGJZQB.js"; } from "./chunk.K2IH25YY.js";
// src/react/split-panel/index.ts // src/react/split-panel/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.J2IU2CDY.js → dist/chunks/chunk.BWM56YWB.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlCarousel SlCarousel
} from "./chunk.WSYTYDG3.js"; } from "./chunk.4S2NCH2A.js";
// src/react/carousel/index.ts // src/react/carousel/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.PQHOCIEN.js → dist/chunks/chunk.CBWL3I6V.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlInput SlInput
} from "./chunk.HLCCMNPP.js"; } from "./chunk.QT6X3RZ4.js";
// src/components/input/input.ts // src/components/input/input.ts
var input_default = SlInput; var input_default = SlInput;

12
dist/chunks/chunk.RSDBV47V.js → dist/chunks/chunk.CFH2JNVK.js vendored
View File

@ -3,7 +3,7 @@ import {
} from "./chunk.2FPAOYP2.js"; } from "./chunk.2FPAOYP2.js";
import { import {
SlInput SlInput
} from "./chunk.HLCCMNPP.js"; } from "./chunk.QT6X3RZ4.js";
import { import {
drag drag
} from "./chunk.ESELY2US.js"; } from "./chunk.ESELY2US.js";
@ -12,7 +12,7 @@ import {
} from "./chunk.FQQ5K3WY.js"; } from "./chunk.FQQ5K3WY.js";
import { import {
SlDropdown SlDropdown
} from "./chunk.MZEJHEPM.js"; } from "./chunk.CMHBKN7G.js";
import { import {
defaultValue defaultValue
} from "./chunk.RQ7JZ4R7.js"; } from "./chunk.RQ7JZ4R7.js";
@ -24,22 +24,22 @@ import {
} from "./chunk.HF7GESMZ.js"; } from "./chunk.HF7GESMZ.js";
import { import {
SlButton SlButton
} from "./chunk.EGLIH5AB.js"; } from "./chunk.ANK5P6NL.js";
import { import {
FormControlController FormControlController
} from "./chunk.JWVNKU5Y.js"; } from "./chunk.JWVNKU5Y.js";
import { import {
SlButtonGroup SlButtonGroup
} from "./chunk.F3KB2RIB.js"; } from "./chunk.F3KB2RIB.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.XBL3W5LB.js → dist/chunks/chunk.CKGCU5UH.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlColorPicker SlColorPicker
} from "./chunk.RSDBV47V.js"; } from "./chunk.CFH2JNVK.js";
// src/components/color-picker/color-picker.ts // src/components/color-picker/color-picker.ts
var color_picker_default = SlColorPicker; var color_picker_default = SlColorPicker;

6
dist/chunks/chunk.MZEJHEPM.js → dist/chunks/chunk.CMHBKN7G.js vendored
View File

@ -18,15 +18,15 @@ import {
animateTo, animateTo,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

2
dist/chunks/chunk.HOQJCASZ.js → dist/chunks/chunk.CMTWBNST.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlRange SlRange
} from "./chunk.NH4RZLPV.js"; } from "./chunk.636GFVN7.js";
// src/react/range/index.ts // src/react/range/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.UVHVFXKX.js → dist/chunks/chunk.DSZSVCSX.js vendored
View File

@ -3,7 +3,7 @@ import {
} from "./chunk.CJB5WKGN.js"; } from "./chunk.CJB5WKGN.js";
import { import {
SlTreeItem SlTreeItem
} from "./chunk.XDXFLZH2.js"; } from "./chunk.I2VMJQGZ.js";
import { import {
clamp clamp
} from "./chunk.HF7GESMZ.js"; } from "./chunk.HF7GESMZ.js";

2
dist/chunks/chunk.TMGZYMJF.js → dist/chunks/chunk.EJV2FSC6.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlInput SlInput
} from "./chunk.HLCCMNPP.js"; } from "./chunk.QT6X3RZ4.js";
// src/react/input/index.ts // src/react/input/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.B3G6WD2I.js → dist/chunks/chunk.EVGTMRV3.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDialog SlDialog
} from "./chunk.MMXGNXHR.js"; } from "./chunk.QFY5BTZB.js";
// src/react/dialog/index.ts // src/react/dialog/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.M56HIKNW.js → dist/chunks/chunk.F5FBHKBI.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTree SlTree
} from "./chunk.UVHVFXKX.js"; } from "./chunk.DSZSVCSX.js";
// src/components/tree/tree.ts // src/components/tree/tree.ts
var tree_default = SlTree; var tree_default = SlTree;

2
dist/chunks/chunk.MXXZ437F.js → dist/chunks/chunk.F5YMP27H.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDrawer SlDrawer
} from "./chunk.BICJL3A7.js"; } from "./chunk.JURRYKMI.js";
// src/react/drawer/index.ts // src/react/drawer/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.RWOPEP25.js → dist/chunks/chunk.GBETTBLG.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDetails SlDetails
} from "./chunk.THS3QD6L.js"; } from "./chunk.SLMMUW6G.js";
// src/components/details/details.ts // src/components/details/details.ts
var details_default = SlDetails; var details_default = SlDetails;

6
dist/chunks/chunk.Y44YNN7R.js → dist/chunks/chunk.GH4I3V5W.js vendored
View File

@ -4,12 +4,12 @@ import {
import { import {
SlIconButton SlIconButton
} from "./chunk.EUMKZFJV.js"; } from "./chunk.EUMKZFJV.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
component_styles_default component_styles_default
} from "./chunk.K23QWHWK.js"; } from "./chunk.K23QWHWK.js";

6
dist/chunks/chunk.XDXFLZH2.js → dist/chunks/chunk.I2VMJQGZ.js vendored
View File

@ -19,12 +19,12 @@ import {
shimKeyframesHeightAuto, shimKeyframesHeightAuto,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.U3AY6QE3.js → dist/chunks/chunk.IJORZ53P.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDrawer SlDrawer
} from "./chunk.BICJL3A7.js"; } from "./chunk.JURRYKMI.js";
// src/components/drawer/drawer.ts // src/components/drawer/drawer.ts
var drawer_default = SlDrawer; var drawer_default = SlDrawer;

2
dist/chunks/chunk.OT3DBJY5.js → dist/chunks/chunk.IULN2B2Z.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTabGroup SlTabGroup
} from "./chunk.UUCK3RMY.js"; } from "./chunk.QYSV4AOQ.js";
// src/react/tab-group/index.ts // src/react/tab-group/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.IPBA3RL7.js → dist/chunks/chunk.IZLUHFAR.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlSplitPanel SlSplitPanel
} from "./chunk.CMVGJZQB.js"; } from "./chunk.K2IH25YY.js";
// src/components/split-panel/split-panel.ts // src/components/split-panel/split-panel.ts
var split_panel_default = SlSplitPanel; var split_panel_default = SlSplitPanel;

2
dist/chunks/chunk.OIXKPQ6O.js → dist/chunks/chunk.J72VNH2K.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTag SlTag
} from "./chunk.Y44YNN7R.js"; } from "./chunk.GH4I3V5W.js";
// src/react/tag/index.ts // src/react/tag/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.NZULQTUJ.js → dist/chunks/chunk.JJSRKCKW.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDropdown SlDropdown
} from "./chunk.MZEJHEPM.js"; } from "./chunk.CMHBKN7G.js";
// src/components/dropdown/dropdown.ts // src/components/dropdown/dropdown.ts
var dropdown_default = SlDropdown; var dropdown_default = SlDropdown;

2
dist/chunks/chunk.KOUUNKGW.js → dist/chunks/chunk.JQ4XSVZH.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlCarousel SlCarousel
} from "./chunk.WSYTYDG3.js"; } from "./chunk.4S2NCH2A.js";
// src/components/carousel/carousel.ts // src/components/carousel/carousel.ts
var carousel_default = SlCarousel; var carousel_default = SlCarousel;

6
dist/chunks/chunk.BICJL3A7.js → dist/chunks/chunk.JURRYKMI.js vendored
View File

@ -22,9 +22,6 @@ import {
animateTo, animateTo,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
@ -34,6 +31,9 @@ import {
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

6
dist/chunks/chunk.HIEWE77I.js → dist/chunks/chunk.JXNEB52G.js vendored
View File

@ -16,12 +16,12 @@ import {
parseDuration, parseDuration,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

6
dist/chunks/chunk.CMVGJZQB.js → dist/chunks/chunk.K2IH25YY.js vendored
View File

@ -7,12 +7,12 @@ import {
import { import {
clamp clamp
} from "./chunk.HF7GESMZ.js"; } from "./chunk.HF7GESMZ.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

2
dist/chunks/chunk.X3E2SIN5.js → dist/chunks/chunk.LPDJYE6J.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTree SlTree
} from "./chunk.UVHVFXKX.js"; } from "./chunk.DSZSVCSX.js";
// src/react/tree/index.ts // src/react/tree/index.ts
import * as React from "react"; import * as React from "react";

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

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

8
dist/chunks/chunk.QW5LJCVR.js → dist/chunks/chunk.OUERAG24.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTooltip SlTooltip
} from "./chunk.HIEWE77I.js"; } from "./chunk.JXNEB52G.js";
import { import {
copy_button_styles_default copy_button_styles_default
} from "./chunk.7EKSUNPQ.js"; } from "./chunk.7EKSUNPQ.js";
@ -8,12 +8,12 @@ import {
getAnimation, getAnimation,
setDefaultAnimation setDefaultAnimation
} from "./chunk.RCZVQXWP.js"; } from "./chunk.RCZVQXWP.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

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

@ -12,15 +12,15 @@ import {
animateTo, animateTo,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
HasSlotController HasSlotController
} from "./chunk.NYIIDP5N.js"; } from "./chunk.NYIIDP5N.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
alert_styles_default alert_styles_default
} from "./chunk.M2WZ4AXO.js"; } from "./chunk.M2WZ4AXO.js";

6
dist/chunks/chunk.3EZHFHG3.js → dist/chunks/chunk.PTXGKMCM.js vendored
View File

@ -4,15 +4,15 @@ import {
import { import {
o as o2 o as o2
} from "./chunk.FQQ5K3WY.js"; } from "./chunk.FQQ5K3WY.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
component_styles_default component_styles_default
} from "./chunk.K23QWHWK.js"; } from "./chunk.K23QWHWK.js";

2
dist/chunks/chunk.E5XAKHY3.js → dist/chunks/chunk.Q4JOTESV.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTab SlTab
} from "./chunk.SHPJ6HCQ.js"; } from "./chunk.W6AXMEWH.js";
// src/components/tab/tab.ts // src/components/tab/tab.ts
var tab_default = SlTab; var tab_default = SlTab;

6
dist/chunks/chunk.MMXGNXHR.js → dist/chunks/chunk.QFY5BTZB.js vendored
View File

@ -22,9 +22,6 @@ import {
animateTo, animateTo,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
@ -34,6 +31,9 @@ import {
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

6
dist/chunks/chunk.HLCCMNPP.js → dist/chunks/chunk.QT6X3RZ4.js vendored
View File

@ -13,9 +13,6 @@ import {
import { import {
FormControlController FormControlController
} from "./chunk.JWVNKU5Y.js"; } from "./chunk.JWVNKU5Y.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
o o
} from "./chunk.2URMUHDY.js"; } from "./chunk.2URMUHDY.js";
@ -25,6 +22,9 @@ import {
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.KHZVE7CV.js → dist/chunks/chunk.QWPPJ6MK.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlProgressBar SlProgressBar
} from "./chunk.3EZHFHG3.js"; } from "./chunk.PTXGKMCM.js";
// src/components/progress-bar/progress-bar.ts // src/components/progress-bar/progress-bar.ts
var progress_bar_default = SlProgressBar; var progress_bar_default = SlProgressBar;

6
dist/chunks/chunk.UUCK3RMY.js → dist/chunks/chunk.QYSV4AOQ.js vendored
View File

@ -7,12 +7,12 @@ import {
import { import {
SlIconButton SlIconButton
} from "./chunk.EUMKZFJV.js"; } from "./chunk.EUMKZFJV.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

2
dist/chunks/chunk.G6AS5JMB.js → dist/chunks/chunk.R3FA5JLK.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTreeItem SlTreeItem
} from "./chunk.XDXFLZH2.js"; } from "./chunk.I2VMJQGZ.js";
// src/components/tree-item/tree-item.ts // src/components/tree-item/tree-item.ts
var tree_item_default = SlTreeItem; var tree_item_default = SlTreeItem;

6
dist/chunks/chunk.WXSLRTXW.js → dist/chunks/chunk.RNPLPMI7.js vendored
View File

@ -1,12 +1,12 @@
import { import {
option_styles_default option_styles_default
} from "./chunk.JXTNYING.js"; } from "./chunk.JXTNYING.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.45KDJSSU.js → dist/chunks/chunk.RQJPCZFL.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDetails SlDetails
} from "./chunk.THS3QD6L.js"; } from "./chunk.SLMMUW6G.js";
// src/react/details/index.ts // src/react/details/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.Y3MUBEF2.js → dist/chunks/chunk.S6WKFUYV.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlCopyButton SlCopyButton
} from "./chunk.QW5LJCVR.js"; } from "./chunk.OUERAG24.js";
// src/components/copy-button/copy-button.ts // src/components/copy-button/copy-button.ts
var copy_button_default = SlCopyButton; var copy_button_default = SlCopyButton;

6
dist/chunks/chunk.THS3QD6L.js → dist/chunks/chunk.SLMMUW6G.js vendored
View File

@ -13,12 +13,12 @@ import {
shimKeyframesHeightAuto, shimKeyframesHeightAuto,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.4MIGEZNF.js → dist/chunks/chunk.SQZ5OT6N.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlSelect SlSelect
} from "./chunk.BTON6SLI.js"; } from "./chunk.U4O2H2B7.js";
// src/react/select/index.ts // src/react/select/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.QHUTT2HJ.js → dist/chunks/chunk.SRVZQDLF.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlRange SlRange
} from "./chunk.NH4RZLPV.js"; } from "./chunk.636GFVN7.js";
// src/components/range/range.ts // src/components/range/range.ts
var range_default = SlRange; var range_default = SlRange;

2
dist/chunks/chunk.4KLXFP26.js → dist/chunks/chunk.TKH2FCTH.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlCopyButton SlCopyButton
} from "./chunk.QW5LJCVR.js"; } from "./chunk.OUERAG24.js";
// src/react/copy-button/index.ts // src/react/copy-button/index.ts
import * as React from "react"; import * as React from "react";

8
dist/chunks/chunk.BTON6SLI.js → dist/chunks/chunk.U4O2H2B7.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTag SlTag
} from "./chunk.Y44YNN7R.js"; } from "./chunk.GH4I3V5W.js";
import { import {
select_styles_default select_styles_default
} from "./chunk.ECLFWIFP.js"; } from "./chunk.ECLFWIFP.js";
@ -33,15 +33,15 @@ import {
animateTo, animateTo,
stopAnimations stopAnimations
} from "./chunk.S7GYYU7Z.js"; } from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
HasSlotController HasSlotController
} from "./chunk.NYIIDP5N.js"; } from "./chunk.NYIIDP5N.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
SlIcon SlIcon
} from "./chunk.QQHXFE7X.js"; } from "./chunk.QQHXFE7X.js";

2
dist/chunks/chunk.5H3RAK7A.js → dist/chunks/chunk.UBXOQCSK.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTab SlTab
} from "./chunk.SHPJ6HCQ.js"; } from "./chunk.W6AXMEWH.js";
// src/react/tab/index.ts // src/react/tab/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.26BXYTEL.js → dist/chunks/chunk.UNW6LWJI.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlColorPicker SlColorPicker
} from "./chunk.RSDBV47V.js"; } from "./chunk.CFH2JNVK.js";
// src/react/color-picker/index.ts // src/react/color-picker/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.MPAT4V3I.js → dist/chunks/chunk.VGFMDSAI.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlProgressBar SlProgressBar
} from "./chunk.3EZHFHG3.js"; } from "./chunk.PTXGKMCM.js";
// src/react/progress-bar/index.ts // src/react/progress-bar/index.ts
import * as React from "react"; import * as React from "react";

6
dist/chunks/chunk.SHPJ6HCQ.js → dist/chunks/chunk.W6AXMEWH.js vendored
View File

@ -4,12 +4,12 @@ import {
import { import {
SlIconButton SlIconButton
} from "./chunk.EUMKZFJV.js"; } from "./chunk.EUMKZFJV.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
e e
} from "./chunk.UZVKBFXH.js"; } from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import { import {
watch watch
} from "./chunk.FA5RT4K4.js"; } from "./chunk.FA5RT4K4.js";

2
dist/chunks/chunk.FSY7RZDG.js → dist/chunks/chunk.WWLGKKJL.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlDropdown SlDropdown
} from "./chunk.MZEJHEPM.js"; } from "./chunk.CMHBKN7G.js";
// src/react/dropdown/index.ts // src/react/dropdown/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.YNMXHX6S.js → dist/chunks/chunk.XLVNHEC6.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlOption SlOption
} from "./chunk.WXSLRTXW.js"; } from "./chunk.RNPLPMI7.js";
// src/react/option/index.ts // src/react/option/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.ZXSNECDV.js → dist/chunks/chunk.XMU6QYKR.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTooltip SlTooltip
} from "./chunk.HIEWE77I.js"; } from "./chunk.JXNEB52G.js";
// src/react/tooltip/index.ts // src/react/tooltip/index.ts
import * as React from "react"; import * as React from "react";

2
dist/chunks/chunk.Y3K4EOM3.js → dist/chunks/chunk.XYZE4CTX.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlSelect SlSelect
} from "./chunk.BTON6SLI.js"; } from "./chunk.U4O2H2B7.js";
// src/components/select/select.ts // src/components/select/select.ts
var select_default = SlSelect; var select_default = SlSelect;

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

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

2
dist/chunks/chunk.HM5FPASV.js → dist/chunks/chunk.YD3SR4QD.js vendored
View File

@ -1,6 +1,6 @@
import { import {
SlTabGroup SlTabGroup
} from "./chunk.UUCK3RMY.js"; } from "./chunk.QYSV4AOQ.js";
// src/components/tab-group/tab-group.ts // src/components/tab-group/tab-group.ts
var tab_group_default = SlTabGroup; var tab_group_default = SlTabGroup;

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