npm - @nyaruka/temba-components - Versions diffs - 0.123.0 → 0.124.1 - Mend

@nyaruka/temba-components 0.123.0 → 0.124.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/.github/copilot-instructions.md +22 -4
package/CHANGELOG.md +21 -0
package/TEST_OPTIMIZATION.md +158 -0
package/demo/alert/example.html +65 -0
package/demo/button/example.html +71 -0
package/demo/chart/example.html +56 -0
package/demo/checkbox/example.html +72 -0
package/demo/compose/example.html +72 -0
package/demo/data/images/gus.png +0 -0
package/demo/data/images/purrington.jpg +0 -0
package/demo/data/server/opened-tickets.json +40 -0
package/demo/data/server/response-time.json +27 -0
package/demo/datepicker/example.html +69 -0
package/demo/dialog/example.html +107 -0
package/demo/dropdown/example.html +99 -0
package/demo/index.html +152 -430
package/demo/misc/example.html +72 -0
package/demo/progress/example.html +59 -0
package/demo/select/drag-and-drop.html +142 -0
package/demo/select/example.html +82 -0
package/demo/select/multi.html +73 -0
package/demo/slider/example.html +59 -0
package/demo/sortable-list/example.html +99 -0
package/demo/styles.css +183 -0
package/demo/tabs/example.html +91 -0
package/demo/textinput/completion.html +56 -0
package/demo/textinput/example.html +61 -0
package/dist/temba-components.js +323 -191
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/chart/TembaChart.js +19 -16
package/out-tsc/src/chart/TembaChart.js.map +1 -1
package/out-tsc/src/fields/FieldManager.js +27 -34
package/out-tsc/src/fields/FieldManager.js.map +1 -1
package/out-tsc/src/flow/Editor.js +1 -1
package/out-tsc/src/flow/Editor.js.map +1 -1
package/out-tsc/src/list/SortableList.js +257 -60
package/out-tsc/src/list/SortableList.js.map +1 -1
package/out-tsc/src/omnibox/Omnibox.js +1 -1
package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
package/out-tsc/src/select/Select.js +198 -38
package/out-tsc/src/select/Select.js.map +1 -1
package/out-tsc/src/thumbnail/Thumbnail.js +1 -1
package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
package/out-tsc/src/webchat/WebChat.js +5 -2
package/out-tsc/src/webchat/WebChat.js.map +1 -1
package/out-tsc/test/temba-chart.test.js +1 -1
package/out-tsc/test/temba-chart.test.js.map +1 -1
package/out-tsc/test/temba-compose.test.js +6 -30
package/out-tsc/test/temba-compose.test.js.map +1 -1
package/out-tsc/test/temba-contact-chat.test.js +1 -2
package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
package/out-tsc/test/temba-dropdown.test.js +1 -1
package/out-tsc/test/temba-dropdown.test.js.map +1 -1
package/out-tsc/test/temba-flow-editor-node.test.js +273 -0
package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -0
package/out-tsc/test/temba-flow-editor.test.js +244 -0
package/out-tsc/test/temba-flow-editor.test.js.map +1 -0
package/out-tsc/test/temba-flow-plumber.test.js +145 -0
package/out-tsc/test/temba-flow-plumber.test.js.map +1 -0
package/out-tsc/test/temba-flow-render.test.js +171 -0
package/out-tsc/test/temba-flow-render.test.js.map +1 -0
package/out-tsc/test/temba-omnibox.test.js +6 -3
package/out-tsc/test/temba-omnibox.test.js.map +1 -1
package/out-tsc/test/temba-select.test.js +183 -53
package/out-tsc/test/temba-select.test.js.map +1 -1
package/out-tsc/test/temba-sortable-list.test.js +91 -15
package/out-tsc/test/temba-sortable-list.test.js.map +1 -1
package/out-tsc/test/temba-toast.test.js +1 -2
package/out-tsc/test/temba-toast.test.js.map +1 -1
package/out-tsc/test/temba-utils-index.test.js +2 -2
package/out-tsc/test/temba-utils-index.test.js.map +1 -1
package/out-tsc/test/temba-webchat-lightbox-fix.test.js +42 -0
package/out-tsc/test/temba-webchat-lightbox-fix.test.js.map +1 -0
package/out-tsc/test/utils.test.js +58 -0
package/out-tsc/test/utils.test.js.map +1 -1
package/package.json +2 -3
package/screenshots/truth/flow/editor-basic.png +0 -0
package/screenshots/truth/list/fields-dragging.png +0 -0
package/screenshots/truth/list/sortable-dragging.png +0 -0
package/screenshots/truth/list/sortable-dropped.png +0 -0
package/screenshots/truth/list/sortable.png +0 -0
package/screenshots/truth/omnibox/selected.png +0 -0
package/screenshots/truth/select/disabled-multi-selection.png +0 -0
package/screenshots/truth/select/disabled-selection.png +0 -0
package/screenshots/truth/select/disabled.png +0 -0
package/screenshots/truth/select/embedded.png +0 -0
package/screenshots/truth/select/empty-options.png +0 -0
package/screenshots/truth/select/expression-selected.png +0 -0
package/screenshots/truth/select/expressions.png +0 -0
package/screenshots/truth/select/functions.png +0 -0
package/screenshots/truth/select/local-options.png +0 -0
package/screenshots/truth/select/multi-reorder-final.png +0 -0
package/screenshots/truth/select/multi-reorder-initial.png +0 -0
package/screenshots/truth/select/multi-with-endpoint.png +0 -0
package/screenshots/truth/select/multiple-initial-values.png +0 -0
package/screenshots/truth/select/remote-options.png +0 -0
package/screenshots/truth/select/search-enabled.png +0 -0
package/screenshots/truth/select/search-multi-no-matches.png +0 -0
package/screenshots/truth/select/search-selected-focus.png +0 -0
package/screenshots/truth/select/search-selected.png +0 -0
package/screenshots/truth/select/search-with-selected.png +0 -0
package/screenshots/truth/select/searching.png +0 -0
package/screenshots/truth/select/selected-multi-maxitems-reached.png +0 -0
package/screenshots/truth/select/selected-multi.png +0 -0
package/screenshots/truth/select/selected-single.png +0 -0
package/screenshots/truth/select/selection-clearable.png +0 -0
package/screenshots/truth/select/static-initial-value.png +0 -0
package/screenshots/truth/select/static-initial-via-selected.png +0 -0
package/screenshots/truth/select/truncated-selection.png +0 -0
package/screenshots/truth/select/with-placeholder.png +0 -0
package/screenshots/truth/select/without-placeholder.png +0 -0
package/screenshots/truth/templates/default.png +0 -0
package/screenshots/truth/templates/unapproved.png +0 -0
package/screenshots/truth/webchat/connected-state.png +0 -0
package/src/chart/TembaChart.ts +20 -16
package/src/fields/FieldManager.ts +30 -38
package/src/flow/Editor.ts +1 -1
package/src/list/SortableList.ts +291 -67
package/src/omnibox/Omnibox.ts +1 -1
package/src/select/Select.ts +213 -42
package/src/thumbnail/Thumbnail.ts +1 -1
package/src/webchat/WebChat.ts +5 -2
package/test/temba-chart.test.ts +1 -1
package/test/temba-compose.test.ts +11 -38
package/test/temba-contact-chat.test.ts +4 -6
package/test/temba-dropdown.test.ts +1 -1
package/test/temba-flow-editor-node.test.ts +344 -0
package/test/temba-flow-editor.test.ts +301 -0
package/test/temba-flow-plumber.test.ts +189 -0
package/test/temba-flow-render.test.ts +220 -0
package/test/temba-omnibox.test.ts +7 -3
package/test/temba-select.test.ts +247 -79
package/test/temba-sortable-list.test.ts +108 -15
package/test/temba-toast.test.ts +2 -2
package/test/temba-utils-index.test.ts +2 -2
package/test/temba-webchat-lightbox-fix.test.ts +57 -0
package/test/utils.test.ts +88 -0
package/web-test-runner.config.mjs +4 -2
package/.storybook/main.js +0 -14
package/.storybook/preview-head.html +0 -1
package/.storybook/preview.js +0 -17
package/demo/agents.html +0 -147
package/demo/old.html +0 -573
package/demo/remote.html +0 -3
package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
package/stories/temba-checkbox.stories.md +0 -37

package/demo/misc/example.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Miscellaneous Components</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="../styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <temba-lightbox> </temba-lightbox>
+    <h1>Miscellaneous Components</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    <div class="example">
+      <h3>Loading Component</h3>
+      <p>A loading spinner for async operations</p>
+      <temba-loading></temba-loading>
+    </div>
+    <div class="example">
+      <h3>Thumbnail Component</h3>
+      <p>Image thumbnails with autozooming and downloading</p>
+      <div style="display: flex; gap: 15px; align-items: center">
+        <!-- normally a server would provide the content type, but our demo doesn't so we do it manually-->
+        <temba-thumbnail
+          url="../data/images/gus.png"
+          size="small"
+          contentType="image"
+        ></temba-thumbnail>
+      </div>
+    </div>
+    <div class="example">
+      <h3>Tip Component</h3>
+      <p>Tooltip components for additional information</p>
+      <div style="display: flex; gap: 20px; flex-wrap: wrap">
+        <div>
+          <temba-tip text="This is a basic tooltip"
+            ><span>Hover me</span></temba-tip
+          >
+        </div>
+        <div>
+          <temba-tip text="This tooltip appears above" position="top">
+            <span>Top tip</span></temba-tip
+          >
+        </div>
+        <div>
+          <temba-tip text="This tooltip appears to the right" position="right"
+            ><span>Right tip</span></temba-tip
+          >
+        </div>
+        <div>
+          <temba-tip text="This tooltip appears to the bottom" position="bottom"
+            ><span>Bottom tip</span></temba-tip
+          >
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/progress/example.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Progress Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Progress Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    <div class="example">
+        <h3>Progress with ETA</h3>
+        <p>A progress bar showing current progress with an estimated completion time</p>
+        <temba-progress total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
+    </div>
+    <div class="example">
+        <h3>Progress 50%</h3>
+        <p>A progress bar at 50% completion</p>
+        <temba-progress total="100" current="50"></temba-progress>
+    </div>
+    <div class="example">
+        <h3>Progress 75%</h3>
+        <p>A progress bar at 75% completion</p>
+        <temba-progress total="100" current="75"></temba-progress>
+    </div>
+    <div class="example">
+        <h3>Progress Complete</h3>
+        <p>A completed progress bar</p>
+        <temba-progress total="100" current="100"></temba-progress>
+    </div>
+    <div class="example">
+        <h3>Progress with Different Scale</h3>
+        <p>A progress bar using a different total value</p>
+        <temba-progress total="200" current="150"></temba-progress>
+    </div>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/select/drag-and-drop.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Multi-Select Drag and Drop Demo</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+        body {
+            font-family: sans-serif;
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .example {
+            margin: 30px 0;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+        .example h3 {
+            margin-top: 0;
+            color: #333;
+        }
+        .example p {
+            color: #666;
+            margin-bottom: 15px;
+        }
+        .expected {
+            background-color: #f0f8ff;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+        .expected strong {
+            color: #006400;
+        }
+    </style>
+</head>
+<body>
+    <h1>Multi-Select Drag and Drop Demo</h1>
+    <p><a href="../index.html">← Back to main demo</a> | <a href="example.html">Basic Examples</a> | <a href="multi.html">Multi-Select</a></p>
+    <p>This demo shows the drag and drop reordering functionality for multi-select components.</p>
+    <div class="example">
+        <h3>With 3 items (drag and drop enabled)</h3>
+        <p>This multi-select has 3 pre-selected items. You should be able to drag and drop to reorder them.</p>
+        <temba-select multi searchable id="test3" placeholder="Select colors">
+            <temba-option name="Red" value="0" selected></temba-option>
+            <temba-option name="Green" value="1" selected></temba-option>
+            <temba-option name="Blue" value="2" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Items should be wrapped in a sortable container</li>
+                <li>Drag an item to see a ghost element following the mouse</li>
+                <li>Drop on another item to swap their positions</li>
+                <li>Drop outside to cancel the operation</li>
+                <li>Items should maintain cursor style when hovering</li>
+            </ul>
+        </div>
+    </div>
+    <div class="example">
+        <h3>With 2 items (drag and drop enabled)</h3>
+        <p>This multi-select has 2 pre-selected items. You should be able to drag and drop to reorder them.</p>
+        <temba-select multi id="test2" placeholder="Select fruits">
+            <temba-option name="Apple" value="apple" selected></temba-option>
+            <temba-option name="Banana" value="banana" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Same drag and drop functionality as above</li>
+                <li>Swapping the two items should work</li>
+            </ul>
+        </div>
+    </div>
+    <div class="example">
+        <h3>With 1 item (no drag and drop)</h3>
+        <p>This multi-select has only 1 pre-selected item. Drag and drop should not be enabled.</p>
+        <temba-select multi id="test1" placeholder="Select an item">
+            <temba-option name="Solo" value="solo" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>No sortable container should be present</li>
+                <li>Normal multi-select appearance and behavior</li>
+            </ul>
+        </div>
+    </div>
+    <div class="example">
+        <h3>Regular single select (no drag and drop)</h3>
+        <p>This is a regular single-select. Drag and drop should not be enabled.</p>
+        <temba-select id="single">
+            <temba-option name="Option 1" value="1" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Normal single-select appearance and behavior</li>
+                <li>No sortable functionality</li>
+            </ul>
+        </div>
+    </div>
+    <script>
+        // Add event listeners to monitor changes
+        document.querySelectorAll('temba-select[multi]').forEach(select => {
+            select.addEventListener('change', () => {
+                 console.log(`${select.id} values changed:`, select.values);
+            });
+        });
+        // Log initial state after components load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                console.log('=== Initial State ===');
+                document.querySelectorAll('temba-select').forEach(select => {
+                    const sortableList = select.shadowRoot?.querySelector('temba-sortable-list');
+                    console.log(`${select.id}:`, {
+                        values: select.values,
+                        hasSortableList: !!sortableList,
+                        isMulti: select.hasAttribute('multi')
+                    });
+                });
+            }, 500);
+        });
+    </script>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/select/example.html ADDED Viewed

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Select Component Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Select Component Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    <div class="example">
+        <h3>Basic Select</h3>
+        <p>A simple dropdown selection with info text</p>
+        <temba-select
+            placeholder="Select a color"
+            info_text="Some colors are very dangerous, choose wisely"
+        >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Clearable Select</h3>
+        <p>A select that can be cleared after selection</p>
+        <temba-select placeholder="Select a color" clearable>
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Empty Select</h3>
+        <p>A select with no options to show empty state</p>
+        <temba-select placeholder="Click to see empty state">
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Empty Searchable Select</h3>
+        <p>A searchable select with no options</p>
+        <temba-select placeholder="Search for options" searchable>
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Pre-selected Option</h3>
+        <p>A select with a pre-selected value</p>
+        <temba-select placeholder="Select a color" clearable>
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1" selected></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+        </temba-select>
+    </div>
+    <script>
+        function handleColorChange(event) {
+            console.log('Color changed:', event.target.value);
+        }
+    </script>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/select/multi.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Multi-Select Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Multi-Select Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a> | <a href="example.html">Basic Examples</a> | <a href="drag-and-drop.html">Drag & Drop</a></p>
+    <div class="example">
+        <h3>Multi-Select with Expressions</h3>
+        <p>A multi-select that supports expressions and is searchable</p>
+        <temba-select
+            placeholder="Select a color"
+            expressions="message"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+        >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Limited Multi-Select</h3>
+        <p>A multi-select with a maximum number of items (2)</p>
+        <temba-select
+            placeholder="Select 2 colors"
+            name="Color2"
+            label="Select up to 2 colors"
+            expressions="message"
+            maxItems="2"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+        >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+            <temba-option name="Yellow" value="3"></temba-option>
+            <temba-option name="Purple" value="4"></temba-option>
+        </temba-select>
+    </div>
+    <div class="example">
+        <h3>Empty Multi-Select</h3>
+        <p>A multi-select with no options to show empty state</p>
+        <temba-select placeholder="Select multiple options" multi>
+        </temba-select>
+    </div>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/slider/example.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Slider Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Slider Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    <div class="example">
+        <h3>Slider with Range</h3>
+        <p>A slider that shows the full range</p>
+        <temba-slider value="50" min="0" max="100" range></temba-slider>
+    </div>
+    <div class="example">
+        <h3>Slider without Range</h3>
+        <p>A slider that only shows the selected value</p>
+        <temba-slider value="50" min="0" max="100"></temba-slider>
+    </div>
+    <div class="example">
+        <h3>Slider with Different Range</h3>
+        <p>A slider with a different min/max range</p>
+        <temba-slider value="25" min="10" max="50" range></temba-slider>
+    </div>
+    <div class="example">
+        <h3>Slider at Minimum</h3>
+        <p>A slider set to its minimum value</p>
+        <temba-slider value="0" min="0" max="100" range></temba-slider>
+    </div>
+    <div class="example">
+        <h3>Slider at Maximum</h3>
+        <p>A slider set to its maximum value</p>
+        <temba-slider value="100" min="0" max="100" range></temba-slider>
+    </div>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/sortable-list/example.html ADDED Viewed

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Sortable List Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="../styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Sortable List Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    <h2>
+      This component relies on a consumer component that manages the actual
+      order of things. So this demo doesn't do anything after you drag items.
+    </h2>
+    <div class="example">
+      <h3>Basic Sortable List</h3>
+      <p>A list where items can be reordered by dragging</p>
+      <temba-sortable-list>
+        <div class="sortable">First Item</div>
+        <div class="sortable">Second Item</div>
+        <div class="sortable">Third Item</div>
+        <div class="sortable">Fourth Item</div>
+      </temba-sortable-list>
+    </div>
+    <div class="example">
+      <h3>Sortable List with Complex Items</h3>
+      <p>A sortable list containing more complex content</p>
+      <temba-sortable-list>
+        <div class="sortable">
+          <h4>Task 1</h4>
+          <p>Complete the user interface design</p>
+        </div>
+        <div class="sortable">
+          <h4>Task 2</h4>
+          <p>Implement backend API endpoints</p>
+        </div>
+        <div class="sortable">
+          <h4>Task 3</h4>
+          <p>Write comprehensive tests</p>
+        </div>
+        <div class="sortable">
+          <h4>Task 4</h4>
+          <p>Deploy to production environment</p>
+        </div>
+      </temba-sortable-list>
+    </div>
+    <div class="example">
+      <h3>Disabled Sortable List</h3>
+      <p>A list that cannot be reordered</p>
+      <temba-sortable-list disabled>
+        <div class="sortable">Fixed Item 1</div>
+        <div class="sortable">Fixed Item 2</div>
+        <div class="sortable">Fixed Item 3</div>
+      </temba-sortable-list>
+    </div>
+    <style>
+      .sortable {
+        padding: 12px;
+        margin: 4px 4px;
+        background: #f5f5f5;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        cursor: grab;
+      }
+      .sortable:active {
+        cursor: grabbing;
+      }
+      .sortable h4 {
+        margin: 0 0 8px 0;
+        color: #333;
+      }
+      .sortable p {
+        margin: 0;
+        color: #666;
+        font-size: 0.9em;
+      }
+    </style>
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>