@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/matrix-chart/index.js

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/matrix-chart/matrix-chart.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -744,10 +744,29 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/use-resize-observer.svelte.ts
+import * as $ from "svelte/internal/server";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/matrix-chart/matrix-chart.svelte
 function Matrix_chart($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const generatedId = $.props_id($$renderer2);
+    const generatedId = $2.props_id($$renderer2);
     let {
       label,
       description,
@@ -769,17 +788,21 @@ function Matrix_chart($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const rootId = $.derived(() => id ?? generatedId);
-    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    const rootId = $2.derived(() => id ?? generatedId);
+    const descriptionId = $2.derived(() => description ? `${rootId()}-description` : undefined);
     const marginTop = 40;
     const marginRight = 16;
     const marginBottom = 16;
     const marginLeft = 80;
     let measuredWidth = 400;
-    let rootElement = undefined;
-    const plotWidth = $.derived(() => Math.max(1, measuredWidth - marginLeft - marginRight));
-    const plotHeight = $.derived(() => Math.max(1, height - marginTop - marginBottom));
-    const xLabels = $.derived(() => {
+    const observeResize = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0)
+        measuredWidth = entry.contentRect.width;
+    });
+    const plotWidth = $2.derived(() => Math.max(1, measuredWidth - marginLeft - marginRight));
+    const plotHeight = $2.derived(() => Math.max(1, height - marginTop - marginBottom));
+    const xLabels = $2.derived(() => {
       const seen = new Set;
       const result = [];
       for (const datum of data) {
@@ -794,7 +817,7 @@ function Matrix_chart($$renderer, $$props) {
       }
       return result;
     });
-    const yLabels = $.derived(() => {
+    const yLabels = $2.derived(() => {
       const seen = new Set;
       const result = [];
       for (const datum of data) {
@@ -809,10 +832,10 @@ function Matrix_chart($$renderer, $$props) {
       }
       return result;
     });
-    const isEmpty = $.derived(() => xLabels().length === 0 || yLabels().length === 0);
-    const cellWidth = $.derived(() => xLabels().length > 0 ? plotWidth() / xLabels().length : 0);
-    const cellHeight = $.derived(() => yLabels().length > 0 ? plotHeight() / yLabels().length : 0);
-    const valueLookup = $.derived(() => {
+    const isEmpty = $2.derived(() => xLabels().length === 0 || yLabels().length === 0);
+    const cellWidth = $2.derived(() => xLabels().length > 0 ? plotWidth() / xLabels().length : 0);
+    const cellHeight = $2.derived(() => yLabels().length > 0 ? plotHeight() / yLabels().length : 0);
+    const valueLookup = $2.derived(() => {
       const lookup = new Map;
       for (const datum of data) {
         const xRaw = datum[xField];
@@ -835,7 +858,7 @@ function Matrix_chart($$renderer, $$props) {
     function lookupValue(xLabel, yLabel) {
       return valueLookup().get(xLabel)?.get(yLabel) ?? null;
     }
-    const cells = $.derived(() => {
+    const cells = $2.derived(() => {
       const result = [];
       for (const [yIndex, currentYLabel] of yLabels().entries()) {
         for (const [xIndex, currentXLabel] of xLabels().entries()) {
@@ -853,7 +876,7 @@ function Matrix_chart($$renderer, $$props) {
       }
       return result;
     });
-    const domain = $.derived(() => heatmapDomain(cells().map((cell) => cell.value)));
+    const domain = $2.derived(() => heatmapDomain(cells().map((cell) => cell.value)));
     function cellFill(value) {
       return heatmapCellFill(value, domain(), colorScale);
     }
@@ -865,12 +888,12 @@ function Matrix_chart($$renderer, $$props) {
     function cellLabelFill(value) {
       return heatmapLabelFill(value, domain(), colorScale);
     }
-    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
+    const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     let hoveredCellKey = null;
     function handlePlotPointerLeave() {
       hoveredCellKey = null;
     }
-    const tableRows = $.derived(() => {
+    const tableRows = $2.derived(() => {
       return yLabels().map((currentYLabel) => {
         const values = xLabels().map((currentXLabel) => ({
           xLabel: currentXLabel,
@@ -879,21 +902,21 @@ function Matrix_chart($$renderer, $$props) {
         return { yLabel: currentYLabel, values };
       });
     });
-    $$renderer2.push(`<figure${$.attributes({
+    $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
-      class: $.clsx(classNames("cinder-matrix-chart", customClassName)),
+      class: $2.clsx(classNames("cinder-matrix-chart", customClassName)),
       "aria-label": label,
       "aria-describedby": descriptionId(),
       "data-cinder-color-scale": colorScale
     })}>`);
     if (description) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-matrix-chart__description">${$.escape(description)}</p>`);
+      $$renderer2.push(`<p${$2.attr("id", descriptionId())} class="cinder-matrix-chart__description">${$2.escape(description)}</p>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <div class="cinder-matrix-chart__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    $$renderer2.push(`<!--]--> <div class="cinder-matrix-chart__viewport"${$2.attr("data-cinder-loading", loading || undefined)}${$2.attr_style("", { height: `${$2.stringify(height)}px` })}>`);
     if (loading) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<div class="cinder-matrix-chart__state">`);
@@ -921,36 +944,36 @@ function Matrix_chart($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <svg role="img"${$.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$.attr("aria-labelledby", !loading && !isEmpty() ? `${rootId()}-svg-title` : undefined)}>`);
+    $$renderer2.push(`<!--]--> <svg role="img"${$2.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$2.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$2.attr("aria-labelledby", !loading && !isEmpty() ? `${rootId()}-svg-title` : undefined)}>`);
     if (!loading && !isEmpty()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<title${$.attr("id", `${$.stringify(rootId())}-svg-title`)}>${$.escape(label)}</title>`);
+      $$renderer2.push(`<title${$2.attr("id", `${$2.stringify(rootId())}-svg-title`)}>${$2.escape(label)}</title>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
     if (!loading && !isEmpty()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<g role="presentation"${$.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
-      const each_array = $.ensure_array_like(xLabels());
+      $$renderer2.push(`<g role="presentation"${$2.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
+      const each_array = $2.ensure_array_like(xLabels());
       for (let index = 0, $$length = each_array.length;index < $$length; index++) {
         let xLabel = each_array[index];
-        $$renderer2.push(`<text class="cinder-matrix-chart__tick-label"${$.attr("x", index * cellWidth() + cellWidth() / 2)}${$.attr("y", -8)} text-anchor="middle" dominant-baseline="auto">${$.escape(xLabel)}</text>`);
+        $$renderer2.push(`<text class="cinder-matrix-chart__tick-label"${$2.attr("x", index * cellWidth() + cellWidth() / 2)}${$2.attr("y", -8)} text-anchor="middle" dominant-baseline="auto">${$2.escape(xLabel)}</text>`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_1 = $.ensure_array_like(yLabels());
+      const each_array_1 = $2.ensure_array_like(yLabels());
       for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
         let yLabel = each_array_1[index];
-        $$renderer2.push(`<text class="cinder-matrix-chart__tick-label"${$.attr("x", -8)}${$.attr("y", index * cellHeight() + cellHeight() / 2)} text-anchor="end" dominant-baseline="middle">${$.escape(yLabel)}</text>`);
+        $$renderer2.push(`<text class="cinder-matrix-chart__tick-label"${$2.attr("x", -8)}${$2.attr("y", index * cellHeight() + cellHeight() / 2)} text-anchor="end" dominant-baseline="middle">${$2.escape(yLabel)}</text>`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_2 = $.ensure_array_like(cells());
+      const each_array_2 = $2.ensure_array_like(cells());
       for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
         let cell = each_array_2[$$index_2];
-        $$renderer2.push(`<g><rect class="cinder-matrix-chart__cell"${$.attr("x", cell.x)}${$.attr("y", cell.y)}${$.attr("width", cell.width)}${$.attr("height", cell.height)}${$.attr("fill", cellFill(cell.value))} aria-hidden="true"${$.attr("data-cinder-x", cell.xLabel)}${$.attr("data-cinder-y", cell.yLabel)}${$.attr("data-cinder-active", hoveredCellKey === cell.key ? "" : undefined)}><title>${$.escape(cell.xLabel)} × ${$.escape(cell.yLabel)}: ${$.escape(cell.value !== null ? formatValue(cell.value) : "no data")}</title></rect>`);
+        $$renderer2.push(`<g><rect class="cinder-matrix-chart__cell"${$2.attr("x", cell.x)}${$2.attr("y", cell.y)}${$2.attr("width", cell.width)}${$2.attr("height", cell.height)}${$2.attr("fill", cellFill(cell.value))} aria-hidden="true"${$2.attr("data-cinder-x", cell.xLabel)}${$2.attr("data-cinder-y", cell.yLabel)}${$2.attr("data-cinder-active", hoveredCellKey === cell.key ? "" : undefined)}><title>${$2.escape(cell.xLabel)} × ${$2.escape(cell.yLabel)}: ${$2.escape(cell.value !== null ? formatValue(cell.value) : "no data")}</title></rect>`);
         if (showCellLabels && cell.value !== null) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<text class="cinder-matrix-chart__cell-label"${$.attr("x", cell.x + cell.width / 2)}${$.attr("y", cell.y + cell.height / 2)} text-anchor="middle" dominant-baseline="middle"${$.attr("fill", cellLabelFill(cell.value))} aria-hidden="true">${$.escape(formatValue(cell.value))}</text>`);
+          $$renderer2.push(`<text class="cinder-matrix-chart__cell-label"${$2.attr("x", cell.x + cell.width / 2)}${$2.attr("y", cell.y + cell.height / 2)} text-anchor="middle" dominant-baseline="middle"${$2.attr("fill", cellLabelFill(cell.value))} aria-hidden="true">${$2.escape(formatValue(cell.value))}</text>`);
         } else {
           $$renderer2.push("<!--[-1-->");
         }
@@ -963,21 +986,21 @@ function Matrix_chart($$renderer, $$props) {
     $$renderer2.push(`<!--]--></svg></div> `);
     if (hasDataTable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<table${$.attr_class($.clsx(dataTableClass(dataTableVisibility)))}><caption>${$.escape(dataTableCaption ?? label)}</caption><thead><tr><th scope="col">${$.escape(yField)}</th><!--[-->`);
-      const each_array_3 = $.ensure_array_like(xLabels());
+      $$renderer2.push(`<table${$2.attr_class($2.clsx(dataTableClass(dataTableVisibility)))}><caption>${$2.escape(dataTableCaption ?? label)}</caption><thead><tr><th scope="col">${$2.escape(yField)}</th><!--[-->`);
+      const each_array_3 = $2.ensure_array_like(xLabels());
       for (let $$index_3 = 0, $$length = each_array_3.length;$$index_3 < $$length; $$index_3++) {
         let xLabel = each_array_3[$$index_3];
-        $$renderer2.push(`<th scope="col">${$.escape(xLabel)}</th>`);
+        $$renderer2.push(`<th scope="col">${$2.escape(xLabel)}</th>`);
       }
       $$renderer2.push(`<!--]--></tr></thead><tbody><!--[-->`);
-      const each_array_4 = $.ensure_array_like(tableRows());
+      const each_array_4 = $2.ensure_array_like(tableRows());
       for (let $$index_5 = 0, $$length = each_array_4.length;$$index_5 < $$length; $$index_5++) {
         let row = each_array_4[$$index_5];
-        $$renderer2.push(`<tr><th scope="row">${$.escape(row.yLabel)}</th><!--[-->`);
-        const each_array_5 = $.ensure_array_like(row.values);
+        $$renderer2.push(`<tr><th scope="row">${$2.escape(row.yLabel)}</th><!--[-->`);
+        const each_array_5 = $2.ensure_array_like(row.values);
         for (let $$index_4 = 0, $$length2 = each_array_5.length;$$index_4 < $$length2; $$index_4++) {
           let cell = each_array_5[$$index_4];
-          $$renderer2.push(`<td>${$.escape(cell.value !== null ? formatValue(cell.value) : "—")}</td>`);
+          $$renderer2.push(`<td>${$2.escape(cell.value !== null ? formatValue(cell.value) : "—")}</td>`);
         }
         $$renderer2.push(`<!--]--></tr>`);
       }
@@ -996,4 +1019,4 @@ export {
   Matrix_chart as MatrixChart
 };
 
-//# debugId=47082DA5E9E19E8E64756E2164756E21
+//# debugId=E3BD5937FD8FC78D64756E2164756E21

package/dist/server/components/media-controls/index.css

@@ -20,10 +20,10 @@
     color: var(--cinder-text);
     cursor: pointer;
     font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard), border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
     min-width: 2rem;
     min-height: 2rem;
-    transition: background-color .15s, border-color .15s;
-    font-weight: 500;
     line-height: 1;
   }
 
@@ -39,6 +39,14 @@
     box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-media-controls__button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-media-controls__button:disabled {
     cursor: not-allowed;
     opacity: .5;
@@ -103,7 +111,7 @@
   .cinder-media-controls__progress-fill {
     border-radius: var(--cinder-radius-full, 9999px);
     background-color: var(--cinder-accent);
+    transition: width var(--cinder-duration-fast) var(--cinder-ease-standard);
     height: 100%;
-    transition: width .1s;
   }
 }

package/dist/server/components/media-controls/index.js

@@ -40,9 +40,9 @@ function Media_controls($$renderer, $$props) {
       progress,
       progressLabel = "Playback progress",
       layout = "compact",
-      onPlay,
-      onPause,
-      onReplay,
+      onplay,
+      onpause,
+      onreplay,
       class: customClassName,
       $$slots,
       $$events,
@@ -58,19 +58,19 @@ function Media_controls($$renderer, $$props) {
       if (isDisabled())
         return;
       announcement = "Playing";
-      onPlay?.();
+      onplay?.();
     }
     function handlePause() {
       if (isDisabled())
         return;
       announcement = "Paused";
-      onPause?.();
+      onpause?.();
     }
     function handleReplay() {
       if (isDisabled())
         return;
       announcement = "Replaying";
-      onReplay?.();
+      onreplay?.();
     }
     function handlePrimaryAction() {
       if (replay) {
@@ -163,4 +163,4 @@ export {
   Media_controls as MediaControls
 };
 
-//# debugId=29BC7ECAE231C81A64756E2164756E21
+//# debugId=1F6726370BC7977564756E2164756E21

package/dist/server/components/media-controls/media-controls.schema.js

@@ -54,17 +54,17 @@ var schema = {
   metadata: {
     unsupportedProps: [
       {
-        name: "onPause",
+        name: "onpause",
         reason: "function-or-snippet",
         description: "Called when the pause action is triggered."
       },
       {
-        name: "onPlay",
+        name: "onplay",
         reason: "function-or-snippet",
         description: "Called when the play action is triggered."
       },
       {
-        name: "onReplay",
+        name: "onreplay",
         reason: "function-or-snippet",
         description: "Called when the replay action is triggered."
       }
@@ -76,4 +76,4 @@ export {
   media_controls_schema_default as default
 };
 
-//# debugId=93983EFF58B2255A64756E2164756E21
+//# debugId=AC5E126AB538C49E64756E2164756E21

package/dist/server/components/menu-bar/index.css

@@ -69,7 +69,7 @@
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg);
+    box-shadow: var(--cinder-shadow-overlay);
   }
 
   .cinder-dropdown__menu {
@@ -201,10 +201,16 @@
       position: fixed;
       inset: auto;
       top: calc(anchor(bottom)  + var(--cinder-space-1));
+      left: auto;
       right: anchor(right);
       position-try-fallbacks: flip-block, flip-inline;
     }
 
+    .cinder-dropdown-menu[popover][dir="rtl"] {
+      right: auto;
+      left: anchor(left);
+    }
+
     .cinder-dropdown__menu[popover] {
       position: fixed;
       margin: 0;
@@ -307,6 +313,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-menu-bar__trigger:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-menu-bar__access-key {
     text-decoration: underline;
     text-underline-offset: .125em;

package/dist/server/components/modal/index.js

@@ -322,6 +322,10 @@ function devWarn(message, ...args) {
 }
 
 // src/utilities/attachments.ts
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -329,17 +333,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -543,4 +549,4 @@ export {
   Modal
 };
 
-//# debugId=65FD53AC012334CA64756E2164756E21
+//# debugId=98338286CA3029FD64756E2164756E21

package/dist/server/components/navigation-bar/index.js

@@ -23,7 +23,7 @@ function Navigation_bar($$renderer, $$props) {
       actions,
       menuToggle,
       mobileMenuOpen = false,
-      navAriaLabel = "Main navigation",
+      label = "Main navigation",
       "aria-label": _ariaLabel,
       "data-collapsible": _dataCollapsible,
       "data-cinder-placement": _dataCinderPlacement,
@@ -104,7 +104,7 @@ function Navigation_bar($$renderer, $$props) {
     }
     $$renderer2.push(`<nav${$.attributes({
       ...rest,
-      "aria-label": navAriaLabel,
+      "aria-label": label,
       class: $.clsx(classNames("cinder-navigation-bar", className)),
       "data-collapsible": isCollapsible() ? "true" : "false",
       "data-cinder-placement": placement,
@@ -154,4 +154,4 @@ export {
   Navigation_bar as NavigationBar
 };
 
-//# debugId=EF33F6FFEA2A772B64756E2164756E21
+//# debugId=C88C4072A9B3055A64756E2164756E21

package/dist/server/components/navigation-bar/navigation-bar.schema.js

@@ -25,7 +25,7 @@ var schema = {
       type: "boolean",
       description: "Two-way bindable open state of the mobile menu."
     },
-    navAriaLabel: {
+    label: {
       type: "string",
       description: "Accessible name for the <nav> landmark. Wins over any aria-label passed via rest. Default 'Main navigation'."
     }
@@ -60,4 +60,4 @@ export {
   navigation_bar_schema_default as default
 };
 
-//# debugId=B9E5BCB080B90A6E64756E2164756E21
+//# debugId=507E87505DBA02E364756E2164756E21

package/dist/server/components/number-input/index.js

@@ -4,7 +4,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/number-input/number-input.svelte
 import * as $ from "svelte/internal/server";
-import { onMount, untrack } from "svelte";
+import { untrack } from "svelte";
 
 // src/_internal/field-control.ts
 function describeId(fieldId, hasDescription) {
@@ -65,6 +65,14 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/_internal/locale-context.ts
+import { createContext as createContext2 } from "svelte";
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
@@ -182,12 +190,14 @@ function Number_input($$renderer, $$props) {
       error,
       class: className,
       onchange,
+      onblur: consumerBlur,
       "aria-describedby": consumerDescribedBy,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getFormFieldContext();
+    const localeContext = getLocaleContext();
     let editorBuffer = "";
     let isFocused = false;
     let hasMounted = false;
@@ -199,10 +209,7 @@ function Number_input($$renderer, $$props) {
         value = defaultValue;
       }
     });
-    onMount(() => {
-      hasMounted = true;
-    });
-    const resolvedLocale = $.derived(() => locale ?? (hasMounted ? navigator.language : "en-US"));
+    const resolvedLocale = $.derived(() => locale ?? localeContext?.locale ?? (hasMounted ? navigator.language : "en-US"));
     const resolvedMin = $.derived(() => typeof min === "number" && Number.isFinite(min) ? min : -Infinity);
     const resolvedMax = $.derived(() => typeof max === "number" && Number.isFinite(max) ? max : Infinity);
     const isValidStep = (s) => typeof s === "number" && Number.isFinite(s) && s > 0;
@@ -296,16 +303,26 @@ function Number_input($$renderer, $$props) {
       }
       return formatNumber(v, resolvedLocale(), editFormat);
     }
+    function ariaValueNowFromText(text) {
+      const result = parseLocaleNumber(text, resolvedLocale(), format);
+      if (result.status !== "valid")
+        return;
+      return Number.isFinite(result.value) ? result.value : undefined;
+    }
+    const resolvedAriaValueNow = $.derived(() => isFocused ? ariaValueNowFromText(editorBuffer) : value === null || value === undefined ? undefined : format?.style === "percent" ? roundToPrecision(value * 100, 12) : value);
+    const resolvedAriaValueMin = $.derived(() => Number.isFinite(resolvedMin()) ? format?.style === "percent" ? roundToPrecision(resolvedMin() * 100, 12) : resolvedMin() : undefined);
+    const resolvedAriaValueMax = $.derived(() => Number.isFinite(resolvedMax()) ? format?.style === "percent" ? roundToPrecision(resolvedMax() * 100, 12) : resolvedMax() : undefined);
     function onFocus() {
       if (!malformedError) {
         editorBuffer = value === null || value === undefined ? "" : buildEditDisplay(value);
       }
       isFocused = true;
     }
-    function onBlur() {
+    function onBlur(event) {
       const buffered = editorBuffer;
       isFocused = false;
       commitFromText("typed", buffered);
+      consumerBlur?.(event);
     }
     function onInput(event) {
       editorBuffer = event.currentTarget.value;
@@ -384,16 +401,26 @@ function Number_input($$renderer, $$props) {
         }
       }
     }
-    const defaultDescriptionId = $.derived(() => describeId(id, !!description));
-    const defaultErrorId = $.derived(() => errorId(id, !!error));
-    const ownDescriptionId = $.derived(() => description && defaultDescriptionId() === context?.descriptionId ? `${id}-number-input-description` : defaultDescriptionId());
-    const ownErrorId = $.derived(() => error && defaultErrorId() === context?.errorId ? `${id}-number-input-error` : defaultErrorId());
-    const resolvedDescriptionId = $.derived(() => ownDescriptionId() ?? context?.descriptionId);
-    const resolvedErrorId = $.derived(() => ownErrorId() ?? context?.errorId);
     const internalErrorMessage = $.derived(() => !error && malformedError ? "Please enter a valid number." : !error && requiredEmptyError ? "Please enter a number." : null);
     const internalErrorId = $.derived(() => internalErrorMessage() ? `${id}-internal-error` : undefined);
-    const describedBy = $.derived(() => composeDescribedBy(resolvedDescriptionId(), resolvedErrorId(), internalErrorId(), consumerDescribedBy));
-    const resolvedAriaInvalid = $.derived(() => error || malformedError || requiredEmptyError ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
+    const internalInvalid = $.derived(() => malformedError || requiredEmptyError ? "true" : undefined);
+    const field = $.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "number-input",
+      consumerDescribedBy,
+      consumerInvalid: internalInvalid() ?? rest["aria-invalid"],
+      additionalDescribedBy: [internalErrorId()],
+      required,
+      disabled
+    }));
+    const ownDescriptionId = $.derived(() => field().ownDescriptionId);
+    const ownErrorId = $.derived(() => field().ownErrorId);
+    const describedBy = $.derived(() => field().describedBy);
+    const resolvedAriaInvalid = $.derived(() => field().ariaInvalid);
     const incrementDisabled = $.derived(() => resolvedDisabled() || value !== null && value !== undefined && value >= resolvedMax());
     const decrementDisabled = $.derived(() => resolvedDisabled() || value !== null && value !== undefined && value <= resolvedMin());
     const showHiddenInput = $.derived(() => typeof name === "string" && name.length > 0 && !resolvedDisabled());
@@ -401,13 +428,21 @@ function Number_input($$renderer, $$props) {
     $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-input-field", className)))}>`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)}</label>`);
+      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)} `);
+      if (resolvedRequired()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]--> <div class="cinder-number-input"${$.attr("data-disabled", resolvedDisabled() ? "" : undefined)}><input${$.attributes({
       id,
       type: "text",
+      role: "spinbutton",
       inputmode: "decimal",
       value: displayValue(),
       disabled: resolvedDisabled(),
@@ -415,8 +450,11 @@ function Number_input($$renderer, $$props) {
       class: "cinder-input cinder-number-input__input",
       ...rest,
       "aria-invalid": resolvedAriaInvalid(),
-      "aria-describedby": describedBy()
-    }, undefined, undefined, undefined, 4)}/> <button type="button" class="cinder-number-input__stepper cinder-number-input__stepper--increment"${$.attr("aria-label", `Increment${stepperLabelSuffix()}`)}${$.attr("disabled", incrementDisabled(), true)}><span aria-hidden="true">+</span></button> <button type="button" class="cinder-number-input__stepper cinder-number-input__stepper--decrement"${$.attr("aria-label", `Decrement${stepperLabelSuffix()}`)}${$.attr("disabled", decrementDisabled(), true)}><span aria-hidden="true">−</span></button></div> `);
+      "aria-describedby": describedBy(),
+      "aria-valuenow": resolvedAriaValueNow(),
+      "aria-valuemin": resolvedAriaValueMin(),
+      "aria-valuemax": resolvedAriaValueMax()
+    }, undefined, undefined, undefined, 4)}/> <button type="button" class="cinder-number-input__stepper cinder-number-input__stepper--increment"${$.attr("aria-label", `Increment${stepperLabelSuffix()}`)}${$.attr("disabled", incrementDisabled(), true)} tabindex="-1"><span aria-hidden="true">+</span></button> <button type="button" class="cinder-number-input__stepper cinder-number-input__stepper--decrement"${$.attr("aria-label", `Decrement${stepperLabelSuffix()}`)}${$.attr("disabled", decrementDisabled(), true)} tabindex="-1"><span aria-hidden="true">−</span></button></div> `);
     if (showHiddenInput()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<input type="hidden"${$.attr("name", name)}${$.attr("value", value === null || value === undefined ? "" : String(value))}/>`);
@@ -452,4 +490,4 @@ export {
   Number_input as NumberInput
 };
 
-//# debugId=3B16BFA02342A41164756E2164756E21
+//# debugId=788E3D2D0FDFDEE864756E2164756E21

package/dist/server/components/number-input/number-input.schema.js

@@ -55,7 +55,7 @@ var schema = {
     },
     locale: {
       type: "string",
-      description: "BCP 47 locale tag used for number formatting and parsing. Defaults to `navigator.language`."
+      description: "BCP 47 locale tag used for number formatting and parsing. Defaults to the\nnearest LocaleProvider locale, then `navigator.language` after mount and\n`en-US` during server rendering."
     },
     name: {
       type: "string",
@@ -84,7 +84,8 @@ var schema = {
       },
       {
         name: "format",
-        reason: "unknown-shape"
+        reason: "unknown-shape",
+        description: "Locale-aware formatting options passed to `Intl.NumberFormat`.\nSupports all `Intl.NumberFormatOptions` properties such as `style`\n(`'decimal'`, `'currency'`, `'percent'`, `'unit'`), `currency`,\n`minimumFractionDigits`, `maximumFractionDigits`, and `notation`.\nDefaults to locale-standard decimal formatting when omitted."
       },
       {
         name: "onchange",
@@ -98,4 +99,4 @@ export {
   number_input_schema_default as default
 };
 
-//# debugId=1F71A89B1548EC1164756E2164756E21
+//# debugId=BD3D10197574EF9964756E2164756E21