@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/color-field/index.js

@@ -308,24 +308,47 @@ function commitValue(proposed, onValueChange, setValue) {
 
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
-  var svg = root_1();
+  var svg = root();
   $.append($$anchor, svg);
 };
-var root_1 = $.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
-var root_2 = $.from_html(`<input/>`);
-var root_4 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "onValueChange",
+  "label",
+  "hideLabel",
+  "description",
+  "error",
+  "disabled",
+  "required",
+  "type",
+  "class",
+  "leading",
+  "trailing",
+  "leadingInteractive",
+  "trailingInteractive",
+  "aria-describedby",
+  "aria-invalid",
+  "oninput"
+]);
+var root = $.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_1 = $.from_html(`<input/>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_3 = $.from_html(`<label> <!></label>`);
-var root_6 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_7 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_8 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_5 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_10 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_11 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
-var root = $.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+var root_4 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_5 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_6 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_7 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_8 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_9 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_10 = $.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $.push($$props, true);
   const inputElement = ($$anchor2) => {
-    var input = root_2();
+    var input = root_1();
     $.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
@@ -342,29 +365,7 @@ function Input($$anchor, $$props) {
     $.bind_this(input, ($$value) => $.set(inputNode, $$value), () => $.get(inputNode));
     $.append($$anchor2, input);
   };
-  let value = $.prop($$props, "value", 15, ""), hideLabel = $.prop($$props, "hideLabel", 3, false), type = $.prop($$props, "type", 3, "text"), leadingInteractive = $.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $.prop($$props, "trailingInteractive", 3, false), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "onValueChange",
-    "label",
-    "hideLabel",
-    "description",
-    "error",
-    "disabled",
-    "required",
-    "type",
-    "class",
-    "leading",
-    "trailing",
-    "leadingInteractive",
-    "trailingInteractive",
-    "aria-describedby",
-    "aria-invalid",
-    "oninput"
-  ]);
+  let value = $.prop($$props, "value", 15, ""), hideLabel = $.prop($$props, "hideLabel", 3, false), type = $.prop($$props, "type", 3, "text"), leadingInteractive = $.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $.prop($$props, "trailingInteractive", 3, false), rest = $.rest_props($$props, rest_excludes);
   const context = getFormFieldContext();
   $.user_effect(() => {
     if (context && context.controlId !== $$props.id) {
@@ -426,7 +427,7 @@ function Input($$anchor, $$props) {
     target.value = committed;
     $$props.oninput?.(event);
   }
-  var div = root();
+  var div = root_10();
   var node = $.child(div);
   {
     var consequent_1 = ($$anchor2) => {
@@ -435,7 +436,7 @@ function Input($$anchor, $$props) {
       var node_1 = $.sibling(text);
       {
         var consequent = ($$anchor3) => {
-          var span = root_4();
+          var span = root_2();
           $.append($$anchor3, span);
         };
         $.if(node_1, ($$render) => {
@@ -462,11 +463,11 @@ function Input($$anchor, $$props) {
   var node_2 = $.sibling(node, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var div_1 = root_5();
+      var div_1 = root_7();
       var node_3 = $.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_1 = root_6();
+          var span_1 = root_4();
           var node_4 = $.child(span_1);
           $.snippet(node_4, () => $$props.leading);
           $.reset(span_1);
@@ -483,7 +484,7 @@ function Input($$anchor, $$props) {
       var node_6 = $.sibling(node_5, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_2 = root_7();
+          var span_2 = root_5();
           var node_7 = $.child(span_2);
           $.snippet(node_7, () => $$props.trailing);
           $.reset(span_2);
@@ -491,7 +492,7 @@ function Input($$anchor, $$props) {
           $.append($$anchor3, span_2);
         };
         var consequent_4 = ($$anchor3) => {
-          var span_3 = root_8();
+          var span_3 = root_6();
           var node_8 = $.child(span_3);
           calendarIcon(node_8);
           $.reset(span_3);
@@ -527,7 +528,7 @@ function Input($$anchor, $$props) {
   var node_9 = $.sibling(node_2, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p = root_10();
+      var p = root_8();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -544,7 +545,7 @@ function Input($$anchor, $$props) {
   var node_10 = $.sibling(node_9, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var p_1 = root_11();
+      var p_1 = root_9();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -564,12 +565,12 @@ function Input($$anchor, $$props) {
 }
 
 // src/components/color-field/color-field.svelte
-var root_12 = $2.from_html(`<span class="cinder-color-field__swatch" aria-hidden="true"></span>`);
-var root2 = $2.from_html(`<div><!> <input type="hidden" aria-hidden="true"/></div>`);
+var root2 = $2.from_html(`<span class="cinder-color-field__swatch" aria-hidden="true"></span>`);
+var root_12 = $2.from_html(`<div><!> <input type="hidden" aria-hidden="true"/></div>`);
 function Color_field($$anchor, $$props) {
   $2.push($$props, true);
   const swatch = ($$anchor2) => {
-    var span = root_12();
+    var span = root2();
     $2.template_effect(() => {
       $2.set_attribute(span, "data-cinder-empty", $2.get(swatchEmpty) ? "" : undefined);
       $2.set_attribute(span, "data-cinder-alpha", alpha() ? "" : undefined);
@@ -856,7 +857,7 @@ function Color_field($$anchor, $$props) {
   });
   const swatchEmpty = $2.derived(() => $2.get(committedHex) === "");
   const swatchColor = $2.derived(() => $2.get(committedHex) === "" ? "transparent" : $2.get(committedHex));
-  var div = root2();
+  var div = root_12();
   var node = $2.child(div);
   {
     let $0 = $2.derived(() => $$props.placeholder ?? "");
@@ -923,4 +924,4 @@ export {
   Color_field as ColorField
 };
 
-//# debugId=8CAA47CCC9535BFB64756E2164756E21
+//# debugId=A66A273C5031672464756E2164756E21

package/dist/components/color-picker/index.js

@@ -408,9 +408,9 @@ function Check($$anchor, $$props) {
   }));
 }
 // src/components/color-swatch-picker/color-swatch-picker.svelte
-var root_2 = $3.from_html(`<span class="cinder-color-swatch-picker__indicator"><!></span>`);
+var root2 = $3.from_html(`<span class="cinder-color-swatch-picker__indicator"><!></span>`);
 var root_1 = $3.from_html(`<li role="option" class="cinder-color-swatch-picker__swatch"><!></li>`);
-var root2 = $3.from_html(`<ul role="listbox"></ul>`);
+var root_2 = $3.from_html(`<ul role="listbox"></ul>`);
 function Color_swatch_picker($$anchor, $$props) {
   $3.push($$props, true);
   let shape = $3.prop($$props, "shape", 3, "circle"), size = $3.prop($$props, "size", 3, "md"), layout = $3.prop($$props, "layout", 3, "grid"), disabled = $3.prop($$props, "disabled", 3, false);
@@ -501,7 +501,7 @@ function Color_swatch_picker($$anchor, $$props) {
     $3.set(userFocusIndex, index2, true);
     selectSwatch(index2);
   }
-  var ul = root2();
+  var ul = root_2();
   $3.each(ul, 23, () => $3.get(renderableColors), (swatch) => swatch.color, ($$anchor2, swatch, index2) => {
     const isSelected = $3.derived(() => $3.get(index2) === $3.get(selectedIndex));
     const isDisabled = $3.derived(() => $3.get(swatch).disabled === true);
@@ -511,7 +511,7 @@ function Color_swatch_picker($$anchor, $$props) {
     var node = $3.child(li);
     {
       var consequent_1 = ($$anchor3) => {
-        var span = root_2();
+        var span = root2();
         var node_1 = $3.child(span);
         {
           var consequent = ($$anchor4) => {
@@ -573,10 +573,10 @@ function Color_swatch_picker($$anchor, $$props) {
 $3.delegate(["keydown", "click"]);
 
 // src/components/color-picker/color-picker.svelte
-var root_12 = $4.from_html(`<div role="slider" aria-label="Alpha" class="cinder-color-picker__alpha"><div class="cinder-color-picker__alpha-thumb" aria-hidden="true"></div></div>`);
-var root_3 = $4.from_html(`<input type="hidden"/>`);
-var root_4 = $4.from_html(`<input type="hidden" hidden=""/>`);
-var root3 = $4.from_html(`<div role="group"><div role="application" aria-label="Color saturation and lightness. Use a pointer to select; arrow keys provide coarse keyboard adjustment." class="cinder-color-picker__gradient"><div class="cinder-color-picker__gradient-handle" aria-hidden="true"></div></div> <div role="slider" aria-label="Hue" class="cinder-color-picker__hue"><div class="cinder-color-picker__hue-thumb" aria-hidden="true"></div></div> <!> <div class="cinder-color-picker__footer"><div role="img" class="cinder-color-picker__preview"></div> <span class="cinder-color-picker__hex-value" aria-hidden="true"> </span></div> <!> <!></div>`);
+var root3 = $4.from_html(`<div role="slider" aria-label="Alpha" class="cinder-color-picker__alpha"><div class="cinder-color-picker__alpha-thumb" aria-hidden="true"></div></div>`);
+var root_12 = $4.from_html(`<input type="hidden"/>`);
+var root_22 = $4.from_html(`<input type="hidden" hidden=""/>`);
+var root_3 = $4.from_html(`<div role="group"><div role="application" aria-label="Color saturation and lightness. Use a pointer to select; arrow keys provide coarse keyboard adjustment." class="cinder-color-picker__gradient"><div class="cinder-color-picker__gradient-handle" aria-hidden="true"></div></div> <div role="slider" aria-label="Hue" class="cinder-color-picker__hue"><div class="cinder-color-picker__hue-thumb" aria-hidden="true"></div></div> <!> <div class="cinder-color-picker__footer"><div role="img" class="cinder-color-picker__preview"></div> <span class="cinder-color-picker__hex-value" aria-hidden="true"> </span></div> <!> <!></div>`);
 function Color_picker($$anchor, $$props) {
   const pickerId = $4.props_id();
   $4.push($$props, true);
@@ -1074,7 +1074,7 @@ function Color_picker($$anchor, $$props) {
   });
   const hueAriaValue = $4.derived(() => Math.round($4.get(hue)));
   const alphaAriaValue = $4.derived(() => Math.round($4.get(alphaValue) * 100));
-  var div = root3();
+  var div = root_3();
   var div_1 = $4.child(div);
   var div_2 = $4.child(div_1);
   $4.reset(div_1);
@@ -1088,7 +1088,7 @@ function Color_picker($$anchor, $$props) {
   var node = $4.sibling(div_3, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_5 = root_12();
+      var div_5 = root3();
       $4.set_attribute(div_5, "aria-valuemin", 0);
       $4.set_attribute(div_5, "aria-valuemax", 100);
       var div_6 = $4.child(div_5);
@@ -1151,7 +1151,7 @@ function Color_picker($$anchor, $$props) {
   var node_2 = $4.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var input_1 = root_3();
+      var input_1 = root_12();
       $4.remove_input_defaults(input_1);
       $4.bind_this(input_1, ($$value) => $4.set(hiddenInput, $$value), () => $4.get(hiddenInput));
       $4.template_effect(() => {
@@ -1161,7 +1161,7 @@ function Color_picker($$anchor, $$props) {
       $4.append($$anchor2, input_1);
     };
     var alternate = ($$anchor2) => {
-      var input_2 = root_4();
+      var input_2 = root_22();
       $4.remove_input_defaults(input_2);
       $4.bind_this(input_2, ($$value) => $4.set(hiddenInput, $$value), () => $4.get(hiddenInput));
       $4.template_effect(() => $4.set_value(input_2, $4.get(internalValue)));
@@ -1222,4 +1222,4 @@ export {
   Color_picker as ColorPicker
 };
 
-//# debugId=448B3484865803E564756E2164756E21
+//# debugId=820D8B7E5195C7FE64756E2164756E21

package/dist/components/color-swatch-picker/index.js

@@ -403,9 +403,9 @@ function Check($$anchor, $$props) {
   }));
 }
 // src/components/color-swatch-picker/color-swatch-picker.svelte
-var root_2 = $3.from_html(`<span class="cinder-color-swatch-picker__indicator"><!></span>`);
+var root2 = $3.from_html(`<span class="cinder-color-swatch-picker__indicator"><!></span>`);
 var root_1 = $3.from_html(`<li role="option" class="cinder-color-swatch-picker__swatch"><!></li>`);
-var root2 = $3.from_html(`<ul role="listbox"></ul>`);
+var root_2 = $3.from_html(`<ul role="listbox"></ul>`);
 function Color_swatch_picker($$anchor, $$props) {
   $3.push($$props, true);
   let shape = $3.prop($$props, "shape", 3, "circle"), size = $3.prop($$props, "size", 3, "md"), layout = $3.prop($$props, "layout", 3, "grid"), disabled = $3.prop($$props, "disabled", 3, false);
@@ -496,7 +496,7 @@ function Color_swatch_picker($$anchor, $$props) {
     $3.set(userFocusIndex, index2, true);
     selectSwatch(index2);
   }
-  var ul = root2();
+  var ul = root_2();
   $3.each(ul, 23, () => $3.get(renderableColors), (swatch) => swatch.color, ($$anchor2, swatch, index2) => {
     const isSelected = $3.derived(() => $3.get(index2) === $3.get(selectedIndex));
     const isDisabled = $3.derived(() => $3.get(swatch).disabled === true);
@@ -506,7 +506,7 @@ function Color_swatch_picker($$anchor, $$props) {
     var node = $3.child(li);
     {
       var consequent_1 = ($$anchor3) => {
-        var span = root_2();
+        var span = root2();
         var node_1 = $3.child(span);
         {
           var consequent = ($$anchor4) => {
@@ -574,4 +574,4 @@ export {
   Color_swatch_picker as ColorSwatchPicker
 };
 
-//# debugId=5889EC7D89BEDCC064756E2164756E21
+//# debugId=9ECAF181AC30FC5164756E2164756E21

package/dist/components/combobox/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();
@@ -2473,10 +2548,10 @@ function overflowFade() {
 }
 
 // src/components/popover/popover.svelte
-var root_1 = $4.from_html(`<div class="cinder-popover__trigger"><!></div>`);
-var root_3 = $4.from_html(`<span class="cinder-popover__arrow" aria-hidden="true"></span>`);
+var root2 = $4.from_html(`<div class="cinder-popover__trigger"><!></div>`);
+var root_1 = $4.from_html(`<span class="cinder-popover__arrow" aria-hidden="true"></span>`);
 var root_2 = $4.from_html(`<div tabindex="-1"><!> <!></div>`);
-var root2 = $4.from_html(`<!> <!>`, 1);
+var root_3 = $4.from_html(`<!> <!>`, 1);
 function Popover($$anchor, $$props) {
   const generatedPanelId = $4.props_id();
   $4.push($$props, true);
@@ -2635,11 +2710,11 @@ function Popover($$anchor, $$props) {
       }
     };
   });
-  var fragment = root2();
+  var fragment = root_3();
   var node = $4.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_1();
+      var div = root2();
       var node_1 = $4.child(div);
       $4.snippet(node_1, () => $$props.trigger);
       $4.reset(div);
@@ -2660,7 +2735,7 @@ function Popover($$anchor, $$props) {
       var node_4 = $4.sibling(node_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_3();
+          var span = root_1();
           $4.bind_this(span, ($$value) => $4.set(arrowElement, $$value), () => $4.get(arrowElement));
           $4.template_effect(() => $4.set_style(span, anchoredOverlay.arrowStyle));
           $4.append($$anchor3, span);
@@ -2699,15 +2774,15 @@ function Popover($$anchor, $$props) {
 }
 
 // src/components/combobox/combobox.svelte
-var root_22 = $5.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root3 = $5.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_12 = $5.from_html(`<label class="cinder-combobox__label"> <!></label>`);
-var root_32 = $5.from_html(`<input type="hidden"/>`);
-var root_7 = $5.from_html(`<img class="cinder-combobox__option-avatar" alt="" loading="lazy"/>`);
-var root_8 = $5.from_html(`<span class="cinder-combobox__option-description"> </span>`);
-var root_6 = $5.from_html(`<li role="option" class="cinder-_option-row cinder-combobox__option"><!> <span class="cinder-combobox__option-text"><span class="cinder-combobox__option-label"> </span> <!></span></li>`);
-var root_5 = $5.from_html(`<ul role="presentation" class="cinder-combobox__listbox"></ul>`);
-var root_9 = $5.from_html(`<p class="cinder-combobox__description"> </p>`);
-var root3 = $5.from_html(`<div><!> <div class="cinder-combobox__control"><input type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"/></div> <!> <!> <div class="cinder-combobox__empty" role="status"> </div> <!> <p class="cinder-combobox__error" aria-live="polite"> </p></div>`);
+var root_22 = $5.from_html(`<input type="hidden"/>`);
+var root_32 = $5.from_html(`<img class="cinder-combobox__option-avatar" alt="" loading="lazy"/>`);
+var root_4 = $5.from_html(`<span class="cinder-combobox__option-description"> </span>`);
+var root_5 = $5.from_html(`<li role="option" class="cinder-_option-row cinder-combobox__option"><!> <span class="cinder-combobox__option-text"><span class="cinder-combobox__option-label"> </span> <!></span></li>`);
+var root_6 = $5.from_html(`<ul role="presentation" class="cinder-combobox__listbox"></ul>`);
+var root_7 = $5.from_html(`<p class="cinder-combobox__description"> </p>`);
+var root_8 = $5.from_html(`<div><!> <div class="cinder-combobox__control"><input type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"/></div> <!> <!> <div class="cinder-combobox__empty" role="status"> </div> <!> <p class="cinder-combobox__error" aria-live="polite"> </p></div>`);
 function Combobox($$anchor, $$props) {
   $5.push($$props, true);
   let value = $5.prop($$props, "value", 15, ""), inputValue = $5.prop($$props, "inputValue", 15, ""), maxVisibleOptions = $5.prop($$props, "maxVisibleOptions", 3, 200);
@@ -2896,7 +2971,7 @@ function Combobox($$anchor, $$props) {
       handleEscape(event2);
     }
   }
-  var div = root3();
+  var div = root_8();
   var node = $5.child(div);
   {
     var consequent_1 = ($$anchor2) => {
@@ -2905,7 +2980,7 @@ function Combobox($$anchor, $$props) {
       var node_1 = $5.sibling(text);
       {
         var consequent = ($$anchor3) => {
-          var span = root_22();
+          var span = root3();
           $5.append($$anchor3, span);
         };
         $5.if(node_1, ($$render) => {
@@ -2934,7 +3009,7 @@ function Combobox($$anchor, $$props) {
   var node_2 = $5.sibling(div_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var input_2 = root_32();
+      var input_2 = root_22();
       $5.remove_input_defaults(input_2);
       $5.bind_this(input_2, ($$value) => $5.set(hiddenInputElement, $$value), () => $5.get(hiddenInputElement));
       $5.template_effect(() => {
@@ -2972,13 +3047,13 @@ function Combobox($$anchor, $$props) {
           $5.set(open, $$value, true);
         },
         children: ($$anchor3, $$slotProps) => {
-          var ul = root_5();
+          var ul = root_6();
           $5.each(ul, 23, () => $5.get(filteredOptions), (option) => option.value, ($$anchor4, option, index) => {
-            var li = root_6();
+            var li = root_5();
             var node_4 = $5.child(li);
             {
               var consequent_3 = ($$anchor5) => {
-                var img = root_7();
+                var img = root_32();
                 $5.template_effect(() => $5.set_attribute(img, "src", $5.get(option).avatar));
                 $5.append($$anchor5, img);
               };
@@ -2995,7 +3070,7 @@ function Combobox($$anchor, $$props) {
             var node_5 = $5.sibling(span_2, 2);
             {
               var consequent_4 = ($$anchor5) => {
-                var span_3 = root_8();
+                var span_3 = root_4();
                 var text_2 = $5.child(span_3, true);
                 $5.reset(span_3);
                 $5.template_effect(() => $5.set_text(text_2, $5.get(option).description));
@@ -3043,7 +3118,7 @@ function Combobox($$anchor, $$props) {
   var node_6 = $5.sibling(div_2, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p = root_9();
+      var p = root_7();
       var text_4 = $5.child(p, true);
       $5.reset(p);
       $5.template_effect(() => {
@@ -3097,4 +3172,4 @@ export {
   Combobox
 };
 
-//# debugId=192EB5DF6C3CAA6B64756E2164756E21
+//# debugId=118726729EA9A3B564756E2164756E21