deploy: d83b60a

components/image-comparer/index.html

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