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 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">
<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>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-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 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">const</span> <span class="token function-variable function">App</span> <span class="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">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-247"></sl-copy-button></pre>
</div>
</div>
@ -514,7 +514,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-58"
aria-controls="code-preview-source-group-44"
>
Source
<svg
@ -593,9 +593,9 @@
</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">
<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>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>
@ -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>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>
</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 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">const</span> <span class="token function-variable function">App</span> <span class="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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-249"></sl-copy-button></pre>
</div>
</div>
@ -659,7 +659,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-59"
aria-controls="code-preview-source-group-45"
>
Source
<svg
@ -751,9 +751,9 @@
</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">
<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>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>
@ -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>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>
</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 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">const</span> <span class="token function-variable function">App</span> <span class="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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-251"></sl-copy-button></pre>
</div>
</div>
@ -851,7 +851,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-60"
aria-controls="code-preview-source-group-46"
>
Source
<svg
@ -927,9 +927,9 @@
</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">
<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>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>
@ -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>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>
</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 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">const</span> <span class="token function-variable function">App</span> <span class="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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-253"></sl-copy-button></pre>
</div>
</div>
@ -1011,7 +1011,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-61"
aria-controls="code-preview-source-group-47"
>
Source
<svg
@ -1084,9 +1084,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-62">
<div class="code-preview__source-group" id="code-preview-source-group-48">
<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-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-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>
</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 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> 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>
@ -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">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-255"></sl-copy-button></pre>
</div>
</div>
@ -1133,7 +1133,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-62"
aria-controls="code-preview-source-group-48"
>
Source
<svg
@ -1205,9 +1205,9 @@
</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">
<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-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>
@ -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-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>
</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 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> 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>
@ -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">SlButtonGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-257"></sl-copy-button></pre>
</div>
</div>
@ -1252,7 +1252,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-63"
aria-controls="code-preview-source-group-49"
>
Source
<svg
@ -1323,9 +1323,9 @@
</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">
<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-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>
@ -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-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>
</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 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> 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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-259"></sl-copy-button></pre>
</div>
</div>
@ -1372,7 +1372,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-64"
aria-controls="code-preview-source-group-50"
>
Source
<svg
@ -1467,9 +1467,9 @@
</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">
<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-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>
@ -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 punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-260"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> 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>
@ -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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-261"></sl-copy-button></pre>
</div>
</div>
@ -1589,7 +1589,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-65"
aria-controls="code-preview-source-group-51"
>
Source
<svg
@ -1658,7 +1658,7 @@
>
using a script tag:
</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 name="import">
@ -1673,17 +1673,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

172
components/button/index.html
View File

@ -489,17 +489,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-246"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-266"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -508,7 +508,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-44"
aria-controls="code-preview-source-group-52"
>
Source
<svg
@ -572,19 +572,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>success<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-248"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -596,7 +596,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-249"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
</div>
</div>
@ -605,7 +605,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-45"
aria-controls="code-preview-source-group-53"
>
Source
<svg
@ -661,16 +661,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -679,7 +679,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-251"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
</div>
</div>
@ -688,7 +688,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-46"
aria-controls="code-preview-source-group-54"
>
Source
<svg
@ -749,19 +749,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>success<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-252"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -785,7 +785,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-253"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
</div>
</div>
@ -794,7 +794,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-47"
aria-controls="code-preview-source-group-55"
>
Source
<svg
@ -852,16 +852,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -876,7 +876,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-255"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
</div>
</div>
@ -885,7 +885,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-48"
aria-controls="code-preview-source-group-56"
>
Source
<svg
@ -954,9 +954,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-button</span><span class="token punctuation">&gt;</span></span>
@ -967,11 +967,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-256"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -987,7 +987,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-257"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
</div>
</div>
@ -996,7 +996,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-49"
aria-controls="code-preview-source-group-57"
>
Source
<svg
@ -1057,16 +1057,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1081,7 +1081,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-259"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
</div>
</div>
@ -1090,7 +1090,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-50"
aria-controls="code-preview-source-group-58"
>
Source
<svg
@ -1154,17 +1154,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>/assets/images/wordmark.svg<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shoelace.svg<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Download<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-260"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1180,7 +1180,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-261"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
</div>
</div>
@ -1189,7 +1189,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-51"
aria-controls="code-preview-source-group-59"
>
Source
<svg
@ -1265,16 +1265,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1289,7 +1289,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-263"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
</div>
</div>
@ -1298,7 +1298,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-52"
aria-controls="code-preview-source-group-60"
>
Source
<svg
@ -1407,9 +1407,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
Settings
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -1460,11 +1460,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Open
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-264"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1524,7 +1524,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-265"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
</div>
</div>
@ -1533,7 +1533,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-53"
aria-controls="code-preview-source-group-61"
>
Source
<svg
@ -1592,16 +1592,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1616,7 +1616,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
</div>
</div>
@ -1625,7 +1625,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-54"
aria-controls="code-preview-source-group-62"
>
Source
<svg
@ -1689,19 +1689,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>success<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1725,7 +1725,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
</div>
</div>
@ -1734,7 +1734,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-55"
aria-controls="code-preview-source-group-63"
>
Source
<svg
@ -1795,19 +1795,19 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>success<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -1836,7 +1836,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
</div>
</div>
@ -1845,7 +1845,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-56"
aria-controls="code-preview-source-group-64"
>
Source
<svg
@ -1943,9 +1943,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-57">
<div class="code-preview__source-group" id="code-preview-source-group-65">
<div class="code-preview__source code-preview__source--html">
<pre><code class="language-html" id="code-block-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 selector">sl-button.pink::part(base)</span> <span class="token punctuation">{</span>
@ -1982,7 +1982,7 @@
<span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
</div>
</div>
@ -1991,7 +1991,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-57"
aria-controls="code-preview-source-group-65"
>
Source
<svg
@ -2052,7 +2052,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -2067,17 +2067,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

68
components/card/index.html
View File

@ -508,9 +508,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80<span class="token punctuation">"</span></span>
@ -542,11 +542,11 @@
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
@ -590,7 +590,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
</div>
</div>
@ -599,7 +599,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-66"
aria-controls="code-preview-source-group-67"
>
Source
<svg
@ -666,9 +666,9 @@
</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">
<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.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-card</span><span class="token punctuation">&gt;</span></span>
@ -677,11 +677,11 @@
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-299"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.card-basic {
@ -698,7 +698,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
</div>
</div>
@ -707,7 +707,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-67"
aria-controls="code-preview-source-group-68"
>
Source
<svg
@ -790,9 +790,9 @@
</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">
<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>
Header Title
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon-button</span><span class="token punctuation">&gt;</span></span>
@ -820,11 +820,11 @@
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-font-size-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -860,7 +860,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
</div>
</div>
@ -869,7 +869,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-68"
aria-controls="code-preview-source-group-69"
>
Source
<svg
@ -944,9 +944,9 @@
</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">
<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!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
@ -966,11 +966,11 @@
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
@ -1001,7 +1001,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
</div>
</div>
@ -1010,7 +1010,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-69"
aria-controls="code-preview-source-group-70"
>
Source
<svg
@ -1077,9 +1077,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-70">
<div class="code-preview__source-group" id="code-preview-source-group-71">
<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 attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80<span class="token punctuation">"</span></span>
@ -1093,11 +1093,11 @@
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-311"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.card-image {
@ -1119,7 +1119,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-312"></sl-copy-button></pre>
</div>
</div>
@ -1128,7 +1128,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-70"
aria-controls="code-preview-source-group-71"
>
Source
<svg
@ -1197,7 +1197,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-307"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="import">
@ -1212,17 +1212,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-308"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-309"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-310"><span class="token keyword">import</span> 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-group>

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

@ -504,9 +504,9 @@
</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">
<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>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>
@ -538,11 +538,11 @@
<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>
</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 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">const</span> <span class="token function-variable function">App</span> <span class="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">SlCarousel</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-312"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
</div>
</div>
@ -588,7 +588,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-71"
aria-controls="code-preview-source-group-66"
>
Source
<svg
@ -661,7 +661,7 @@
>
using a script tag:
</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 name="import">
@ -676,17 +676,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -483,17 +483,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-363"></sl-copy-button></pre>
<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-394"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -502,7 +502,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-91"
aria-controls="code-preview-source-group-103"
>
Source
<svg
@ -568,17 +568,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-365"></sl-copy-button></pre>
<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-396"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -587,7 +587,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-92"
aria-controls="code-preview-source-group-104"
>
Source
<svg
@ -646,17 +646,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-367"></sl-copy-button></pre>
<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-398"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -665,7 +665,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-93"
aria-controls="code-preview-source-group-105"
>
Source
<svg
@ -729,17 +729,17 @@
</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">
<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>hsl<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsl(290, 87%, 47%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-369"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -749,7 +749,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-370"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-401"></sl-copy-button></pre>
</div>
</div>
@ -758,7 +758,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-94"
aria-controls="code-preview-source-group-106"
>
Source
<svg
@ -824,20 +824,20 @@
</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">
<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">swatches</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
<span class="token punctuation">"</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-color-picker</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-371"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-402"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span>
@ -848,7 +848,7 @@
<span class="token punctuation">"</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-372"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-403"></sl-copy-button></pre>
</div>
</div>
@ -857,7 +857,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-95"
aria-controls="code-preview-source-group-107"
>
Source
<svg
@ -913,16 +913,16 @@
</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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -931,7 +931,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-374"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-405"></sl-copy-button></pre>
</div>
</div>
@ -940,7 +940,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-96"
aria-controls="code-preview-source-group-108"
>
Source
<svg
@ -996,17 +996,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-375"></sl-copy-button></pre>
<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-406"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -1015,7 +1015,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-97"
aria-controls="code-preview-source-group-109"
>
Source
<svg
@ -1084,7 +1084,7 @@
>
using a script tag:
</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 name="import">
@ -1099,17 +1099,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -484,19 +484,19 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-381"></sl-copy-button></pre>
<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-363"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 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>
</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>
@ -505,7 +505,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-98"
aria-controls="code-preview-source-group-91"
>
Source
<svg
@ -572,19 +572,19 @@
</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">
<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">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">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>
</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 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 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 punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-366"></sl-copy-button></pre>
</div>
</div>
@ -603,7 +603,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-99"
aria-controls="code-preview-source-group-92"
>
Source
<svg
@ -667,18 +667,18 @@
</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">
<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>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-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 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">const</span> <span class="token function-variable function">App</span> <span class="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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-368"></sl-copy-button></pre>
</div>
</div>
@ -699,7 +699,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-100"
aria-controls="code-preview-source-group-93"
>
Source
<svg
@ -806,9 +806,9 @@
</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">
<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>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 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>
</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 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">const</span> <span class="token function-variable function">App</span> <span class="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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-370"></sl-copy-button></pre>
</div>
</div>
@ -858,7 +858,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-101"
aria-controls="code-preview-source-group-94"
>
Source
<svg
@ -922,19 +922,19 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
<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-371"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-390"><span class="token keyword">import</span> <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 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>
</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>
@ -943,7 +943,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-102"
aria-controls="code-preview-source-group-95"
>
Source
<svg
@ -999,19 +999,19 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
<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-373"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-392"><span class="token keyword">import</span> <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 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>
</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>
@ -1020,7 +1020,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-103"
aria-controls="code-preview-source-group-96"
>
Source
<svg
@ -1082,19 +1082,19 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
<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-375"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-394"><span class="token keyword">import</span> <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 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>
</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>
@ -1103,7 +1103,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-104"
aria-controls="code-preview-source-group-97"
>
Source
<svg
@ -1195,9 +1195,9 @@
</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">
<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>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>
@ -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 punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-377"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-396"><span class="token keyword">import</span> <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">
.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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-378"></sl-copy-button></pre>
</div>
</div>
@ -1284,7 +1284,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-105"
aria-controls="code-preview-source-group-98"
>
Source
<svg
@ -1353,7 +1353,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-397"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="import">
@ -1368,17 +1368,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-398"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-399"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-400"><span class="token keyword">import</span> 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-group>

52
components/details/index.html
View File

@ -486,17 +486,17 @@
</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">
<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
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>
</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 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 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.
</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>
</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>
@ -513,7 +513,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-140"
aria-controls="code-preview-source-group-99"
>
Source
<svg
@ -576,17 +576,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-141">
<div class="code-preview__source-group" id="code-preview-source-group-100">
<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
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>
</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 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 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.
</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>
</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>
@ -603,7 +603,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-141"
aria-controls="code-preview-source-group-100"
>
Source
<svg
@ -680,9 +680,9 @@
</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">
<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>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 punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
</div>
</div>
@ -732,7 +732,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-142"
aria-controls="code-preview-source-group-101"
>
Source
<svg
@ -830,9 +830,9 @@
</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">
<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>
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.
@ -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 punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
</div>
</div>
@ -874,7 +874,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-143"
aria-controls="code-preview-source-group-102"
>
Source
<svg
@ -935,7 +935,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-496"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="import">
@ -950,17 +950,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-497"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-498"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-499"><span class="token keyword">import</span> 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-group>

80
components/dialog/index.html
View File

@ -509,9 +509,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -559,7 +559,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-106"
aria-controls="code-preview-source-group-110"
>
Source
<svg
@ -634,9 +634,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -684,7 +684,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-107"
aria-controls="code-preview-source-group-111"
>
Source
<svg
@ -761,9 +761,9 @@
</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">
<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>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>
@ -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>
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>
</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 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> 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 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>
@ -822,7 +822,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-108"
aria-controls="code-preview-source-group-112"
>
Source
<svg
@ -900,9 +900,9 @@
</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">
<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>
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>
@ -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>
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>
</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 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> 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>
@ -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 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>
@ -960,7 +960,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-109"
aria-controls="code-preview-source-group-113"
>
Source
<svg
@ -1055,9 +1055,9 @@
</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">
<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.
<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>
@ -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></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 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> 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 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>
@ -1119,7 +1119,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-110"
aria-controls="code-preview-source-group-114"
>
Source
<svg
@ -1199,9 +1199,9 @@
</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">
<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-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>
@ -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>
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>
</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 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> 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>
@ -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 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>
@ -1251,7 +1251,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-111"
aria-controls="code-preview-source-group-115"
>
Source
<svg
@ -1327,7 +1327,7 @@
>
using a script tag:
</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 name="import">
@ -1342,17 +1342,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

80
components/divider/index.html
View File

@ -477,17 +477,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-417"></sl-copy-button></pre>
<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-428"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -496,7 +496,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-112"
aria-controls="code-preview-source-group-116"
>
Source
<svg
@ -553,17 +553,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-419"></sl-copy-button></pre>
<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-430"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -572,7 +572,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-113"
aria-controls="code-preview-source-group-117"
>
Source
<svg
@ -626,17 +626,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-421"></sl-copy-button></pre>
<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-432"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -645,7 +645,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-114"
aria-controls="code-preview-source-group-118"
>
Source
<svg
@ -708,18 +708,18 @@
</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">
<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
<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
<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 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 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
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-424"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-435"></sl-copy-button></pre>
</div>
</div>
@ -737,7 +737,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-115"
aria-controls="code-preview-source-group-119"
>
Source
<svg
@ -802,20 +802,20 @@
</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">
<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
<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
<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
<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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
@ -832,7 +832,7 @@
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 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>
@ -841,7 +841,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-116"
aria-controls="code-preview-source-group-120"
>
Source
<svg
@ -905,9 +905,9 @@
</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">
<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>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>
@ -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>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>
</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 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> 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">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-428"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-439"></sl-copy-button></pre>
</div>
</div>
@ -944,7 +944,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-117"
aria-controls="code-preview-source-group-121"
>
Source
<svg
@ -1013,7 +1013,7 @@
>
using a script tag:
</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 name="import">
@ -1028,17 +1028,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

128
components/drawer/index.html
View File

@ -513,9 +513,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -563,7 +563,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-118"
aria-controls="code-preview-source-group-122"
>
Source
<svg
@ -641,9 +641,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -691,7 +691,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-119"
aria-controls="code-preview-source-group-123"
>
Source
<svg
@ -763,9 +763,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -813,7 +813,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-120"
aria-controls="code-preview-source-group-124"
>
Source
<svg
@ -888,9 +888,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -938,7 +938,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-121"
aria-controls="code-preview-source-group-125"
>
Source
<svg
@ -1041,9 +1041,9 @@
</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">
<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 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.
@ -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>
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>
</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 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> 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 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>
@ -1116,7 +1116,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-122"
aria-controls="code-preview-source-group-126"
>
Source
<svg
@ -1191,9 +1191,9 @@
</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">
<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.
<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>
@ -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>
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>
</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 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> 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 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>
@ -1241,7 +1241,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-123"
aria-controls="code-preview-source-group-127"
>
Source
<svg
@ -1318,9 +1318,9 @@
</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">
<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>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>
@ -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>
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>
</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 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> 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 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>
@ -1378,7 +1378,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-124"
aria-controls="code-preview-source-group-128"
>
Source
<svg
@ -1456,9 +1456,9 @@
</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">
<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>
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>
@ -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>
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>
</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 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> 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>
@ -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 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>
@ -1511,7 +1511,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-125"
aria-controls="code-preview-source-group-129"
>
Source
<svg
@ -1606,9 +1606,9 @@
</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">
<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.
<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>
@ -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></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 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> 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 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>
@ -1670,7 +1670,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-126"
aria-controls="code-preview-source-group-130"
>
Source
<svg
@ -1750,9 +1750,9 @@
</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">
<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-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>
@ -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>
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>
</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 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> 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>
@ -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 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>
@ -1802,7 +1802,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-127"
aria-controls="code-preview-source-group-131"
>
Source
<svg
@ -1878,7 +1878,7 @@
>
using a script tag:
</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 name="import">
@ -1893,17 +1893,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

104
components/dropdown/index.html
View File

@ -513,9 +513,9 @@
</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">
<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-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>
@ -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</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 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> 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>
@ -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">SlDropdown</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-458"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-469"></sl-copy-button></pre>
</div>
</div>
@ -581,7 +581,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-128"
aria-controls="code-preview-source-group-132"
>
Source
<svg
@ -669,9 +669,9 @@
</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">
<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-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>
@ -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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-459"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-470"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> 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>
@ -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 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>
@ -728,7 +728,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-129"
aria-controls="code-preview-source-group-133"
>
Source
<svg
@ -806,9 +806,9 @@
</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">
<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-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>
@ -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>
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>
</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 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> 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>
@ -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 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>
@ -873,7 +873,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-130"
aria-controls="code-preview-source-group-134"
>
Source
<svg
@ -942,9 +942,9 @@
</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">
<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-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>
@ -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</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 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> 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>
@ -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">SlDropdown</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-464"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-475"></sl-copy-button></pre>
</div>
</div>
@ -989,7 +989,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-131"
aria-controls="code-preview-source-group-135"
>
Source
<svg
@ -1058,9 +1058,9 @@
</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">
<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-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>
@ -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</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 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> 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>
@ -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">SlDropdown</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-466"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-477"></sl-copy-button></pre>
</div>
</div>
@ -1105,7 +1105,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-132"
aria-controls="code-preview-source-group-136"
>
Source
<svg
@ -1174,9 +1174,9 @@
</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">
<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-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>
@ -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</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 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> 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>
@ -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">SlDropdown</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-468"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-479"></sl-copy-button></pre>
</div>
</div>
@ -1221,7 +1221,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-133"
aria-controls="code-preview-source-group-137"
>
Source
<svg
@ -1308,9 +1308,9 @@
</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">
<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-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</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 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> 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>
@ -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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-470"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-481"></sl-copy-button></pre>
</div>
</div>
@ -1399,7 +1399,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-134"
aria-controls="code-preview-source-group-138"
>
Source
<svg
@ -1505,9 +1505,9 @@
</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">
<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-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>
@ -1535,11 +1535,11 @@
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-471"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-482"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> 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>
@ -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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-472"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-483"></sl-copy-button></pre>
</div>
</div>
@ -1591,7 +1591,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-135"
aria-controls="code-preview-source-group-139"
>
Source
<svg
@ -1660,7 +1660,7 @@
>
using a script tag:
</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 name="import">
@ -1675,17 +1675,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -487,9 +487,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number to Format<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -501,11 +501,11 @@
input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>formatter<span class="token punctuation">.</span>value <span class="token operator">=</span> input<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-477"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -528,7 +528,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-478"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
</div>
</div>
@ -537,7 +537,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-136"
aria-controls="code-preview-source-group-140"
>
Source
<svg
@ -599,17 +599,17 @@
</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">
<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>1200000<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-479"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -622,7 +622,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-480"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
</div>
</div>
@ -631,7 +631,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-137"
aria-controls="code-preview-source-group-141"
>
Source
<svg
@ -690,17 +690,17 @@
</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">
<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>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-481"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -713,7 +713,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-482"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
</div>
</div>
@ -722,7 +722,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-138"
aria-controls="code-preview-source-group-142"
>
Source
<svg
@ -781,17 +781,17 @@
</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">
<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>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-format-bytes</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-483"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -804,7 +804,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-484"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
</div>
</div>
@ -813,7 +813,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-139"
aria-controls="code-preview-source-group-143"
>
Source
<svg
@ -882,7 +882,7 @@
>
using a script tag:
</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 name="import">
@ -897,17 +897,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -499,9 +499,9 @@
</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">
<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>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>
@ -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>
</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 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> 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 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>
@ -549,7 +549,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-160"
aria-controls="code-preview-source-group-148"
>
Source
<svg
@ -612,18 +612,18 @@
</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">
<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.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>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 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 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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-546"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-515"></sl-copy-button></pre>
</div>
</div>
@ -647,7 +647,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-161"
aria-controls="code-preview-source-group-149"
>
Source
<svg
@ -705,16 +705,16 @@
</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">
<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>
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 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 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">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-548"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-517"></sl-copy-button></pre>
</div>
</div>
@ -734,7 +734,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-162"
aria-controls="code-preview-source-group-150"
>
Source
<svg
@ -798,18 +798,18 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
</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">
<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>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>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 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 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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-550"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-519"></sl-copy-button></pre>
</div>
</div>
@ -833,7 +833,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-163"
aria-controls="code-preview-source-group-151"
>
Source
<svg
@ -902,7 +902,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -917,17 +917,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -493,17 +493,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-512"></sl-copy-button></pre>
<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-524"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -512,7 +512,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-148"
aria-controls="code-preview-source-group-152"
>
Source
<svg
@ -571,16 +571,16 @@
</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">
<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> 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 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 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><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-515"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-527"></sl-copy-button></pre>
</div>
</div>
@ -598,7 +598,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-149"
aria-controls="code-preview-source-group-153"
>
Source
<svg
@ -674,9 +674,9 @@
</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">
<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-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>
@ -696,11 +696,11 @@
<span class="token property">color</span><span class="token punctuation">:</span> #960077<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-516"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-517"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-529"></sl-copy-button></pre>
</div>
</div>
@ -737,7 +737,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-150"
aria-controls="code-preview-source-group-154"
>
Source
<svg
@ -793,17 +793,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-518"></sl-copy-button></pre>
<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-530"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -812,7 +812,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-151"
aria-controls="code-preview-source-group-155"
>
Source
<svg
@ -873,16 +873,16 @@
</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">
<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-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 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">const</span> <span class="token function-variable function">App</span> <span class="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">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-521"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-533"></sl-copy-button></pre>
</div>
</div>
@ -899,7 +899,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-152"
aria-controls="code-preview-source-group-156"
>
Source
<svg
@ -955,17 +955,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-522"></sl-copy-button></pre>
<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-534"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -974,7 +974,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-153"
aria-controls="code-preview-source-group-157"
>
Source
<svg
@ -1043,7 +1043,7 @@
>
using a script tag:
</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 name="import">
@ -1058,17 +1058,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-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
copy its name, then you can use it in your HTML like this.
</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>
</code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre>
<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-540"></sl-copy-button></pre>
<div class="icon-search">
<div class="icon-search-controls">
<sl-input placeholder="Search Icons" clearable="">
@ -560,9 +560,9 @@
</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">
<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>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>
@ -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>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>
</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 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 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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-530"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-542"></sl-copy-button></pre>
</div>
</div>
@ -629,7 +629,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-154"
aria-controls="code-preview-source-group-158"
>
Source
<svg
@ -703,9 +703,9 @@
</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">
<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>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>
@ -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>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>
</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>
@ -732,7 +732,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-155"
aria-controls="code-preview-source-group-159"
>
Source
<svg
@ -778,17 +778,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-532"></sl-copy-button></pre>
<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-544"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -797,7 +797,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-156"
aria-controls="code-preview-source-group-160"
>
Source
<svg
@ -917,9 +917,9 @@
</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">
<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>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>
@ -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>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>
</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>
@ -958,7 +958,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-157"
aria-controls="code-preview-source-group-161"
>
Source
<svg
@ -1034,9 +1034,9 @@
</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">
<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>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>
@ -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>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>
</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>
@ -1068,7 +1068,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-158"
aria-controls="code-preview-source-group-162"
>
Source
<svg
@ -1171,9 +1171,9 @@
</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">
<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 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-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>
</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>
@ -1219,7 +1219,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-159"
aria-controls="code-preview-source-group-163"
>
Source
<svg
@ -1270,14 +1270,14 @@
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.
</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 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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-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 -->
<script>
function wrapWithTooltip(item) {
@ -1466,8 +1466,8 @@
}
}
</style>
<pre><code id="code-block-538">
</code><sl-copy-button class="copy-code-button" from="code-block-538"></sl-copy-button></pre>
<pre><code id="code-block-550">
</code><sl-copy-button class="copy-code-button" from="code-block-550"></sl-copy-button></pre>
<h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -1496,7 +1496,7 @@
>
using a script tag:
</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 name="import">
@ -1511,17 +1511,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

24
components/include/index.html
View File

@ -482,17 +482,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
<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-608"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-593"><span class="token keyword">import</span> 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>
</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>
@ -501,7 +501,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-179"
aria-controls="code-preview-source-group-185"
>
Source
<svg
@ -558,7 +558,7 @@
<code>event.detail.status</code> will contain the resulting HTTP status code of the request, e.g. 404 (not
found).
</p>
<pre><code class="language-html" id="code-block-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 keyword">const</span> include <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-include'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -575,7 +575,7 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-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">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -604,7 +604,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -619,17 +619,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -497,9 +497,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -516,11 +516,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heart<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -546,7 +546,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
</div>
</div>
@ -555,7 +555,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-180"
aria-controls="code-preview-source-group-179"
>
Source
<svg
@ -634,9 +634,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-181">
<div class="code-preview__source-group" id="code-preview-source-group-180">
<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-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Home
@ -655,11 +655,11 @@
Settings
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
@ -688,7 +688,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
</div>
</div>
@ -697,7 +697,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-181"
aria-controls="code-preview-source-group-180"
>
Source
<svg
@ -757,18 +757,18 @@
</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">
<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 attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -778,7 +778,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-604"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
</div>
</div>
@ -787,7 +787,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-182"
aria-controls="code-preview-source-group-181"
>
Source
<svg
@ -850,18 +850,18 @@
</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">
<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 attr-name">loading</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-605"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-598"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-606"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -871,7 +871,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-606"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
</div>
</div>
@ -880,7 +880,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-183"
aria-controls="code-preview-source-group-182"
>
Source
<svg
@ -947,18 +947,18 @@
</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">
<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 attr-name">checked</span><span class="token punctuation">&gt;</span></span>Check Spelling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Word Wrap<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-607"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-608"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -970,7 +970,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Word Wrap</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
</div>
</div>
@ -979,7 +979,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-184"
aria-controls="code-preview-source-group-183"
>
Source
<svg
@ -1065,9 +1065,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-185">
<div class="code-preview__source-group" id="code-preview-source-group-184">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-menu-item</span><span class="token punctuation">&gt;</span></span>
@ -1091,11 +1091,11 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-610"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -1117,7 +1117,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
</div>
</div>
@ -1126,7 +1126,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-185"
aria-controls="code-preview-source-group-184"
>
Source
<svg
@ -1195,7 +1195,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-611"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-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 name="import">
@ -1210,17 +1210,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-612"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-613"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-614"><span class="token keyword">import</span> 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-group>

40
components/option/index.html
View File

@ -490,18 +490,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -511,7 +511,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
</div>
</div>
@ -520,7 +520,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-192"
aria-controls="code-preview-source-group-224"
>
Source
<svg
@ -583,18 +583,18 @@
</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">
<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-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -606,7 +606,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-724"></sl-copy-button></pre>
</div>
</div>
@ -615,7 +615,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-193"
aria-controls="code-preview-source-group-225"
>
Source
<svg
@ -691,9 +691,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-194">
<div class="code-preview__source-group" id="code-preview-source-group-226">
<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-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>envelope<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Email
@ -712,7 +712,7 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>patch-check<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
</div>
</div>
@ -721,7 +721,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-194"
aria-controls="code-preview-source-group-226"
>
Source
<svg
@ -782,7 +782,7 @@
>
using a script tag:
</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 name="import">
@ -797,17 +797,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

196
components/popup/index.html
View File

@ -617,9 +617,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -705,11 +705,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -828,7 +828,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
</div>
</div>
@ -837,7 +837,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-195"
aria-controls="code-preview-source-group-192"
>
Source
<svg
@ -943,9 +943,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-196">
<div class="code-preview__source-group" id="code-preview-source-group-193">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -979,11 +979,11 @@
active<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>active <span class="token operator">=</span> active<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -1025,7 +1025,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
</div>
</div>
@ -1034,7 +1034,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-196"
aria-controls="code-preview-source-group-193"
>
Source
<svg
@ -1116,9 +1116,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-197">
<div class="code-preview__source-group" id="code-preview-source-group-194">
<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1140,11 +1140,11 @@
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-653"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-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">
#external-anchor {
@ -1176,7 +1176,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-644"></sl-copy-button></pre>
</div>
</div>
@ -1185,7 +1185,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-197"
aria-controls="code-preview-source-group-194"
>
Source
<svg
@ -1301,9 +1301,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-198">
<div class="code-preview__source-group" id="code-preview-source-group-195">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1353,11 +1353,11 @@
select<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>placement <span class="token operator">=</span> select<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-645"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-655"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -1414,7 +1414,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-646"></sl-copy-button></pre>
</div>
</div>
@ -1423,7 +1423,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-198"
aria-controls="code-preview-source-group-195"
>
Source
<svg
@ -1520,9 +1520,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-199">
<div class="code-preview__source-group" id="code-preview-source-group-196">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1559,11 +1559,11 @@
distance<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>distance <span class="token operator">=</span> distance<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-647"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-657"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
@ -1613,7 +1613,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
</div>
</div>
@ -1622,7 +1622,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-199"
aria-controls="code-preview-source-group-196"
>
Source
<svg
@ -1719,9 +1719,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-200">
<div class="code-preview__source-group" id="code-preview-source-group-197">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -1758,11 +1758,11 @@
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-659"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<pre><code class="language-jsx" id="code-block-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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
@ -1812,7 +1812,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
</div>
</div>
@ -1821,7 +1821,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-200"
aria-controls="code-preview-source-group-197"
>
Source
<svg
@ -1968,9 +1968,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-201">
<div class="code-preview__source-group" id="code-preview-source-group-198">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -2052,11 +2052,11 @@
arrow<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>arrow <span class="token operator">=</span> arrow<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -2157,7 +2157,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
</div>
</div>
@ -2166,7 +2166,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-201"
aria-controls="code-preview-source-group-198"
>
Source
<svg
@ -2274,9 +2274,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-202">
<div class="code-preview__source-group" id="code-preview-source-group-199">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -2321,11 +2321,11 @@
sync<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>sync <span class="token operator">=</span> sync<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
@ -2376,7 +2376,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
</div>
</div>
@ -2385,7 +2385,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-202"
aria-controls="code-preview-source-group-199"
>
Source
<svg
@ -2519,9 +2519,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-203">
<div class="code-preview__source-group" id="code-preview-source-group-200">
<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>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2567,11 +2567,11 @@
fixed<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>strategy <span class="token operator">=</span> fixed<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'fixed'</span> <span class="token operator">:</span> <span class="token string">'absolute'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -2625,7 +2625,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
</div>
</div>
@ -2634,7 +2634,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-203"
aria-controls="code-preview-source-group-200"
>
Source
<svg
@ -2739,9 +2739,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-204">
<div class="code-preview__source-group" id="code-preview-source-group-201">
<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>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2784,11 +2784,11 @@
flip<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>flip <span class="token operator">=</span> flip<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -2839,7 +2839,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
</div>
</div>
@ -2848,7 +2848,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-204"
aria-controls="code-preview-source-group-201"
>
Source
<svg
@ -2957,9 +2957,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-205">
<div class="code-preview__source-group" id="code-preview-source-group-202">
<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>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">flip-fallback-placements</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right bottom<span class="token punctuation">"</span></span> <span class="token attr-name">flip-fallback-strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>initial<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -2991,11 +2991,11 @@
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-669"><span class="token keyword">import</span> 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">
.popup-flip-fallbacks .overflow {
@ -3037,7 +3037,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
</div>
</div>
@ -3046,7 +3046,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-205"
aria-controls="code-preview-source-group-202"
>
Source
<svg
@ -3147,9 +3147,9 @@
</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">
<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>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">shift</span> <span class="token attr-name">shift-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -3190,11 +3190,11 @@
shift<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>shift <span class="token operator">=</span> shift<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-670"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-671"><span class="token keyword">import</span> <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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3243,7 +3243,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-671"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
</div>
</div>
@ -3252,7 +3252,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-206"
aria-controls="code-preview-source-group-203"
>
Source
<svg
@ -3372,9 +3372,9 @@
</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">
<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>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>both<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
@ -3424,11 +3424,11 @@
autoSize<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>autoSize <span class="token operator">=</span> autoSize<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'both'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-672"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-673"><span class="token keyword">import</span> <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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3486,7 +3486,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-673"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
</div>
</div>
@ -3495,7 +3495,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-207"
aria-controls="code-preview-source-group-204"
>
Source
<svg
@ -3608,9 +3608,9 @@
</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">
<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>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
@ -3660,11 +3660,11 @@
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
hoverBridge<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>hoverBridge <span class="token operator">=</span> hoverBridge<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-674"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-675"><span class="token keyword">import</span> <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> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -3738,7 +3738,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
</div>
</div>
@ -3747,7 +3747,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-208"
aria-controls="code-preview-source-group-205"
>
Source
<svg
@ -3805,13 +3805,13 @@
>
object as shown below.
</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 comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
<p>
This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to
properly view it.
@ -3904,9 +3904,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-popup</span><span class="token punctuation">&gt;</span></span>
@ -3979,11 +3979,11 @@
<span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">scale</span><span class="token punctuation">:</span> 1.1<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
@ -4065,7 +4065,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
</div>
</div>
@ -4074,7 +4074,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-209"
aria-controls="code-preview-source-group-206"
>
Source
<svg
@ -4120,14 +4120,14 @@
Sometimes the <code>getBoundingClientRects</code> might be derived from a real element. In this case provide
the anchor element as context to ensure clipping and position updates for the popup work well.
</p>
<pre><code class="language-ts" id="code-block-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 comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
contextElement<span class="token operator">:</span> anchorElement
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-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">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -4156,7 +4156,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -4171,17 +4171,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-681"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-682"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-683"><span class="token keyword">import</span> 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-group>

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

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

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

@ -487,17 +487,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
<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-730"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-699"><span class="token keyword">import</span> 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>
</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>
@ -506,7 +506,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-215"
aria-controls="code-preview-source-group-227"
>
Source
<svg
@ -563,17 +563,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-216">
<div class="code-preview__source-group" id="code-preview-source-group-228">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
<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-732"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-701"><span class="token keyword">import</span> 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>
</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>
@ -582,7 +582,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-216"
aria-controls="code-preview-source-group-228"
>
Source
<svg
@ -644,17 +644,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-217">
<div class="code-preview__source-group" id="code-preview-source-group-229">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
<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-734"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-703"><span class="token keyword">import</span> 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>
</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>
@ -663,7 +663,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-217"
aria-controls="code-preview-source-group-229"
>
Source
<svg
@ -720,20 +720,20 @@
</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">
<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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
--track-color: pink;
--indicator-color: deeppink;
<span class="token punctuation">"</span></span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-progress-ring</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-736"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-705"><span class="token keyword">import</span> 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlProgressRing</span></span>
@ -744,7 +744,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre>
</div>
</div>
@ -753,7 +753,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-218"
aria-controls="code-preview-source-group-230"
>
Source
<svg
@ -810,17 +810,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
<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-738"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-707"><span class="token keyword">import</span> 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>
</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>
@ -829,7 +829,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-219"
aria-controls="code-preview-source-group-231"
>
Source
<svg
@ -912,9 +912,9 @@
</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">
<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>
@ -938,11 +938,11 @@
progressRing<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-740"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
@ -975,7 +975,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre>
</div>
</div>
@ -984,7 +984,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-220"
aria-controls="code-preview-source-group-232"
>
Source
<svg
@ -1053,7 +1053,7 @@
>
using a script tag:
</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 name="import">
@ -1068,17 +1068,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -526,9 +526,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>br</span> <span class="token punctuation">/&gt;</span></span>
@ -555,11 +555,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-715"><span class="token keyword">import</span> <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> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
@ -589,7 +589,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
</div>
</div>
@ -598,7 +598,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-221"
aria-controls="code-preview-source-group-207"
>
Source
<svg
@ -658,17 +658,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-222">
<div class="code-preview__source-group" id="code-preview-source-group-208">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
<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-677"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-717"><span class="token keyword">import</span> 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>
</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>
@ -677,7 +677,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-222"
aria-controls="code-preview-source-group-208"
>
Source
<svg
@ -731,17 +731,17 @@
</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">
<pre><code class="language-html" id="code-block-718"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
<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-679"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-719"><span class="token keyword">import</span> 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>
</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>
@ -750,7 +750,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-223"
aria-controls="code-preview-source-group-209"
>
Source
<svg
@ -804,17 +804,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-224">
<div class="code-preview__source-group" id="code-preview-source-group-210">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
<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-681"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-721"><span class="token keyword">import</span> 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>
</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>
@ -823,7 +823,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-224"
aria-controls="code-preview-source-group-210"
>
Source
<svg
@ -903,9 +903,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-225">
<div class="code-preview__source-group" id="code-preview-source-group-211">
<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>M<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Q<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-qr-code</span><span class="token punctuation">&gt;</span></span>
@ -919,11 +919,11 @@
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-723"><span class="token keyword">import</span> 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">
.qr-error-correction {
@ -947,7 +947,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-684"></sl-copy-button></pre>
</div>
</div>
@ -956,7 +956,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-225"
aria-controls="code-preview-source-group-211"
>
Source
<svg
@ -1025,7 +1025,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-724"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="import">
@ -1040,17 +1040,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-725"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-726"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-727"><span class="token keyword">import</span> 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-group>

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

@ -499,18 +499,18 @@
</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">
<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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-728"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-729"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
</div>
</div>
@ -529,7 +529,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-226"
aria-controls="code-preview-source-group-217"
>
Source
<svg
@ -595,18 +595,18 @@
</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">
<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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-730"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-731"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
</div>
</div>
@ -625,7 +625,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-227"
aria-controls="code-preview-source-group-218"
>
Source
<svg
@ -685,18 +685,18 @@
</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">
<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>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-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 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">const</span> <span class="token function-variable function">App</span> <span class="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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-733"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
</div>
</div>
@ -717,7 +717,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-228"
aria-controls="code-preview-source-group-219"
>
Source
<svg
@ -791,9 +791,9 @@
</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">
<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>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>
@ -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>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-734"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-735"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
</div>
</div>
@ -853,7 +853,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-229"
aria-controls="code-preview-source-group-220"
>
Source
<svg
@ -929,9 +929,9 @@
</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">
<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>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>
@ -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>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-736"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
</div>
</div>
@ -991,7 +991,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-230"
aria-controls="code-preview-source-group-221"
>
Source
<svg
@ -1066,9 +1066,9 @@
</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">
<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-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
@ -1085,11 +1085,11 @@
Option 3
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-738"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> 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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-739"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
</div>
</div>
@ -1121,7 +1121,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-231"
aria-controls="code-preview-source-group-222"
>
Source
<svg
@ -1200,9 +1200,9 @@
</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">
<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-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>
@ -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-radio-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-740"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> 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">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
</div>
</div>
@ -1263,7 +1263,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-232"
aria-controls="code-preview-source-group-223"
>
Source
<svg
@ -1332,7 +1332,7 @@
>
using a script tag:
</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 name="import">
@ -1347,17 +1347,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

52
components/radio/index.html
View File

@ -484,18 +484,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-788"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -505,7 +505,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-789"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
</div>
</div>
@ -514,7 +514,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-249"
aria-controls="code-preview-source-group-239"
>
Source
<svg
@ -587,18 +587,18 @@
</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">
<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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-790"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -608,7 +608,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-791"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
</div>
</div>
@ -617,7 +617,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-250"
aria-controls="code-preview-source-group-240"
>
Source
<svg
@ -677,18 +677,18 @@
</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">
<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>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-792"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -700,7 +700,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-793"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
</div>
</div>
@ -709,7 +709,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-251"
aria-controls="code-preview-source-group-241"
>
Source
<svg
@ -756,7 +756,7 @@
Add the <code>size</code> attribute to the <a href="/components/radio-group">Radio Group</a> to change the
radios’ size.
</p>
<pre><code class="language-html" id="code-block-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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Small 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
@ -777,8 +777,8 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-radio-group</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-794"></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>
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
<pre><code class="language-jsx" id="code-block-771"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -805,7 +805,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-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">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
@ -834,7 +834,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -849,17 +849,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

128
components/range/index.html
View File

@ -493,17 +493,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
<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-867"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-765"><span class="token keyword">import</span> 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>
</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>
@ -512,7 +512,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-239"
aria-controls="code-preview-source-group-278"
>
Source
<svg
@ -579,17 +579,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
<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-869"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-767"><span class="token keyword">import</span> 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>
</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>
@ -598,7 +598,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-240"
aria-controls="code-preview-source-group-279"
>
Source
<svg
@ -662,17 +662,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-871"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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-871"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-769"><span class="token keyword">import</span> 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>
</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>
@ -681,7 +681,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-241"
aria-controls="code-preview-source-group-280"
>
Source
<svg
@ -741,17 +741,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
<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-873"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -760,7 +760,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-242"
aria-controls="code-preview-source-group-281"
>
Source
<svg
@ -816,17 +816,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre>
<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-875"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -835,7 +835,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-243"
aria-controls="code-preview-source-group-282"
>
Source
<svg
@ -894,17 +894,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre>
<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-877"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -913,7 +913,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-244"
aria-controls="code-preview-source-group-283"
>
Source
<svg
@ -969,17 +969,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-776"></sl-copy-button></pre>
<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-879"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -988,7 +988,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-245"
aria-controls="code-preview-source-group-284"
>
Source
<svg
@ -1052,19 +1052,19 @@
</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">
<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>
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
<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>
</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 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 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">/&gt;</span></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>
@ -1083,7 +1083,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-246"
aria-controls="code-preview-source-group-285"
>
Source
<svg
@ -1150,9 +1150,9 @@
</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">
<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">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>
@ -1161,11 +1161,11 @@
--track-active-offset: 50%;
<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>
</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 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 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">/&gt;</span></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>
@ -1187,7 +1187,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-247"
aria-controls="code-preview-source-group-286"
>
Source
<svg
@ -1256,22 +1256,22 @@
</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">
<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 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>
</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 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>
</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>
@ -1280,7 +1280,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-248"
aria-controls="code-preview-source-group-287"
>
Source
<svg
@ -1349,7 +1349,7 @@
>
using a script tag:
</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 name="import">
@ -1364,17 +1364,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

128
components/rating/index.html
View File

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

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

@ -486,18 +486,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</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 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>
</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>
@ -506,7 +506,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-262"
aria-controls="code-preview-source-group-252"
>
Source
<svg
@ -609,9 +609,9 @@
</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">
<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>div</span><span class="token punctuation">&gt;</span></span>
@ -621,16 +621,16 @@
relativeTime<span class="token punctuation">.</span>date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> <span class="token function-variable function">App</span> <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>
@ -639,7 +639,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-263"
aria-controls="code-preview-source-group-253"
>
Source
<svg
@ -700,16 +700,16 @@
</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">
<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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -720,7 +720,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
</div>
</div>
@ -729,7 +729,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-264"
aria-controls="code-preview-source-group-254"
>
Source
<svg
@ -789,18 +789,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
German: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Greek: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-relative-time</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -815,7 +815,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
</div>
</div>
@ -824,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-265"
aria-controls="code-preview-source-group-255"
>
Source
<svg
@ -893,7 +893,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -908,17 +908,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

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

184
components/select/index.html
View File

@ -497,9 +497,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -507,11 +507,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -524,7 +524,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-819"></sl-copy-button></pre>
</div>
</div>
@ -533,7 +533,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-267"
aria-controls="code-preview-source-group-257"
>
Source
<svg
@ -604,18 +604,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -625,7 +625,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-821"></sl-copy-button></pre>
</div>
</div>
@ -634,7 +634,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-268"
aria-controls="code-preview-source-group-258"
>
Source
<svg
@ -697,18 +697,18 @@
</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">
<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>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Intermediate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -718,7 +718,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Advanced</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-847"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-823"></sl-copy-button></pre>
</div>
</div>
@ -727,7 +727,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-269"
aria-controls="code-preview-source-group-259"
>
Source
<svg
@ -787,18 +787,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-848"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -808,7 +808,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-849"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-825"></sl-copy-button></pre>
</div>
</div>
@ -817,7 +817,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-270"
aria-controls="code-preview-source-group-260"
>
Source
<svg
@ -880,18 +880,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-850"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -901,7 +901,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-827"></sl-copy-button></pre>
</div>
</div>
@ -910,7 +910,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-271"
aria-controls="code-preview-source-group-261"
>
Source
<svg
@ -970,18 +970,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -991,7 +991,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
</div>
</div>
@ -1000,7 +1000,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-272"
aria-controls="code-preview-source-group-262"
>
Source
<svg
@ -1058,18 +1058,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1079,7 +1079,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
</div>
</div>
@ -1088,7 +1088,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-273"
aria-controls="code-preview-source-group-263"
>
Source
<svg
@ -1148,18 +1148,18 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1169,7 +1169,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
</div>
</div>
@ -1178,7 +1178,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-274"
aria-controls="code-preview-source-group-264"
>
Source
<svg
@ -1245,9 +1245,9 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1255,11 +1255,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-859"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1272,7 +1272,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-835"></sl-copy-button></pre>
</div>
</div>
@ -1281,7 +1281,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-275"
aria-controls="code-preview-source-group-265"
>
Source
<svg
@ -1357,19 +1357,19 @@
</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">
<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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
@ -1380,7 +1380,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-837"></sl-copy-button></pre>
</div>
</div>
@ -1389,7 +1389,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-276"
aria-controls="code-preview-source-group-266"
>
Source
<svg
@ -1458,9 +1458,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-277">
<div class="code-preview__source-group" id="code-preview-source-group-267">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1471,11 +1471,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-863"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1488,7 +1488,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-863"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-839"></sl-copy-button></pre>
</div>
</div>
@ -1497,7 +1497,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-277"
aria-controls="code-preview-source-group-267"
>
Source
<svg
@ -1574,9 +1574,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-278">
<div class="code-preview__source-group" id="code-preview-source-group-268">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1597,11 +1597,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-864"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-865"><span class="token keyword">import</span> 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1629,7 +1629,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-865"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
</div>
</div>
@ -1638,7 +1638,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-278"
aria-controls="code-preview-source-group-268"
>
Source
<svg
@ -1702,18 +1702,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-279">
<div class="code-preview__source-group" id="code-preview-source-group-269">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-866"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1723,7 +1723,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlOption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
);
</span></code><sl-copy-button class="copy-code-button" from="code-block-867"></sl-copy-button></pre>
</span></code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
</div>
</div>
@ -1732,7 +1732,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-279"
aria-controls="code-preview-source-group-269"
>
Source
<svg
@ -1807,9 +1807,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-280">
<div class="code-preview__source-group" id="code-preview-source-group-270">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -1829,11 +1829,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-select</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
@ -1861,7 +1861,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-869"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
</div>
</div>
@ -1870,7 +1870,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-280"
aria-controls="code-preview-source-group-270"
>
Source
<svg
@ -1988,9 +1988,9 @@
</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">
<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">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email phone<span class="token punctuation">"</span></span>
<span class="token attr-name">multiple</span>
@ -2027,7 +2027,7 @@
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
</div>
</div>
@ -2036,7 +2036,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-281"
aria-controls="code-preview-source-group-271"
>
Source
<svg
@ -2104,7 +2104,7 @@
>
using a script tag:
</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 name="import">
@ -2119,17 +2119,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

80
components/skeleton/index.html
View File

@ -538,9 +538,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -583,11 +583,11 @@
<span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-887"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-overview header {
@ -638,7 +638,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-888"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
</div>
</div>
@ -647,7 +647,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-286"
aria-controls="code-preview-source-group-272"
>
Source
<svg
@ -729,9 +729,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-287">
<div class="code-preview__source-group" id="code-preview-source-group-273">
<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>
None
@ -751,11 +751,11 @@
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-889"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-effects {
@ -781,7 +781,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
</div>
</div>
@ -790,7 +790,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-287"
aria-controls="code-preview-source-group-273"
>
Source
<svg
@ -870,9 +870,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-288">
<div class="code-preview__source-group" id="code-preview-source-group-274">
<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>
@ -897,11 +897,11 @@
<span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-paragraphs sl-skeleton {
@ -934,7 +934,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
</div>
</div>
@ -943,7 +943,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-288"
aria-controls="code-preview-source-group-274"
>
Source
<svg
@ -1020,9 +1020,9 @@
</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">
<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>
@ -1044,11 +1044,11 @@
<span class="token property">--border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-avatars sl-skeleton {
@ -1078,7 +1078,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
</div>
</div>
@ -1087,7 +1087,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-289"
aria-controls="code-preview-source-group-275"
>
Source
<svg
@ -1204,9 +1204,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-290">
<div class="code-preview__source-group" id="code-preview-source-group-276">
<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>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triangle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-skeleton</span><span class="token punctuation">&gt;</span></span>
@ -1261,11 +1261,11 @@
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-shapes sl-skeleton {
@ -1315,7 +1315,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
</div>
</div>
@ -1324,7 +1324,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-290"
aria-controls="code-preview-source-group-276"
>
Source
<svg
@ -1383,14 +1383,14 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
<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-861"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.skeleton-avatars sl-skeleton {
@ -1410,7 +1410,7 @@
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSkeleton</span></span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--color'</span><span class="token operator">:</span> <span class="token string">'tomato'</span><span class="token punctuation">,</span> <span class="token string-property property">'--sheen-color'</span><span class="token operator">:</span> <span class="token string">'#ffb094'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
</div>
</div>
@ -1419,7 +1419,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-291"
aria-controls="code-preview-source-group-277"
>
Source
<svg
@ -1488,7 +1488,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-899"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="import">
@ -1503,17 +1503,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-900"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-901"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-902"><span class="token keyword">import</span> 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-group>

56
components/spinner/index.html
View File

@ -475,17 +475,17 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
<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-916"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -494,7 +494,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-282"
aria-controls="code-preview-source-group-299"
>
Source
<svg
@ -556,16 +556,16 @@
</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">
<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> 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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -574,7 +574,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'3rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-919"></sl-copy-button></pre>
</div>
</div>
@ -583,7 +583,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-283"
aria-controls="code-preview-source-group-300"
>
Source
<svg
@ -641,14 +641,14 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
<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-920"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span>
@ -658,7 +658,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-921"></sl-copy-button></pre>
</div>
</div>
@ -667,7 +667,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-284"
aria-controls="code-preview-source-group-301"
>
Source
<svg
@ -724,14 +724,14 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
<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-922"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSpinner</span></span>
@ -742,7 +742,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-923"></sl-copy-button></pre>
</div>
</div>
@ -751,7 +751,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-285"
aria-controls="code-preview-source-group-302"
>
Source
<svg
@ -820,7 +820,7 @@
>
using a script tag:
</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 name="import">
@ -835,17 +835,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

@ -519,9 +519,9 @@
</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">
<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 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>
@ -535,11 +535,11 @@
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>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 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 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><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>
</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>
@ -578,7 +578,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-292"
aria-controls="code-preview-source-group-288"
>
Source
<svg
@ -667,9 +667,9 @@
</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">
<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 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>
@ -683,7 +683,7 @@
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>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>
@ -692,7 +692,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-293"
aria-controls="code-preview-source-group-289"
>
Source
<svg
@ -773,9 +773,9 @@
</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">
<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 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>
@ -789,11 +789,11 @@
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>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 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 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><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>
</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>
@ -832,7 +832,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-294"
aria-controls="code-preview-source-group-290"
>
Source
<svg
@ -918,9 +918,9 @@
</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">
<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 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>
@ -934,11 +934,11 @@
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>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 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 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><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>
</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>
@ -977,7 +977,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-295"
aria-controls="code-preview-source-group-291"
>
Source
<svg
@ -1095,9 +1095,9 @@
</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">
<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>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>
@ -1141,11 +1141,11 @@
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-910"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-911"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
</div>
</div>
@ -1218,7 +1218,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-296"
aria-controls="code-preview-source-group-292"
>
Source
<svg
@ -1301,9 +1301,9 @@
</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">
<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 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>
@ -1317,11 +1317,11 @@
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>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 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 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><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>
</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>
@ -1360,7 +1360,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-297"
aria-controls="code-preview-source-group-293"
>
Source
<svg
@ -1470,9 +1470,9 @@
</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">
<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>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>
@ -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>
</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 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> 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>
@ -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 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>
@ -1565,7 +1565,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-298"
aria-controls="code-preview-source-group-294"
>
Source
<svg
@ -1657,9 +1657,9 @@
</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">
<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 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>
@ -1673,11 +1673,11 @@
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>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 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 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><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>
</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>
@ -1716,7 +1716,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-299"
aria-controls="code-preview-source-group-295"
>
Source
<svg
@ -1816,9 +1816,9 @@
</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">
<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 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>
@ -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>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>
</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 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 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><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>
</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>
@ -1901,7 +1901,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-300"
aria-controls="code-preview-source-group-296"
>
Source
<svg
@ -1992,9 +1992,9 @@
</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">
<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>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>
@ -2009,11 +2009,11 @@
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>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 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">const</span> <span class="token function-variable function">App</span> <span class="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><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>
</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>
@ -2054,7 +2054,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-301"
aria-controls="code-preview-source-group-297"
>
Source
<svg
@ -2164,9 +2164,9 @@
</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">
<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-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>
@ -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 punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-922"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-910"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">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></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-923"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-911"></sl-copy-button></pre>
</div>
</div>
@ -2288,7 +2288,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-302"
aria-controls="code-preview-source-group-298"
>
Source
<svg
@ -2357,7 +2357,7 @@
>
using a script tag:
</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 name="import">
@ -2372,17 +2372,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

80
components/switch/index.html
View File

@ -481,17 +481,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
<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-946"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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>
</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>
@ -500,7 +500,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-303"
aria-controls="code-preview-source-group-310"
>
Source
<svg
@ -566,17 +566,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-930"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-948"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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-948"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-931"><span class="token keyword">import</span> 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>
</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>
@ -585,7 +585,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-304"
aria-controls="code-preview-source-group-311"
>
Source
<svg
@ -641,17 +641,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
<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-950"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-933"><span class="token keyword">import</span> 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>
</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>
@ -660,7 +660,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-305"
aria-controls="code-preview-source-group-312"
>
Source
<svg
@ -718,18 +718,18 @@
</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">
<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>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-switch</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-935"><span class="token keyword">import</span> 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -740,7 +740,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
</div>
</div>
@ -749,7 +749,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-306"
aria-controls="code-preview-source-group-313"
>
Source
<svg
@ -808,17 +808,17 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
<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-954"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-937"><span class="token keyword">import</span> 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>
</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>
@ -827,7 +827,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-307"
aria-controls="code-preview-source-group-314"
>
Source
<svg
@ -883,14 +883,14 @@
</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">
<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>
</code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-956"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-switch</span> <span class="token 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-956"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlSwitch</span></span>
@ -901,7 +901,7 @@
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
</div>
</div>
@ -910,7 +910,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-308"
aria-controls="code-preview-source-group-315"
>
Source
<svg
@ -979,7 +979,7 @@
>
using a script tag:
</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 name="import">
@ -994,17 +994,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

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

8
components/tab/index.html
View File

@ -499,7 +499,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-968"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
<pre><code class="language-html" id="code-block-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 name="import">
@ -514,17 +514,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-969"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-970"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-971"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
<pre><code class="language-js" id="code-block-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-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 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>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-973"><span class="token keyword">import</span> 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -504,7 +504,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
</div>
</div>
@ -574,14 +574,14 @@
<div class="code-preview__source-group" id="code-preview-source-group-318">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -590,7 +590,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
</div>
</div>
@ -657,14 +657,14 @@
<div class="code-preview__source-group" id="code-preview-source-group-319">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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>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 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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
@ -679,7 +679,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTag</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-977"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
</div>
</div>
@ -768,7 +768,7 @@
<div class="code-preview__source-group" id="code-preview-source-group-320">
<div class="code-preview__source code-preview__source--html" data-flavor="html">
<pre><code class="language-html" id="code-block-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>medium<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tag</span><span class="token punctuation">&gt;</span></span>
@ -789,11 +789,11 @@
<span class="token property">transition</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-transition-medium<span class="token punctuation">)</span> opacity<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-978"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">
.tags-removable sl-tag {
@ -828,7 +828,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
</div>
</div>
@ -906,7 +906,7 @@
>
using a script tag:
</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 name="import">
@ -921,17 +921,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

108
components/tooltip/index.html
View File

@ -496,16 +496,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-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 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -513,7 +513,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
</div>
</div>
@ -522,7 +522,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-341"
aria-controls="code-preview-source-group-331"
>
Source
<svg
@ -670,9 +670,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
@ -762,11 +762,11 @@
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>40px * 3<span class="token punctuation">)</span> + <span class="token punctuation">(</span>0.25rem * 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1038"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -864,7 +864,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1039"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
</div>
</div>
@ -873,7 +873,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-342"
aria-controls="code-preview-source-group-332"
>
Source
<svg
@ -934,16 +934,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-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 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -951,7 +951,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Click to Toggle</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
</div>
</div>
@ -960,7 +960,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-343"
aria-controls="code-preview-source-group-333"
>
Source
<svg
@ -1032,9 +1032,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-avatar</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-avatar</span><span class="token punctuation">&gt;</span></span>
@ -1046,11 +1046,11 @@
toggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>tooltip<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>tooltip<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
@ -1070,7 +1070,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
</div>
</div>
@ -1079,7 +1079,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-344"
aria-controls="code-preview-source-group-334"
>
Source
<svg
@ -1140,16 +1140,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-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 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1163,7 +1163,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
</div>
</div>
@ -1172,7 +1172,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-345"
aria-controls="code-preview-source-group-335"
>
Source
<svg
@ -1217,10 +1217,10 @@
<p>
To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
</p>
<pre><code class="language-css" id="code-block-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 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">
HTML in Tooltips<a href="#html-in-tooltips" aria-label='Direct link to "HTML in Tooltips"'></a>
</h3>
@ -1243,18 +1243,18 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>sl-button</span><span class="token punctuation">&gt;</span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1266,7 +1266,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
</div>
</div>
@ -1275,7 +1275,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-346"
aria-controls="code-preview-source-group-336"
>
Source
<svg
@ -1339,16 +1339,16 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-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 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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1356,7 +1356,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
</div>
</div>
@ -1365,7 +1365,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-347"
aria-controls="code-preview-source-group-337"
>
Source
<svg
@ -1458,9 +1458,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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-button</span><span class="token punctuation">&gt;</span></span>No Hoist<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tooltip</span><span class="token punctuation">&gt;</span></span>
@ -1478,11 +1478,11 @@
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
@ -1509,7 +1509,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
</div>
</div>
@ -1518,7 +1518,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-348"
aria-controls="code-preview-source-group-338"
>
Source
<svg
@ -1587,7 +1587,7 @@
>
using a script tag:
</p>
<pre><code class="language-html" id="code-block-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 name="import">
@ -1602,17 +1602,17 @@
>
using a JavaScript import:
</p>
<pre><code class="language-js" id="code-block-1054"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-1055"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-1056"><span class="token keyword">import</span> 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-group>

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

@ -490,9 +490,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -502,11 +502,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -521,7 +521,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
</div>
</div>
@ -530,7 +530,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-331"
aria-controls="code-preview-source-group-339"
>
Source
<svg
@ -603,9 +603,9 @@
</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">
<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>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -620,11 +620,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -644,7 +644,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
</div>
</div>
@ -653,7 +653,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-332"
aria-controls="code-preview-source-group-340"
>
Source
<svg
@ -718,9 +718,9 @@
</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">
<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>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -730,11 +730,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -749,7 +749,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
</div>
</div>
@ -758,7 +758,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-333"
aria-controls="code-preview-source-group-341"
>
Source
<svg
@ -828,9 +828,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-334">
<div class="code-preview__source-group" id="code-preview-source-group-342">
<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>
Item 1
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">&gt;</span></span>
@ -845,11 +845,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -869,7 +869,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
</div>
</div>
@ -878,7 +878,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-334"
aria-controls="code-preview-source-group-342"
>
Source
<svg
@ -947,7 +947,7 @@
>
using a script tag:
</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 name="import">
@ -962,17 +962,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

80
components/tree/index.html
View File

@ -517,9 +517,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-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">
<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>
Deciduous
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -546,11 +546,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Fern<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -582,7 +582,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
</div>
</div>
@ -591,7 +591,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-335"
aria-controls="code-preview-source-group-343"
>
Source
<svg
@ -689,9 +689,9 @@
</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">
<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>multiple<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Multiple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Leaf<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-option</span><span class="token punctuation">&gt;</span></span>
@ -724,11 +724,11 @@
tree<span class="token punctuation">.</span>selection <span class="token operator">=</span> selectionMode<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -762,7 +762,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
</div>
</div>
@ -771,7 +771,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-336"
aria-controls="code-preview-source-group-344"
>
Source
<svg
@ -863,9 +863,9 @@
</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">
<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>
Deciduous
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
@ -898,11 +898,11 @@
<span class="token property">--indent-guide-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -934,7 +934,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
</div>
</div>
@ -943,7 +943,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-337"
aria-controls="code-preview-source-group-345"
>
Source
<svg
@ -1030,9 +1030,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-338">
<div class="code-preview__source-group" id="code-preview-source-group-346">
<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</span><span class="token punctuation">&gt;</span></span>
@ -1055,11 +1055,11 @@
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@ -1087,7 +1087,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
</div>
</div>
@ -1096,7 +1096,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-338"
aria-controls="code-preview-source-group-346"
>
Source
<svg
@ -1195,9 +1195,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-339">
<div class="code-preview__source-group" id="code-preview-source-group-347">
<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>dash-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collapse-icon<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
@ -1234,11 +1234,11 @@
<span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
@ -1273,7 +1273,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
</div>
</div>
@ -1282,7 +1282,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-339"
aria-controls="code-preview-source-group-347"
>
Source
<svg
@ -1377,9 +1377,9 @@
</div>
</div>
<div class="code-preview__source-group" id="code-preview-source-group-340">
<div class="code-preview__source-group" id="code-preview-source-group-348">
<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-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
Documents
@ -1419,11 +1419,11 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-tree</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
<pre><code class="language-jsx" id="code-block-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> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
@ -1467,7 +1467,7 @@
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlTree</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
</code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
</div>
</div>
@ -1476,7 +1476,7 @@
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
aria-controls="code-preview-source-group-340"
aria-controls="code-preview-source-group-348"
>
Source
<svg
@ -1545,7 +1545,7 @@
>
using a script tag:
</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 name="import">
@ -1560,17 +1560,17 @@
>
using a JavaScript import:
</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 name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
<pre><code class="language-js" id="code-block-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 name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<pre><code class="language-js" id="code-block-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-group>

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
SlDialog
} from "./chunk.MMXGNXHR.js";
} from "./chunk.QFY5BTZB.js";
// src/components/dialog/dialog.ts
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,
s
} from "./chunk.LX7UG5WS.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
o
} from "./chunk.2URMUHDY.js";
@ -24,6 +21,9 @@ import {
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
SlIcon
} from "./chunk.QQHXFE7X.js";

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

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

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

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

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

@ -1,6 +1,6 @@
import {
SlInput
} from "./chunk.HLCCMNPP.js";
} from "./chunk.QT6X3RZ4.js";
// src/components/input/input.ts
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";
import {
SlInput
} from "./chunk.HLCCMNPP.js";
} from "./chunk.QT6X3RZ4.js";
import {
drag
} from "./chunk.ESELY2US.js";
@ -12,7 +12,7 @@ import {
} from "./chunk.FQQ5K3WY.js";
import {
SlDropdown
} from "./chunk.MZEJHEPM.js";
} from "./chunk.CMHBKN7G.js";
import {
defaultValue
} from "./chunk.RQ7JZ4R7.js";
@ -24,22 +24,22 @@ import {
} from "./chunk.HF7GESMZ.js";
import {
SlButton
} from "./chunk.EGLIH5AB.js";
} from "./chunk.ANK5P6NL.js";
import {
FormControlController
} from "./chunk.JWVNKU5Y.js";
import {
SlButtonGroup
} from "./chunk.F3KB2RIB.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
o
} from "./chunk.2URMUHDY.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
SlIcon
} from "./chunk.QQHXFE7X.js";

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

@ -1,6 +1,6 @@
import {
SlColorPicker
} from "./chunk.RSDBV47V.js";
} from "./chunk.CFH2JNVK.js";
// src/components/color-picker/color-picker.ts
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,
stopAnimations
} from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
o
} from "./chunk.2URMUHDY.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
watch
} from "./chunk.FA5RT4K4.js";

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

@ -1,6 +1,6 @@
import {
SlRange
} from "./chunk.NH4RZLPV.js";
} from "./chunk.636GFVN7.js";
// src/react/range/index.ts
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";
import {
SlTreeItem
} from "./chunk.XDXFLZH2.js";
} from "./chunk.I2VMJQGZ.js";
import {
clamp
} from "./chunk.HF7GESMZ.js";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
SlProgressBar
} from "./chunk.3EZHFHG3.js";
} from "./chunk.PTXGKMCM.js";
// src/components/progress-bar/progress-bar.ts
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 {
SlIconButton
} from "./chunk.EUMKZFJV.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
watch
} from "./chunk.FA5RT4K4.js";

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
SlCopyButton
} from "./chunk.QW5LJCVR.js";
} from "./chunk.OUERAG24.js";
// src/components/copy-button/copy-button.ts
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,
stopAnimations
} from "./chunk.S7GYYU7Z.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
SlIcon
} from "./chunk.QQHXFE7X.js";

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
SlProgressBar
} from "./chunk.3EZHFHG3.js";
} from "./chunk.PTXGKMCM.js";
// src/react/progress-bar/index.ts
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 {
SlIconButton
} from "./chunk.EUMKZFJV.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
watch
} from "./chunk.FA5RT4K4.js";

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

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

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

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

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

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

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

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

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

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

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

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

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