@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/json-schema-editor/index.js

@@ -1684,7 +1684,7 @@ function rectsAreEqual(a, b) {
 function observeMove(element3, onMove) {
   let io = null;
   let timeoutId;
-  const root19 = getDocumentElement(element3);
+  const root24 = getDocumentElement(element3);
   function cleanup() {
     var _io;
     clearTimeout(timeoutId);
@@ -1713,8 +1713,8 @@ function observeMove(element3, onMove) {
       return;
     }
     const insetTop = floor(top);
-    const insetRight = floor(root19.clientWidth - (left + width));
-    const insetBottom = floor(root19.clientHeight - (top + height));
+    const insetRight = floor(root24.clientWidth - (left + width));
+    const insetBottom = floor(root24.clientHeight - (top + height));
     const insetLeft = floor(left);
     const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
     const options = {
@@ -1744,7 +1744,7 @@ function observeMove(element3, onMove) {
     try {
       io = new IntersectionObserver(handleObserve, {
         ...options,
-        root: root19.ownerDocument
+        root: root24.ownerDocument
       });
     } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
@@ -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();
@@ -2147,10 +2222,21 @@ function useAnnouncer(options) {
 // src/components/badge/badge.svelte
 import"svelte/internal/disclose-version";
 import * as $4 from "svelte/internal/client";
-var root_3 = $4.from_svg(`<path></path>`);
-var root_2 = $4.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
-var root_1 = $4.from_html(`<!> <!>`, 1);
-var root2 = $4.from_html(`<span><!></span>`);
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "size",
+  "mono",
+  "subscriptionState",
+  "class",
+  "children"
+]);
+var root2 = $4.from_svg(`<path></path>`);
+var root_1 = $4.from_svg(`<svg class="cinder-icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_2 = $4.from_html(`<!> <!>`, 1);
+var root_3 = $4.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $4.push($$props, true);
   const subscriptionStateConfigurations = {
@@ -2187,21 +2273,11 @@ function Badge($$anchor, $$props) {
       "M3 3v5h5"
     ]
   };
-  let variant = $4.prop($$props, "variant", 3, "neutral"), size = $4.prop($$props, "size", 3, "md"), mono = $4.prop($$props, "mono", 3, false), rest = $4.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "size",
-    "mono",
-    "subscriptionState",
-    "class",
-    "children"
-  ]);
+  let variant = $4.prop($$props, "variant", 3, "neutral"), size = $4.prop($$props, "size", 3, "md"), mono = $4.prop($$props, "mono", 3, false), rest = $4.rest_props($$props, rest_excludes2);
   const subscriptionStateConfiguration = $4.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateConfigurations[$$props.subscriptionState]);
   const resolvedVariant = $4.derived(() => $4.get(subscriptionStateConfiguration)?.variant ?? variant());
   const resolvedSubscriptionIconPaths = $4.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateIconPaths[$$props.subscriptionState]);
-  var span = root2();
+  var span = root_3();
   $4.attribute_effect(span, ($0) => ({
     class: $0,
     "data-cinder-variant": $4.get(resolvedVariant),
@@ -2213,13 +2289,13 @@ function Badge($$anchor, $$props) {
   var node = $4.child(span);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment = root_1();
+      var fragment = root_2();
       var node_1 = $4.first_child(fragment);
       {
         var consequent = ($$anchor3) => {
-          var svg = root_2();
+          var svg = root_1();
           $4.each(svg, 20, () => $4.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
-            var path = root_3();
+            var path = root2();
             $4.template_effect(() => $4.set_attribute(path, "d", iconPath));
             $4.append($$anchor4, path);
           });
@@ -2319,8 +2395,8 @@ var [getTabsContextStrict, setTabsContext] = createContext();
 var getTabsContext = getTabsContextStrict;
 
 // src/components/tab/tab.svelte
-var root_12 = $5.from_html(`<span class="cinder-tab__trailing" aria-hidden="true"><!></span>`);
-var root3 = $5.from_html(`<button type="button" role="tab"><!> <!></button>`);
+var root3 = $5.from_html(`<span class="cinder-tab__trailing" aria-hidden="true"><!></span>`);
+var root_12 = $5.from_html(`<button type="button" role="tab"><!> <!></button>`);
 function Tab($$anchor, $$props) {
   $5.push($$props, true);
   let disabled = $5.prop($$props, "disabled", 3, false);
@@ -2356,13 +2432,13 @@ function Tab($$anchor, $$props) {
       return;
     tabs.select($$props.value);
   }
-  var button_1 = root3();
+  var button_1 = root_12();
   var node = $5.child(button_1);
   $5.snippet(node, () => $$props.children);
   var node_1 = $5.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var span = root_12();
+      var span = root3();
       var node_2 = $5.child(span);
       $5.snippet(node_2, () => $$props.trailing);
       $5.reset(span);
@@ -2424,7 +2500,7 @@ function Tab_list($$anchor, $$props) {
 // src/components/tab-panel/tab-panel.svelte
 import"svelte/internal/disclose-version";
 import * as $7 from "svelte/internal/client";
-var root_13 = $7.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
+var root5 = $7.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
 function Tab_panel($$anchor, $$props) {
   $7.push($$props, true);
   const tabs = getTabsContext();
@@ -2435,7 +2511,7 @@ function Tab_panel($$anchor, $$props) {
   var node = $7.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_13();
+      var div = root5();
       var node_1 = $7.child(div);
       $7.snippet(node_1, () => $$props.children);
       $7.reset(div);
@@ -2538,11 +2614,11 @@ function commitValue(proposed, onValueChange, setValue) {
 }
 
 // src/components/tabs/tabs.svelte
-var root5 = $8.from_html(`<div><!></div>`);
+var root6 = $8.from_html(`<div><!></div>`);
 function Tabs($$anchor, $$props) {
   const baseId = $8.props_id();
   $8.push($$props, true);
-  let value = $8.prop($$props, "value", 15, ""), orientation = $8.prop($$props, "orientation", 3, "horizontal");
+  let value = $8.prop($$props, "value", 15, ""), orientation = $8.prop($$props, "orientation", 3, "horizontal"), fill = $8.prop($$props, "fill", 3, false);
   const effectiveActivateOnFocus = $8.derived(() => $$props.activateOnFocus ?? orientation() === "horizontal");
   const buttons = new Map;
   let version = $8.state(0);
@@ -2703,13 +2779,14 @@ function Tabs($$anchor, $$props) {
     },
     handleKeydown
   });
-  var div = root5();
+  var div = root6();
   var node = $8.child(div);
   $8.snippet(node, () => $$props.children);
   $8.reset(div);
   $8.template_effect(($0) => {
     $8.set_class(div, 1, $0);
     $8.set_attribute(div, "data-cinder-orientation", orientation());
+    $8.set_attribute(div, "data-cinder-fill", fill() ? "" : undefined);
   }, [() => $8.clsx(classNames("cinder-tabs", $$props.class))]);
   $8.append($$anchor, div);
   $8.pop();
@@ -2723,23 +2800,24 @@ import * as $31 from "svelte/internal/client";
 import"svelte/internal/disclose-version";
 import * as $9 from "svelte/internal/client";
 import { tick } from "svelte";
-var root_22 = $9.from_html(`<div class="cinder-alert__icon" aria-hidden="true"><!></div>`);
-var root_32 = $9.from_html(`<button type="button" class="cinder-_dismiss-button cinder-alert__dismiss" aria-label="Dismiss alert"><svg class="cinder-alert__dismiss-icon" xmlns="http://www.w3.org/2000/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_14 = $9.from_html(`<div><!> <div class="cinder-alert__content"><!></div> <!></div>`);
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "dismissible",
+  "ondismiss",
+  "class",
+  "children",
+  "icon"
+]);
+var root7 = $9.from_html(`<div class="cinder-alert__icon" aria-hidden="true"><!></div>`);
+var root_13 = $9.from_html(`<button type="button" class="cinder-_dismiss-button cinder-alert__dismiss" aria-label="Dismiss alert"><svg class="cinder-alert__dismiss-icon" xmlns="http://www.w3.org/2000/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_22 = $9.from_html(`<div><!> <div class="cinder-alert__content"><!></div> <!></div>`);
 function Alert($$anchor, $$props) {
   $9.push($$props, true);
   const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-  let variant = $9.prop($$props, "variant", 3, "info"), dismissible = $9.prop($$props, "dismissible", 3, false), rest = $9.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "dismissible",
-    "ondismiss",
-    "class",
-    "children",
-    "icon"
-  ]);
+  let variant = $9.prop($$props, "variant", 3, "info"), dismissible = $9.prop($$props, "dismissible", 3, false), rest = $9.rest_props($$props, rest_excludes3);
   const resolvedVariant = $9.derived(() => variant() === "error" ? "danger" : variant());
   let visible = $9.state(true);
   let rootElement = $9.state(undefined);
@@ -2788,7 +2866,7 @@ function Alert($$anchor, $$props) {
   var node = $9.first_child(fragment);
   {
     var consequent_2 = ($$anchor2) => {
-      var div = root_14();
+      var div = root_22();
       $9.attribute_effect(div, ($0) => ({
         ...$9.get(restWithoutForbidden),
         class: $0,
@@ -2800,7 +2878,7 @@ function Alert($$anchor, $$props) {
       var node_1 = $9.child(div);
       {
         var consequent = ($$anchor3) => {
-          var div_1 = root_22();
+          var div_1 = root7();
           var node_2 = $9.child(div_1);
           $9.snippet(node_2, () => $$props.icon);
           $9.reset(div_1);
@@ -2818,7 +2896,7 @@ function Alert($$anchor, $$props) {
       var node_4 = $9.sibling(div_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var button = root_32();
+          var button = root_13();
           $9.delegated("click", button, handleDismiss);
           $9.append($$anchor3, button);
         };
@@ -2844,22 +2922,44 @@ $9.delegate(["click"]);
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
 import * as $10 from "svelte/internal/client";
-var root_23 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_4 = $10.from_html(`<span class="cinder-sr-only"> </span>`);
-var root_5 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_33 = $10.from_html(`<!> <!>`, 1);
-var root_8 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_15 = $10.from_html(`<!> <!> <!>`, 1);
-var root_9 = $10.from_html(`<a><!></a>`);
-var root_10 = $10.from_html(`<button><!></button>`);
+var rest_excludes4 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "size",
+  "fullWidth",
+  "loading",
+  "iconOnly",
+  "leadingIcon",
+  "trailingIcon",
+  "children",
+  "label",
+  "class",
+  "href",
+  "onclick",
+  "aria-disabled",
+  "aria-busy",
+  "aria-label",
+  "aria-labelledby",
+  "aria-expanded",
+  "aria-controls",
+  "aria-haspopup"
+]);
+var root8 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_14 = $10.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_23 = $10.from_html(`<!> <!>`, 1);
+var root_32 = $10.from_html(`<!> <!> <!>`, 1);
+var root_4 = $10.from_html(`<a><!></a>`);
+var root_5 = $10.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $10.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_15();
+    var fragment = root_32();
     var node = $10.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        var span = root_23();
+        var span = root8();
         var node_1 = $10.child(span);
         $10.snippet(node_1, () => $$props.leadingIcon);
         $10.reset(span);
@@ -2873,11 +2973,11 @@ function Button($$anchor, $$props) {
     var node_2 = $10.sibling(node, 2);
     {
       var consequent_3 = ($$anchor3) => {
-        var fragment_1 = root_33();
+        var fragment_1 = root_23();
         var node_3 = $10.first_child(fragment_1);
         {
           var consequent_1 = ($$anchor4) => {
-            var span_1 = root_4();
+            var span_1 = root_14();
             var text3 = $10.child(span_1, true);
             $10.reset(span_1);
             $10.template_effect(() => $10.set_text(text3, $$props.label));
@@ -2891,7 +2991,7 @@ function Button($$anchor, $$props) {
         var node_4 = $10.sibling(node_3, 2);
         {
           var consequent_2 = ($$anchor4) => {
-            var span_2 = root_5();
+            var span_2 = root8();
             var node_5 = $10.child(span_2);
             $10.snippet(node_5, () => $$props.children);
             $10.reset(span_2);
@@ -2927,7 +3027,7 @@ function Button($$anchor, $$props) {
     var node_7 = $10.sibling(node_2, 2);
     {
       var consequent_5 = ($$anchor3) => {
-        var span_3 = root_8();
+        var span_3 = root8();
         var node_8 = $10.child(span_3);
         $10.snippet(node_8, () => $$props.trailingIcon);
         $10.reset(span_3);
@@ -2940,30 +3040,7 @@ function Button($$anchor, $$props) {
     }
     $10.append($$anchor2, fragment);
   };
-  const variant = $10.prop($$props, "variant", 3, "secondary"), size = $10.prop($$props, "size", 3, "md"), fullWidth = $10.prop($$props, "fullWidth", 3, false), loading = $10.prop($$props, "loading", 3, false), iconOnly = $10.prop($$props, "iconOnly", 3, false), rest = $10.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "size",
-    "fullWidth",
-    "loading",
-    "iconOnly",
-    "leadingIcon",
-    "trailingIcon",
-    "children",
-    "label",
-    "class",
-    "href",
-    "onclick",
-    "aria-disabled",
-    "aria-busy",
-    "aria-label",
-    "aria-labelledby",
-    "aria-expanded",
-    "aria-controls",
-    "aria-haspopup"
-  ]);
+  const variant = $10.prop($$props, "variant", 3, "secondary"), size = $10.prop($$props, "size", 3, "md"), fullWidth = $10.prop($$props, "fullWidth", 3, false), loading = $10.prop($$props, "loading", 3, false), iconOnly = $10.prop($$props, "iconOnly", 3, false), rest = $10.rest_props($$props, rest_excludes4);
   const mergedClassName = $10.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $10.derived(() => ({
     "data-cinder-variant": variant(),
@@ -3009,7 +3086,7 @@ function Button($$anchor, $$props) {
   var node_9 = $10.first_child(fragment_4);
   {
     var consequent_6 = ($$anchor2) => {
-      var a = root_9();
+      var a = root_4();
       $10.attribute_effect(a, () => ({
         ...anchorAttributes,
         href: loading() ? undefined : $$props.href,
@@ -3031,7 +3108,7 @@ function Button($$anchor, $$props) {
       $10.append($$anchor2, a);
     };
     var alternate_1 = ($$anchor2) => {
-      var button = root_10();
+      var button = root_5();
       $10.attribute_effect(button, () => ({
         ...buttonAttributes,
         type: $10.get(buttonType) ?? "button",
@@ -3093,7 +3170,7 @@ var defaultAttributes = {
 var defaultAttributes_default = defaultAttributes;
 
 // ../../node_modules/lucide-svelte/dist/Icon.svelte
-var root6 = $11.from_svg(`<svg><!><!></svg>`);
+var root9 = $11.from_svg(`<svg><!><!></svg>`);
 function Icon($$anchor, $$props) {
   const $$sanitized_props = $11.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
   const $$restProps = $11.legacy_rest_props($$sanitized_props, [
@@ -3115,7 +3192,7 @@ function Icon($$anchor, $$props) {
     return Boolean(className) && array.indexOf(className) === index2;
   }).join(" ");
   $11.init();
-  var svg = root6();
+  var svg = root9();
   $11.attribute_effect(svg, ($0, $1) => ({
     ...defaultAttributes_default,
     ...$$restProps,
@@ -3196,24 +3273,25 @@ function setSurfaceContext(context) {
 var getSurfaceContext = optionalContext(getSurfaceContextStrict);
 
 // src/components/surface/surface.svelte
-var root7 = $13.from_html(`<div><!></div>`);
+var rest_excludes5 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "tone",
+  "class",
+  "children"
+]);
+var root10 = $13.from_html(`<div><!></div>`);
 function Surface($$anchor, $$props) {
   $13.push($$props, true);
-  let tone = $13.prop($$props, "tone", 3, "default"), rest = $13.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "tone",
-    "class",
-    "children"
-  ]);
+  let tone = $13.prop($$props, "tone", 3, "default"), rest = $13.rest_props($$props, rest_excludes5);
   const context = {
     get tone() {
       return tone();
     }
   };
   setSurfaceContext(context);
-  var div = root7();
+  var div = root10();
   $13.attribute_effect(div, ($0) => ({ class: $0, "data-cinder-tone": tone(), ...rest }), [() => classNames("cinder-surface", $$props.class)]);
   var node = $13.child(div);
   $13.snippet(node, () => $$props.children ?? $13.noop);
@@ -3479,23 +3557,24 @@ function File_text($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/front-matter-header.svelte
-var root8 = $18.from_html(`<button><span class="front-matter-icon svelte-1rp9so4"><!></span> <!> <span class="front-matter-label svelte-1rp9so4"> </span> <!></button>`);
+var rest_excludes6 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "controlsId",
+  "label",
+  "expanded",
+  "badgeLabel",
+  "badgeVariant",
+  "badgeSize",
+  "variant",
+  "class"
+]);
+var root11 = $18.from_html(`<button><span class="front-matter-icon svelte-1rp9so4"><!></span> <!> <span class="front-matter-label svelte-1rp9so4"> </span> <!></button>`);
 function Front_matter_header($$anchor, $$props) {
   $18.push($$props, true);
-  let label = $18.prop($$props, "label", 3, "Front Matter"), expanded = $18.prop($$props, "expanded", 15, true), badgeVariant = $18.prop($$props, "badgeVariant", 3, "neutral"), badgeSize = $18.prop($$props, "badgeSize", 3, "xs"), variant = $18.prop($$props, "variant", 3, "panel"), rest = $18.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "controlsId",
-    "label",
-    "expanded",
-    "badgeLabel",
-    "badgeVariant",
-    "badgeSize",
-    "variant",
-    "class"
-  ]);
+  let label = $18.prop($$props, "label", 3, "Front Matter"), expanded = $18.prop($$props, "expanded", 15, true), badgeVariant = $18.prop($$props, "badgeVariant", 3, "neutral"), badgeSize = $18.prop($$props, "badgeSize", 3, "xs"), variant = $18.prop($$props, "variant", 3, "panel"), rest = $18.rest_props($$props, rest_excludes6);
   const showBadge = $18.derived(() => Boolean($$props.badgeLabel));
   function toggleExpanded() {
     expanded(!expanded());
@@ -3509,7 +3588,7 @@ function Front_matter_header($$anchor, $$props) {
       expanded(false);
     }
   }
-  var button = root8();
+  var button = root11();
   $18.attribute_effect(button, ($0) => ({
     type: "button",
     id: $$props.id,
@@ -3526,10 +3605,10 @@ function Front_matter_header($$anchor, $$props) {
   var node = $18.child(span);
   {
     var consequent = ($$anchor2) => {
-      Chevron_down($$anchor2, { class: "icon-sm" });
+      Chevron_down($$anchor2, { class: "cinder-icon-sm" });
     };
     var alternate = ($$anchor2) => {
-      Chevron_right($$anchor2, { class: "icon-sm" });
+      Chevron_right($$anchor2, { class: "cinder-icon-sm" });
     };
     $18.if(node, ($$render) => {
       if (expanded())
@@ -3540,7 +3619,7 @@ function Front_matter_header($$anchor, $$props) {
   }
   $18.reset(span);
   var node_1 = $18.sibling(span, 2);
-  File_text(node_1, { class: "icon-sm" });
+  File_text(node_1, { class: "cinder-icon-sm" });
   var span_1 = $18.sibling(node_1, 2);
   var text4 = $18.child(span_1, true);
   $18.reset(span_1);
@@ -3577,23 +3656,18 @@ function Front_matter_header($$anchor, $$props) {
 // src/components/diff-viewer/diff-line.svelte
 import"svelte/internal/disclose-version";
 import * as $19 from "svelte/internal/client";
-var root_24 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb"></span> <span class="diff-text svelte-hc3elb"> </span></div>`);
-var root_42 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></button>`);
-var root_52 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></div>`);
-var root_82 = $19.from_html(`<del class="svelte-hc3elb"> </del>`);
-var root_7 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></button>`);
-var root_11 = $19.from_html(`<del class="svelte-hc3elb"> </del>`);
-var root_102 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
-var root_19 = $19.from_html(`<span> </span>`);
-var root_20 = $19.from_html(`<del class="word-removed svelte-hc3elb"> </del>`);
-var root_21 = $19.from_html(`<ins class="word-added svelte-hc3elb"> </ins>`);
-var root_17 = $19.from_html(`<span class="word-changes svelte-hc3elb"></span>`);
-var root_142 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></button>`);
-var root_28 = $19.from_html(`<span> </span>`);
-var root_29 = $19.from_html(`<del class="word-removed svelte-hc3elb"> </del>`);
-var root_30 = $19.from_html(`<ins class="word-added svelte-hc3elb"> </ins>`);
-var root_26 = $19.from_html(`<span class="word-changes svelte-hc3elb"></span>`);
-var root_232 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
+var root12 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb"></span> <span class="diff-text svelte-hc3elb"> </span></div>`);
+var root_15 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></button>`);
+var root_24 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></div>`);
+var root_33 = $19.from_html(`<del class="svelte-hc3elb"> </del>`);
+var root_42 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></button>`);
+var root_52 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
+var root_6 = $19.from_html(`<span> </span>`);
+var root_7 = $19.from_html(`<del class="word-removed svelte-hc3elb"> </del>`);
+var root_8 = $19.from_html(`<ins class="word-added svelte-hc3elb"> </ins>`);
+var root_9 = $19.from_html(`<span class="word-changes svelte-hc3elb"></span>`);
+var root_10 = $19.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></button>`);
+var root_11 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
 function Diff_line($$anchor, $$props) {
   $19.push($$props, true);
   let selected = $19.prop($$props, "selected", 3, false);
@@ -3622,7 +3696,7 @@ function Diff_line($$anchor, $$props) {
       var node_1 = $19.first_child(fragment_1);
       {
         var consequent = ($$anchor3) => {
-          var div = root_24();
+          var div = root12();
           var span = $19.sibling($19.child(div), 2);
           var text_1 = $19.child(span, true);
           $19.reset(span);
@@ -3638,7 +3712,7 @@ function Diff_line($$anchor, $$props) {
           var node_2 = $19.first_child(fragment_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var button = root_42();
+              var button = root_15();
               var span_1 = $19.sibling($19.child(button), 2);
               var text_2 = $19.child(span_1, true);
               $19.reset(span_1);
@@ -3657,7 +3731,7 @@ function Diff_line($$anchor, $$props) {
               $19.append($$anchor4, button);
             };
             var alternate = ($$anchor4) => {
-              var div_1 = root_52();
+              var div_1 = root_24();
               var span_2 = $19.sibling($19.child(div_1), 2);
               var text_3 = $19.child(span_2, true);
               $19.reset(span_2);
@@ -3686,7 +3760,7 @@ function Diff_line($$anchor, $$props) {
           var node_3 = $19.first_child(fragment_3);
           {
             var consequent_4 = ($$anchor4) => {
-              var button_1 = root_7();
+              var button_1 = root_42();
               var span_3 = $19.child(button_1);
               var text_4 = $19.child(span_3, true);
               $19.reset(span_3);
@@ -3694,7 +3768,7 @@ function Diff_line($$anchor, $$props) {
               var node_4 = $19.child(span_4);
               {
                 var consequent_3 = ($$anchor5) => {
-                  var del = root_82();
+                  var del = root_33();
                   var text_5 = $19.child(del, true);
                   $19.reset(del);
                   $19.template_effect(() => $19.set_text(text_5, $$props.diff.text || " "));
@@ -3728,7 +3802,7 @@ function Diff_line($$anchor, $$props) {
               $19.append($$anchor4, button_1);
             };
             var alternate_3 = ($$anchor4) => {
-              var div_2 = root_102();
+              var div_2 = root_52();
               var span_5 = $19.child(div_2);
               var text_7 = $19.child(span_5, true);
               $19.reset(span_5);
@@ -3736,7 +3810,7 @@ function Diff_line($$anchor, $$props) {
               var node_5 = $19.child(span_6);
               {
                 var consequent_5 = ($$anchor5) => {
-                  var del_1 = root_11();
+                  var del_1 = root_33();
                   var text_8 = $19.child(del_1, true);
                   $19.reset(del_1);
                   $19.template_effect(() => $19.set_text(text_8, $$props.diff.text || " "));
@@ -3781,7 +3855,7 @@ function Diff_line($$anchor, $$props) {
           var node_6 = $19.first_child(fragment_6);
           {
             var consequent_12 = ($$anchor4) => {
-              var button_2 = root_142();
+              var button_2 = root_10();
               var span_7 = $19.sibling($19.child(button_2), 2);
               var node_7 = $19.child(span_7);
               {
@@ -3796,27 +3870,27 @@ function Diff_line($$anchor, $$props) {
                       $19.append($$anchor6, fragment_8);
                     };
                     var alternate_4 = ($$anchor6) => {
-                      var span_8 = root_17();
+                      var span_8 = root_9();
                       $19.each(span_8, 23, () => $$props.diff.wordChanges, (wordChange, widx) => `${widx}:${wordChange.type}:${wordChange.text}`, ($$anchor7, wordChange) => {
                         var fragment_9 = $19.comment();
                         var node_10 = $19.first_child(fragment_9);
                         {
                           var consequent_8 = ($$anchor8) => {
-                            var span_9 = root_19();
+                            var span_9 = root_6();
                             var text_10 = $19.child(span_9, true);
                             $19.reset(span_9);
                             $19.template_effect(() => $19.set_text(text_10, $19.get(wordChange).text));
                             $19.append($$anchor8, span_9);
                           };
                           var consequent_9 = ($$anchor8) => {
-                            var del_2 = root_20();
+                            var del_2 = root_7();
                             var text_11 = $19.child(del_2, true);
                             $19.reset(del_2);
                             $19.template_effect(() => $19.set_text(text_11, $19.get(wordChange).text));
                             $19.append($$anchor8, del_2);
                           };
                           var consequent_10 = ($$anchor8) => {
-                            var ins = root_21();
+                            var ins = root_8();
                             var text_12 = $19.child(ins, true);
                             $19.reset(ins);
                             $19.template_effect(() => $19.set_text(text_12, $19.get(wordChange).text));
@@ -3872,7 +3946,7 @@ function Diff_line($$anchor, $$props) {
               $19.append($$anchor4, button_2);
             };
             var alternate_8 = ($$anchor4) => {
-              var div_3 = root_232();
+              var div_3 = root_11();
               var span_10 = $19.sibling($19.child(div_3), 2);
               var node_11 = $19.child(span_10);
               {
@@ -3887,27 +3961,27 @@ function Diff_line($$anchor, $$props) {
                       $19.append($$anchor6, fragment_12);
                     };
                     var alternate_6 = ($$anchor6) => {
-                      var span_11 = root_26();
+                      var span_11 = root_9();
                       $19.each(span_11, 23, () => $$props.diff.wordChanges, (wordChange, widx) => `${widx}:${wordChange.type}:${wordChange.text}`, ($$anchor7, wordChange) => {
                         var fragment_13 = $19.comment();
                         var node_14 = $19.first_child(fragment_13);
                         {
                           var consequent_14 = ($$anchor8) => {
-                            var span_12 = root_28();
+                            var span_12 = root_6();
                             var text_14 = $19.child(span_12, true);
                             $19.reset(span_12);
                             $19.template_effect(() => $19.set_text(text_14, $19.get(wordChange).text));
                             $19.append($$anchor8, span_12);
                           };
                           var consequent_15 = ($$anchor8) => {
-                            var del_3 = root_29();
+                            var del_3 = root_7();
                             var text_15 = $19.child(del_3, true);
                             $19.reset(del_3);
                             $19.template_effect(() => $19.set_text(text_15, $19.get(wordChange).text));
                             $19.append($$anchor8, del_3);
                           };
                           var consequent_16 = ($$anchor8) => {
-                            var ins_1 = root_30();
+                            var ins_1 = root_8();
                             var text_16 = $19.child(ins_1, true);
                             $19.reset(ins_1);
                             $19.template_effect(() => $19.set_text(text_16, $19.get(wordChange).text));
@@ -3991,27 +4065,28 @@ function Diff_line($$anchor, $$props) {
 $19.delegate(["click"]);
 
 // src/components/diff-viewer/diff-front-matter.svelte
-var root_16 = $20.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
-var root9 = $20.from_html(`<div><!> <!></div>`);
+var rest_excludes7 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "diffs",
+  "viewMode",
+  "expanded",
+  "badgeLabel",
+  "badgeVariant",
+  "wordChangeRenderer",
+  "class"
+]);
+var root13 = $20.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
+var root_16 = $20.from_html(`<div><!> <!></div>`);
 function Diff_front_matter($$anchor, $$props) {
   $20.push($$props, true);
-  let id = $20.prop($$props, "id", 3, "front-matter"), expanded = $20.prop($$props, "expanded", 15, true), badgeLabel = $20.prop($$props, "badgeLabel", 3, null), badgeVariant = $20.prop($$props, "badgeVariant", 3, "warning"), rest = $20.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "diffs",
-    "viewMode",
-    "expanded",
-    "badgeLabel",
-    "badgeVariant",
-    "wordChangeRenderer",
-    "class"
-  ]);
+  let id = $20.prop($$props, "id", 3, "front-matter"), expanded = $20.prop($$props, "expanded", 15, true), badgeLabel = $20.prop($$props, "badgeLabel", 3, null), badgeVariant = $20.prop($$props, "badgeVariant", 3, "warning"), rest = $20.rest_props($$props, rest_excludes7);
   const hasChanges = $20.derived(() => $$props.diffs.some((d) => d.type !== "same"));
   const toggleId = $20.derived(() => `${id()}-toggle`);
   const contentId = $20.derived(() => `${id()}-content`);
-  var div = root9();
+  var div = root_16();
   $20.attribute_effect(div, ($0) => ({ class: $0, "data-has-changes": $20.get(hasChanges), ...rest }), [() => classNames("front-matter-section", $$props.class)], undefined, undefined, "svelte-113383m");
   var node = $20.child(div);
   Front_matter_header(node, {
@@ -4038,7 +4113,7 @@ function Diff_front_matter($$anchor, $$props) {
   var node_1 = $20.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_16();
+      var div_1 = root13();
       $20.each(div_1, 23, () => $$props.diffs, (lineDiff, idx) => `fm-${idx}:${lineDiff.type}:${lineDiff.type === "modified" ? lineDiff.newText : lineDiff.text}`, ($$anchor3, lineDiff) => {
         Diff_line($$anchor3, {
           get diff() {
@@ -4073,19 +4148,20 @@ import * as $28 from "svelte/internal/client";
 // src/components/kbd/kbd.svelte
 import"svelte/internal/disclose-version";
 import * as $21 from "svelte/internal/client";
-var root10 = $21.from_html(`<kbd><!></kbd>`);
+var rest_excludes8 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "size",
+  "label",
+  "children"
+]);
+var root14 = $21.from_html(`<kbd><!></kbd>`);
 function Kbd($$anchor, $$props) {
   $21.push($$props, true);
-  let size = $21.prop($$props, "size", 3, "md"), rest = $21.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "size",
-    "label",
-    "children"
-  ]);
-  var kbd = root10();
+  let size = $21.prop($$props, "size", 3, "md"), rest = $21.rest_props($$props, rest_excludes8);
+  var kbd = root14();
   $21.attribute_effect(kbd, ($0) => ({ class: $0, "data-cinder-size": size(), ...rest }), [() => classNames("cinder-kbd", $$props.class)]);
   var node = $21.child(kbd);
   {
@@ -4119,7 +4195,22 @@ import { untrack as untrack3 } from "svelte";
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
 import * as $22 from "svelte/internal/client";
-import { createContext as createContext3 } from "svelte";
+
+// src/_internal/strict-stable-context.ts
+import { getContext, setContext } from "svelte";
+function strictStableContext(key, missingMessage) {
+  const contextKey = Symbol.for(key);
+  return [
+    () => {
+      const context = getContext(contextKey);
+      if (context === undefined) {
+        throw new Error(`missing_context: ${missingMessage}`);
+      }
+      return context;
+    },
+    (context) => setContext(contextKey, context)
+  ];
+}
 
 // src/utilities/document-order.ts
 var DOCUMENT_POSITION_PRECEDING = 2;
@@ -4140,8 +4231,7 @@ function inDocumentOrder(items) {
 }
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
-var [getSegmentedControlContext, setSegmentedControlContext] = createContext3();
-
+var [getSegmentedControlContext, setSegmentedControlContext] = strictStableContext("@lostgradient/cinder/segmented-control/context", "Segment must be rendered inside a SegmentedControl");
 class SegmentedControlController {
   #registrations = [];
   #version = $22.state(0);
@@ -4269,23 +4359,24 @@ class SegmentedControlController {
 }
 
 // src/components/segment/segment.svelte
-var root_18 = $23.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
-var root_25 = $23.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root11 = $23.from_html(`<button><!> <!> <!></button>`);
+var rest_excludes9 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "disabled",
+  "controls",
+  "leading",
+  "trailing",
+  "children",
+  "class"
+]);
+var root15 = $23.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
+var root_17 = $23.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
+var root_25 = $23.from_html(`<button><!> <!> <!></button>`);
 function Segment($$anchor, $$props) {
   $23.push($$props, true);
-  let disabled = $23.prop($$props, "disabled", 3, false), rest = $23.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "disabled",
-    "controls",
-    "leading",
-    "trailing",
-    "children",
-    "class"
-  ]);
+  let disabled = $23.prop($$props, "disabled", 3, false), rest = $23.rest_props($$props, rest_excludes9);
   const context = getSegmentedControlContext();
   const registerSegment = (node) => {
     return untrack3(() => context.register({
@@ -4305,7 +4396,7 @@ function Segment($$anchor, $$props) {
   const isFocusable = $23.derived(() => context.isFocusable($$props.value));
   const effectiveDisabled = $23.derived(() => disabled() || context.controlDisabled);
   const role = $23.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root11();
+  var button = root_25();
   var event_handler = () => context.toggle($$props.value);
   $23.attribute_effect(button, ($0) => ({
     ...rest,
@@ -4329,7 +4420,7 @@ function Segment($$anchor, $$props) {
   var node_1 = $23.child(button);
   {
     var consequent = ($$anchor2) => {
-      var span = root_18();
+      var span = root15();
       var node_2 = $23.child(span);
       $23.snippet(node_2, () => $$props.leading);
       $23.reset(span);
@@ -4345,7 +4436,7 @@ function Segment($$anchor, $$props) {
   var node_4 = $23.sibling(node_3, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_1 = root_25();
+      var span_1 = root_17();
       var node_5 = $23.child(span_1);
       $23.snippet(node_5, () => $$props.trailing);
       $23.reset(span_1);
@@ -4367,33 +4458,34 @@ import"svelte/internal/disclose-version";
 import * as $24 from "svelte/internal/client";
 import { untrack as untrack4 } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
-var root_27 = $24.from_html(`<input type="hidden"/>`);
-var root_110 = $24.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root12 = $24.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var rest_excludes10 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "name",
+  "hideLabel",
+  "disabled",
+  "size",
+  "density",
+  "orientation",
+  "detached",
+  "fullWidth",
+  "variant",
+  "selectionMode",
+  "disallowEmptySelection",
+  "class",
+  "onchange",
+  "children"
+]);
+var root16 = $24.from_html(`<input type="hidden"/>`);
+var root_18 = $24.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root_26 = $24.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $24.push($$props, true);
-  let value = $24.prop($$props, "value", 15), hideLabel = $24.prop($$props, "hideLabel", 3, false), disabled = $24.prop($$props, "disabled", 3, false), size = $24.prop($$props, "size", 3, "md"), orientation = $24.prop($$props, "orientation", 3, "horizontal"), detached = $24.prop($$props, "detached", 3, false), fullWidth = $24.prop($$props, "fullWidth", 3, false), variant = $24.prop($$props, "variant", 3, "radiogroup"), selectionMode = $24.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $24.prop($$props, "disallowEmptySelection", 3, true), rest = $24.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "name",
-    "hideLabel",
-    "disabled",
-    "size",
-    "density",
-    "orientation",
-    "detached",
-    "fullWidth",
-    "variant",
-    "selectionMode",
-    "disallowEmptySelection",
-    "class",
-    "onchange",
-    "children"
-  ]);
+  let value = $24.prop($$props, "value", 15), hideLabel = $24.prop($$props, "hideLabel", 3, false), disabled = $24.prop($$props, "disabled", 3, false), size = $24.prop($$props, "size", 3, "md"), orientation = $24.prop($$props, "orientation", 3, "horizontal"), detached = $24.prop($$props, "detached", 3, false), fullWidth = $24.prop($$props, "fullWidth", 3, false), variant = $24.prop($$props, "variant", 3, "radiogroup"), selectionMode = $24.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $24.prop($$props, "disallowEmptySelection", 3, true), rest = $24.rest_props($$props, rest_excludes10);
   let resetInputElement = $24.state(null);
   let resetSyncTimeout;
   const initialSingleValue = untrack4(() => typeof value() === "string" ? value() : undefined);
@@ -4457,7 +4549,7 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root12();
+  var div = root_26();
   var span = $24.child(div);
   var text6 = $24.child(span, true);
   $24.reset(span);
@@ -4486,12 +4578,12 @@ function Segmented_control($$anchor, $$props) {
   var node_1 = $24.sibling(div_1, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_110();
+      var fragment = root_18();
       var input_1 = $24.first_child(fragment);
       $24.bind_this(input_1, ($$value) => $24.set(resetInputElement, $$value), () => $24.get(resetInputElement));
       var node_2 = $24.sibling(input_1, 2);
       $24.each(node_2, 16, () => $24.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root_27();
+        var input_2 = root16();
         $24.remove_input_defaults(input_2);
         $24.template_effect(() => {
           $24.set_attribute(input_2, "name", $$props.name);
@@ -4522,11 +4614,12 @@ function Segmented_control($$anchor, $$props) {
 // src/components/spinner/spinner.svelte
 import"svelte/internal/disclose-version";
 import * as $25 from "svelte/internal/client";
-var root13 = $25.from_html(`<span><span class="cinder-spinner__sr-only"> </span></span>`);
+var rest_excludes11 = new Set(["$$slots", "$$events", "$$legacy", "size", "label", "class"]);
+var root17 = $25.from_html(`<span><span class="cinder-spinner__sr-only"> </span></span>`);
 function Spinner($$anchor, $$props) {
   $25.push($$props, true);
-  const size = $25.prop($$props, "size", 3, "md"), label = $25.prop($$props, "label", 3, "Loading"), rest = $25.rest_props($$props, ["$$slots", "$$events", "$$legacy", "size", "label", "class"]);
-  var span = root13();
+  const size = $25.prop($$props, "size", 3, "md"), label = $25.prop($$props, "label", 3, "Loading"), rest = $25.rest_props($$props, rest_excludes11);
+  var span = root17();
   $25.attribute_effect(span, ($0) => ({
     ...rest,
     class: $0,
@@ -4595,37 +4688,38 @@ function Refresh_cw($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/diff-toolbar.svelte
-var root_111 = $28.from_html(`<!> <!> <!>`, 1);
-var root_112 = $28.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
-var root_172 = $28.from_html(`<!> Revert All`, 1);
-var root_192 = $28.from_html(`<!> Compute Diff`, 1);
-var root_212 = $28.from_html(`<div class="navigation svelte-1p8ursg"><!> <span class="change-counter svelte-1p8ursg"> </span> <!></div> <div class="shortcuts svelte-1p8ursg"><!> <!></div>`, 1);
-var root_242 = $28.from_html(`<span class="front-matter-only-hint svelte-1p8ursg">Front matter only</span>`);
-var root14 = $28.from_html(`<div><div class="toolbar-left svelte-1p8ursg"><!> <div class="stats svelte-1p8ursg"><!> <!> <!> <!> <!> <!></div></div> <div class="toolbar-right svelte-1p8ursg"><!> <!> <!> <!></div></div>`);
+var rest_excludes12 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "viewMode",
+  "stats",
+  "changeCount",
+  "currentChangeIndex",
+  "hasChanges",
+  "readonly",
+  "diffState",
+  "onjumpnext",
+  "onjumpprevious",
+  "onrevertall",
+  "ontriggercompute",
+  "actions",
+  "class"
+]);
+var root18 = $28.from_html(`<!> <!> <!>`, 1);
+var root_19 = $28.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
+var root_27 = $28.from_html(`<!> Revert All`, 1);
+var root_34 = $28.from_html(`<!> Compute Diff`, 1);
+var root_43 = $28.from_html(`<div class="navigation svelte-1p8ursg"><!> <span class="change-counter svelte-1p8ursg"> </span> <!></div> <div class="shortcuts svelte-1p8ursg"><!> <!></div>`, 1);
+var root_53 = $28.from_html(`<span class="front-matter-only-hint svelte-1p8ursg">Front matter only</span>`);
+var root_62 = $28.from_html(`<div><div class="toolbar-left svelte-1p8ursg"><!> <div class="stats svelte-1p8ursg"><!> <!> <!> <!> <!> <!></div></div> <div class="toolbar-right svelte-1p8ursg"><!> <!> <!> <!></div></div>`);
 function Diff_toolbar($$anchor, $$props) {
   $28.push($$props, true);
-  let viewMode = $28.prop($$props, "viewMode", 15, "unified"), readonly = $28.prop($$props, "readonly", 3, false), rest = $28.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "viewMode",
-    "stats",
-    "changeCount",
-    "currentChangeIndex",
-    "hasChanges",
-    "readonly",
-    "diffState",
-    "onjumpnext",
-    "onjumpprevious",
-    "onrevertall",
-    "ontriggercompute",
-    "actions",
-    "class"
-  ]);
+  let viewMode = $28.prop($$props, "viewMode", 15, "unified"), readonly = $28.prop($$props, "readonly", 3, false), rest = $28.rest_props($$props, rest_excludes12);
   const tier = $28.derived(() => $$props.diffState?.tier ?? "realtime");
   const isStale = $28.derived(() => $$props.diffState?.isStale ?? false);
   const isComputing = $28.derived(() => $$props.diffState?.isComputing ?? false);
-  var div = root14();
+  var div = root_62();
   $28.attribute_effect(div, ($0) => ({ class: $0, ...rest }), [() => classNames("diff-toolbar", $$props.class)], undefined, undefined, "svelte-1p8ursg");
   var div_1 = $28.child(div);
   var node = $28.child(div_1);
@@ -4642,7 +4736,7 @@ function Diff_toolbar($$anchor, $$props) {
       viewMode($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_111();
+      var fragment = root18();
       var node_1 = $28.first_child(fragment);
       Segment(node_1, {
         value: "unified",
@@ -4744,7 +4838,7 @@ function Diff_toolbar($$anchor, $$props) {
   var node_7 = $28.sibling(node_6, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_112();
+      var span = root_19();
       $28.append($$anchor2, span);
     };
     $28.if(node_7, ($$render) => {
@@ -4808,9 +4902,9 @@ function Diff_toolbar($$anchor, $$props) {
           return $$props.onrevertall;
         },
         children: ($$anchor3, $$slotProps) => {
-          var fragment_11 = root_172();
+          var fragment_11 = root_27();
           var node_13 = $28.first_child(fragment_11);
-          Rotate_ccw(node_13, { class: "icon-sm" });
+          Rotate_ccw(node_13, { class: "cinder-icon-sm" });
           $28.next();
           $28.append($$anchor3, fragment_11);
         },
@@ -4835,9 +4929,9 @@ function Diff_toolbar($$anchor, $$props) {
           return $28.get(isComputing);
         },
         children: ($$anchor3, $$slotProps) => {
-          var fragment_13 = root_192();
+          var fragment_13 = root_34();
           var node_15 = $28.first_child(fragment_13);
-          Refresh_cw(node_15, { class: "icon-sm" });
+          Refresh_cw(node_15, { class: "cinder-icon-sm" });
           $28.next();
           $28.append($$anchor3, fragment_13);
         },
@@ -4856,7 +4950,7 @@ function Diff_toolbar($$anchor, $$props) {
       var node_17 = $28.first_child(fragment_14);
       {
         var consequent_9 = ($$anchor3) => {
-          var fragment_15 = root_212();
+          var fragment_15 = root_43();
           var div_4 = $28.first_child(fragment_15);
           var node_18 = $28.child(div_4);
           Button(node_18, {
@@ -4867,7 +4961,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Previous change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_left($$anchor4, { class: "icon-sm" });
+              Chevron_left($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -4883,7 +4977,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Next change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_right($$anchor4, { class: "icon-sm" });
+              Chevron_right($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -4898,7 +4992,7 @@ function Diff_toolbar($$anchor, $$props) {
           $28.append($$anchor3, fragment_15);
         };
         var alternate = ($$anchor3) => {
-          var span_2 = root_242();
+          var span_2 = root_53();
           $28.append($$anchor3, span_2);
         };
         $28.if(node_17, ($$render) => {
@@ -4935,12 +5029,12 @@ function Diff_toolbar($$anchor, $$props) {
 }
 
 // src/components/diff-viewer/diff-viewer.svelte
-var root_72 = $29.from_html(`<span class="compute-time svelte-1fvc2en"> </span>`);
-var root_6 = $29.from_html(`<div class="diff-warning svelte-1fvc2en" role="status"> <!></div>`);
-var root_113 = $29.from_html(`<!> Revert`, 1);
-var root_103 = $29.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
-var root_92 = $29.from_html(`<!> <!>`, 1);
-var root_114 = $29.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
+var root19 = $29.from_html(`<span class="compute-time svelte-1fvc2en"> </span>`);
+var root_110 = $29.from_html(`<div class="diff-warning svelte-1fvc2en" role="status"> <!></div>`);
+var root_28 = $29.from_html(`<!> Revert`, 1);
+var root_35 = $29.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
+var root_44 = $29.from_html(`<!> <!>`, 1);
+var root_54 = $29.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
 function Diff_viewer($$anchor, $$props) {
   const instanceId = $29.props_id();
   $29.push($$props, true);
@@ -5102,7 +5196,7 @@ ${match[1] ?? ""}
         return $29.get($1);
       },
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_114();
+        var fragment_1 = root_54();
         var node = $29.first_child(fragment_1);
         {
           var consequent = ($$anchor3) => {
@@ -5176,12 +5270,12 @@ ${match[1] ?? ""}
         var node_4 = $29.sibling(node, 2);
         {
           var consequent_3 = ($$anchor3) => {
-            var div = root_6();
+            var div = root_110();
             var text7 = $29.child(div);
             var node_5 = $29.sibling(text7);
             {
               var consequent_2 = ($$anchor4) => {
-                var span = root_72();
+                var span = root19();
                 var text_1 = $29.child(span);
                 $29.reset(span);
                 $29.template_effect(($02) => $29.set_text(text_1, `(Last: ${$02 ?? ""}ms)`), [() => $29.get(diffState).lastComputeTime.toFixed(0)]);
@@ -5240,11 +5334,11 @@ ${match[1] ?? ""}
         $29.each(node_7, 17, () => $29.get(lineDiffs), $29.index, ($$anchor3, lineDiff, idx) => {
           const isSelected = $29.derived(() => $29.get(selectedLineIndex) === idx);
           const hunkAtLine = $29.derived(() => $29.get(hunkStartMap).get(idx));
-          var fragment_7 = root_92();
+          var fragment_7 = root_44();
           var node_8 = $29.first_child(fragment_7);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_2 = root_103();
+              var div_2 = root_35();
               var span_1 = $29.child(div_2);
               var text_2 = $29.child(span_1);
               $29.reset(span_1);
@@ -5256,9 +5350,9 @@ ${match[1] ?? ""}
                 onclick: () => handleRevertHunk($29.get(hunkAtLine)),
                 "aria-label": "Revert this change",
                 children: ($$anchor5, $$slotProps2) => {
-                  var fragment_8 = root_113();
+                  var fragment_8 = root_28();
                   var node_10 = $29.first_child(fragment_8);
-                  Rotate_ccw(node_10, { class: "icon-xs" });
+                  Rotate_ccw(node_10, { class: "cinder-icon-xs" });
                   $29.next();
                   $29.append($$anchor5, fragment_8);
                 },
@@ -5301,27 +5395,28 @@ ${match[1] ?? ""}
 // src/components/empty-state/empty-state.svelte
 import"svelte/internal/disclose-version";
 import * as $30 from "svelte/internal/client";
-var root_116 = $30.from_html(`<div class="cinder-empty-state-icon" aria-hidden="true"><!></div>`);
-var root_34 = $30.from_html(`<p class="cinder-empty-state-description"> </p>`);
-var root_43 = $30.from_html(`<div class="cinder-empty-state-action"><!></div>`);
-var root15 = $30.from_html(`<div><!> <!> <!> <!></div>`);
+var rest_excludes13 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "title",
+  "description",
+  "class",
+  "headingLevel",
+  "icon",
+  "action"
+]);
+var root20 = $30.from_html(`<div class="cinder-empty-state-icon" aria-hidden="true"><!></div>`);
+var root_111 = $30.from_html(`<p class="cinder-empty-state-description"> </p>`);
+var root_29 = $30.from_html(`<div class="cinder-empty-state-action"><!></div>`);
+var root_36 = $30.from_html(`<div><!> <!> <!> <!></div>`);
 function Empty_state($$anchor, $$props) {
   const titleId = $30.props_id();
   $30.push($$props, true);
-  let headingLevel = $30.prop($$props, "headingLevel", 3, 3), rest = $30.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "title",
-    "description",
-    "class",
-    "headingLevel",
-    "icon",
-    "action"
-  ]);
+  let headingLevel = $30.prop($$props, "headingLevel", 3, 3), rest = $30.rest_props($$props, rest_excludes13);
   const safeLevel = $30.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
   const tag = $30.derived(() => `h${$30.get(safeLevel)}`);
-  var div = root15();
+  var div = root_36();
   $30.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
@@ -5331,7 +5426,7 @@ function Empty_state($$anchor, $$props) {
   var node = $30.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_116();
+      var div_1 = root20();
       var node_1 = $30.child(div_1);
       $30.snippet(node_1, () => $$props.icon);
       $30.reset(div_1);
@@ -5352,7 +5447,7 @@ function Empty_state($$anchor, $$props) {
   var node_3 = $30.sibling(node_2, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var p = root_34();
+      var p = root_111();
       var text_1 = $30.child(p, true);
       $30.reset(p);
       $30.template_effect(() => $30.set_text(text_1, $$props.description));
@@ -5366,7 +5461,7 @@ function Empty_state($$anchor, $$props) {
   var node_4 = $30.sibling(node_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_2 = root_43();
+      var div_2 = root_29();
       var node_5 = $30.child(div_2);
       $30.snippet(node_5, () => $$props.action);
       $30.reset(div_2);
@@ -5383,18 +5478,18 @@ function Empty_state($$anchor, $$props) {
 }
 
 // src/components/json-schema-editor/diff-view.svelte
-var root_210 = $31.from_html(`<p>The diff shows the committed state; uncommitted JSON edits are not included.</p> <div class="cinder-jse-dirty-actions"><!> <!></div>`, 1);
-var root16 = $31.from_html(`<div><!> <!></div>`);
+var root21 = $31.from_html(`<p>The diff shows the committed state; uncommitted JSON edits are not included.</p> <div class="cinder-jse-dirty-actions"><!> <!></div>`, 1);
+var root_112 = $31.from_html(`<div><!> <!></div>`);
 function Diff_view($$anchor, $$props) {
   $31.push($$props, true);
-  var div = root16();
+  var div = root_112();
   var node = $31.child(div);
   {
     var consequent = ($$anchor2) => {
       Alert($$anchor2, {
         variant: "warning",
         children: ($$anchor3, $$slotProps) => {
-          var fragment_1 = root_210();
+          var fragment_1 = root21();
           var div_1 = $31.sibling($31.first_child(fragment_1), 2);
           var node_1 = $31.child(div_1);
           Button(node_1, {
@@ -5518,40 +5613,42 @@ function resolveFieldControl(input) {
 }
 
 // src/_internal/form-field-context.ts
-import { createContext as createContext4 } from "svelte";
-var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext4();
+import { createContext as createContext3 } from "svelte";
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext3();
 function setFormFieldContext(context) {
   setFormFieldContextRaw(context);
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
 // src/components/checkbox/checkbox.svelte
-var root_213 = $32.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_117 = $32.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
-var root_35 = $32.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
-var root_44 = $32.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root17 = $32.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+var rest_excludes14 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "checked",
+  "onValueChange",
+  "indeterminate",
+  "label",
+  "description",
+  "error",
+  "disabled",
+  "required",
+  "fieldClass",
+  "class",
+  "aria-describedby",
+  "aria-invalid",
+  "onchange"
+]);
+var root22 = $32.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_113 = $32.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
+var root_210 = $32.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
+var root_37 = $32.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root_45 = $32.from_html(`<div><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $32.props_id();
   $32.push($$props, true);
-  let checked = $32.prop($$props, "checked", 15, false), indeterminate = $32.prop($$props, "indeterminate", 11, false), rest = $32.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "checked",
-    "onValueChange",
-    "indeterminate",
-    "label",
-    "description",
-    "error",
-    "disabled",
-    "required",
-    "class",
-    "aria-describedby",
-    "aria-invalid",
-    "onchange"
-  ]);
+  let checked = $32.prop($$props, "checked", 15, false), indeterminate = $32.prop($$props, "indeterminate", 11, false), rest = $32.rest_props($$props, rest_excludes14);
   const context = getFormFieldContext();
   const field = $32.derived(() => resolveFieldControl({
     ...$$props.id !== undefined ? { id: $$props.id } : {},
@@ -5610,7 +5707,7 @@ function Checkbox($$anchor, $$props) {
     target.indeterminate = indeterminate() && !committed;
     $$props.onchange?.(event2);
   }
-  var div = root17();
+  var div = root_45();
   var div_1 = $32.child(div);
   var span = $32.child(div_1);
   var input = $32.child(span);
@@ -5632,12 +5729,12 @@ function Checkbox($$anchor, $$props) {
   var node = $32.sibling(span, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var label_1 = root_117();
+      var label_1 = root_113();
       var text9 = $32.child(label_1);
       var node_1 = $32.sibling(text9);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_213();
+          var span_1 = root22();
           $32.append($$anchor3, span_1);
         };
         $32.if(node_1, ($$render) => {
@@ -5662,7 +5759,7 @@ function Checkbox($$anchor, $$props) {
   var node_2 = $32.sibling(div_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_35();
+      var p = root_210();
       var text_1 = $32.child(p, true);
       $32.reset(p);
       $32.template_effect(() => {
@@ -5679,7 +5776,7 @@ function Checkbox($$anchor, $$props) {
   var node_3 = $32.sibling(node_2, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p_1 = root_44();
+      var p_1 = root_37();
       var text_2 = $32.child(p_1, true);
       $32.reset(p_1);
       $32.template_effect(() => {
@@ -5694,6 +5791,9 @@ function Checkbox($$anchor, $$props) {
     });
   }
   $32.reset(div);
+  $32.template_effect(($0) => $32.set_class(div, 1, $0), [
+    () => $32.clsx(classNames("cinder-checkbox-field", $$props.fieldClass))
+  ]);
   $32.append($$anchor, div);
   $32.pop();
 }
@@ -5702,24 +5802,47 @@ function Checkbox($$anchor, $$props) {
 import"svelte/internal/disclose-version";
 import * as $33 from "svelte/internal/client";
 var calendarIcon = ($$anchor) => {
-  var svg = root_118();
+  var svg = root23();
   $33.append($$anchor, svg);
 };
-var root_118 = $33.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_215 = $33.from_html(`<input/>`);
-var root_45 = $33.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_36 = $33.from_html(`<label> <!></label>`);
-var root_62 = $33.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_73 = $33.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_83 = $33.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_53 = $33.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_104 = $33.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_115 = $33.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
-var root18 = $33.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+var rest_excludes15 = 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 root23 = $33.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_114 = $33.from_html(`<input/>`);
+var root_211 = $33.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_38 = $33.from_html(`<label> <!></label>`);
+var root_46 = $33.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_55 = $33.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_63 = $33.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_72 = $33.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_82 = $33.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_92 = $33.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_102 = $33.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $33.push($$props, true);
   const inputElement = ($$anchor2) => {
-    var input = root_215();
+    var input = root_114();
     $33.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
@@ -5736,29 +5859,7 @@ function Input($$anchor, $$props) {
     $33.bind_this(input, ($$value) => $33.set(inputNode, $$value), () => $33.get(inputNode));
     $33.append($$anchor2, input);
   };
-  let value = $33.prop($$props, "value", 15, ""), hideLabel = $33.prop($$props, "hideLabel", 3, false), type = $33.prop($$props, "type", 3, "text"), leadingInteractive = $33.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $33.prop($$props, "trailingInteractive", 3, false), rest = $33.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 = $33.prop($$props, "value", 15, ""), hideLabel = $33.prop($$props, "hideLabel", 3, false), type = $33.prop($$props, "type", 3, "text"), leadingInteractive = $33.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $33.prop($$props, "trailingInteractive", 3, false), rest = $33.rest_props($$props, rest_excludes15);
   const context = getFormFieldContext();
   $33.user_effect(() => {
     if (context && context.controlId !== $$props.id) {
@@ -5820,16 +5921,16 @@ function Input($$anchor, $$props) {
     target.value = committed;
     $$props.oninput?.(event2);
   }
-  var div = root18();
+  var div = root_102();
   var node = $33.child(div);
   {
     var consequent_1 = ($$anchor2) => {
-      var label_1 = root_36();
+      var label_1 = root_38();
       var text9 = $33.child(label_1);
       var node_1 = $33.sibling(text9);
       {
         var consequent = ($$anchor3) => {
-          var span = root_45();
+          var span = root_211();
           $33.append($$anchor3, span);
         };
         $33.if(node_1, ($$render) => {
@@ -5856,11 +5957,11 @@ function Input($$anchor, $$props) {
   var node_2 = $33.sibling(node, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var div_1 = root_53();
+      var div_1 = root_72();
       var node_3 = $33.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_1 = root_62();
+          var span_1 = root_46();
           var node_4 = $33.child(span_1);
           $33.snippet(node_4, () => $$props.leading);
           $33.reset(span_1);
@@ -5877,7 +5978,7 @@ function Input($$anchor, $$props) {
       var node_6 = $33.sibling(node_5, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_2 = root_73();
+          var span_2 = root_55();
           var node_7 = $33.child(span_2);
           $33.snippet(node_7, () => $$props.trailing);
           $33.reset(span_2);
@@ -5885,7 +5986,7 @@ function Input($$anchor, $$props) {
           $33.append($$anchor3, span_2);
         };
         var consequent_4 = ($$anchor3) => {
-          var span_3 = root_83();
+          var span_3 = root_63();
           var node_8 = $33.child(span_3);
           calendarIcon(node_8);
           $33.reset(span_3);
@@ -5921,7 +6022,7 @@ function Input($$anchor, $$props) {
   var node_9 = $33.sibling(node_2, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p = root_104();
+      var p = root_82();
       var text_1 = $33.child(p, true);
       $33.reset(p);
       $33.template_effect(() => {
@@ -5938,7 +6039,7 @@ function Input($$anchor, $$props) {
   var node_10 = $33.sibling(node_9, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var p_1 = root_115();
+      var p_1 = root_92();
       var text_2 = $33.child(p_1, true);
       $33.reset(p_1);
       $33.template_effect(() => {
@@ -6187,7 +6288,7 @@ function captureFocus() {
 }
 
 // src/components/tooltip/tooltip.svelte
-var root19 = $35.from_html(`<span role="presentation"><!> <span role="tooltip" class="cinder-tooltip"> </span></span>`);
+var root24 = $35.from_html(`<span role="presentation"><!> <span role="tooltip" class="cinder-tooltip"> </span></span>`);
 function Tooltip($$anchor, $$props) {
   const tooltipId = $35.props_id();
   $35.push($$props, true);
@@ -6332,7 +6433,7 @@ function Tooltip($$anchor, $$props) {
       return;
     return pushEscapeHandler(handleEscape);
   });
-  var span = root19();
+  var span = root24();
   var node = $35.child(span);
   $35.snippet(node, () => $$props.children);
   var span_1 = $35.sibling(node, 2);
@@ -6381,15 +6482,14 @@ import { onDestroy } from "svelte";
 // src/components/chip/chip.svelte
 import"svelte/internal/disclose-version";
 import * as $36 from "svelte/internal/client";
-var root_216 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_119 = $36.from_html(`<button><!> <span class="cinder-chip__label"> </span></button>`);
-var root_46 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_37 = $36.from_html(`<span><!> <span class="cinder-chip__label"> </span> <button type="button" class="cinder-chip__remove"><span aria-hidden="true">×</span></button></span>`);
-var root_63 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_54 = $36.from_html(`<span><!> <span class="cinder-chip__label"> </span></span>`);
+var rest_excludes16 = new Set(["$$slots", "$$events", "$$legacy"]);
+var root25 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var root_115 = $36.from_html(`<button><!> <span class="cinder-chip__label"> </span></button>`);
+var root_212 = $36.from_html(`<span><!> <span class="cinder-chip__label"> </span> <button type="button" class="cinder-chip__remove"><span aria-hidden="true">×</span></button></span>`);
+var root_39 = $36.from_html(`<span><!> <span class="cinder-chip__label"> </span></span>`);
 function Chip($$anchor, $$props) {
   $36.push($$props, true);
-  let props = $36.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  let props = $36.rest_props($$props, rest_excludes16);
   const mode = $36.derived(() => $$props.mode ?? "display");
   const label = $36.derived(() => $$props.label);
   const variant = $36.derived(() => $$props.variant ?? "neutral");
@@ -6441,7 +6541,7 @@ function Chip($$anchor, $$props) {
   var node = $36.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_119();
+      var button = root_115();
       var event_handler = (event3) => {
         if ($36.get(disabled))
           return;
@@ -6466,7 +6566,7 @@ function Chip($$anchor, $$props) {
       var node_1 = $36.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span = root_216();
+          var span = root25();
           var node_2 = $36.child(span);
           $36.snippet(node_2, () => $36.get(leadingIcon));
           $36.reset(span);
@@ -6485,7 +6585,7 @@ function Chip($$anchor, $$props) {
       $36.append($$anchor2, button);
     };
     var consequent_3 = ($$anchor2) => {
-      var span_2 = root_37();
+      var span_2 = root_212();
       $36.attribute_effect(span_2, ($0) => ({
         ...$36.get(rest),
         role: "group",
@@ -6501,7 +6601,7 @@ function Chip($$anchor, $$props) {
       var node_3 = $36.child(span_2);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_3 = root_46();
+          var span_3 = root25();
           var node_4 = $36.child(span_3);
           $36.snippet(node_4, () => $36.get(leadingIcon));
           $36.reset(span_3);
@@ -6529,7 +6629,7 @@ function Chip($$anchor, $$props) {
       $36.append($$anchor2, span_2);
     };
     var alternate = ($$anchor2) => {
-      var span_5 = root_54();
+      var span_5 = root_39();
       $36.attribute_effect(span_5, ($0) => ({
         ...$36.get(rest),
         "data-cinder-mode": "display",
@@ -6541,7 +6641,7 @@ function Chip($$anchor, $$props) {
       var node_5 = $36.child(span_5);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_6 = root_63();
+          var span_6 = root25();
           var node_6 = $36.child(span_6);
           $36.snippet(node_6, () => $36.get(leadingIcon));
           $36.reset(span_6);
@@ -6579,11 +6679,11 @@ function calculatePropertyValidationErrorCount(propertyNames, childValidationCou
 }
 
 // src/components/json-schema-editor/property-list.svelte
-var root_38 = $37.from_html(`<p class="cinder-jse-property-list__empty">No properties yet.</p>`);
-var root_93 = $37.from_html(`<div class="cinder-jse-property-row__panel"><!> <!></div>`);
-var root_47 = $37.from_html(`<div class="cinder-jse-property-row"><div class="cinder-jse-property-row__summary"><button type="button" class="cinder-jse-property-row__trigger"><span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span> <span class="cinder-jse-property-row__name"> </span> <span class="cinder-jse-property-row__type"> </span></button> <span class="cinder-jse-property-row__spacer"></span> <!> <!> <!> <!></div> <!></div>`);
-var root_1110 = $37.from_html(`<details class="cinder-jse-required-only"><summary class="cinder-jse-required-only__summary"> </summary> <div class="cinder-jse-required-only__panel"><!> <!> <!></div></details>`);
-var root20 = $37.from_html(`<div class="cinder-jse-property-list"><!> <!> <!> <!> <!></div>`);
+var root26 = $37.from_html(`<p class="cinder-jse-property-list__empty">No properties yet.</p>`);
+var root_116 = $37.from_html(`<div class="cinder-jse-property-row__panel"><!> <!></div>`);
+var root_213 = $37.from_html(`<div class="cinder-jse-property-row"><div class="cinder-jse-property-row__summary"><button type="button" class="cinder-jse-property-row__trigger"><span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span> <span class="cinder-jse-property-row__name"> </span> <span class="cinder-jse-property-row__type"> </span></button> <span class="cinder-jse-property-row__spacer"></span> <!> <!> <!> <!></div> <!></div>`);
+var root_310 = $37.from_html(`<details class="cinder-jse-required-only"><summary class="cinder-jse-required-only__summary"> </summary> <div class="cinder-jse-required-only__panel"><!> <!> <!></div></details>`);
+var root_47 = $37.from_html(`<div class="cinder-jse-property-list"><!> <!> <!> <!> <!></div>`);
 function Property_list($$anchor, $$props) {
   $37.push($$props, true);
   let depth = $37.prop($$props, "depth", 3, 0), readonly = $37.prop($$props, "readonly", 3, false);
@@ -6740,7 +6840,7 @@ function Property_list($$anchor, $$props) {
       return;
     $$props.onchange($$props.properties, $$props.required.filter((entry) => entry !== name));
   }
-  var div = root20();
+  var div = root_47();
   var node = $37.child(div);
   {
     var consequent = ($$anchor2) => {
@@ -6763,7 +6863,7 @@ function Property_list($$anchor, $$props) {
   var node_1 = $37.sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var p = root_38();
+      var p = root26();
       $37.append($$anchor2, p);
     };
     $37.if(node_1, ($$render) => {
@@ -6776,7 +6876,7 @@ function Property_list($$anchor, $$props) {
     const isRequired = $37.derived(() => $$props.required.includes(key));
     const isOpen = $37.derived(() => expanded[key] === true);
     const panelId = $37.derived(() => `${$$props.idPrefix}-${key}-panel`);
-    var div_1 = root_47();
+    var div_1 = root_213();
     var div_2 = $37.child(div_1);
     var button = $37.child(div_2);
     var span = $37.sibling($37.child(button), 2);
@@ -6871,7 +6971,7 @@ function Property_list($$anchor, $$props) {
     var node_7 = $37.sibling(div_2, 2);
     {
       var consequent_2 = ($$anchor3) => {
-        var div_3 = root_93();
+        var div_3 = root_116();
         var node_8 = $37.child(div_3);
         {
           let $0 = $37.derived(() => `${$$props.idPrefix}-${key}-name`);
@@ -6957,7 +7057,7 @@ function Property_list($$anchor, $$props) {
   var node_11 = $37.sibling(node_10, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var details = root_1110();
+      var details = root_310();
       var summary = $37.child(details);
       var text_8 = $37.child(summary);
       $37.reset(summary);
@@ -7082,19 +7182,19 @@ var NUMBER_CONSTRAINT_FIELDS = [
   { key: "exclusiveMaximum", label: "Exclusive maximum" },
   { key: "multipleOf", label: "Multiple of" }
 ];
-var root_39 = $38.from_html(`<div class="cinder-jse-boolean-schema"><span> </span> <!></div>`);
-var root_55 = $38.from_html(`<button type="button" class="cinder-jse-collapsed"><span class="cinder-jse-collapsed__summary"> </span> <span class="cinder-jse-collapsed__hint">Expand</span></button>`);
-var root_74 = $38.from_html(`<div class="cinder-jse-section-header"><!></div>`);
-var root_105 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Properties</h4> <!></div>`);
-var root_1112 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Array items</h4> <!></div>`);
-var root_122 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible"><summary class="cinder-jse-section__title">String constraints</summary> <div class="cinder-jse-section__body"><!> <!> <!> <!></div></details>`);
-var root_132 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible"><summary class="cinder-jse-section__title">Number constraints</summary> <div class="cinder-jse-section__body"></div></details>`);
-var root_173 = $38.from_html(`<!> <!>`, 1);
-var root_162 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible" open=""><summary class="cinder-jse-section__title"> </summary> <div class="cinder-jse-section__body"><!> <!></div></details>`);
-var root_202 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">$ref</h4> <!> <!></div>`);
-var root_222 = $38.from_html(`<div class="cinder-jse-advanced-row"><!> <!></div>`);
-var root_64 = $38.from_html(`<!> <div class="cinder-jse-section cinder-jse-section--lead"><!> <!></div> <div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Type</h4> <div class="cinder-jse-type-row"><!> <!></div></div> <!> <!> <!> <!> <!> <!> <!>`, 1);
-var root21 = $38.from_html(`<div><!></div>`);
+var root27 = $38.from_html(`<div class="cinder-jse-boolean-schema"><span> </span> <!></div>`);
+var root_117 = $38.from_html(`<button type="button" class="cinder-jse-collapsed"><span class="cinder-jse-collapsed__summary"> </span> <span class="cinder-jse-collapsed__hint">Expand</span></button>`);
+var root_214 = $38.from_html(`<div class="cinder-jse-section-header"><!></div>`);
+var root_311 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Properties</h4> <!></div>`);
+var root_48 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Array items</h4> <!></div>`);
+var root_56 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible"><summary class="cinder-jse-section__title">String constraints</summary> <div class="cinder-jse-section__body"><!> <!> <!> <!></div></details>`);
+var root_64 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible"><summary class="cinder-jse-section__title">Number constraints</summary> <div class="cinder-jse-section__body"></div></details>`);
+var root_73 = $38.from_html(`<!> <!>`, 1);
+var root_83 = $38.from_html(`<details class="cinder-jse-section cinder-jse-section--collapsible" open=""><summary class="cinder-jse-section__title"> </summary> <div class="cinder-jse-section__body"><!> <!></div></details>`);
+var root_93 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">$ref</h4> <!> <!></div>`);
+var root_103 = $38.from_html(`<div class="cinder-jse-advanced-row"><!> <!></div>`);
+var root_118 = $38.from_html(`<!> <div class="cinder-jse-section cinder-jse-section--lead"><!> <!></div> <div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Type</h4> <div class="cinder-jse-type-row"><!> <!></div></div> <!> <!> <!> <!> <!> <!> <!>`, 1);
+var root_122 = $38.from_html(`<div><!></div>`);
 function Property_editor($$anchor, $$props) {
   $38.push($$props, true);
   let depth = $38.prop($$props, "depth", 3, 0), readonly = $38.prop($$props, "readonly", 3, false);
@@ -7284,7 +7384,7 @@ function Property_editor($$anchor, $$props) {
     ]);
     patchComposition(keyword, list);
   }
-  var div = root21();
+  var div = root_122();
   var node = $38.child(div);
   {
     var consequent = ($$anchor2) => {
@@ -7300,7 +7400,7 @@ function Property_editor($$anchor, $$props) {
       });
     };
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_39();
+      var div_1 = root27();
       var span = $38.child(div_1);
       var text_1 = $38.child(span);
       $38.reset(span);
@@ -7324,7 +7424,7 @@ function Property_editor($$anchor, $$props) {
       $38.append($$anchor2, div_1);
     };
     var consequent_2 = ($$anchor2) => {
-      var button = root_55();
+      var button = root_117();
       var span_1 = $38.child(button);
       var text_3 = $38.child(span_1, true);
       $38.reset(span_1);
@@ -7335,11 +7435,11 @@ function Property_editor($$anchor, $$props) {
       $38.append($$anchor2, button);
     };
     var alternate = ($$anchor2) => {
-      var fragment_2 = root_64();
+      var fragment_2 = root_118();
       var node_2 = $38.first_child(fragment_2);
       {
         var consequent_3 = ($$anchor3) => {
-          var div_2 = root_74();
+          var div_2 = root_214();
           var node_3 = $38.child(div_2);
           Button(node_3, {
             variant: "ghost",
@@ -7447,7 +7547,7 @@ function Property_editor($$anchor, $$props) {
       var node_8 = $38.sibling(div_4, 2);
       {
         var consequent_4 = ($$anchor3) => {
-          var div_6 = root_105();
+          var div_6 = root_311();
           var node_9 = $38.sibling($38.child(div_6), 2);
           {
             let $0 = $38.derived(() => `${$$props.path}/properties`);
@@ -7487,7 +7587,7 @@ function Property_editor($$anchor, $$props) {
       var node_10 = $38.sibling(node_8, 2);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_7 = root_1112();
+          var div_7 = root_48();
           var node_11 = $38.sibling($38.child(div_7), 2);
           {
             let $0 = $38.derived(() => `${$$props.idPrefix}-items`);
@@ -7525,7 +7625,7 @@ function Property_editor($$anchor, $$props) {
       var node_12 = $38.sibling(node_10, 2);
       {
         var consequent_6 = ($$anchor3) => {
-          var details = root_122();
+          var details = root_56();
           var div_8 = $38.sibling($38.child(details), 2);
           var node_13 = $38.child(div_8);
           {
@@ -7630,7 +7730,7 @@ function Property_editor($$anchor, $$props) {
       var node_17 = $38.sibling(node_12, 2);
       {
         var consequent_7 = ($$anchor3) => {
-          var details_1 = root_132();
+          var details_1 = root_64();
           var div_9 = $38.sibling($38.child(details_1), 2);
           $38.each(div_9, 21, () => NUMBER_CONSTRAINT_FIELDS, (field) => field.key, ($$anchor4, field) => {
             {
@@ -7668,7 +7768,7 @@ function Property_editor($$anchor, $$props) {
         var node_19 = $38.first_child(fragment_5);
         {
           var consequent_8 = ($$anchor4) => {
-            var details_2 = root_162();
+            var details_2 = root_83();
             var summary = $38.child(details_2);
             var text_5 = $38.child(summary, true);
             $38.reset(summary);
@@ -7676,7 +7776,7 @@ function Property_editor($$anchor, $$props) {
             var node_20 = $38.child(div_10);
             $38.each(node_20, 19, () => $38.get(objectValue)[keyword], (branch, branchIndex) => $38.get(compositionBranchKeys)[keyword][branchIndex], ($$anchor5, branch, branchIndex) => {
               const branchKey = $38.derived(() => $38.get(compositionBranchKeys)[keyword][$38.get(branchIndex)]);
-              var fragment_6 = root_173();
+              var fragment_6 = root_73();
               var node_21 = $38.first_child(fragment_6);
               {
                 let $0 = $38.derived(() => `${$$props.idPrefix}-${keyword}-${$38.get(branchIndex)}`);
@@ -7755,7 +7855,7 @@ function Property_editor($$anchor, $$props) {
       var node_24 = $38.sibling(node_18, 2);
       {
         var consequent_9 = ($$anchor3) => {
-          var div_11 = root_202();
+          var div_11 = root_93();
           var node_25 = $38.sibling($38.child(div_11), 2);
           {
             let $0 = $38.derived(() => `${$$props.idPrefix}-ref`);
@@ -7792,7 +7892,7 @@ function Property_editor($$anchor, $$props) {
           $38.append($$anchor3, div_11);
         };
         var consequent_11 = ($$anchor3) => {
-          var div_12 = root_222();
+          var div_12 = root_103();
           var node_27 = $38.child(div_12);
           Button(node_27, {
             variant: "ghost",
@@ -7901,19 +8001,19 @@ function Property_editor($$anchor, $$props) {
 $38.delegate(["click"]);
 
 // src/components/json-schema-editor/form-view.svelte
-var root_217 = $39.from_html(`<p>The JSON view has uncommitted changes. Apply or discard them to edit in the form.</p> <div class="cinder-jse-dirty-actions"><!> <!></div>`, 1);
-var root22 = $39.from_html(`<div><!> <!></div>`);
+var root28 = $39.from_html(`<p>The JSON view has uncommitted changes. Apply or discard them to edit in the form.</p> <div class="cinder-jse-dirty-actions"><!> <!></div>`, 1);
+var root_119 = $39.from_html(`<div><!> <!></div>`);
 function Form_view($$anchor, $$props) {
   $39.push($$props, true);
   const rootSchema = $39.derived(() => $$props.state.committedSchema);
-  var div = root22();
+  var div = root_119();
   var node = $39.child(div);
   {
     var consequent = ($$anchor2) => {
       Alert($$anchor2, {
         variant: "warning",
         children: ($$anchor3, $$slotProps) => {
-          var fragment_1 = root_217();
+          var fragment_1 = root28();
           var div_1 = $39.sibling($39.first_child(fragment_1), 2);
           var node_1 = $39.child(div_1);
           Button(node_1, {
@@ -8872,7 +8972,7 @@ function legacyCopy(text12) {
 // src/components/_visually-hidden-live-region.svelte
 import"svelte/internal/disclose-version";
 import * as $44 from "svelte/internal/client";
-var root23 = $44.from_html(`<div aria-atomic="true"> </div>`);
+var root29 = $44.from_html(`<div aria-atomic="true"> </div>`);
 function _visually_hidden_live_region($$anchor, $$props) {
   $44.push($$props, true);
   let message = $44.prop($$props, "message", 3, ""), announcementSequence = $44.prop($$props, "announcementSequence", 3, 0), priority = $44.prop($$props, "priority", 3, "polite");
@@ -8907,7 +9007,7 @@ function _visually_hidden_live_region($$anchor, $$props) {
       setTimeoutId = null;
     }, 0);
   });
-  var div = root23();
+  var div = root29();
   var text12 = $44.child(div, true);
   $44.reset(div);
   $44.template_effect(($0) => {
@@ -8921,22 +9021,23 @@ function _visually_hidden_live_region($$anchor, $$props) {
 }
 
 // src/components/copy-button/copy-button.svelte
-var root24 = $45.from_html(`<button><!></button> <!>`, 1);
+var rest_excludes17 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "confirmDuration",
+  "label",
+  "copiedLabel",
+  "iconOnly",
+  "class",
+  "children",
+  "confirmation"
+]);
+var root30 = $45.from_html(`<button><!></button> <!>`, 1);
 function Copy_button($$anchor, $$props) {
   $45.push($$props, true);
-  let confirmDuration = $45.prop($$props, "confirmDuration", 3, 1500), iconOnly = $45.prop($$props, "iconOnly", 3, false), rest = $45.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "confirmDuration",
-    "label",
-    "copiedLabel",
-    "iconOnly",
-    "class",
-    "children",
-    "confirmation"
-  ]);
+  let confirmDuration = $45.prop($$props, "confirmDuration", 3, 1500), iconOnly = $45.prop($$props, "iconOnly", 3, false), rest = $45.rest_props($$props, rest_excludes17);
   let copied = $45.state(false);
   let resetTimer;
   const copiedAnnouncement = $45.derived(() => $45.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
@@ -8957,7 +9058,7 @@ function Copy_button($$anchor, $$props) {
         clearTimeout(resetTimer);
     };
   });
-  var fragment = root24();
+  var fragment = root30();
   var button = $45.first_child(fragment);
   $45.attribute_effect(button, ($0) => ({
     ...rest,
@@ -8976,7 +9077,7 @@ function Copy_button($$anchor, $$props) {
       $45.append($$anchor2, fragment_1);
     };
     var consequent_1 = ($$anchor2) => {
-      Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Check($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
       var text13 = $45.text("Copied");
@@ -8989,7 +9090,7 @@ function Copy_button($$anchor, $$props) {
       $45.append($$anchor2, fragment_3);
     };
     var consequent_4 = ($$anchor2) => {
-      Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Copy($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var alternate = ($$anchor2) => {
       var text_1 = $45.text("Copy");
@@ -9022,7 +9123,7 @@ function Copy_button($$anchor, $$props) {
 }
 
 // src/components/json-schema-editor/json-schema-toolbar.svelte
-var root25 = $46.from_html(`<div role="toolbar" tabindex="-1" aria-label="Schema editor actions"><div class="cinder-jse-toolbar__left"><!> <!></div> <div class="cinder-jse-toolbar__right"><!> <!> <!> <!></div></div>`);
+var root31 = $46.from_html(`<div role="toolbar" tabindex="-1" aria-label="Schema editor actions"><div class="cinder-jse-toolbar__left"><!> <!></div> <div class="cinder-jse-toolbar__right"><!> <!> <!> <!></div></div>`);
 function Json_schema_toolbar($$anchor, $$props) {
   $46.push($$props, true);
   let localValidationErrorCount = $46.prop($$props, "localValidationErrorCount", 3, 0);
@@ -9115,7 +9216,7 @@ function Json_schema_toolbar($$anchor, $$props) {
       $46.set(rovingIndex, index3, true);
     }
   }
-  var div = root25();
+  var div = root31();
   var div_1 = $46.child(div);
   var node = $46.child(div_1);
   Badge(node, {
@@ -9265,32 +9366,33 @@ function resolveMaximumLength(value) {
 }
 
 // src/components/textarea/textarea.svelte
-var root_218 = $47.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_120 = $47.from_html(`<label class="cinder-textarea-label"> <!></label>`);
-var root_310 = $47.from_html(`<p class="cinder-textarea-description"> </p>`);
-var root_48 = $47.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
-var root_56 = $47.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
-var root26 = $47.from_html(`<div class="cinder-textarea-field"><!> <textarea></textarea> <!> <!> <!></div>`);
+var rest_excludes18 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "description",
+  "error",
+  "rows",
+  "disabled",
+  "required",
+  "class",
+  "maxlength",
+  "showCount",
+  "aria-describedby",
+  "aria-invalid"
+]);
+var root32 = $47.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_121 = $47.from_html(`<label class="cinder-textarea-label"> <!></label>`);
+var root_215 = $47.from_html(`<p class="cinder-textarea-description"> </p>`);
+var root_312 = $47.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
+var root_49 = $47.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
+var root_57 = $47.from_html(`<div class="cinder-textarea-field"><!> <textarea></textarea> <!> <!> <!></div>`);
 function Textarea($$anchor, $$props) {
   $47.push($$props, true);
-  let value = $47.prop($$props, "value", 15, ""), rows = $47.prop($$props, "rows", 3, 4), showCount = $47.prop($$props, "showCount", 3, false), rest = $47.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "description",
-    "error",
-    "rows",
-    "disabled",
-    "required",
-    "class",
-    "maxlength",
-    "showCount",
-    "aria-describedby",
-    "aria-invalid"
-  ]);
+  let value = $47.prop($$props, "value", 15, ""), rows = $47.prop($$props, "rows", 3, 4), showCount = $47.prop($$props, "showCount", 3, false), rest = $47.rest_props($$props, rest_excludes18);
   const context = getFormFieldContext();
   const maximumLength = $47.derived(() => resolveMaximumLength($$props.maxlength));
   const countId = $47.derived(() => showCount() && $47.get(maximumLength) !== undefined ? `${$$props.id}-count` : undefined);
@@ -9309,16 +9411,16 @@ function Textarea($$anchor, $$props) {
     required: $47.get(ownRequired),
     disabled: $$props.disabled
   }));
-  var div = root26();
+  var div = root_57();
   var node = $47.child(div);
   {
     var consequent_1 = ($$anchor2) => {
-      var label_1 = root_120();
+      var label_1 = root_121();
       var text14 = $47.child(label_1);
       var node_1 = $47.sibling(text14);
       {
         var consequent = ($$anchor3) => {
-          var span = root_218();
+          var span = root32();
           $47.append($$anchor3, span);
         };
         $47.if(node_1, ($$render) => {
@@ -9357,7 +9459,7 @@ function Textarea($$anchor, $$props) {
   var node_2 = $47.sibling(textarea, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p = root_310();
+      var p = root_215();
       var text_1 = $47.child(p, true);
       $47.reset(p);
       $47.template_effect(() => {
@@ -9374,7 +9476,7 @@ function Textarea($$anchor, $$props) {
   var node_3 = $47.sibling(node_2, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var output = root_48();
+      var output = root_312();
       var text_2 = $47.child(output);
       $47.reset(output);
       $47.template_effect(() => {
@@ -9392,7 +9494,7 @@ function Textarea($$anchor, $$props) {
   var node_4 = $47.sibling(node_3, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var p_1 = root_56();
+      var p_1 = root_49();
       var text_3 = $47.child(p_1, true);
       $47.reset(p_1);
       $47.template_effect(() => {
@@ -9413,8 +9515,8 @@ function Textarea($$anchor, $$props) {
 }
 
 // src/components/json-schema-editor/json-view.svelte
-var root_65 = $48.from_html(`<pre class="cinder-jse-json-view__errors"> </pre>`);
-var root27 = $48.from_html(`<div><div class="cinder-jse-json-view__toolbar"><!> <!> <!></div> <!> <!></div>`);
+var root33 = $48.from_html(`<pre class="cinder-jse-json-view__errors"> </pre>`);
+var root_123 = $48.from_html(`<div><div class="cinder-jse-json-view__toolbar"><!> <!> <!></div> <!> <!></div>`);
 function Json_view($$anchor, $$props) {
   $48.push($$props, true);
   const draftParse = $48.derived(() => tryParseJson($$props.state.jsonDraftText));
@@ -9434,7 +9536,7 @@ function Json_view($$anchor, $$props) {
   });
   const canApply = $48.derived(() => !$$props.state.readonly && $$props.state.jsonDraftIsDirty && $48.get(draftParse).ok && $48.get(draftMeta)?.valid === true);
   const canDiscard = $48.derived(() => $$props.state.jsonDraftIsDirty && !$$props.state.readonly);
-  var div = root27();
+  var div = root_123();
   var div_1 = $48.child(div);
   var node = $48.child(div_1);
   {
@@ -9516,7 +9618,7 @@ function Json_view($$anchor, $$props) {
       Alert($$anchor2, {
         variant: "danger",
         children: ($$anchor3, $$slotProps) => {
-          var pre = root_65();
+          var pre = root33();
           var text_3 = $48.child(pre, true);
           $48.reset(pre);
           $48.template_effect(() => $48.set_text(text_3, $48.get(draftErrorMessage)));
@@ -9550,11 +9652,11 @@ function detectMacPlatform() {
   return /Mac/.test(navigator.platform);
 }
 var isMacPlatform = detectMacPlatform();
-var root_94 = $49.from_html(`<span class="cinder-sr-only">, has changes</span>`);
-var root_84 = $49.from_html(`Diff<!>`, 1);
-var root_219 = $49.from_html(`<!> <!> <!>`, 1);
-var root_121 = $49.from_html(`<!> <!> <!> <!>`, 1);
-var root28 = $49.from_html(`<div data-cinder-jse="" role="region" aria-label="JSON Schema editor"><!> <!></div>`);
+var root34 = $49.from_html(`<span class="cinder-sr-only">, has changes</span>`);
+var root_125 = $49.from_html(`Diff<!>`, 1);
+var root_216 = $49.from_html(`<!> <!> <!>`, 1);
+var root_313 = $49.from_html(`<!> <!> <!> <!>`, 1);
+var root_410 = $49.from_html(`<div data-cinder-jse="" role="region" aria-label="JSON Schema editor"><!> <!></div>`);
 function Json_schema_editor_impl($$anchor, $$props) {
   $49.push($$props, true);
   let view = $49.prop($$props, "view", 15, "form"), readonly = $49.prop($$props, "readonly", 3, false);
@@ -9640,7 +9742,7 @@ function Json_schema_editor_impl($$anchor, $$props) {
       handleRedo();
     }
   }
-  var div = root28();
+  var div = root_410();
   var node = $49.child(div);
   Json_schema_toolbar(node, {
     get state() {
@@ -9662,12 +9764,12 @@ function Json_schema_editor_impl($$anchor, $$props) {
       view($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_121();
+      var fragment = root_313();
       var node_2 = $49.first_child(fragment);
       Tab_list(node_2, {
         label: "Editor view",
         children: ($$anchor3, $$slotProps2) => {
-          var fragment_1 = root_219();
+          var fragment_1 = root_216();
           var node_3 = $49.first_child(fragment_1);
           Tab(node_3, {
             value: "form",
@@ -9718,11 +9820,11 @@ function Json_schema_editor_impl($$anchor, $$props) {
               trailing,
               children: ($$anchor4, $$slotProps3) => {
                 $49.next();
-                var fragment_4 = root_84();
+                var fragment_4 = root_125();
                 var node_7 = $49.sibling($49.first_child(fragment_4));
                 {
                   var consequent_1 = ($$anchor5) => {
-                    var span = root_94();
+                    var span = root34();
                     $49.append($$anchor5, span);
                   };
                   $49.if(node_7, ($$render) => {
@@ -9804,9 +9906,10 @@ function Json_schema_editor_impl($$anchor, $$props) {
 $49.delegate(["keydown"]);
 
 // src/components/json-schema-editor/json-schema-editor.svelte
+var rest_excludes19 = new Set(["$$slots", "$$events", "$$legacy", "view", "class"]);
 function Json_schema_editor($$anchor, $$props) {
   $50.push($$props, true);
-  let view = $50.prop($$props, "view", 15, "form"), rest = $50.rest_props($$props, ["$$slots", "$$events", "$$legacy", "view", "class"]);
+  let view = $50.prop($$props, "view", 15, "form"), rest = $50.rest_props($$props, rest_excludes19);
   const mergedClassName = $50.derived(() => classNames($$props.class));
   Json_schema_editor_impl($$anchor, $50.spread_props({
     get class() {
@@ -9830,4 +9933,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=D0D5CD7713B3768364756E2164756E21
+//# debugId=39E74F814CF9901264756E2164756E21