Updates

KonnorRogers · Aug 18, 2024 · 39db3a6 · 39db3a6
1 parent 1bd046e
commit 39db3a6
Show file tree

Hide file tree

Showing 22 changed files with 76 additions and 76 deletions.
diff --git a/components/basic-diff-view-element/index.html b/components/basic-diff-view-element/index.html
@@ -311,8 +311,8 @@ <h2 id="examples">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-8dc0a6d8-8d7c-4a" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-8dc0a6d8-8d7c-4a" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-c8722d01-efe9-44" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-c8722d01-efe9-44" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -343,8 +343,8 @@ <h3 id="a-large-example">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-12cbc92a-c722-43" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-12cbc92a-c722-43" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-3bc1d1e3-139d-4e" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-3bc1d1e3-139d-4e" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -370,8 +370,8 @@ <h3 id="disabling-line-numbers">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-4cd2e039-a1f8-48" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-4cd2e039-a1f8-48" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-f16272aa-0edc-43" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-f16272aa-0edc-43" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -398,8 +398,8 @@ <h3 id="changing-the-starting-line-number">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-c333480e-d0d1-45" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-c333480e-d0d1-45" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-32d04461-7c45-44" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-32d04461-7c45-44" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -430,8 +430,8 @@ <h3 id="slotting-in-content">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-33afe0af-4dcc-4a" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-33afe0af-4dcc-4a" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-ea9b8955-2769-43" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-ea9b8955-2769-43" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -463,8 +463,8 @@ <h3 id="preserving-whitespace">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-6214a04b-e35c-42" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-6214a04b-e35c-42" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-4ad850d0-6bc9-48" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-4ad850d0-6bc9-48" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -502,12 +502,12 @@ <h3 id="imports">
             HTML
           </div>
 
-          <clipboard-copy for="f7f4ffbb-2a8e-415e-bd9c-918728ec7209" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="a6ff1f17-5248-41ed-8824-12cd53b91f6c" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="f7f4ffbb-2a8e-415e-bd9c-918728ec7209" hidden="">&lt;!-- Auto registers as &lt;basic-diff-view-element&gt; --&gt;
+          <script type="text/plain" id="a6ff1f17-5248-41ed-8824-12cd53b91f6c" hidden="">&lt;!-- Auto registers as &lt;basic-diff-view-element&gt; --&gt;
 &lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/basic-diff-view-element/basic-diff-view-element-register.js&quot;&gt;&lt;/script&gt;
 </script>
         </div>
@@ -523,12 +523,12 @@ <h3 id="imports">
             HTML
           </div>
 
-          <clipboard-copy for="5e21d8cd-b05d-4bc9-9be8-d8fe1b806920" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="dd011f71-0bda-4d30-b1e5-8061c4061819" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="5e21d8cd-b05d-4bc9-9be8-d8fe1b806920" hidden="">&lt;script type=&quot;module&quot;&gt;
+          <script type="text/plain" id="dd011f71-0bda-4d30-b1e5-8061c4061819" hidden="">&lt;script type=&quot;module&quot;&gt;
   // Auto registers as &lt;basic-diff-view-element&gt;
   import &quot;https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/basic-diff-view-element/basic-diff-view-element-register.js&quot;
 
@@ -558,12 +558,12 @@ <h3 id="imports">
             JavaScript
           </div>
 
-          <clipboard-copy for="8182795e-af8a-45b5-892e-99191652b109" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="19ae8a3c-5e39-4ed5-aed2-46c915835529" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="8182795e-af8a-45b5-892e-99191652b109" hidden="">// Auto registers as &lt;basic-diff-view-element&gt;
+          <script type="text/plain" id="19ae8a3c-5e39-4ed5-aed2-46c915835529" hidden="">// Auto registers as &lt;basic-diff-view-element&gt;
 import &quot;diff-view-element/exports/components/basic-diff-view-element/basic-diff-view-element-register.js&quot;
 
 // Manual Register

diff --git a/components/diff-view-element/index.html b/components/diff-view-element/index.html
@@ -312,8 +312,8 @@ <h2 id="examples">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-8fc12f26-d885-46" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-8fc12f26-d885-46" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-05ed1751-8b7d-4f" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-05ed1751-8b7d-4f" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -345,8 +345,8 @@ <h3 id="a-large-example">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-5302399f-27db-4c" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-5302399f-27db-4c" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-d9c2b685-5a42-43" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-d9c2b685-5a42-43" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -373,8 +373,8 @@ <h3 id="disabling-line-numbers">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-fa67380d-66b9-42" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-fa67380d-66b9-42" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-a4a01360-a353-4f" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-a4a01360-a353-4f" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -402,8 +402,8 @@ <h3 id="changing-the-starting-line-number">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-a66a6649-914b-4f" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-a66a6649-914b-4f" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-e90c0a5d-0ea9-47" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-e90c0a5d-0ea9-47" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -435,8 +435,8 @@ <h3 id="slotting-in-content">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-b4a67b61-64a7-4d" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-b4a67b61-64a7-4d" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-067530ff-9e0d-4c" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-067530ff-9e0d-4c" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -469,8 +469,8 @@ <h3 id="preserving-whitespace">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-1fd4973d-db0d-41" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-1fd4973d-db0d-41" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-b849dbfd-617f-48" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-b849dbfd-617f-48" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -508,12 +508,12 @@ <h3 id="imports">
             HTML
           </div>
 
-          <clipboard-copy for="48a6fe63-5206-4865-b7ab-ad16bcfe6a42" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="1a6e3f23-d6cf-4bc8-9a33-c01e27f89aeb" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="48a6fe63-5206-4865-b7ab-ad16bcfe6a42" hidden="">&lt;!-- Auto registers as &lt;diff-view-element&gt; --&gt;
+          <script type="text/plain" id="1a6e3f23-d6cf-4bc8-9a33-c01e27f89aeb" hidden="">&lt;!-- Auto registers as &lt;diff-view-element&gt; --&gt;
 &lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/diff-view-element/diff-view-element-register.js&quot;&gt;&lt;/script&gt;
 </script>
         </div>
@@ -529,12 +529,12 @@ <h3 id="imports">
             HTML
           </div>
 
-          <clipboard-copy for="a47c6477-3430-43a8-95c5-0992097067e5" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="eaa56292-6d42-4d9a-ba04-ab6868e55aa8" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="a47c6477-3430-43a8-95c5-0992097067e5" hidden="">&lt;script type=&quot;module&quot;&gt;
+          <script type="text/plain" id="eaa56292-6d42-4d9a-ba04-ab6868e55aa8" hidden="">&lt;script type=&quot;module&quot;&gt;
   // Auto registers as &lt;diff-view-element&gt;
   import &quot;https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/diff-view-element/diff-view-element-register.js&quot;
 
@@ -564,12 +564,12 @@ <h3 id="imports">
             JavaScript
           </div>
 
-          <clipboard-copy for="d4425944-dcc0-4d17-a7c2-cb60a3152d93" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="6a64d8dc-e0a4-47db-8482-29891569098a" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="d4425944-dcc0-4d17-a7c2-cb60a3152d93" hidden="">// Auto registers as &lt;diff-view-element&gt;
+          <script type="text/plain" id="6a64d8dc-e0a4-47db-8482-29891569098a" hidden="">// Auto registers as &lt;diff-view-element&gt;
 import &quot;diff-view-element/exports/components/diff-view-element/diff-view-element-register.js&quot;
 
 // Manual Register

diff --git a/guides/adding-languages-for-highlighting/index.html b/guides/adding-languages-for-highlighting/index.html
@@ -355,8 +355,8 @@ <h3 id="example-with-ruby-code">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-73fe59f4-6c07-47" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-73fe59f4-6c07-47" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-c5dc9617-0d36-47" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-c5dc9617-0d36-47" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>
@@ -393,12 +393,12 @@ <h2 id="caveats">
             JavaScript
           </div>
 
-          <clipboard-copy for="cb38ca3f-b6f0-4b65-b73a-b6fd84c5d046" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="141de46b-77a0-4b3c-8279-3e76f769ba1d" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="cb38ca3f-b6f0-4b65-b73a-b6fd84c5d046" hidden="">// Import the loader
+          <script type="text/plain" id="141de46b-77a0-4b3c-8279-3e76f769ba1d" hidden="">// Import the loader
 import { loader as RubyLoader } from &quot;https://cdn.jsdelivr.net/npm/prism-esm/components/prism-ruby.js&quot;)
 
 // Find the `&lt;diff-view-element&gt;` element

diff --git a/guides/getting-started/index.html b/guides/getting-started/index.html
@@ -296,12 +296,12 @@ <h2 id="npm-installation">
             shell
           </div>
 
-          <clipboard-copy for="f59cd047-1fd7-4c8c-9d2f-62fc36cae390" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="463b9b93-d56c-4123-9f6c-7de2a9eddec7" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="f59cd047-1fd7-4c8c-9d2f-62fc36cae390" hidden="">npm install diff-view-element
+          <script type="text/plain" id="463b9b93-d56c-4123-9f6c-7de2a9eddec7" hidden="">npm install diff-view-element
 </script>
         </div>
 <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install </span>diff-view-element
@@ -316,12 +316,12 @@ <h2 id="npm-usage">
             JavaScript
           </div>
 
-          <clipboard-copy for="68e45923-101a-4b31-b17c-022b95358239" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="b3fc5bfd-36e8-4df4-a095-af97ca571e46" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="68e45923-101a-4b31-b17c-022b95358239" hidden="">// entrypoint.js
+          <script type="text/plain" id="b3fc5bfd-36e8-4df4-a095-af97ca571e46" hidden="">// entrypoint.js
 import &quot;diff-view-element&quot;; // Will register `&lt;basic-diff-view-element&gt;` and `&lt;diff-view-element&gt;` for you
 </script>
         </div>
@@ -338,12 +338,12 @@ <h2 id="cdn-usage">
             HTML
           </div>
 
-          <clipboard-copy for="cf9a8762-6076-4de7-bc98-2adb59cf8071" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="35c511f8-21ed-42f9-b83f-7a7da2b4f292" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="cf9a8762-6076-4de7-bc98-2adb59cf8071" hidden="">&lt;script type=&quot;module&quot;&gt;
+          <script type="text/plain" id="35c511f8-21ed-42f9-b83f-7a7da2b4f292" hidden="">&lt;script type=&quot;module&quot;&gt;
   import &quot;https://cdn.jsdelivr.net/npm/diff-view-element&quot;;
 
   // Loading a version range. This will load the latest &gt;= 1.0.0 and &lt; 2.0.0 of diff-view-element.
@@ -376,12 +376,12 @@ <h2 id="a-basic-example">
             HTML
           </div>
 
-          <clipboard-copy for="9ef074ad-1406-443e-a397-ae7ada11f6bf" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
+          <clipboard-copy for="42dc8552-64c4-4008-8c44-8c2793b3fc6c" class="button clipboard clipboard--idle syntax-block__clipboard" aria-label="Copy to clipboard" data-controller="clipboard">
             <sl-icon class="clipboard__icon--success" name="clipboard-check"></sl-icon>
             <sl-icon class="clipboard__icon--idle" name="clipboard"></sl-icon>
           </clipboard-copy>
 
-          <script type="text/plain" id="9ef074ad-1406-443e-a397-ae7ada11f6bf" hidden="">&lt;diff-view-element old-value=&quot;abcd&quot; new-value=&quot;abce&quot;&gt;&lt;/diff-view-element&gt;
+          <script type="text/plain" id="42dc8552-64c4-4008-8c44-8c2793b3fc6c" hidden="">&lt;diff-view-element old-value=&quot;abcd&quot; new-value=&quot;abce&quot;&gt;&lt;/diff-view-element&gt;
 </script>
         </div>
 <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;diff-view-element</span> <span class="na">old-value=</span><span class="s">"abcd"</span> <span class="na">new-value=</span><span class="s">"abce"</span><span class="nt">&gt;&lt;/diff-view-element&gt;</span>
@@ -398,8 +398,8 @@ <h2 id="a-basic-example">
   <codepen-button></codepen-button>
   <stackblitz-button></stackblitz-button>
   <form-control>
-    <input id="checkbox-c3b1e96e-2f34-43" type="checkbox" data-controller="direction-switcher">
-    <label for="checkbox-c3b1e96e-2f34-43" aria-label="Toggle right to left">RTL</label>
+    <input id="checkbox-ad9dce83-398e-4b" type="checkbox" data-controller="direction-switcher">
+    <label for="checkbox-ad9dce83-398e-4b" aria-label="Toggle right to left">RTL</label>
   </form-control>
 </div>
 </light-preview>