@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/date-range-field/index.js

@@ -1930,9 +1930,10 @@ function resolvePortalTarget(target) {
 }
 function copyInheritedPortalAttributes(element, source, inheritAttributes, fallbackAttributes = {
   dir: element.getAttribute("dir"),
+  dataTheme: element.getAttribute("data-theme"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const preservesExplicitDirection = fallbackAttributes.preserveDirection || element.dataset["cinderExplicitDirection"] === "true";
   const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
@@ -1940,13 +1941,51 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   } else {
     element.removeAttribute("dir");
   }
-  const inheritedTheme = inheritAttributes && source ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
+  const preservesExplicitDataTheme = fallbackAttributes.preserveDataTheme === true;
+  const inheritedDataTheme = inheritAttributes && source && !preservesExplicitDataTheme && fallbackAttributes.dataTheme === null ? source.closest("[data-theme]")?.getAttribute("data-theme") : null;
+  const nextDataTheme = inheritedDataTheme ?? fallbackAttributes.dataTheme;
+  if (nextDataTheme) {
+    element.setAttribute("data-theme", nextDataTheme);
+  } else {
+    element.removeAttribute("data-theme");
+  }
+  const preservesExplicitTheme = fallbackAttributes.preserveTheme === true;
+  const inheritedTheme = inheritAttributes && source && !preservesExplicitTheme && fallbackAttributes.theme === null ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
   const nextTheme = inheritedTheme ?? fallbackAttributes.theme;
   if (nextTheme) {
     element.setAttribute("data-cinder-theme", nextTheme);
   } else {
     element.removeAttribute("data-cinder-theme");
   }
+  return {
+    dir: inheritedDir ?? null,
+    dataTheme: inheritedDataTheme ?? null,
+    theme: inheritedTheme ?? null
+  };
+}
+function observeInheritedPortalAttributes(source, inheritAttributes, syncAttributes) {
+  if (!inheritAttributes || !source || typeof MutationObserver === "undefined")
+    return null;
+  const observer = new MutationObserver(() => {
+    syncAttributes();
+  });
+  function observe(elementToObserve) {
+    if (!elementToObserve || observedElements.includes(elementToObserve))
+      return;
+    observedElements.push(elementToObserve);
+    observer.observe(elementToObserve, {
+      attributes: true,
+      attributeFilter: ["dir", "data-theme", "data-cinder-theme"]
+    });
+  }
+  const observedElements = [];
+  let ancestor = source;
+  while (ancestor) {
+    observe(ancestor);
+    ancestor = ancestor.parentElement;
+  }
+  observe(document.documentElement);
+  return () => observer.disconnect();
 }
 function createPortalAttachment(options = {}) {
   let lastWarnedUnresolvedKey = null;
@@ -1954,8 +1993,33 @@ function createPortalAttachment(options = {}) {
     const initialParent = element.parentElement;
     const initialAttributes = {
       dir: element.getAttribute("dir"),
+      dataTheme: element.getAttribute("data-theme"),
       theme: element.getAttribute("data-cinder-theme")
     };
+    const managedAttributes = { dir: null, dataTheme: null, theme: null };
+    function currentFallbackAttributes() {
+      const explicitAttributes = readOption(options.explicitAttributes ?? {});
+      const explicitDirection = explicitAttributes.dir;
+      const explicitDataTheme = explicitAttributes.dataTheme;
+      const explicitTheme = explicitAttributes.theme;
+      const direction = element.getAttribute("dir");
+      const dataTheme = element.getAttribute("data-theme");
+      const theme = element.getAttribute("data-cinder-theme");
+      return {
+        dir: explicitDirection !== undefined ? explicitDirection : direction !== managedAttributes.dir ? direction : initialAttributes.dir,
+        preserveDirection: explicitDirection !== undefined,
+        dataTheme: explicitDataTheme !== undefined ? explicitDataTheme : dataTheme !== managedAttributes.dataTheme ? dataTheme : null,
+        preserveDataTheme: explicitDataTheme !== undefined,
+        theme: explicitTheme !== undefined ? explicitTheme : theme !== managedAttributes.theme ? theme : null,
+        preserveTheme: explicitTheme !== undefined
+      };
+    }
+    function syncInheritedAttributes(source, inheritAttributes) {
+      const nextManagedAttributes = copyInheritedPortalAttributes(element, source, inheritAttributes, currentFallbackAttributes());
+      managedAttributes.dir = nextManagedAttributes.dir;
+      managedAttributes.dataTheme = nextManagedAttributes.dataTheme;
+      managedAttributes.theme = nextManagedAttributes.theme;
+    }
     const anchor = typeof document !== "undefined" ? document.createComment("@lostgradient/cinder/portal") : null;
     if (anchor && initialParent && element.parentNode === initialParent) {
       initialParent.insertBefore(anchor, element);
@@ -1968,26 +2032,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $.user_effect(() => {
+      let stopObservingInheritedAttributes = null;
       const disabled = readOption(options.disabled ?? false);
       const inheritAttributes = readOption(options.inheritAttributes ?? true);
       const targetValue = readOption(options.target ?? null);
       const attributeSource = readOption(options.source ?? initialParent) ?? initialParent;
       const resolved = disabled ? null : resolvePortalTarget(targetValue);
       if (!disabled && resolved?.kind === "resolved") {
-        copyInheritedPortalAttributes(element, attributeSource, inheritAttributes, initialAttributes);
+        syncInheritedAttributes(attributeSource, inheritAttributes);
+        stopObservingInheritedAttributes = observeInheritedPortalAttributes(attributeSource, inheritAttributes, () => syncInheritedAttributes(attributeSource, inheritAttributes));
         resolved.target.appendChild(element);
         lastWarnedUnresolvedKey = null;
       } else if (!disabled && resolved?.kind === "unresolved") {
         restoreInline();
+        syncInheritedAttributes(null, false);
         if (lastWarnedUnresolvedKey !== resolved.key) {
           devWarn(`[cinder/portal] could not resolve portal target ${JSON.stringify(resolved.key)}.`);
           lastWarnedUnresolvedKey = resolved.key;
         }
       } else if (disabled) {
         restoreInline();
+        syncInheritedAttributes(null, false);
         lastWarnedUnresolvedKey = null;
       }
       return () => {
+        stopObservingInheritedAttributes?.();
         if (element.isConnected) {
           element.remove();
         }
@@ -2002,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);
@@ -2040,7 +2110,12 @@ function Portal($$anchor, $$props) {
   $2.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $2.append($$anchor, div);
   $2.pop();
@@ -2063,31 +2138,32 @@ import * as $6 from "svelte/internal/client";
 import"svelte/internal/disclose-version";
 import * as $3 from "svelte/internal/client";
 import { tick, untrack } from "svelte";
-var root_1 = $3.from_html(`<span class="cinder-calendar__weekday"> </span>`);
-var root_3 = $3.from_html(`<div role="gridcell" class="cinder-calendar__gridcell"><button type="button" class="cinder-calendar__day"> </button></div>`);
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "month",
+  "min",
+  "max",
+  "firstDayOfWeek",
+  "locale",
+  "label",
+  "disabled",
+  "class",
+  "onchange",
+  "disabledDate"
+]);
+var root2 = $3.from_html(`<span class="cinder-calendar__weekday"> </span>`);
+var root_1 = $3.from_html(`<div role="gridcell" class="cinder-calendar__gridcell"><button type="button" class="cinder-calendar__day"> </button></div>`);
 var root_2 = $3.from_html(`<div role="row" class="cinder-calendar__grid-row"></div>`);
-var root2 = $3.from_html(`<div><div class="cinder-calendar__header"><button type="button" class="cinder-calendar__nav" aria-label="Previous month">‹</button> <p class="cinder-calendar__title"> </p> <button type="button" class="cinder-calendar__nav" aria-label="Next month">›</button></div> <div class="cinder-calendar__weekdays" aria-hidden="true"></div> <div class="cinder-calendar__grid" role="grid" tabindex="-1"></div></div>`);
+var root_3 = $3.from_html(`<div><div class="cinder-calendar__header"><button type="button" class="cinder-calendar__nav" aria-label="Previous month">‹</button> <p class="cinder-calendar__title"> </p> <button type="button" class="cinder-calendar__nav" aria-label="Next month">›</button></div> <div class="cinder-calendar__weekdays" aria-hidden="true"></div> <div class="cinder-calendar__grid" role="grid" tabindex="-1"></div></div>`);
 function Calendar($$anchor, $$props) {
   const generatedId = $3.props_id();
   $3.push($$props, true);
   const WEEKDAY_INDEXES = [0, 1, 2, 3, 4, 5, 6];
-  let value = $3.prop($$props, "value", 15, undefined), firstDayOfWeek = $3.prop($$props, "firstDayOfWeek", 3, 0), locale = $3.prop($$props, "locale", 3, "en-US"), label = $3.prop($$props, "label", 3, "Calendar"), disabled = $3.prop($$props, "disabled", 3, false), rest = $3.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "month",
-    "min",
-    "max",
-    "firstDayOfWeek",
-    "locale",
-    "label",
-    "disabled",
-    "class",
-    "onchange",
-    "disabledDate"
-  ]);
+  let value = $3.prop($$props, "value", 15, undefined), firstDayOfWeek = $3.prop($$props, "firstDayOfWeek", 3, 0), locale = $3.prop($$props, "locale", 3, "en-US"), label = $3.prop($$props, "label", 3, "Calendar"), disabled = $3.prop($$props, "disabled", 3, false), rest = $3.rest_props($$props, rest_excludes2);
   const rootId = $3.derived(() => $$props.id ?? generatedId);
   const titleId = $3.derived(() => `${$3.get(rootId)}-title`);
   const monthGridId = $3.derived(() => `${$3.get(rootId)}-grid`);
@@ -2307,7 +2383,7 @@ function Calendar($$anchor, $$props) {
     const monthStart = new Date(next.getFullYear(), next.getMonth(), 1);
     return toISODate(monthStart) <= $$props.max;
   }
-  var div = root2();
+  var div = root_3();
   $3.attribute_effect(div, ($0) => ({ ...rest, "aria-label": label(), class: $0 }), [() => classNames("cinder-calendar", $$props.class)]);
   var div_1 = $3.child(div);
   var button = $3.child(div_1);
@@ -2318,7 +2394,7 @@ function Calendar($$anchor, $$props) {
   $3.reset(div_1);
   var div_2 = $3.sibling(div_1, 2);
   $3.each(div_2, 20, () => $3.get(weekdayLabels), (weekday) => weekday, ($$anchor2, weekday) => {
-    var span = root_1();
+    var span = root2();
     var text_1 = $3.child(span, true);
     $3.reset(span);
     $3.template_effect(() => $3.set_text(text_1, weekday));
@@ -2329,7 +2405,7 @@ function Calendar($$anchor, $$props) {
   $3.each(div_3, 23, () => $3.get(rows), (row, rowIndex) => row[0]?.iso ?? rowIndex, ($$anchor2, row) => {
     var div_4 = root_2();
     $3.each(div_4, 21, () => $3.get(row), (cell) => cell.iso, ($$anchor3, cell) => {
-      var div_5 = root_3();
+      var div_5 = root_1();
       var button_2 = $3.child(div_5);
       var text_2 = $3.child(button_2, true);
       $3.reset(button_2);
@@ -2740,10 +2816,10 @@ function overflowFade() {
 }
 
 // src/components/popover/popover.svelte
-var root_12 = $5.from_html(`<div class="cinder-popover__trigger"><!></div>`);
-var root_32 = $5.from_html(`<span class="cinder-popover__arrow" aria-hidden="true"></span>`);
+var root3 = $5.from_html(`<div class="cinder-popover__trigger"><!></div>`);
+var root_12 = $5.from_html(`<span class="cinder-popover__arrow" aria-hidden="true"></span>`);
 var root_22 = $5.from_html(`<div tabindex="-1"><!> <!></div>`);
-var root3 = $5.from_html(`<!> <!>`, 1);
+var root_32 = $5.from_html(`<!> <!>`, 1);
 function Popover($$anchor, $$props) {
   const generatedPanelId = $5.props_id();
   $5.push($$props, true);
@@ -2902,11 +2978,11 @@ function Popover($$anchor, $$props) {
       }
     };
   });
-  var fragment = root3();
+  var fragment = root_32();
   var node = $5.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_12();
+      var div = root3();
       var node_1 = $5.child(div);
       $5.snippet(node_1, () => $$props.trigger);
       $5.reset(div);
@@ -2927,7 +3003,7 @@ function Popover($$anchor, $$props) {
       var node_4 = $5.sibling(node_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_32();
+          var span = root_12();
           $5.bind_this(span, ($$value) => $5.set(arrowElement, $$value), () => $5.get(arrowElement));
           $5.template_effect(() => $5.set_style(span, anchoredOverlay.arrowStyle));
           $5.append($$anchor3, span);
@@ -2966,33 +3042,34 @@ function Popover($$anchor, $$props) {
 }
 
 // src/components/date-picker/date-picker.svelte
-var root_13 = $6.from_html(`<label class="cinder-date-picker__label"> </label>`);
-var root_33 = $6.from_html(`<div class="cinder-date-picker__time"><span class="cinder-date-picker__time-label">Time</span> <input class="cinder-date-picker__time-input" type="time"/></div>`);
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "placeholder",
+  "granularity",
+  "min",
+  "max",
+  "description",
+  "error",
+  "disabled",
+  "class",
+  "aria-describedby",
+  "aria-invalid",
+  "onchange"
+]);
+var root4 = $6.from_html(`<label class="cinder-date-picker__label"> </label>`);
+var root_13 = $6.from_html(`<div class="cinder-date-picker__time"><span class="cinder-date-picker__time-label">Time</span> <input class="cinder-date-picker__time-input" type="time"/></div>`);
 var root_23 = $6.from_html(`<!> <!>`, 1);
-var root_4 = $6.from_html(`<p class="cinder-date-picker__description"> </p>`);
-var root_5 = $6.from_html(`<p class="cinder-date-picker__error" aria-live="polite"> </p>`);
-var root4 = $6.from_html(`<div><!> <div class="cinder-date-picker__control"><input class="cinder-date-picker__input"/> <button type="button" class="cinder-date-picker__trigger">Open</button></div> <!> <!> <!></div>`);
+var root_33 = $6.from_html(`<p class="cinder-date-picker__description"> </p>`);
+var root_4 = $6.from_html(`<p class="cinder-date-picker__error" aria-live="polite"> </p>`);
+var root_5 = $6.from_html(`<div><!> <div class="cinder-date-picker__control"><input class="cinder-date-picker__input"/> <button type="button" class="cinder-date-picker__trigger">Open</button></div> <!> <!> <!></div>`);
 function Date_picker($$anchor, $$props) {
   $6.push($$props, true);
-  let value = $6.prop($$props, "value", 15, undefined), placeholder = $6.prop($$props, "placeholder", 3, "YYYY-MM-DD"), granularity = $6.prop($$props, "granularity", 3, "day"), disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "placeholder",
-    "granularity",
-    "min",
-    "max",
-    "description",
-    "error",
-    "disabled",
-    "class",
-    "aria-describedby",
-    "aria-invalid",
-    "onchange"
-  ]);
+  let value = $6.prop($$props, "value", 15, undefined), placeholder = $6.prop($$props, "placeholder", 3, "YYYY-MM-DD"), granularity = $6.prop($$props, "granularity", 3, "day"), disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, rest_excludes3);
   let open = $6.state(false);
   let inputElement = $6.state(null);
   let triggerElement = $6.state(null);
@@ -3111,12 +3188,12 @@ function Date_picker($$anchor, $$props) {
       return;
     return $6.get(normalizedMax).slice(11);
   });
-  var div = root4();
+  var div = root_5();
   $6.attribute_effect(div, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-date-picker", $$props.class)]);
   var node = $6.child(div);
   {
     var consequent = ($$anchor2) => {
-      var label_1 = root_13();
+      var label_1 = root4();
       var text = $6.child(label_1, true);
       $6.reset(label_1);
       $6.template_effect(() => {
@@ -3183,7 +3260,7 @@ function Date_picker($$anchor, $$props) {
         var node_3 = $6.sibling(node_2, 2);
         {
           var consequent_1 = ($$anchor3) => {
-            var div_2 = root_33();
+            var div_2 = root_13();
             var input_1 = $6.sibling($6.child(div_2), 2);
             $6.remove_input_defaults(input_1);
             $6.reset(div_2);
@@ -3210,7 +3287,7 @@ function Date_picker($$anchor, $$props) {
   var node_4 = $6.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_4();
+      var p = root_33();
       var text_1 = $6.child(p, true);
       $6.reset(p);
       $6.template_effect(() => {
@@ -3227,7 +3304,7 @@ function Date_picker($$anchor, $$props) {
   var node_5 = $6.sibling(node_4, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p_1 = root_5();
+      var p_1 = root_4();
       var text_2 = $6.child(p_1, true);
       $6.reset(p_1);
       $6.template_effect(() => {
@@ -3306,33 +3383,34 @@ function resolveFieldControl(input) {
 }
 
 // src/components/date-range-field/date-range-field.svelte
-var root_14 = $7.from_html(`<p class="cinder-date-range-field__legend"> </p>`);
-var root_34 = $7.from_html(`<button type="button" class="cinder-date-range-field__preset-btn"> </button>`);
+var rest_excludes4 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "startLabel",
+  "endLabel",
+  "granularity",
+  "presets",
+  "hidePresets",
+  "description",
+  "error",
+  "disabled",
+  "class",
+  "onchange",
+  "aria-describedby"
+]);
+var root5 = $7.from_html(`<p class="cinder-date-range-field__legend"> </p>`);
+var root_14 = $7.from_html(`<button type="button" class="cinder-date-range-field__preset-btn"> </button>`);
 var root_24 = $7.from_html(`<div class="cinder-date-range-field__presets" role="group" aria-label="Date range presets"></div>`);
-var root_42 = $7.from_html(`<p class="cinder-date-range-field__description"> </p>`);
-var root5 = $7.from_html(`<div><!> <!> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <!></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <!></div></div> <!> <p class="cinder-date-range-field__error" aria-live="polite"> </p></div>`);
+var root_34 = $7.from_html(`<p class="cinder-date-range-field__description"> </p>`);
+var root_42 = $7.from_html(`<div><!> <!> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <!></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <!></div></div> <!> <p class="cinder-date-range-field__error" aria-live="polite"> </p></div>`);
 function Date_range_field($$anchor, $$props) {
   const generatedId = $7.props_id();
   $7.push($$props, true);
-  let value = $7.prop($$props, "value", 31, () => $7.proxy({ start: undefined, end: undefined })), granularity = $7.prop($$props, "granularity", 3, "day"), hidePresets = $7.prop($$props, "hidePresets", 3, false), disabled = $7.prop($$props, "disabled", 3, false), rest = $7.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "startLabel",
-    "endLabel",
-    "granularity",
-    "presets",
-    "hidePresets",
-    "description",
-    "error",
-    "disabled",
-    "class",
-    "onchange",
-    "aria-describedby"
-  ]);
+  let value = $7.prop($$props, "value", 31, () => $7.proxy({ start: undefined, end: undefined })), granularity = $7.prop($$props, "granularity", 3, "day"), hidePresets = $7.prop($$props, "hidePresets", 3, false), disabled = $7.prop($$props, "disabled", 3, false), rest = $7.rest_props($$props, rest_excludes4);
   const defaultPresets = [
     {
       id: "today",
@@ -3526,7 +3604,7 @@ function Date_range_field($$anchor, $$props) {
     $$props.onchange?.(next);
   }
   const hasError = $7.derived(() => !!$$props.error);
-  var div = root5();
+  var div = root_42();
   $7.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
@@ -3537,7 +3615,7 @@ function Date_range_field($$anchor, $$props) {
   var node = $7.child(div);
   {
     var consequent = ($$anchor2) => {
-      var p = root_14();
+      var p = root5();
       var text = $7.child(p, true);
       $7.reset(p);
       $7.template_effect(() => {
@@ -3557,7 +3635,7 @@ function Date_range_field($$anchor, $$props) {
     var consequent_1 = ($$anchor2) => {
       var div_1 = root_24();
       $7.each(div_1, 21, () => $7.get(resolvedPresets), (preset) => preset.id, ($$anchor3, preset) => {
-        var button = root_34();
+        var button = root_14();
         var text_1 = $7.child(button, true);
         $7.reset(button);
         $7.template_effect(() => {
@@ -3652,7 +3730,7 @@ function Date_range_field($$anchor, $$props) {
   var node_4 = $7.sibling(div_2, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p_1 = root_42();
+      var p_1 = root_34();
       var text_4 = $7.child(p_1, true);
       $7.reset(p_1);
       $7.template_effect(() => {
@@ -3693,4 +3771,4 @@ export {
   Date_range_field as DateRangeField
 };
 
-//# debugId=D5A5959E858D56F164756E2164756E21
+//# debugId=EE86E2B35A53061B64756E2164756E21

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

@@ -73,20 +73,21 @@ function devWarn(message, ...args) {
 }
 
 // src/components/description-list/description-list.svelte
-var root_4 = $.from_html(`<div class="cinder-description-list__actions"><!></div>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "items",
+  "variant",
+  "class",
+  "actions"
+]);
+var root = $.from_html(`<div class="cinder-description-list__actions"><!></div>`);
 var root_1 = $.from_html(`<div class="cinder-description-list__row"><dt> </dt> <dd><div class="cinder-description-list__definition"><!></div> <!></dd></div>`);
-var root = $.from_html(`<dl></dl>`);
+var root_2 = $.from_html(`<dl></dl>`);
 function Description_list($$anchor, $$props) {
   $.push($$props, true);
-  let variant = $.prop($$props, "variant", 3, "default"), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "items",
-    "variant",
-    "class",
-    "actions"
-  ]);
+  let variant = $.prop($$props, "variant", 3, "default"), rest = $.rest_props($$props, rest_excludes);
   const duplicateKey = $.derived(() => {
     const seen = new Set;
     for (const item of $$props.items) {
@@ -108,7 +109,7 @@ function Description_list($$anchor, $$props) {
       devWarn(`[cinder/DescriptionList] Duplicate key "${$.get(duplicateKey)}". Two items share a term and no \`id\`. Provide a unique \`id\` on each DescriptionListItem to avoid broken reconciliation.`);
     }
   });
-  var dl = root();
+  var dl = root_2();
   $.attribute_effect(dl, ($0) => ({ ...rest, class: $0, "data-cinder-variant": variant() }), [() => classNames("cinder-description-list", $$props.class)]);
   $.each(dl, 21, () => $$props.items, (item) => item.id ?? item.term, ($$anchor2, item) => {
     var div = root_1();
@@ -141,7 +142,7 @@ function Description_list($$anchor, $$props) {
     var node_2 = $.sibling(div_1, 2);
     {
       var consequent_1 = ($$anchor3) => {
-        var div_2 = root_4();
+        var div_2 = root();
         var node_3 = $.child(div_2);
         $.snippet(node_3, () => $$props.actions, () => $.get(item));
         $.reset(div_2);
@@ -172,4 +173,4 @@ export {
   Description_list as DescriptionList
 };
 
-//# debugId=EF3D6D4C4EF1FB9C64756E2164756E21
+//# debugId=6DD901622CDD263C64756E2164756E21