@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -211,7 +211,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state10, options) {
+async function detectOverflow(state11, options) {
   var _await$platform$isEle;
   if (options === undefined) {
     options = {};
@@ -223,14 +223,14 @@ async function detectOverflow(state10, options) {
     rects,
     elements,
     strategy
-  } = state10;
+  } = state11;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state10);
+  } = evaluate(options, state11);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element3 = elements[altBoundary ? altContext : elementContext];
@@ -314,19 +314,19 @@ function getRectsByLine(rects) {
   }
   return groups.map((rect) => rectToClientRect(getBoundingRect(rect)));
 }
-async function convertValueToCoords(state10, options) {
+async function convertValueToCoords(state11, options) {
   const {
     placement,
     platform,
     elements
-  } = state10;
+  } = state11;
   const rtl = await (platform.isRTL == null ? undefined : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state10);
+  const rawValue = evaluate(options, state11);
   let {
     mainAxis,
     crossAxis,
@@ -440,7 +440,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
 }, arrow = (options) => ({
   name: "arrow",
   options,
-  async fn(state10) {
+  async fn(state11) {
     const {
       x,
       y,
@@ -449,11 +449,11 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       platform,
       elements,
       middlewareData
-    } = state10;
+    } = state11;
     const {
       element: element3,
       padding = 0
-    } = evaluate(options, state10) || {};
+    } = evaluate(options, state11) || {};
     if (element3 == null) {
       return {};
     }
@@ -505,7 +505,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "autoPlacement",
     options,
-    async fn(state10) {
+    async fn(state11) {
       var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
       const {
         rects,
@@ -513,16 +513,16 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         placement,
         platform,
         elements
-      } = state10;
+      } = state11;
       const {
         crossAxis = false,
         alignment,
         allowedPlacements = placements,
         autoAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await platform.detectOverflow(state10, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state11, detectOverflowOptions);
       const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? undefined : _middlewareData$autoP.index) || 0;
       const currentPlacement = placements$1[currentIndex];
       if (currentPlacement == null) {
@@ -580,7 +580,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "flip",
     options,
-    async fn(state10) {
+    async fn(state11) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -589,7 +589,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         initialPlacement,
         platform,
         elements
-      } = state10;
+      } = state11;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -598,7 +598,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -612,7 +612,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform.detectOverflow(state10, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state11, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? undefined : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -684,18 +684,18 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "hide",
     options,
-    async fn(state10) {
+    async fn(state11) {
       const {
         rects,
         platform
-      } = state10;
+      } = state11;
       const {
         strategy = "referenceHidden",
         ...detectOverflowOptions
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       switch (strategy) {
         case "referenceHidden": {
-          const overflow = await platform.detectOverflow(state10, {
+          const overflow = await platform.detectOverflow(state11, {
             ...detectOverflowOptions,
             elementContext: "reference"
           });
@@ -708,7 +708,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
           };
         }
         case "escaped": {
-          const overflow = await platform.detectOverflow(state10, {
+          const overflow = await platform.detectOverflow(state11, {
             ...detectOverflowOptions,
             altBoundary: true
           });
@@ -733,19 +733,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "inline",
     options,
-    async fn(state10) {
+    async fn(state11) {
       const {
         placement,
         elements,
         rects,
         platform,
         strategy
-      } = state10;
+      } = state11;
       const {
         padding = 2,
         x,
         y
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       const nativeClientRects = Array.from(await (platform.getClientRects == null ? undefined : platform.getClientRects(elements.reference)) || []);
       const clientRects = getRectsByLine(nativeClientRects);
       const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
@@ -823,15 +823,15 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "offset",
     options,
-    async fn(state10) {
+    async fn(state11) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state10;
-      const diffCoords = await convertValueToCoords(state10, options);
+      } = state11;
+      const diffCoords = await convertValueToCoords(state11, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? undefined : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -852,13 +852,13 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "shift",
     options,
-    async fn(state10) {
+    async fn(state11) {
       const {
         x,
         y,
         placement,
         platform
-      } = state10;
+      } = state11;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -875,12 +875,12 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       const coords = {
         x,
         y
       };
-      const overflow = await platform.detectOverflow(state10, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state11, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -900,7 +900,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state10,
+        ...state11,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -923,19 +923,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   }
   return {
     options,
-    fn(state10) {
+    fn(state11) {
       const {
         x,
         y,
         placement,
         rects,
         middlewareData
-      } = state10;
+      } = state11;
       const {
         offset: offset2 = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
-      } = evaluate(options, state10);
+      } = evaluate(options, state11);
       const coords = {
         x,
         y
@@ -944,7 +944,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset2, state10);
+      const rawOffset = evaluate(offset2, state11);
       const computedOffset = typeof rawOffset === "number" ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -988,19 +988,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "size",
     options,
-    async fn(state10) {
+    async fn(state11) {
       var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
         platform,
         elements
-      } = state10;
+      } = state11;
       const {
         apply = () => {},
         ...detectOverflowOptions
-      } = evaluate(options, state10);
-      const overflow = await platform.detectOverflow(state10, detectOverflowOptions);
+      } = evaluate(options, state11);
+      const overflow = await platform.detectOverflow(state11, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
       const isYAxis = getSideAxis(placement) === "y";
@@ -1021,13 +1021,13 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       const maximumClippingWidth = width - overflow.left - overflow.right;
       const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
       const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
-      const noShift = !state10.middlewareData.shift;
+      const noShift = !state11.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if ((_state$middlewareData = state10.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+      if ((_state$middlewareData = state11.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
         availableWidth = maximumClippingWidth;
       }
-      if ((_state$middlewareData2 = state10.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+      if ((_state$middlewareData2 = state11.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
         availableHeight = maximumClippingHeight;
       }
       if (noShift && !alignment) {
@@ -1042,7 +1042,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         }
       }
       await apply({
-        ...state10,
+        ...state11,
         availableWidth,
         availableHeight
       });
@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2116,9 +2117,46 @@ 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>`);
 function Badge($$anchor, $$props) {
   $4.push($$props, true);
+  const subscriptionStateConfigurations = {
+    active: { variant: "success", label: "Active" },
+    trialing: { variant: "info", label: "Trialing" },
+    "past-due": { variant: "warning", label: "Past due" },
+    canceled: { variant: "neutral", label: "Canceled" },
+    expired: { variant: "danger", label: "Expired" },
+    refunded: { variant: "neutral", label: "Refunded" }
+  };
+  const subscriptionStateIconPaths = {
+    active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+    trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+    "past-due": [
+      "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+      "M12 9v4",
+      "M12 17h.01"
+    ],
+    canceled: [
+      "M15 9 9 15",
+      "M9 9l6 6",
+      "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+    ],
+    expired: [
+      "M8 2v4",
+      "M16 2v4",
+      "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+      "M3 10h18",
+      "m17 14-5-5",
+      "m12 14 5 5"
+    ],
+    refunded: [
+      "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+      "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",
@@ -2126,19 +2164,78 @@ function Badge($$anchor, $$props) {
     "variant",
     "size",
     "mono",
+    "subscriptionState",
     "class",
     "children"
   ]);
+  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();
   $4.attribute_effect(span, ($0) => ({
     class: $0,
-    "data-cinder-variant": variant(),
+    "data-cinder-variant": $4.get(resolvedVariant),
     "data-cinder-size": size(),
     "data-cinder-mono": mono() ? "" : undefined,
+    "data-cinder-subscription-state": $$props.subscriptionState,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $4.child(span);
-  $4.snippet(node, () => $$props.children ?? $4.noop);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = root_1();
+      var node_1 = $4.first_child(fragment);
+      {
+        var consequent = ($$anchor3) => {
+          var svg = root_2();
+          $4.each(svg, 20, () => $4.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
+            var path = root_3();
+            $4.template_effect(() => $4.set_attribute(path, "d", iconPath));
+            $4.append($$anchor4, path);
+          });
+          $4.reset(svg);
+          $4.append($$anchor3, svg);
+        };
+        $4.if(node_1, ($$render) => {
+          if ($4.get(resolvedSubscriptionIconPaths))
+            $$render(consequent);
+        });
+      }
+      var node_2 = $4.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = $4.comment();
+          var node_3 = $4.first_child(fragment_1);
+          $4.snippet(node_3, () => $$props.children);
+          $4.append($$anchor3, fragment_1);
+        };
+        var alternate = ($$anchor3) => {
+          var text2 = $4.text();
+          $4.template_effect(() => $4.set_text(text2, $4.get(subscriptionStateConfiguration).label));
+          $4.append($$anchor3, text2);
+        };
+        $4.if(node_2, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $4.append($$anchor2, fragment);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var fragment_3 = $4.comment();
+      var node_4 = $4.first_child(fragment_3);
+      $4.snippet(node_4, () => $$props.children ?? $4.noop);
+      $4.append($$anchor2, fragment_3);
+    };
+    $4.if(node, ($$render) => {
+      if ($4.get(subscriptionStateConfiguration))
+        $$render(consequent_2);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
   $4.reset(span);
   $4.append($$anchor, span);
   $4.pop();
@@ -2192,7 +2289,7 @@ var [getTabsContextStrict, setTabsContext] = createContext();
 var getTabsContext = getTabsContextStrict;
 
 // src/components/tab/tab.svelte
-var root_1 = $5.from_html(`<span class="cinder-tab__trailing" aria-hidden="true"><!></span>`);
+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>`);
 function Tab($$anchor, $$props) {
   $5.push($$props, true);
@@ -2235,7 +2332,7 @@ function Tab($$anchor, $$props) {
   var node_1 = $5.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var span = root_1();
+      var span = root_12();
       var node_2 = $5.child(span);
       $5.snippet(node_2, () => $$props.trailing);
       $5.reset(span);
@@ -2297,7 +2394,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_12 = $7.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
+var root_13 = $7.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
 function Tab_panel($$anchor, $$props) {
   $7.push($$props, true);
   const tabs = getTabsContext();
@@ -2308,7 +2405,7 @@ function Tab_panel($$anchor, $$props) {
   var node = $7.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_12();
+      var div = root_13();
       var node_1 = $7.child(div);
       $7.snippet(node_1, () => $$props.children);
       $7.reset(div);
@@ -2403,6 +2500,13 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
   return findFirstIndex(length, isDisabled, 0);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/tabs/tabs.svelte
 var root5 = $8.from_html(`<div><!></div>`);
 function Tabs($$anchor, $$props) {
@@ -2475,7 +2579,9 @@ function Tabs($$anchor, $$props) {
       if (focusedValue === undefined)
         return;
       event.preventDefault();
-      value(focusedValue);
+      commitValue(focusedValue, $$props.onValueChange, (next) => {
+        value(next);
+      });
       return;
     }
     const isHorizontal = orientation() === "horizontal";
@@ -2503,7 +2609,9 @@ function Tabs($$anchor, $$props) {
       return;
     focusValue(nextValue);
     if ($8.get(effectiveActivateOnFocus)) {
-      value(nextValue);
+      commitValue(nextValue, $$props.onValueChange, (next) => {
+        value(next);
+      });
     }
   }
   setTabsContext({
@@ -2520,7 +2628,9 @@ function Tabs($$anchor, $$props) {
       return baseId;
     },
     select(next) {
-      value(next);
+      commitValue(next, $$props.onValueChange, (nextValue) => {
+        value(nextValue);
+      });
     },
     isActive(candidate) {
       return value() === candidate;
@@ -2583,9 +2693,9 @@ 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_2 = $9.from_html(`<div class="cinder-alert__icon" aria-hidden="true"><!></div>`);
-var root_3 = $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_13 = $9.from_html(`<div><!> <div class="cinder-alert__content"><!></div> <!></div>`);
+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>`);
 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"])';
@@ -2595,12 +2705,12 @@ function Alert($$anchor, $$props) {
     "$$legacy",
     "variant",
     "dismissible",
-    "onDismiss",
+    "ondismiss",
     "class",
     "children",
     "icon"
   ]);
-  const resolvedVariant = $9.derived(() => variant() === "danger" ? "error" : variant());
+  const resolvedVariant = $9.derived(variant);
   let visible = $9.state(true);
   let rootElement = $9.state(undefined);
   async function handleDismiss() {
@@ -2611,7 +2721,7 @@ function Alert($$anchor, $$props) {
     await tick();
     if (focusTarget?.isConnected)
       focusTarget.focus();
-    $$props.onDismiss?.();
+    $$props.ondismiss?.();
   }
   function resolveFocusTarget(alertElement) {
     const alertDocument = alertElement.ownerDocument;
@@ -2648,7 +2758,7 @@ function Alert($$anchor, $$props) {
   var node = $9.first_child(fragment);
   {
     var consequent_2 = ($$anchor2) => {
-      var div = root_13();
+      var div = root_14();
       $9.attribute_effect(div, ($0) => ({
         ...$9.get(restWithoutForbidden),
         class: $0,
@@ -2660,7 +2770,7 @@ function Alert($$anchor, $$props) {
       var node_1 = $9.child(div);
       {
         var consequent = ($$anchor3) => {
-          var div_1 = root_2();
+          var div_1 = root_22();
           var node_2 = $9.child(div_1);
           $9.snippet(node_2, () => $$props.icon);
           $9.reset(div_1);
@@ -2678,7 +2788,7 @@ function Alert($$anchor, $$props) {
       var node_4 = $9.sibling(div_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var button = root_3();
+          var button = root_32();
           $9.delegated("click", button, handleDismiss);
           $9.append($$anchor3, button);
         };
@@ -2704,22 +2814,22 @@ $9.delegate(["click"]);
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
 import * as $10 from "svelte/internal/client";
-var root_22 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+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_32 = $10.from_html(`<!> <!>`, 1);
+var root_33 = $10.from_html(`<!> <!>`, 1);
 var root_8 = $10.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_14 = $10.from_html(`<!> <!> <!>`, 1);
+var root_15 = $10.from_html(`<!> <!> <!>`, 1);
 var root_9 = $10.from_html(`<a><!></a>`);
 var root_10 = $10.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $10.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_14();
+    var fragment = root_15();
     var node = $10.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        var span = root_22();
+        var span = root_23();
         var node_1 = $10.child(span);
         $10.snippet(node_1, () => $$props.leadingIcon);
         $10.reset(span);
@@ -2733,14 +2843,14 @@ function Button($$anchor, $$props) {
     var node_2 = $10.sibling(node, 2);
     {
       var consequent_3 = ($$anchor3) => {
-        var fragment_1 = root_32();
+        var fragment_1 = root_33();
         var node_3 = $10.first_child(fragment_1);
         {
           var consequent_1 = ($$anchor4) => {
             var span_1 = root_4();
-            var text2 = $10.child(span_1, true);
+            var text3 = $10.child(span_1, true);
             $10.reset(span_1);
-            $10.template_effect(() => $10.set_text(text2, $$props.label));
+            $10.template_effect(() => $10.set_text(text3, $$props.label));
             $10.append($$anchor4, span_1);
           };
           $10.if(node_3, ($$render) => {
@@ -3402,7 +3512,7 @@ function Front_matter_header($$anchor, $$props) {
   var node_1 = $18.sibling(span, 2);
   File_text(node_1, { class: "icon-sm" });
   var span_1 = $18.sibling(node_1, 2);
-  var text3 = $18.child(span_1, true);
+  var text4 = $18.child(span_1, true);
   $18.reset(span_1);
   var node_2 = $18.sibling(span_1, 2);
   {
@@ -3429,7 +3539,7 @@ function Front_matter_header($$anchor, $$props) {
     });
   }
   $18.reset(button);
-  $18.template_effect(() => $18.set_text(text3, label()));
+  $18.template_effect(() => $18.set_text(text4, label()));
   $18.append($$anchor, button);
   $18.pop();
 }
@@ -3437,7 +3547,7 @@ 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_23 = $19.from_html(`<div><span class="diff-gutter svelte-hc3elb"></span> <span class="diff-text svelte-hc3elb"> </span></div>`);
+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>`);
@@ -3469,6 +3579,11 @@ function Diff_line($$anchor, $$props) {
     return true;
   });
   const isInteractive = $19.derived(() => $$props.diff.type !== "same" && $$props.onselect !== undefined);
+  const accessibleLineLabel = $19.derived(() => {
+    const text5 = $$props.diff.type === "modified" ? $$props.viewMode === "original" ? $$props.diff.oldText : $$props.viewMode === "final" ? $$props.diff.newText : `${$$props.diff.oldText} changed to ${$$props.diff.newText}` : $$props.diff.text;
+    const typeLabel = $$props.diff.type === "added" ? "Added line" : $$props.diff.type === "removed" ? "Removed line" : "Modified line";
+    return `${typeLabel}: ${text5 || "blank line"}`;
+  });
   var fragment = $19.comment();
   var node = $19.first_child(fragment);
   {
@@ -3477,14 +3592,14 @@ function Diff_line($$anchor, $$props) {
       var node_1 = $19.first_child(fragment_1);
       {
         var consequent = ($$anchor3) => {
-          var div = root_23();
+          var div = root_24();
           var span = $19.sibling($19.child(div), 2);
-          var text4 = $19.child(span, true);
+          var text_1 = $19.child(span, true);
           $19.reset(span);
           $19.reset(div);
           $19.template_effect(($0) => {
             $19.set_class(div, 1, $0, "svelte-hc3elb");
-            $19.set_text(text4, $$props.diff.text || " ");
+            $19.set_text(text_1, $$props.diff.text || " ");
           }, [() => $19.clsx(classNames("diff-line", $$props.class))]);
           $19.append($$anchor3, div);
         };
@@ -3495,13 +3610,14 @@ function Diff_line($$anchor, $$props) {
             var consequent_1 = ($$anchor4) => {
               var button = root_42();
               var span_1 = $19.sibling($19.child(button), 2);
-              var text_1 = $19.child(span_1, true);
+              var text_2 = $19.child(span_1, true);
               $19.reset(span_1);
               $19.reset(button);
               $19.template_effect(($0) => {
                 $19.set_class(button, 1, $0, "svelte-hc3elb");
                 $19.set_attribute(button, "data-selected", selected());
-                $19.set_text(text_1, $$props.diff.text || " ");
+                $19.set_attribute(button, "aria-label", $19.get(accessibleLineLabel));
+                $19.set_text(text_2, $$props.diff.text || " ");
               }, [
                 () => $19.clsx(classNames("diff-line diff-line-added", $$props.class))
               ]);
@@ -3513,13 +3629,13 @@ function Diff_line($$anchor, $$props) {
             var alternate = ($$anchor4) => {
               var div_1 = root_52();
               var span_2 = $19.sibling($19.child(div_1), 2);
-              var text_2 = $19.child(span_2, true);
+              var text_3 = $19.child(span_2, true);
               $19.reset(span_2);
               $19.reset(div_1);
               $19.template_effect(($0) => {
                 $19.set_class(div_1, 1, $0, "svelte-hc3elb");
                 $19.set_attribute(div_1, "data-selected", selected());
-                $19.set_text(text_2, $$props.diff.text || " ");
+                $19.set_text(text_3, $$props.diff.text || " ");
               }, [
                 () => $19.clsx(classNames("diff-line diff-line-added", $$props.class))
               ]);
@@ -3542,22 +3658,22 @@ function Diff_line($$anchor, $$props) {
             var consequent_4 = ($$anchor4) => {
               var button_1 = root_7();
               var span_3 = $19.child(button_1);
-              var text_3 = $19.child(span_3, true);
+              var text_4 = $19.child(span_3, true);
               $19.reset(span_3);
               var span_4 = $19.sibling(span_3, 2);
               var node_4 = $19.child(span_4);
               {
                 var consequent_3 = ($$anchor5) => {
                   var del = root_82();
-                  var text_4 = $19.child(del, true);
+                  var text_5 = $19.child(del, true);
                   $19.reset(del);
-                  $19.template_effect(() => $19.set_text(text_4, $$props.diff.text || " "));
+                  $19.template_effect(() => $19.set_text(text_5, $$props.diff.text || " "));
                   $19.append($$anchor5, del);
                 };
                 var alternate_1 = ($$anchor5) => {
-                  var text_5 = $19.text();
-                  $19.template_effect(() => $19.set_text(text_5, $$props.diff.text || " "));
-                  $19.append($$anchor5, text_5);
+                  var text_6 = $19.text();
+                  $19.template_effect(() => $19.set_text(text_6, $$props.diff.text || " "));
+                  $19.append($$anchor5, text_6);
                 };
                 $19.if(node_4, ($$render) => {
                   if ($19.get(showStrikethrough))
@@ -3571,7 +3687,8 @@ function Diff_line($$anchor, $$props) {
               $19.template_effect(($0) => {
                 $19.set_class(button_1, 1, $0, "svelte-hc3elb");
                 $19.set_attribute(button_1, "data-selected", selected());
-                $19.set_text(text_3, $19.get(showStrikethrough) ? "-" : "");
+                $19.set_attribute(button_1, "aria-label", $19.get(accessibleLineLabel));
+                $19.set_text(text_4, $19.get(showStrikethrough) ? "-" : "");
               }, [
                 () => $19.clsx(classNames("diff-line", $19.get(showStrikethrough) ? "diff-line-removed" : "diff-line-removed-original", $$props.class))
               ]);
@@ -3583,22 +3700,22 @@ function Diff_line($$anchor, $$props) {
             var alternate_3 = ($$anchor4) => {
               var div_2 = root_102();
               var span_5 = $19.child(div_2);
-              var text_6 = $19.child(span_5, true);
+              var text_7 = $19.child(span_5, true);
               $19.reset(span_5);
               var span_6 = $19.sibling(span_5, 2);
               var node_5 = $19.child(span_6);
               {
                 var consequent_5 = ($$anchor5) => {
                   var del_1 = root_11();
-                  var text_7 = $19.child(del_1, true);
+                  var text_8 = $19.child(del_1, true);
                   $19.reset(del_1);
-                  $19.template_effect(() => $19.set_text(text_7, $$props.diff.text || " "));
+                  $19.template_effect(() => $19.set_text(text_8, $$props.diff.text || " "));
                   $19.append($$anchor5, del_1);
                 };
                 var alternate_2 = ($$anchor5) => {
-                  var text_8 = $19.text();
-                  $19.template_effect(() => $19.set_text(text_8, $$props.diff.text || " "));
-                  $19.append($$anchor5, text_8);
+                  var text_9 = $19.text();
+                  $19.template_effect(() => $19.set_text(text_9, $$props.diff.text || " "));
+                  $19.append($$anchor5, text_9);
                 };
                 $19.if(node_5, ($$render) => {
                   if ($19.get(showStrikethrough))
@@ -3612,7 +3729,7 @@ function Diff_line($$anchor, $$props) {
               $19.template_effect(($0) => {
                 $19.set_class(div_2, 1, $0, "svelte-hc3elb");
                 $19.set_attribute(div_2, "data-selected", selected());
-                $19.set_text(text_6, $19.get(showStrikethrough) ? "-" : "");
+                $19.set_text(text_7, $19.get(showStrikethrough) ? "-" : "");
               }, [
                 () => $19.clsx(classNames("diff-line", $19.get(showStrikethrough) ? "diff-line-removed" : "diff-line-removed-original", $$props.class))
               ]);
@@ -3656,23 +3773,23 @@ function Diff_line($$anchor, $$props) {
                         {
                           var consequent_8 = ($$anchor8) => {
                             var span_9 = root_19();
-                            var text_9 = $19.child(span_9, true);
+                            var text_10 = $19.child(span_9, true);
                             $19.reset(span_9);
-                            $19.template_effect(() => $19.set_text(text_9, $19.get(wordChange).text));
+                            $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 text_10 = $19.child(del_2, true);
+                            var text_11 = $19.child(del_2, true);
                             $19.reset(del_2);
-                            $19.template_effect(() => $19.set_text(text_10, $19.get(wordChange).text));
+                            $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 text_11 = $19.child(ins, true);
+                            var text_12 = $19.child(ins, true);
                             $19.reset(ins);
-                            $19.template_effect(() => $19.set_text(text_11, $19.get(wordChange).text));
+                            $19.template_effect(() => $19.set_text(text_12, $19.get(wordChange).text));
                             $19.append($$anchor8, ins);
                           };
                           $19.if(node_10, ($$render) => {
@@ -3699,9 +3816,9 @@ function Diff_line($$anchor, $$props) {
                   $19.append($$anchor5, fragment_7);
                 };
                 var alternate_5 = ($$anchor5) => {
-                  var text_12 = $19.text();
-                  $19.template_effect(() => $19.set_text(text_12, $19.get(displayText) || " "));
-                  $19.append($$anchor5, text_12);
+                  var text_13 = $19.text();
+                  $19.template_effect(() => $19.set_text(text_13, $19.get(displayText) || " "));
+                  $19.append($$anchor5, text_13);
                 };
                 $19.if(node_7, ($$render) => {
                   if ($$props.viewMode === "unified")
@@ -3715,6 +3832,7 @@ function Diff_line($$anchor, $$props) {
               $19.template_effect(($0) => {
                 $19.set_class(button_2, 1, $0, "svelte-hc3elb");
                 $19.set_attribute(button_2, "data-selected", selected());
+                $19.set_attribute(button_2, "aria-label", $19.get(accessibleLineLabel));
               }, [
                 () => $19.clsx(classNames("diff-line", $19.get(lineClass), $$props.class))
               ]);
@@ -3746,23 +3864,23 @@ function Diff_line($$anchor, $$props) {
                         {
                           var consequent_14 = ($$anchor8) => {
                             var span_12 = root_28();
-                            var text_13 = $19.child(span_12, true);
+                            var text_14 = $19.child(span_12, true);
                             $19.reset(span_12);
-                            $19.template_effect(() => $19.set_text(text_13, $19.get(wordChange).text));
+                            $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 text_14 = $19.child(del_3, true);
+                            var text_15 = $19.child(del_3, true);
                             $19.reset(del_3);
-                            $19.template_effect(() => $19.set_text(text_14, $19.get(wordChange).text));
+                            $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 text_15 = $19.child(ins_1, true);
+                            var text_16 = $19.child(ins_1, true);
                             $19.reset(ins_1);
-                            $19.template_effect(() => $19.set_text(text_15, $19.get(wordChange).text));
+                            $19.template_effect(() => $19.set_text(text_16, $19.get(wordChange).text));
                             $19.append($$anchor8, ins_1);
                           };
                           $19.if(node_14, ($$render) => {
@@ -3789,9 +3907,9 @@ function Diff_line($$anchor, $$props) {
                   $19.append($$anchor5, fragment_11);
                 };
                 var alternate_7 = ($$anchor5) => {
-                  var text_16 = $19.text();
-                  $19.template_effect(() => $19.set_text(text_16, $19.get(displayText) || " "));
-                  $19.append($$anchor5, text_16);
+                  var text_17 = $19.text();
+                  $19.template_effect(() => $19.set_text(text_17, $19.get(displayText) || " "));
+                  $19.append($$anchor5, text_17);
                 };
                 $19.if(node_11, ($$render) => {
                   if ($$props.viewMode === "unified")
@@ -3843,7 +3961,7 @@ function Diff_line($$anchor, $$props) {
 $19.delegate(["click"]);
 
 // src/components/diff-viewer/diff-front-matter.svelte
-var root_15 = $20.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
+var root_16 = $20.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
 var root9 = $20.from_html(`<div><!> <!></div>`);
 function Diff_front_matter($$anchor, $$props) {
   $20.push($$props, true);
@@ -3890,7 +4008,7 @@ function Diff_front_matter($$anchor, $$props) {
   var node_1 = $20.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_15();
+      var div_1 = root_16();
       $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() {
@@ -3948,9 +4066,9 @@ function Kbd($$anchor, $$props) {
       $21.append($$anchor2, fragment);
     };
     var alternate = ($$anchor2) => {
-      var text5 = $21.text();
-      $21.template_effect(() => $21.set_text(text5, $$props.label));
-      $21.append($$anchor2, text5);
+      var text6 = $21.text();
+      $21.template_effect(() => $21.set_text(text6, $$props.label));
+      $21.append($$anchor2, text6);
     };
     $21.if(node, ($$render) => {
       if ($$props.children)
@@ -4117,8 +4235,8 @@ class SegmentedControlController {
 }
 
 // src/components/segment/segment.svelte
-var root_16 = $23.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
-var root_24 = $23.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
+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>`);
 function Segment($$anchor, $$props) {
   $23.push($$props, true);
@@ -4177,7 +4295,7 @@ function Segment($$anchor, $$props) {
   var node_1 = $23.child(button);
   {
     var consequent = ($$anchor2) => {
-      var span = root_16();
+      var span = root_18();
       var node_2 = $23.child(span);
       $23.snippet(node_2, () => $$props.leading);
       $23.reset(span);
@@ -4193,7 +4311,7 @@ function Segment($$anchor, $$props) {
   var node_4 = $23.sibling(node_3, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_1 = root_24();
+      var span_1 = root_25();
       var node_5 = $23.child(span_1);
       $23.snippet(node_5, () => $$props.trailing);
       $23.reset(span_1);
@@ -4269,7 +4387,7 @@ function Segmented_control($$anchor, $$props) {
   const effectiveSize = $24.derived(() => $$props.density === "toolbar" ? "sm" : size());
   var div = root12();
   var span = $24.child(div);
-  var text5 = $24.child(span, true);
+  var text6 = $24.child(span, true);
   $24.reset(span);
   var div_1 = $24.sibling(span, 2);
   var event_handler = (event) => controller.handleKeydown(event);
@@ -4297,7 +4415,7 @@ function Segmented_control($$anchor, $$props) {
   $24.template_effect(($0) => {
     $24.set_attribute(span, "id", `${$$props.id}-label`);
     $24.set_class(span, 1, $0);
-    $24.set_text(text5, $$props.label);
+    $24.set_text(text6, $$props.label);
   }, [
     () => $24.clsx(classNames("cinder-segmented-control-label", hideLabel() && "cinder-sr-only"))
   ]);
@@ -4321,10 +4439,10 @@ function Spinner($$anchor, $$props) {
     "data-cinder-size": size()
   }), [() => classNames("cinder-spinner", $$props.class)]);
   var span_1 = $25.child(span);
-  var text5 = $25.child(span_1, true);
+  var text6 = $25.child(span_1, true);
   $25.reset(span_1);
   $25.reset(span);
-  $25.template_effect(() => $25.set_text(text5, label()));
+  $25.template_effect(() => $25.set_text(text6, label()));
   $25.append($$anchor, span);
   $25.pop();
 }
@@ -4381,7 +4499,7 @@ function Refresh_cw($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/diff-toolbar.svelte
-var root_18 = $28.from_html(`<!> <!> <!>`, 1);
+var root_110 = $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);
@@ -4428,14 +4546,14 @@ function Diff_toolbar($$anchor, $$props) {
       viewMode($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_18();
+      var fragment = root_110();
       var node_1 = $28.first_child(fragment);
       Segment(node_1, {
         value: "unified",
         children: ($$anchor3, $$slotProps2) => {
           $28.next();
-          var text6 = $28.text("Unified");
-          $28.append($$anchor3, text6);
+          var text7 = $28.text("Unified");
+          $28.append($$anchor3, text7);
         },
         $$slots: { default: true }
       });
@@ -4726,7 +4844,7 @@ var root_6 = $29.from_html(`<div class="diff-warning svelte-1fvc2en" role="statu
 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_110 = $29.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
+var root_111 = $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);
@@ -4888,7 +5006,7 @@ ${match[1] ?? ""}
         return $29.get($1);
       },
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_110();
+        var fragment_1 = root_111();
         var node = $29.first_child(fragment_1);
         {
           var consequent = ($$anchor3) => {
@@ -4963,8 +5081,8 @@ ${match[1] ?? ""}
         {
           var consequent_3 = ($$anchor3) => {
             var div = root_6();
-            var text6 = $29.child(div);
-            var node_5 = $29.sibling(text6);
+            var text7 = $29.child(div);
+            var node_5 = $29.sibling(text7);
             {
               var consequent_2 = ($$anchor4) => {
                 var span = root_72();
@@ -4979,7 +5097,7 @@ ${match[1] ?? ""}
               });
             }
             $29.reset(div);
-            $29.template_effect(() => $29.set_text(text6, `${$29.get(diffState).warning ?? ""} `));
+            $29.template_effect(() => $29.set_text(text7, `${$29.get(diffState).warning ?? ""} `));
             $29.append($$anchor3, div);
           };
           $29.if(node_4, ($$render) => {
@@ -5087,8 +5205,8 @@ ${match[1] ?? ""}
 // src/components/empty-state/empty-state.svelte
 import"svelte/internal/disclose-version";
 import * as $30 from "svelte/internal/client";
-var root_111 = $30.from_html(`<div class="cinder-empty-state-icon" aria-hidden="true"><!></div>`);
-var root_33 = $30.from_html(`<p class="cinder-empty-state-description"> </p>`);
+var root_114 = $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>`);
 function Empty_state($$anchor, $$props) {
@@ -5117,7 +5235,7 @@ function Empty_state($$anchor, $$props) {
   var node = $30.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_111();
+      var div_1 = root_114();
       var node_1 = $30.child(div_1);
       $30.snippet(node_1, () => $$props.icon);
       $30.reset(div_1);
@@ -5131,14 +5249,14 @@ function Empty_state($$anchor, $$props) {
   var node_2 = $30.sibling(node, 2);
   $30.element(node_2, () => $30.get(tag), false, ($$element, $$anchor2) => {
     $30.attribute_effect($$element, () => ({ id: titleId, class: "cinder-empty-state-title" }));
-    var text7 = $30.text();
-    $30.template_effect(() => $30.set_text(text7, $$props.title));
-    $30.append($$anchor2, text7);
+    var text8 = $30.text();
+    $30.template_effect(() => $30.set_text(text8, $$props.title));
+    $30.append($$anchor2, text8);
   });
   var node_3 = $30.sibling(node_2, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var p = root_33();
+      var p = root_34();
       var text_1 = $30.child(p, true);
       $30.reset(p);
       $30.template_effect(() => $30.set_text(text_1, $$props.description));
@@ -5169,7 +5287,7 @@ function Empty_state($$anchor, $$props) {
 }
 
 // src/components/json-schema-editor/diff-view.svelte
-var root_25 = $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_27 = $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>`);
 function Diff_view($$anchor, $$props) {
   $31.push($$props, true);
@@ -5180,7 +5298,7 @@ function Diff_view($$anchor, $$props) {
       Alert($$anchor2, {
         variant: "warning",
         children: ($$anchor3, $$slotProps) => {
-          var fragment_1 = root_25();
+          var fragment_1 = root_27();
           var div_1 = $31.sibling($31.first_child(fragment_1), 2);
           var node_1 = $31.child(div_1);
           Button(node_1, {
@@ -5189,8 +5307,8 @@ function Diff_view($$anchor, $$props) {
             onclick: () => $$props.state.applyJsonDraft(),
             children: ($$anchor4, $$slotProps2) => {
               $31.next();
-              var text8 = $31.text("Apply JSON");
-              $31.append($$anchor4, text8);
+              var text9 = $31.text("Apply JSON");
+              $31.append($$anchor4, text9);
             },
             $$slots: { default: true }
           });
@@ -5259,6 +5377,7 @@ import * as $39 from "svelte/internal/client";
 // src/components/json-schema-editor/property-editor.svelte
 import"svelte/internal/disclose-version";
 import * as $38 from "svelte/internal/client";
+import { onDestroy as onDestroy2 } from "svelte";
 
 // src/components/checkbox/checkbox.svelte
 import"svelte/internal/disclose-version";
@@ -5311,9 +5430,10 @@ function setFormFieldContext(context) {
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
 // src/components/checkbox/checkbox.svelte
-var root_114 = $32.from_html(`<label class="cinder-checkbox-field__label"> </label>`);
-var root_27 = $32.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
-var root_34 = $32.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root_210 = $32.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_116 = $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>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $32.props_id();
@@ -5324,6 +5444,7 @@ function Checkbox($$anchor, $$props) {
     "$$legacy",
     "id",
     "checked",
+    "onValueChange",
     "indeterminate",
     "label",
     "description",
@@ -5332,7 +5453,8 @@ function Checkbox($$anchor, $$props) {
     "required",
     "class",
     "aria-describedby",
-    "aria-invalid"
+    "aria-invalid",
+    "onchange"
   ]);
   const context = getFormFieldContext();
   const field = $32.derived(() => resolveFieldControl({
@@ -5358,6 +5480,40 @@ function Checkbox($$anchor, $$props) {
       $32.get(inputElement).indeterminate = indeterminate() && !checked();
     }
   });
+  let resetSyncTimeout;
+  function syncCheckedAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (!$32.get(inputElement))
+        return;
+      checked($32.get(inputElement).checked);
+      $32.get(inputElement).indeterminate = indeterminate() && !$32.get(inputElement).checked;
+    }, 0);
+  }
+  $32.user_effect(() => {
+    const form = $32.get(inputElement)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncCheckedAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncCheckedAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleChange(event2) {
+    const target = event2.currentTarget;
+    const committed = commitValue(target.checked, $$props.onValueChange, (next6) => {
+      checked(next6);
+    });
+    target.checked = committed;
+    target.indeterminate = indeterminate() && !committed;
+    $$props.onchange?.(event2);
+  }
   var div = root17();
   var div_1 = $32.child(div);
   var span = $32.child(div_1);
@@ -5365,39 +5521,52 @@ function Checkbox($$anchor, $$props) {
   $32.attribute_effect(input, ($0) => ({
     id: $32.get(field).id,
     type: "checkbox",
+    ...rest,
     disabled: $32.get(field).disabled,
     required: $32.get(field).required,
+    checked: checked(),
+    onchange: handleChange,
     class: $0,
     "aria-invalid": $32.get(field).ariaInvalid,
-    "aria-describedby": $32.get(field).describedBy,
-    ...rest
+    "aria-describedby": $32.get(field).describedBy
   }), [() => classNames("cinder-checkbox", $$props.class)], undefined, undefined, undefined, true);
   $32.bind_this(input, ($$value) => $32.set(inputElement, $$value), () => $32.get(inputElement));
   $32.next(2);
   $32.reset(span);
   var node = $32.sibling(span, 2);
   {
-    var consequent = ($$anchor2) => {
-      var label_1 = root_114();
-      var text8 = $32.child(label_1, true);
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_116();
+      var text9 = $32.child(label_1);
+      var node_1 = $32.sibling(text9);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_210();
+          $32.append($$anchor3, span_1);
+        };
+        $32.if(node_1, ($$render) => {
+          if ($32.get(field).required)
+            $$render(consequent);
+        });
+      }
       $32.reset(label_1);
       $32.template_effect(() => {
         $32.set_attribute(label_1, "for", $32.get(field).id);
         $32.set_attribute(label_1, "data-disabled", $32.get(field).disabled || undefined);
-        $32.set_text(text8, $$props.label);
+        $32.set_text(text9, `${$$props.label ?? ""} `);
       });
       $32.append($$anchor2, label_1);
     };
     $32.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   $32.reset(div_1);
-  var node_1 = $32.sibling(div_1, 2);
+  var node_2 = $32.sibling(div_1, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_27();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_35();
       var text_1 = $32.child(p, true);
       $32.reset(p);
       $32.template_effect(() => {
@@ -5406,15 +5575,15 @@ function Checkbox($$anchor, $$props) {
       });
       $32.append($$anchor2, p);
     };
-    $32.if(node_1, ($$render) => {
+    $32.if(node_2, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_2 = $32.sibling(node_1, 2);
+  var node_3 = $32.sibling(node_2, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p_1 = root_34();
+    var consequent_3 = ($$anchor2) => {
+      var p_1 = root_44();
       var text_2 = $32.child(p_1, true);
       $32.reset(p_1);
       $32.template_effect(() => {
@@ -5423,13 +5592,12 @@ function Checkbox($$anchor, $$props) {
       });
       $32.append($$anchor2, p_1);
     };
-    $32.if(node_2, ($$render) => {
+    $32.if(node_3, ($$render) => {
       if ($$props.error)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
   $32.reset(div);
-  $32.bind_checked(input, checked);
   $32.append($$anchor, div);
   $32.pop();
 }
@@ -5438,35 +5606,38 @@ function Checkbox($$anchor, $$props) {
 import"svelte/internal/disclose-version";
 import * as $33 from "svelte/internal/client";
 var calendarIcon = ($$anchor) => {
-  var svg = root_116();
+  var svg = root_117();
   $33.append($$anchor, svg);
 };
-var root_116 = $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_210 = $33.from_html(`<input/>`);
-var root_35 = $33.from_html(`<label class="cinder-input-field__label"> </label>`);
-var root_53 = $33.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_62 = $33.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_73 = $33.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_44 = $33.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_93 = $33.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_104 = $33.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_117 = $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_213 = $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 class="cinder-input-field__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>`);
 function Input($$anchor, $$props) {
   $33.push($$props, true);
   const inputElement = ($$anchor2) => {
-    var input = root_210();
+    var input = root_213();
     $33.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
+      ...rest,
       disabled: $33.get(resolvedDisabled),
       required: $33.get(resolvedRequired),
+      value: value(),
+      oninput: handleInput,
       class: $0,
       "data-cinder-native-date": $33.get(rendersNativeDateIcon) ? "" : undefined,
       "aria-invalid": $33.get(resolvedAriaInvalid),
-      "aria-describedby": $33.get(describedBy),
-      ...rest
+      "aria-describedby": $33.get(describedBy)
     }), [() => classNames("cinder-input", $$props.class)], undefined, undefined, undefined, true);
-    $33.bind_value(input, value);
+    $33.bind_this(input, ($$value) => $33.set(inputNode, $$value), () => $33.get(inputNode));
     $33.append($$anchor2, input);
   };
   let value = $33.prop($$props, "value", 15, ""), 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, [
@@ -5475,6 +5646,7 @@ function Input($$anchor, $$props) {
     "$$legacy",
     "id",
     "value",
+    "onValueChange",
     "label",
     "description",
     "error",
@@ -5486,7 +5658,9 @@ function Input($$anchor, $$props) {
     "trailing",
     "leadingInteractive",
     "trailingInteractive",
-    "aria-describedby"
+    "aria-describedby",
+    "aria-invalid",
+    "oninput"
   ]);
   const context = getFormFieldContext();
   $33.user_effect(() => {
@@ -5494,83 +5668,134 @@ function Input($$anchor, $$props) {
       devWarn(`[cinder/Input] id mismatch: Input id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
     }
   });
-  const defaultDescriptionId = $33.derived(() => describeId($$props.id, !!$$props.description));
-  const defaultErrorId = $33.derived(() => errorId($$props.id, !!$$props.error));
-  const ownDescriptionId = $33.derived(() => $$props.description && $33.get(defaultDescriptionId) === context?.descriptionId ? `${$$props.id}-input-description` : $33.get(defaultDescriptionId));
-  const ownErrorId = $33.derived(() => $$props.error && $33.get(defaultErrorId) === context?.errorId ? `${$$props.id}-input-error` : $33.get(defaultErrorId));
-  const resolvedDescriptionId = $33.derived(() => $33.get(ownDescriptionId) ?? context?.descriptionId);
-  const resolvedErrorId = $33.derived(() => $33.get(ownErrorId) ?? context?.errorId);
-  const describedBy = $33.derived(() => composeDescribedBy($33.get(resolvedDescriptionId), $33.get(resolvedErrorId), $$props["aria-describedby"]));
-  const resolvedAriaInvalid = $33.derived(() => $$props.error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-  const resolvedRequired = $33.derived(() => $$props.required ?? context?.required ?? false);
-  const resolvedDisabled = $33.derived(() => $$props.disabled ?? context?.disabled ?? false);
+  const field = $33.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "input",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const ownDescriptionId = $33.derived(() => $33.get(field).ownDescriptionId);
+  const ownErrorId = $33.derived(() => $33.get(field).ownErrorId);
+  const describedBy = $33.derived(() => $33.get(field).describedBy);
+  const resolvedAriaInvalid = $33.derived(() => $33.get(field).ariaInvalid);
+  const resolvedRequired = $33.derived(() => $33.get(field).required);
+  const resolvedDisabled = $33.derived(() => $33.get(field).disabled);
   const isNativeDateInput = $33.derived(() => type() === "date");
   const rendersNativeDateIcon = $33.derived(() => $33.get(isNativeDateInput) && !$$props.trailing);
   const hasTrailing = $33.derived(() => !!$$props.trailing || $33.get(isNativeDateInput));
   const hasGroupWrapper = $33.derived(() => !!$$props.leading || $33.get(hasTrailing));
-  const isInvalid = $33.derived(() => $33.get(resolvedAriaInvalid) === "true" || $33.get(resolvedAriaInvalid) === true);
+  const isInvalid = $33.derived(() => $33.get(resolvedAriaInvalid) === "true");
+  let inputNode = $33.state(undefined);
+  let resetSyncTimeout;
+  function syncValueAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if ($33.get(inputNode))
+        value($33.get(inputNode).value);
+    }, 0);
+  }
+  $33.user_effect(() => {
+    const form = $33.get(inputNode)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleInput(event2) {
+    const target = event2.currentTarget;
+    const committed = commitValue(target.value, $$props.onValueChange, (next6) => {
+      value(next6);
+    });
+    target.value = committed;
+    $$props.oninput?.(event2);
+  }
   var div = root18();
   var node = $33.child(div);
   {
-    var consequent = ($$anchor2) => {
-      var label_1 = root_35();
-      var text8 = $33.child(label_1, true);
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_36();
+      var text9 = $33.child(label_1);
+      var node_1 = $33.sibling(text9);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_45();
+          $33.append($$anchor3, span);
+        };
+        $33.if(node_1, ($$render) => {
+          if ($33.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $33.reset(label_1);
       $33.template_effect(() => {
         $33.set_attribute(label_1, "for", $$props.id);
         $33.set_attribute(label_1, "data-disabled", $33.get(resolvedDisabled) || undefined);
-        $33.set_text(text8, $$props.label);
+        $33.set_text(text9, `${$$props.label ?? ""} `);
       });
       $33.append($$anchor2, label_1);
     };
     $33.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
-  var node_1 = $33.sibling(node, 2);
+  var node_2 = $33.sibling(node, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_1 = root_44();
-      var node_2 = $33.child(div_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var span = root_53();
-          var node_3 = $33.child(span);
-          $33.snippet(node_3, () => $$props.leading);
-          $33.reset(span);
-          $33.template_effect(() => $33.set_attribute(span, "aria-hidden", leadingInteractive() ? undefined : "true"));
-          $33.append($$anchor3, span);
-        };
-        $33.if(node_2, ($$render) => {
-          if ($$props.leading)
-            $$render(consequent_1);
-        });
-      }
-      var node_4 = $33.sibling(node_2, 2);
-      inputElement(node_4);
-      var node_5 = $33.sibling(node_4, 2);
+    var consequent_5 = ($$anchor2) => {
+      var div_1 = root_53();
+      var node_3 = $33.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
           var span_1 = root_62();
-          var node_6 = $33.child(span_1);
-          $33.snippet(node_6, () => $$props.trailing);
+          var node_4 = $33.child(span_1);
+          $33.snippet(node_4, () => $$props.leading);
           $33.reset(span_1);
-          $33.template_effect(() => $33.set_attribute(span_1, "aria-hidden", trailingInteractive() ? undefined : "true"));
+          $33.template_effect(() => $33.set_attribute(span_1, "aria-hidden", leadingInteractive() ? undefined : "true"));
           $33.append($$anchor3, span_1);
         };
+        $33.if(node_3, ($$render) => {
+          if ($$props.leading)
+            $$render(consequent_2);
+        });
+      }
+      var node_5 = $33.sibling(node_3, 2);
+      inputElement(node_5);
+      var node_6 = $33.sibling(node_5, 2);
+      {
         var consequent_3 = ($$anchor3) => {
           var span_2 = root_73();
           var node_7 = $33.child(span_2);
-          calendarIcon(node_7);
+          $33.snippet(node_7, () => $$props.trailing);
           $33.reset(span_2);
+          $33.template_effect(() => $33.set_attribute(span_2, "aria-hidden", trailingInteractive() ? undefined : "true"));
           $33.append($$anchor3, span_2);
         };
-        $33.if(node_5, ($$render) => {
+        var consequent_4 = ($$anchor3) => {
+          var span_3 = root_83();
+          var node_8 = $33.child(span_3);
+          calendarIcon(node_8);
+          $33.reset(span_3);
+          $33.append($$anchor3, span_3);
+        };
+        $33.if(node_6, ($$render) => {
           if ($$props.trailing)
-            $$render(consequent_2);
+            $$render(consequent_3);
           else if ($33.get(rendersNativeDateIcon))
-            $$render(consequent_3, 1);
+            $$render(consequent_4, 1);
         });
       }
       $33.reset(div_1);
@@ -5586,17 +5811,17 @@ function Input($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       inputElement($$anchor2);
     };
-    $33.if(node_1, ($$render) => {
+    $33.if(node_2, ($$render) => {
       if ($33.get(hasGroupWrapper))
-        $$render(consequent_4);
+        $$render(consequent_5);
       else
         $$render(alternate, -1);
     });
   }
-  var node_8 = $33.sibling(node_1, 2);
+  var node_9 = $33.sibling(node_2, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var p = root_93();
+    var consequent_6 = ($$anchor2) => {
+      var p = root_104();
       var text_1 = $33.child(p, true);
       $33.reset(p);
       $33.template_effect(() => {
@@ -5605,15 +5830,15 @@ function Input($$anchor, $$props) {
       });
       $33.append($$anchor2, p);
     };
-    $33.if(node_8, ($$render) => {
+    $33.if(node_9, ($$render) => {
       if ($$props.description)
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $33.sibling(node_8, 2);
+  var node_10 = $33.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var p_1 = root_104();
+    var consequent_7 = ($$anchor2) => {
+      var p_1 = root_115();
       var text_2 = $33.child(p_1, true);
       $33.reset(p_1);
       $33.template_effect(() => {
@@ -5622,9 +5847,9 @@ function Input($$anchor, $$props) {
       });
       $33.append($$anchor2, p_1);
     };
-    $33.if(node_9, ($$render) => {
+    $33.if(node_10, ($$render) => {
       if ($$props.error)
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
   $33.reset(div);
@@ -5971,14 +6196,15 @@ function reconcileCompositionBranchKeys(existingKeys, branchCount, createKey) {
 // src/components/json-schema-editor/property-list.svelte
 import"svelte/internal/disclose-version";
 import * as $37 from "svelte/internal/client";
+import { onDestroy } from "svelte";
 
 // src/components/chip/chip.svelte
 import"svelte/internal/disclose-version";
 import * as $36 from "svelte/internal/client";
-var root_213 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_117 = $36.from_html(`<button><!> <span class="cinder-chip__label"> </span></button>`);
-var root_45 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
-var root_36 = $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_215 = $36.from_html(`<span class="cinder-chip__icon" aria-hidden="true"><!></span>`);
+var root_118 = $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>`);
 function Chip($$anchor, $$props) {
@@ -6035,7 +6261,7 @@ function Chip($$anchor, $$props) {
   var node = $36.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_117();
+      var button = root_118();
       var event_handler = (event3) => {
         if ($36.get(disabled))
           return;
@@ -6060,7 +6286,7 @@ function Chip($$anchor, $$props) {
       var node_1 = $36.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span = root_213();
+          var span = root_215();
           var node_2 = $36.child(span);
           $36.snippet(node_2, () => $36.get(leadingIcon));
           $36.reset(span);
@@ -6072,14 +6298,14 @@ function Chip($$anchor, $$props) {
         });
       }
       var span_1 = $36.sibling(node_1, 2);
-      var text8 = $36.child(span_1, true);
+      var text9 = $36.child(span_1, true);
       $36.reset(span_1);
       $36.reset(button);
-      $36.template_effect(() => $36.set_text(text8, $36.get(label)));
+      $36.template_effect(() => $36.set_text(text9, $36.get(label)));
       $36.append($$anchor2, button);
     };
     var consequent_3 = ($$anchor2) => {
-      var span_2 = root_36();
+      var span_2 = root_37();
       $36.attribute_effect(span_2, ($0) => ({
         ...$36.get(rest),
         role: "group",
@@ -6095,7 +6321,7 @@ function Chip($$anchor, $$props) {
       var node_3 = $36.child(span_2);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_3 = root_45();
+          var span_3 = root_46();
           var node_4 = $36.child(span_3);
           $36.snippet(node_4, () => $36.get(leadingIcon));
           $36.reset(span_3);
@@ -6167,11 +6393,16 @@ function Chip($$anchor, $$props) {
 }
 $36.delegate(["click"]);
 
+// src/components/json-schema-editor/property-list-validation.ts
+function calculatePropertyValidationErrorCount(propertyNames, childValidationCounts, hasRenameError) {
+  return (hasRenameError ? 1 : 0) + propertyNames.reduce((total, key) => total + (childValidationCounts[key] ?? 0), 0);
+}
+
 // src/components/json-schema-editor/property-list.svelte
-var root_37 = $37.from_html(`<p class="cinder-jse-property-list__empty">No properties yet.</p>`);
-var root_94 = $37.from_html(`<div class="cinder-jse-property-row__panel"><!> <!></div>`);
-var root_46 = $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_115 = $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_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_119 = $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>`);
 function Property_list($$anchor, $$props) {
   $37.push($$props, true);
@@ -6181,6 +6412,14 @@ function Property_list($$anchor, $$props) {
   let draftNames = $37.proxy({});
   let renameError = $37.state(null);
   let expanded = $37.proxy({});
+  let childValidationCounts = $37.state($37.proxy({}));
+  const validationErrorCount = $37.derived(() => calculatePropertyValidationErrorCount($37.get(propertyNames), $37.get(childValidationCounts), $37.get(renameError) !== null));
+  $37.user_effect(() => {
+    $$props.onvalidationerrorcount?.($37.get(validationErrorCount));
+  });
+  onDestroy(() => {
+    $$props.onvalidationerrorcount?.(0);
+  });
   function getDraftName(key) {
     return draftNames[key] ?? key;
   }
@@ -6220,6 +6459,11 @@ function Property_list($$anchor, $$props) {
       expanded[draft] = true;
       delete expanded[oldKey];
     }
+    const childCount = $37.get(childValidationCounts)[oldKey];
+    if (childCount !== undefined) {
+      const { [oldKey]: _removedChildCount, ...remainingChildCounts } = $37.get(childValidationCounts);
+      $37.set(childValidationCounts, { ...remainingChildCounts, [draft]: childCount }, true);
+    }
     $$props.onchange(next7, nextRequired);
   }
   function deleteProperty(key) {
@@ -6230,8 +6474,25 @@ function Property_list($$anchor, $$props) {
     const nextRequired = $$props.required.filter((name) => name !== key);
     delete draftNames[key];
     delete expanded[key];
+    const { [key]: _removedChildCount, ...remainingChildCounts } = $37.get(childValidationCounts);
+    $37.set(childValidationCounts, remainingChildCounts, true);
     $$props.onchange(next7, nextRequired);
   }
+  function setChildValidationErrorCount(key, count) {
+    if (($37.get(childValidationCounts)[key] ?? 0) === count)
+      return;
+    if (count === 0) {
+      const { [key]: _removedChildCount, ...remainingChildCounts } = $37.get(childValidationCounts);
+      $37.set(childValidationCounts, remainingChildCounts, true);
+      return;
+    }
+    $37.set(childValidationCounts, { ...$37.get(childValidationCounts), [key]: count }, true);
+  }
+  function toggleExpanded(key, isOpen) {
+    expanded[key] = !isOpen;
+    if (isOpen)
+      setChildValidationErrorCount(key, 0);
+  }
   function moveProperty(key, direction) {
     if (readonly())
       return;
@@ -6249,12 +6510,12 @@ function Property_list($$anchor, $$props) {
   function toggleRequired(key) {
     if (readonly())
       return;
-    const set13 = new Set($$props.required);
-    if (set13.has(key))
-      set13.delete(key);
+    const set14 = new Set($$props.required);
+    if (set14.has(key))
+      set14.delete(key);
     else
-      set13.add(key);
-    $$props.onchange($$props.properties, [...set13]);
+      set14.add(key);
+    $$props.onchange($$props.properties, [...set14]);
   }
   function setPropertySchema(key, schema) {
     if (readonly())
@@ -6304,12 +6565,12 @@ function Property_list($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       Alert($$anchor2, {
-        variant: "error",
+        variant: "danger",
         children: ($$anchor3, $$slotProps) => {
           $37.next();
-          var text9 = $37.text();
-          $37.template_effect(() => $37.set_text(text9, $37.get(renameError)));
-          $37.append($$anchor3, text9);
+          var text10 = $37.text();
+          $37.template_effect(() => $37.set_text(text10, $37.get(renameError)));
+          $37.append($$anchor3, text10);
         },
         $$slots: { default: true }
       });
@@ -6322,7 +6583,7 @@ function Property_list($$anchor, $$props) {
   var node_1 = $37.sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var p = root_37();
+      var p = root_38();
       $37.append($$anchor2, p);
     };
     $37.if(node_1, ($$render) => {
@@ -6335,7 +6596,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_46();
+    var div_1 = root_47();
     var div_2 = $37.child(div_1);
     var button = $37.child(div_2);
     var span = $37.sibling($37.child(button), 2);
@@ -6430,7 +6691,7 @@ function Property_list($$anchor, $$props) {
     var node_7 = $37.sibling(div_2, 2);
     {
       var consequent_2 = ($$anchor3) => {
-        var div_3 = root_94();
+        var div_3 = root_93();
         var node_8 = $37.child(div_3);
         {
           let $0 = $37.derived(() => `${$$props.idPrefix}-${key}-name`);
@@ -6472,6 +6733,7 @@ function Property_list($$anchor, $$props) {
             get value() {
               return $37.get($38);
             },
+            onvalidationerrorcount: (count) => setChildValidationErrorCount(key, count),
             onchange: (next7) => setPropertySchema(key, next7)
           });
         }
@@ -6487,12 +6749,14 @@ function Property_list($$anchor, $$props) {
     $37.reset(div_1);
     $37.template_effect(($0) => {
       $37.set_attribute(div_1, "data-cinder-required", $37.get(isRequired) ? "" : undefined);
+      $37.set_style(div_2, `--cinder-jse-property-depth: ${depth()}`);
+      $37.set_attribute(button, "aria-label", `${$37.get(isOpen) ? "Collapse" : "Expand"} ${key} property`);
       $37.set_attribute(button, "aria-expanded", $37.get(isOpen));
       $37.set_attribute(button, "aria-controls", $37.get(panelId));
       $37.set_text(text_1, key);
       $37.set_text(text_2, $0);
     }, [() => summariseType($$props.properties[key] ?? {})]);
-    $37.delegated("click", button, () => expanded[key] = !$37.get(isOpen));
+    $37.delegated("click", button, () => toggleExpanded(key, $37.get(isOpen)));
     $37.append($$anchor2, div_1);
   });
   var node_10 = $37.sibling(node_2, 2);
@@ -6513,7 +6777,7 @@ function Property_list($$anchor, $$props) {
   var node_11 = $37.sibling(node_10, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var details = root_115();
+      var details = root_119();
       var summary = $37.child(details);
       var text_8 = $37.child(summary);
       $37.reset(summary);
@@ -6638,11 +6902,11 @@ var NUMBER_CONSTRAINT_FIELDS = [
   { key: "exclusiveMaximum", label: "Exclusive maximum" },
   { key: "multipleOf", label: "Multiple of" }
 ];
-var root_38 = $38.from_html(`<div class="cinder-jse-boolean-schema"><span> </span> <!></div>`);
+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_118 = $38.from_html(`<div class="cinder-jse-section"><h4 class="cinder-jse-section__title">Array items</h4> <!></div>`);
+var root_1111 = $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);
@@ -6671,7 +6935,7 @@ function Property_editor($$anchor, $$props) {
   const preservedKeys = $38.derived(() => {
     return Object.keys($38.get(objectValue)).filter((key) => !EDITABLE_KEYWORDS.has(key));
   });
-  function patch(edits, opts) {
+  function patch(edits, opts = undefined) {
     if (readonly())
       return;
     const next8 = { ...$38.get(objectValue), ...edits };
@@ -6753,6 +7017,24 @@ function Property_editor($$anchor, $$props) {
       parts.push(`"${$38.get(objectValue).title}"`);
     return parts.join(" · ");
   }
+  let childValidationCounts = $38.state($38.proxy({}));
+  const validationErrorCount = $38.derived(() => Object.values($38.get(childValidationCounts)).reduce((total, count) => total + count, 0));
+  $38.user_effect(() => {
+    $$props.onvalidationerrorcount?.($38.get(validationErrorCount));
+  });
+  onDestroy2(() => {
+    $$props.onvalidationerrorcount?.(0);
+  });
+  function setChildValidationErrorCount(key, count) {
+    if (($38.get(childValidationCounts)[key] ?? 0) === count)
+      return;
+    if (count === 0) {
+      const { [key]: _removedChildCount, ...remainingChildCounts } = $38.get(childValidationCounts);
+      $38.set(childValidationCounts, remainingChildCounts, true);
+      return;
+    }
+    $38.set(childValidationCounts, { ...$38.get(childValidationCounts), [key]: count }, true);
+  }
   function patchProperties(properties, required) {
     const edits = { properties };
     edits.required = required.length > 0 ? required : undefined;
@@ -6804,8 +7086,13 @@ function Property_editor($$anchor, $$props) {
   }
   function removeCompositionBranch(keyword, branchIndex) {
     const list = Array.isArray($38.get(objectValue)[keyword]) ? [...$38.get(objectValue)[keyword]] : [];
+    const removedBranchKey = $38.get(compositionBranchKeys)[keyword][branchIndex];
+    const nextBranchKeys = [...$38.get(compositionBranchKeys)[keyword]];
     list.splice(branchIndex, 1);
-    setKeywordKeys(keyword, $38.get(compositionBranchKeys)[keyword].toSpliced(branchIndex, 1));
+    nextBranchKeys.splice(branchIndex, 1);
+    setKeywordKeys(keyword, nextBranchKeys);
+    if (removedBranchKey)
+      setChildValidationErrorCount(`${keyword}:${removedBranchKey}`, 0);
     patchComposition(keyword, list.length > 0 ? list : undefined);
   }
   function addCompositionBranch(keyword) {
@@ -6825,15 +7112,15 @@ function Property_editor($$anchor, $$props) {
         variant: "info",
         children: ($$anchor3, $$slotProps) => {
           $38.next();
-          var text10 = $38.text();
-          text10.nodeValue = "Schema depth exceeded (30). Edit deeper sections via the JSON view.";
-          $38.append($$anchor3, text10);
+          var text11 = $38.text();
+          text11.nodeValue = "Schema depth exceeded (30). Edit deeper sections via the JSON view.";
+          $38.append($$anchor3, text11);
         },
         $$slots: { default: true }
       });
     };
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_38();
+      var div_1 = root_39();
       var span = $38.child(div_1);
       var text_1 = $38.child(span);
       $38.reset(span);
@@ -7005,6 +7292,7 @@ function Property_editor($$anchor, $$props) {
               get required() {
                 return $38.get($210);
               },
+              onvalidationerrorcount: (count) => setChildValidationErrorCount("properties", count),
               onchange: patchProperties
             });
           }
@@ -7019,7 +7307,7 @@ function Property_editor($$anchor, $$props) {
       var node_10 = $38.sibling(node_8, 2);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_7 = root_118();
+          var div_7 = root_1111();
           var node_11 = $38.sibling($38.child(div_7), 2);
           {
             let $0 = $38.derived(() => `${$$props.idPrefix}-items`);
@@ -7042,6 +7330,7 @@ function Property_editor($$anchor, $$props) {
               get value() {
                 return $38.get($39);
               },
+              onvalidationerrorcount: (count) => setChildValidationErrorCount("items", count),
               onchange: (next8) => setItems(next8)
             });
           }
@@ -7206,6 +7495,7 @@ function Property_editor($$anchor, $$props) {
             var div_10 = $38.sibling(summary, 2);
             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 node_21 = $38.first_child(fragment_6);
               {
@@ -7228,6 +7518,7 @@ function Property_editor($$anchor, $$props) {
                   get value() {
                     return $38.get(branch);
                   },
+                  onvalidationerrorcount: (count) => setChildValidationErrorCount(`${keyword}:${$38.get(branchKey)}`, count),
                   onchange: (next8) => {
                     const list = [...$38.get(objectValue)[keyword]];
                     list[$38.get(branchIndex)] = next8;
@@ -7430,7 +7721,7 @@ function Property_editor($$anchor, $$props) {
 $38.delegate(["click"]);
 
 // src/components/json-schema-editor/form-view.svelte
-var root_215 = $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_216 = $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>`);
 function Form_view($$anchor, $$props) {
   $39.push($$props, true);
@@ -7442,7 +7733,7 @@ function Form_view($$anchor, $$props) {
       Alert($$anchor2, {
         variant: "warning",
         children: ($$anchor3, $$slotProps) => {
-          var fragment_1 = root_215();
+          var fragment_1 = root_216();
           var div_1 = $39.sibling($39.first_child(fragment_1), 2);
           var node_1 = $39.child(div_1);
           Button(node_1, {
@@ -7451,8 +7742,8 @@ function Form_view($$anchor, $$props) {
             onclick: () => $$props.state.applyJsonDraft(),
             children: ($$anchor4, $$slotProps2) => {
               $39.next();
-              var text11 = $39.text("Apply JSON");
-              $39.append($$anchor4, text11);
+              var text12 = $39.text("Apply JSON");
+              $39.append($$anchor4, text12);
             },
             $$slots: { default: true }
           });
@@ -7507,6 +7798,9 @@ function Form_view($$anchor, $$props) {
           get value() {
             return $39.get(rootSchema);
           },
+          get onvalidationerrorcount() {
+            return $$props.onvalidationerrorcount;
+          },
           onchange: (next9, options) => $$props.state.commitFromForm(next9, options)
         });
       }
@@ -7805,12 +8099,12 @@ function extractParsePosition(error, source) {
   }
   return { line, column };
 }
-function tryParseJson(text11) {
+function tryParseJson(text12) {
   try {
-    return { ok: true, value: JSON.parse(text11) };
+    return { ok: true, value: JSON.parse(text12) };
   } catch (error) {
     if (error instanceof SyntaxError) {
-      const position = extractParsePosition(error, text11);
+      const position = extractParsePosition(error, text12);
       const errorPayload = {
         message: error.message
       };
@@ -8170,8 +8464,8 @@ function createEditorState(options) {
     setView(next9) {
       $41.set(view, next9, true);
     },
-    setJsonDraftText(text11) {
-      $41.set(jsonDraftText, text11, true);
+    setJsonDraftText(text12) {
+      $41.set(jsonDraftText, text12, true);
       scheduleValidation();
     },
     discardJsonDraft() {
@@ -8306,7 +8600,6 @@ import { untrack as untrack4 } from "svelte";
 // src/components/copy-button/copy-button.svelte
 import"svelte/internal/disclose-version";
 import * as $45 from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import"svelte/internal/disclose-version";
@@ -8367,20 +8660,20 @@ function Copy($$anchor, $$props) {
   }));
 }
 // src/utilities/clipboard.ts
-async function copyToClipboard(text11) {
+async function copyToClipboard(text12) {
   if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
     try {
-      await navigator.clipboard.writeText(text11);
+      await navigator.clipboard.writeText(text12);
       return true;
     } catch {}
   }
-  return legacyCopy(text11);
+  return legacyCopy(text12);
 }
-function legacyCopy(text11) {
+function legacyCopy(text12) {
   if (typeof document === "undefined")
     return false;
   const textarea = document.createElement("textarea");
-  textarea.value = text11;
+  textarea.value = text12;
   textarea.setAttribute("readonly", "");
   textarea.setAttribute("aria-hidden", "true");
   textarea.setAttribute("tabindex", "-1");
@@ -8437,13 +8730,13 @@ function _visually_hidden_live_region($$anchor, $$props) {
     }, 0);
   });
   var div = root23();
-  var text11 = $44.child(div, true);
+  var text12 = $44.child(div, true);
   $44.reset(div);
   $44.template_effect(($0) => {
     $44.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
     $44.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
     $44.set_class(div, 1, $0);
-    $44.set_text(text11, $44.get(rendered));
+    $44.set_text(text12, $44.get(rendered));
   }, [() => $44.clsx(classNames("cinder-sr-only", $$props.class))]);
   $44.append($$anchor, div);
   $44.pop();
@@ -8480,9 +8773,11 @@ function Copy_button($$anchor, $$props) {
       $45.set(copied, false);
     }, confirmDuration());
   }
-  onDestroy(() => {
-    if (resetTimer)
-      clearTimeout(resetTimer);
+  $45.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
   });
   var fragment = root24();
   var button = $45.first_child(fragment);
@@ -8506,8 +8801,8 @@ function Copy_button($$anchor, $$props) {
       Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
-      var text12 = $45.text("Copied");
-      $45.append($$anchor2, text12);
+      var text13 = $45.text("Copied");
+      $45.append($$anchor2, text13);
     };
     var consequent_3 = ($$anchor2) => {
       var fragment_3 = $45.comment();
@@ -8552,7 +8847,10 @@ function Copy_button($$anchor, $$props) {
 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>`);
 function Json_schema_toolbar($$anchor, $$props) {
   $46.push($$props, true);
+  let localValidationErrorCount = $46.prop($$props, "localValidationErrorCount", 3, 0);
   const validationBadgeVariant = $46.derived(() => {
+    if (localValidationErrorCount() > 0)
+      return "danger";
     switch ($$props.state.validationStatus) {
       case "valid":
         return "success";
@@ -8563,6 +8861,9 @@ function Json_schema_toolbar($$anchor, $$props) {
     }
   });
   const validationBadgeText = $46.derived(() => {
+    if (localValidationErrorCount() > 0) {
+      return `Invalid — ${localValidationErrorCount()} field ${localValidationErrorCount() === 1 ? "error" : "errors"}`;
+    }
     switch ($$props.state.validationStatus) {
       case "valid":
         return `Valid (${$$props.state.activeDraft})`;
@@ -8645,9 +8946,9 @@ function Json_schema_toolbar($$anchor, $$props) {
     },
     children: ($$anchor2, $$slotProps) => {
       $46.next();
-      var text13 = $46.text();
-      $46.template_effect(() => $46.set_text(text13, $46.get(validationBadgeText)));
-      $46.append($$anchor2, text13);
+      var text14 = $46.text();
+      $46.template_effect(() => $46.set_text(text14, $46.get(validationBadgeText)));
+      $46.append($$anchor2, text14);
     },
     $$slots: { default: true }
   });
@@ -8786,10 +9087,11 @@ function resolveMaximumLength(value) {
 }
 
 // src/components/textarea/textarea.svelte
-var root_119 = $47.from_html(`<label class="cinder-textarea-label"> </label>`);
-var root_216 = $47.from_html(`<p class="cinder-textarea-description"> </p>`);
-var root_39 = $47.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
-var root_47 = $47.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
+var root_217 = $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>`);
 function Textarea($$anchor, $$props) {
   $47.push($$props, true);
@@ -8832,19 +9134,31 @@ function Textarea($$anchor, $$props) {
   var div = root26();
   var node = $47.child(div);
   {
-    var consequent = ($$anchor2) => {
-      var label_1 = root_119();
-      var text13 = $47.child(label_1, true);
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_120();
+      var text14 = $47.child(label_1);
+      var node_1 = $47.sibling(text14);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_217();
+          $47.append($$anchor3, span);
+        };
+        $47.if(node_1, ($$render) => {
+          if ($47.get(field).required)
+            $$render(consequent);
+        });
+      }
       $47.reset(label_1);
       $47.template_effect(() => {
         $47.set_attribute(label_1, "for", $$props.id);
-        $47.set_text(text13, $$props.label);
+        $47.set_attribute(label_1, "data-disabled", $47.get(field).disabled || undefined);
+        $47.set_text(text14, `${$$props.label ?? ""} `);
       });
       $47.append($$anchor2, label_1);
     };
     $47.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var textarea = $47.sibling(node, 2);
@@ -8862,10 +9176,10 @@ function Textarea($$anchor, $$props) {
   }), [
     () => classNames("cinder-_input-frame", "cinder-textarea", $$props.class)
   ]);
-  var node_1 = $47.sibling(textarea, 2);
+  var node_2 = $47.sibling(textarea, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_216();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_310();
       var text_1 = $47.child(p, true);
       $47.reset(p);
       $47.template_effect(() => {
@@ -8874,15 +9188,15 @@ function Textarea($$anchor, $$props) {
       });
       $47.append($$anchor2, p);
     };
-    $47.if(node_1, ($$render) => {
+    $47.if(node_2, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_2 = $47.sibling(node_1, 2);
+  var node_3 = $47.sibling(node_2, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var output = root_39();
+    var consequent_3 = ($$anchor2) => {
+      var output = root_48();
       var text_2 = $47.child(output);
       $47.reset(output);
       $47.template_effect(() => {
@@ -8892,15 +9206,15 @@ function Textarea($$anchor, $$props) {
       });
       $47.append($$anchor2, output);
     };
-    $47.if(node_2, ($$render) => {
+    $47.if(node_3, ($$render) => {
       if ($47.get(countId))
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var node_3 = $47.sibling(node_2, 2);
+  var node_4 = $47.sibling(node_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var p_1 = root_47();
+    var consequent_4 = ($$anchor2) => {
+      var p_1 = root_56();
       var text_3 = $47.child(p_1, true);
       $47.reset(p_1);
       $47.template_effect(() => {
@@ -8909,9 +9223,9 @@ function Textarea($$anchor, $$props) {
       });
       $47.append($$anchor2, p_1);
     };
-    $47.if(node_3, ($$render) => {
+    $47.if(node_4, ($$render) => {
       if ($$props.error)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
   $47.reset(div);
@@ -8951,8 +9265,8 @@ function Json_view($$anchor, $$props) {
         variant: "warning",
         children: ($$anchor3, $$slotProps) => {
           $48.next();
-          var text14 = $48.text("Draft modified — Apply to commit");
-          $48.append($$anchor3, text14);
+          var text15 = $48.text("Draft modified — Apply to commit");
+          $48.append($$anchor3, text15);
         },
         $$slots: { default: true }
       });
@@ -9022,7 +9336,7 @@ function Json_view($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor2) => {
       Alert($$anchor2, {
-        variant: "error",
+        variant: "danger",
         children: ($$anchor3, $$slotProps) => {
           var pre = root_65();
           var text_3 = $48.child(pre, true);
@@ -9058,10 +9372,10 @@ function detectMacPlatform() {
   return /Mac/.test(navigator.platform);
 }
 var isMacPlatform = detectMacPlatform();
-var root_95 = $49.from_html(`<span class="cinder-sr-only">, has changes</span>`);
-var root_83 = $49.from_html(`Diff<!>`, 1);
-var root_217 = $49.from_html(`<!> <!> <!>`, 1);
-var root_121 = $49.from_html(`<!> <!> <!> <!>`, 1);
+var root_94 = $49.from_html(`<span class="cinder-sr-only">, has changes</span>`);
+var root_84 = $49.from_html(`Diff<!>`, 1);
+var root_218 = $49.from_html(`<!> <!> <!>`, 1);
+var root_123 = $49.from_html(`<!> <!> <!> <!>`, 1);
 var root28 = $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);
@@ -9083,44 +9397,46 @@ function Json_schema_editor_impl($$anchor, $$props) {
       options.draftOverride = $$props.draftOverride;
     return options;
   });
-  const state19 = createEditorState(stateOptions);
+  let localValidationErrorCount = $49.state(0);
+  const editorState = createEditorState(stateOptions);
+  const toolbarValidationErrorCount = $49.derived(() => view() === "form" ? $49.get(localValidationErrorCount) : 0);
   $49.user_effect(() => {
-    state19.setReadonly(readonly());
+    editorState.setReadonly(readonly());
   });
   let lastDraftOverride = untrack5(() => $$props.draftOverride);
   $49.user_effect(() => {
     if ($$props.draftOverride !== lastDraftOverride) {
       lastDraftOverride = $$props.draftOverride;
-      state19.setDraftOverride($$props.draftOverride);
+      editorState.setDraftOverride($$props.draftOverride);
     }
   });
   $49.user_effect(() => {
-    return () => state19.destroy();
+    return () => editorState.destroy();
   });
   let lastSchemaKey = untrack5(() => $$props.schemaKey);
   $49.user_effect(() => {
     if ($$props.schemaKey !== lastSchemaKey) {
       lastSchemaKey = $$props.schemaKey;
       untrack5(() => {
-        state19.reload($$props.schema, $$props.original);
+        editorState.reload($$props.schema, $$props.original);
       });
       announcer.announce("Schema reloaded");
     }
   });
   $49.user_effect(() => {
-    if (state19.view !== view())
-      state19.setView(view());
+    if (editorState.view !== view())
+      editorState.setView(view());
   });
   function handleUndo() {
-    const label = state19.undo();
+    const label = editorState.undo();
     announcer.announce(label ? `Undid: ${label}` : "Undid last edit");
   }
   function handleRedo() {
-    const label = state19.redo();
+    const label = editorState.redo();
     announcer.announce(label ? `Redid: ${label}` : "Redid edit");
   }
   function handleRevert() {
-    state19.revert();
+    editorState.revert();
     announcer.announce("Reverted to original schema");
   }
   function isEditableTarget(target) {
@@ -9150,7 +9466,10 @@ function Json_schema_editor_impl($$anchor, $$props) {
   var node = $49.child(div);
   Json_schema_toolbar(node, {
     get state() {
-      return state19;
+      return editorState;
+    },
+    get localValidationErrorCount() {
+      return $49.get(toolbarValidationErrorCount);
     },
     onUndo: handleUndo,
     onRedo: handleRedo,
@@ -9165,19 +9484,19 @@ function Json_schema_editor_impl($$anchor, $$props) {
       view($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_121();
+      var fragment = root_123();
       var node_2 = $49.first_child(fragment);
       Tab_list(node_2, {
         label: "Editor view",
         children: ($$anchor3, $$slotProps2) => {
-          var fragment_1 = root_217();
+          var fragment_1 = root_218();
           var node_3 = $49.first_child(fragment_1);
           Tab(node_3, {
             value: "form",
             children: ($$anchor4, $$slotProps3) => {
               $49.next();
-              var text15 = $49.text("Form");
-              $49.append($$anchor4, text15);
+              var text16 = $49.text("Form");
+              $49.append($$anchor4, text16);
             },
             $$slots: { default: true }
           });
@@ -9210,7 +9529,7 @@ function Json_schema_editor_impl($$anchor, $$props) {
                   });
                 };
                 $49.if(node_6, ($$render) => {
-                  if (state19.hasChanges)
+                  if (editorState.hasChanges)
                     $$render(consequent);
                 });
               }
@@ -9221,15 +9540,15 @@ function Json_schema_editor_impl($$anchor, $$props) {
               trailing,
               children: ($$anchor4, $$slotProps3) => {
                 $49.next();
-                var fragment_4 = root_83();
+                var fragment_4 = root_84();
                 var node_7 = $49.sibling($49.first_child(fragment_4));
                 {
                   var consequent_1 = ($$anchor5) => {
-                    var span = root_95();
+                    var span = root_94();
                     $49.append($$anchor5, span);
                   };
                   $49.if(node_7, ($$render) => {
-                    if (state19.hasChanges)
+                    if (editorState.hasChanges)
                       $$render(consequent_1);
                   });
                 }
@@ -9250,11 +9569,12 @@ function Json_schema_editor_impl($$anchor, $$props) {
             let $0 = $49.derived(() => `${$$props.id}-form`);
             Form_view($$anchor3, {
               get state() {
-                return state19;
+                return editorState;
               },
               get idPrefix() {
                 return $49.get($0);
-              }
+              },
+              onvalidationerrorcount: (count) => $49.set(localValidationErrorCount, count, true)
             });
           }
         },
@@ -9268,7 +9588,7 @@ function Json_schema_editor_impl($$anchor, $$props) {
             let $0 = $49.derived(() => `${$$props.id}-json`);
             Json_view($$anchor3, {
               get state() {
-                return state19;
+                return editorState;
               },
               get idPrefix() {
                 return $49.get($0);
@@ -9284,7 +9604,7 @@ function Json_schema_editor_impl($$anchor, $$props) {
         children: ($$anchor3, $$slotProps2) => {
           Diff_view($$anchor3, {
             get state() {
-              return state19;
+              return editorState;
             }
           });
         },
@@ -9332,4 +9652,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=C72460391DD042CA64756E2164756E21
+//# debugId=3EE686B0D5E2F54864756E2164756E21