@lostgradient/cinder 0.6.0 → 0.8.0

package/dist/components/timeline/index.js

@@ -66,28 +66,29 @@ function classNames(...parts) {
 // src/components/_timeline-item/timeline-item.svelte
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-var root_4 = $.from_html(`<div class="cinder-timeline-item__body"><!></div>`);
-var root = $.from_html(`<li><!> <div class="cinder-timeline-item__event"><span class="cinder-timeline-item__marker" aria-hidden="true" inert=""><!></span> <div class="cinder-timeline-item__content"><header class="cinder-timeline-item__header"><time class="cinder-timeline-item__time"> </time> <span class="cinder-timeline-item__title"> </span></header> <!></div></div></li>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "datetime",
+  "timestamp",
+  "title",
+  "tone",
+  "connectorAfter",
+  "groupHeader",
+  "groupHeaderLevel",
+  "class",
+  "children",
+  "marker"
+]);
+var root = $.from_html(`<div class="cinder-timeline-item__body"><!></div>`);
+var root_1 = $.from_html(`<li><!> <div class="cinder-timeline-item__event"><span class="cinder-timeline-item__marker" aria-hidden="true" inert=""><!></span> <div class="cinder-timeline-item__content"><header class="cinder-timeline-item__header"><time class="cinder-timeline-item__time"> </time> <span class="cinder-timeline-item__title"> </span></header> <!></div></div></li>`);
 function Timeline_item($$anchor, $$props) {
   $.push($$props, true);
-  let tone = $.prop($$props, "tone", 3, "info"), connectorAfter = $.prop($$props, "connectorAfter", 3, "visible"), groupHeaderLevel = $.prop($$props, "groupHeaderLevel", 3, 3), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "datetime",
-    "timestamp",
-    "title",
-    "tone",
-    "connectorAfter",
-    "groupHeader",
-    "groupHeaderLevel",
-    "class",
-    "children",
-    "marker"
-  ]);
+  let tone = $.prop($$props, "tone", 3, "info"), connectorAfter = $.prop($$props, "connectorAfter", 3, "visible"), groupHeaderLevel = $.prop($$props, "groupHeaderLevel", 3, 3), rest = $.rest_props($$props, rest_excludes);
   const resolvedGroupHeaderLevel = $.derived(() => Number.isFinite(Math.trunc(Number(groupHeaderLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(groupHeaderLevel())))) : 3);
   const groupHeaderTag = $.derived(() => `h${$.get(resolvedGroupHeaderLevel)}`);
-  var li = root();
+  var li = root_1();
   $.attribute_effect(li, ($0) => ({
     ...rest,
     class: $0,
@@ -140,7 +141,7 @@ function Timeline_item($$anchor, $$props) {
   var node_4 = $.sibling(header, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_2 = root_4();
+      var div_2 = root();
       var node_5 = $.child(div_2);
       $.snippet(node_5, () => $$props.children);
       $.reset(div_2);
@@ -262,27 +263,28 @@ function buildTimelineRenderPlan({
 }
 
 // src/components/timeline/timeline.svelte
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "entries",
+  "orientation",
+  "groupBy",
+  "weekStartsOn",
+  "groupHeaderLevel",
+  "gapThresholdMinutes",
+  "label",
+  "class",
+  "children",
+  "marker",
+  "role",
+  "aria-label",
+  "aria-labelledby"
+]);
 var root2 = $2.from_html(`<ol></ol>`);
 function Timeline($$anchor, $$props) {
   $2.push($$props, true);
-  let orientation = $2.prop($$props, "orientation", 3, "vertical"), groupBy = $2.prop($$props, "groupBy", 3, "none"), weekStartsOn = $2.prop($$props, "weekStartsOn", 3, "monday"), groupHeaderLevel = $2.prop($$props, "groupHeaderLevel", 3, 3), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "entries",
-    "orientation",
-    "groupBy",
-    "weekStartsOn",
-    "groupHeaderLevel",
-    "gapThresholdMinutes",
-    "label",
-    "class",
-    "children",
-    "marker",
-    "role",
-    "aria-label",
-    "aria-labelledby"
-  ]);
+  let orientation = $2.prop($$props, "orientation", 3, "vertical"), groupBy = $2.prop($$props, "groupBy", 3, "none"), weekStartsOn = $2.prop($$props, "weekStartsOn", 3, "monday"), groupHeaderLevel = $2.prop($$props, "groupHeaderLevel", 3, 3), rest = $2.rest_props($$props, rest_excludes2);
   const renderGroups = $2.derived(() => buildTimelineRenderPlan({
     entries: $$props.entries,
     groupBy: groupBy(),
@@ -385,4 +387,4 @@ export {
   Timeline
 };
 
-//# debugId=9B68033FB592E42A64756E2164756E21
+//# debugId=0429AA5315E4257C64756E2164756E21

package/dist/components/toast-region/index.js

@@ -230,50 +230,49 @@ function useReducedMotion() {
 }
 
 // src/components/toast-region/toast-region.svelte
-var root_2 = $2.from_html(`<div class="cinder-toast__icon" aria-hidden="true"><!></div>`);
-var root_4 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>`);
-var root_5 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`);
-var root_6 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>`);
-var root_7 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path></svg>`);
-var root_3 = $2.from_html(`<div class="cinder-toast__icon" aria-hidden="true"><!></div>`);
-var root_8 = $2.from_html(`<span class="cinder-toast__spinner" aria-hidden="true"></span>`);
-var root_9 = $2.from_html(`<button type="button" class="cinder-toast__action"> </button>`);
-var root_10 = $2.from_html(`<button type="button" class="cinder-toast__dismiss"><svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
-var root_1 = $2.from_html(`<div class="cinder-toast-shell"><div class="cinder-toast" role="group" aria-label="Notification"><!> <!> <div class="cinder-toast__message"> </div> <!> <!></div></div>`);
-var root_12 = $2.from_html(`<div role="presentation"><div role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel"></div> <div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel" data-cinder-stack="assertive"></div></div>`);
-var root = $2.from_html(`<!> <!>`, 1);
+var root = $2.from_html(`<div class="cinder-toast__icon" aria-hidden="true"><!></div>`);
+var root_1 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>`);
+var root_2 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`);
+var root_3 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>`);
+var root_4 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path></svg>`);
+var root_5 = $2.from_html(`<span class="cinder-toast__spinner" aria-hidden="true"></span>`);
+var root_6 = $2.from_html(`<button type="button" class="cinder-toast__action"> </button>`);
+var root_7 = $2.from_html(`<button type="button" class="cinder-toast__dismiss"><svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
+var root_8 = $2.from_html(`<div class="cinder-toast-shell"><div class="cinder-toast" role="group" aria-label="Notification"><!> <!> <div class="cinder-toast__message"> </div> <!> <!></div></div>`);
+var root_9 = $2.from_html(`<div role="presentation"><div role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel"></div> <div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel" data-cinder-stack="assertive"></div></div>`);
+var root_10 = $2.from_html(`<!> <!>`, 1);
 function Toast_region($$anchor, $$props) {
   $2.push($$props, true);
   const toastItem = ($$anchor2, toast = $2.noop, index = $2.noop) => {
-    var div = root_1();
+    var div = root_8();
     var div_1 = $2.child(div);
     var node = $2.child(div_1);
     {
       var consequent = ($$anchor3) => {
-        var div_2 = root_2();
+        var div_2 = root();
         var node_1 = $2.child(div_2);
         $2.snippet(node_1, () => toast().icon);
         $2.reset(div_2);
         $2.append($$anchor3, div_2);
       };
       var consequent_4 = ($$anchor3) => {
-        var div_3 = root_3();
+        var div_3 = root();
         var node_2 = $2.child(div_3);
         {
           var consequent_1 = ($$anchor4) => {
-            var svg = root_4();
+            var svg = root_1();
             $2.append($$anchor4, svg);
           };
           var consequent_2 = ($$anchor4) => {
-            var svg_1 = root_5();
+            var svg_1 = root_2();
             $2.append($$anchor4, svg_1);
           };
           var consequent_3 = ($$anchor4) => {
-            var svg_2 = root_6();
+            var svg_2 = root_3();
             $2.append($$anchor4, svg_2);
           };
           var alternate = ($$anchor4) => {
-            var svg_3 = root_7();
+            var svg_3 = root_4();
             $2.append($$anchor4, svg_3);
           };
           $2.if(node_2, ($$render) => {
@@ -300,7 +299,7 @@ function Toast_region($$anchor, $$props) {
     var node_3 = $2.sibling(node, 2);
     {
       var consequent_5 = ($$anchor3) => {
-        var span = root_8();
+        var span = root_5();
         $2.append($$anchor3, span);
       };
       $2.if(node_3, ($$render) => {
@@ -314,7 +313,7 @@ function Toast_region($$anchor, $$props) {
     var node_4 = $2.sibling(div_4, 2);
     {
       var consequent_6 = ($$anchor3) => {
-        var button = root_9();
+        var button = root_6();
         var text_1 = $2.child(button, true);
         $2.reset(button);
         $2.template_effect(() => {
@@ -332,7 +331,7 @@ function Toast_region($$anchor, $$props) {
     var node_5 = $2.sibling(node_4, 2);
     {
       var consequent_7 = ($$anchor3) => {
-        var button_1 = root_10();
+        var button_1 = root_7();
         $2.template_effect(($0) => {
           $2.set_attribute(button_1, "aria-label", $0);
           button_1.disabled = toast().leaving;
@@ -814,7 +813,7 @@ function Toast_region($$anchor, $$props) {
     $2.set(assertiveStack, [], true);
     releaseToastEscapeHandler();
   });
-  var fragment = root();
+  var fragment = root_10();
   var node_6 = $2.first_child(fragment);
   {
     var consequent_8 = ($$anchor2) => {
@@ -831,7 +830,7 @@ function Toast_region($$anchor, $$props) {
   var node_8 = $2.sibling(node_6, 2);
   {
     var consequent_9 = ($$anchor2) => {
-      var div_5 = root_12();
+      var div_5 = root_9();
       var div_6 = $2.child(div_5);
       $2.each(div_6, 23, () => $2.get(politeStack), (toast) => `${toast.id}:${toast.generation}`, ($$anchor3, toast, index) => {
         toastItem($$anchor3, () => $2.get(toast), () => $2.get(index));
@@ -879,4 +878,4 @@ export {
   Toast_region as ToastRegion
 };
 
-//# debugId=E8B6972E3407F59664756E2164756E21
+//# debugId=0ED6A8303E9D55D164756E2164756E21

package/dist/components/toggle/index.js

@@ -92,8 +92,8 @@ function commitValue(proposed, onValueChange, setValue) {
 }
 
 // src/components/toggle/toggle.svelte
-var root_1 = $.from_html(`<input type="checkbox" hidden=""/>`);
-var root = $.from_html(`<span class="cinder-toggle-field"><button type="button" role="switch"><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> <!> <span class="cinder-toggle-field__label" role="presentation"> </span></span>`);
+var root = $.from_html(`<input type="checkbox" hidden=""/>`);
+var root_1 = $.from_html(`<span class="cinder-toggle-field"><button type="button" role="switch"><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> <!> <span class="cinder-toggle-field__label" role="presentation"> </span></span>`);
 function Toggle($$anchor, $$props) {
   $.push($$props, true);
   let checked = $.prop($$props, "checked", 15, false), hideLabel = $.prop($$props, "hideLabel", 3, false), value = $.prop($$props, "value", 3, "on");
@@ -107,12 +107,12 @@ function Toggle($$anchor, $$props) {
       });
     }
   }
-  var span = root();
+  var span = root_1();
   var button = $.child(span);
   var node = $.sibling(button, 2);
   {
     var consequent = ($$anchor2) => {
-      var input = root_1();
+      var input = root();
       $.remove_input_defaults(input);
       var input_value;
       $.template_effect(() => {
@@ -161,4 +161,4 @@ export {
   Toggle
 };
 
-//# debugId=801312890BE52CB664756E2164756E21
+//# debugId=42482956D69ED44164756E2164756E21

package/dist/components/toolbar/index.js

@@ -64,18 +64,19 @@ function classNames(...parts) {
 }
 
 // src/components/toolbar/toolbar-group.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "orientation",
+  "children",
+  "role"
+]);
 var root = $.from_html(`<div><!></div>`);
 function Toolbar_group($$anchor, $$props) {
   $.push($$props, true);
-  let rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "orientation",
-    "children",
-    "role"
-  ]);
+  let rest = $.rest_props($$props, rest_excludes);
   const normalizedAriaLabel = $.derived(() => typeof rest["aria-label"] === "string" && rest["aria-label"].trim().length > 0 ? rest["aria-label"].trim() : undefined);
   const normalizedAriaLabelledBy = $.derived(() => typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim().length > 0 ? rest["aria-labelledby"].trim() : undefined);
   const hasAccessibleName = $.derived(() => Boolean($.get(normalizedAriaLabel) || $.get(normalizedAriaLabelledBy)));
@@ -110,10 +111,11 @@ function devWarn(message, ...args) {
 }
 
 // src/components/toolbar/toolbar-spacer.svelte
+var rest_excludes2 = new Set(["$$slots", "$$events", "$$legacy", "class", "flex"]);
 var root2 = $2.from_html(`<div></div>`);
 function Toolbar_spacer($$anchor, $$props) {
   $2.push($$props, true);
-  let flex = $2.prop($$props, "flex", 3, 1), rest = $2.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class", "flex"]);
+  let flex = $2.prop($$props, "flex", 3, 1), rest = $2.rest_props($$props, rest_excludes2);
   const resolvedFlex = $2.derived(() => typeof flex() === "number" && Number.isFinite(flex()) && flex() > 0 ? flex() : 1);
   $2.user_effect(() => {
     if (typeof flex() === "number" && Number.isFinite(flex()) && flex() > 0)
@@ -271,6 +273,20 @@ function useMutationObserver(onMutate, options = {}) {
 }
 
 // src/components/toolbar/toolbar.svelte
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "orientation",
+  "children",
+  "onkeydown",
+  "onfocusin",
+  "role",
+  "aria-orientation",
+  "aria-label",
+  "aria-labelledby"
+]);
 var root3 = $4.from_html(`<div><!></div>`);
 function Toolbar($$anchor, $$props) {
   $4.push($$props, true);
@@ -283,20 +299,7 @@ function Toolbar($$anchor, $$props) {
     "[tabindex]",
     "[data-cinder-toolbar-item]"
   ].join(",");
-  let orientation = $4.prop($$props, "orientation", 3, "horizontal"), rest = $4.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "orientation",
-    "children",
-    "onkeydown",
-    "onfocusin",
-    "role",
-    "aria-orientation",
-    "aria-label",
-    "aria-labelledby"
-  ]);
+  let orientation = $4.prop($$props, "orientation", 3, "horizontal"), rest = $4.rest_props($$props, rest_excludes3);
   let rootElement = null;
   let toolbarItems = $4.state($4.proxy([]));
   let activeItem = $4.state(null);
@@ -633,4 +636,4 @@ export {
   Toolbar2 as Toolbar
 };
 
-//# debugId=957B7365B5C9C94664756E2164756E21
+//# debugId=8C156E1FA74211B664756E2164756E21

package/dist/components/tooltip/index.js

@@ -2071,19 +2071,20 @@ function createPortalAttachment(options = {}) {
 }
 
 // src/components/portal/portal.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "target",
+  "disabled",
+  "class",
+  "inheritAttributes",
+  "children"
+]);
 var root = $2.from_html(`<div><!></div>`);
 function Portal($$anchor, $$props) {
   $2.push($$props, true);
-  let target = $2.prop($$props, "target", 3, null), disabled = $2.prop($$props, "disabled", 3, false), inheritAttributes = $2.prop($$props, "inheritAttributes", 3, true), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "target",
-    "disabled",
-    "class",
-    "inheritAttributes",
-    "children"
-  ]);
+  let target = $2.prop($$props, "target", 3, null), disabled = $2.prop($$props, "disabled", 3, false), inheritAttributes = $2.prop($$props, "inheritAttributes", 3, true), rest = $2.rest_props($$props, rest_excludes);
   let hasHydrated = $2.state(false);
   $2.user_effect(() => {
     $2.set(hasHydrated, true);
@@ -2538,4 +2539,4 @@ export {
   Tooltip
 };
 
-//# debugId=58AF3A86E9AA1EB264756E2164756E21
+//# debugId=6270763F95EE5A4764756E2164756E21

package/dist/components/transfer-list/index.js

@@ -150,25 +150,25 @@ function useAnnouncer(options) {
 }
 
 // src/components/transfer-list/transfer-list.svelte
-var root_1 = $2.from_html(`<li class="cinder-transfer-list__option" role="option"> </li>`);
-var root_2 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No available items</li>`);
-var root_3 = $2.from_html(`<li class="cinder-transfer-list__option" role="option"> </li>`);
-var root_4 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No selected items</li>`);
-var root = $2.from_html(`<div><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control">Add</button> <button type="button" class="cinder-transfer-list__control">Add all</button> <button type="button" class="cinder-transfer-list__control">Remove</button> <button type="button" class="cinder-transfer-list__control">Remove all</button></div> <section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section></div> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div></div>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "items",
+  "value",
+  "leftLabel",
+  "rightLabel",
+  "onchange",
+  "class"
+]);
+var root = $2.from_html(`<li class="cinder-transfer-list__option" role="option"> </li>`);
+var root_1 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No available items</li>`);
+var root_2 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No selected items</li>`);
+var root_3 = $2.from_html(`<div><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control">Add</button> <button type="button" class="cinder-transfer-list__control">Add all</button> <button type="button" class="cinder-transfer-list__control">Remove</button> <button type="button" class="cinder-transfer-list__control">Remove all</button></div> <section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section></div> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div></div>`);
 function Transfer_list($$anchor, $$props) {
   const baseId = $2.props_id();
   $2.push($$props, true);
-  let value = $2.prop($$props, "value", 31, () => $2.proxy([])), leftLabel = $2.prop($$props, "leftLabel", 3, "Available"), rightLabel = $2.prop($$props, "rightLabel", 3, "Selected"), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "items",
-    "value",
-    "leftLabel",
-    "rightLabel",
-    "onchange",
-    "class"
-  ]);
+  let value = $2.prop($$props, "value", 31, () => $2.proxy([])), leftLabel = $2.prop($$props, "leftLabel", 3, "Available"), rightLabel = $2.prop($$props, "rightLabel", 3, "Selected"), rest = $2.rest_props($$props, rest_excludes);
   let leftSelectedIds = $2.state($2.proxy([]));
   let rightSelectedIds = $2.state($2.proxy([]));
   let leftActiveId = $2.state(null);
@@ -394,7 +394,7 @@ function Transfer_list($$anchor, $$props) {
         moveSelectedLeft();
     }
   }
-  var div = root();
+  var div = root_3();
   $2.attribute_effect(div, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-transfer-list", $$props.class)]);
   var div_1 = $2.child(div);
   var section = $2.child(div_1);
@@ -403,7 +403,7 @@ function Transfer_list($$anchor, $$props) {
   $2.reset(h3);
   var ul = $2.sibling(h3, 2);
   $2.each(ul, 23, () => $2.get(leftItems), (item) => item.id, ($$anchor2, item, index) => {
-    var li = root_1();
+    var li = root();
     var text_1 = $2.child(li, true);
     $2.reset(li);
     $2.template_effect(($0, $1) => {
@@ -419,7 +419,7 @@ function Transfer_list($$anchor, $$props) {
     ]);
     $2.append($$anchor2, li);
   }, ($$anchor2) => {
-    var li_1 = root_2();
+    var li_1 = root_1();
     $2.append($$anchor2, li_1);
   });
   $2.reset(ul);
@@ -437,7 +437,7 @@ function Transfer_list($$anchor, $$props) {
   $2.reset(h3_1);
   var ul_1 = $2.sibling(h3_1, 2);
   $2.each(ul_1, 23, () => $2.get(rightItems), (item) => item.id, ($$anchor2, item, index) => {
-    var li_2 = root_3();
+    var li_2 = root();
     var text_3 = $2.child(li_2, true);
     $2.reset(li_2);
     $2.template_effect(($0, $1) => {
@@ -452,7 +452,7 @@ function Transfer_list($$anchor, $$props) {
     ]);
     $2.append($$anchor2, li_2);
   }, ($$anchor2) => {
-    var li_3 = root_4();
+    var li_3 = root_2();
     $2.append($$anchor2, li_3);
   });
   $2.reset(ul_1);
@@ -508,4 +508,4 @@ export {
   Transfer_list as TransferList
 };
 
-//# debugId=71FF6430D7E7ACDB64756E2164756E21
+//# debugId=9DF1A0983D74CBDD64756E2164756E21