@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/spectrum-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/spectrum-chart/spectrum-chart.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -662,10 +662,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/spectrum-chart/spectrum-chart.svelte
 function Spectrum_chart($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const generatedId = $.props_id($$renderer2);
+    const generatedId = $2.props_id($$renderer2);
     let {
       label,
       description,
@@ -682,21 +701,25 @@ function Spectrum_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 = 8;
     const marginRight = 8;
     const marginBottom = 32;
     const marginLeft = 40;
     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 isEmpty = $.derived(() => bins.length === 0);
+    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 isEmpty = $2.derived(() => bins.length === 0);
     function sanitizeMagnitude(value) {
       return Number.isFinite(value) && value > 0 ? value : 0;
     }
-    const maxValue = $.derived(() => {
+    const maxValue = $2.derived(() => {
       let max = 0;
       for (const bin of bins) {
         const magnitude = sanitizeMagnitude(bin.value);
@@ -706,7 +729,7 @@ function Spectrum_chart($$renderer, $$props) {
       return max;
     });
     const tickCount = 5;
-    const yTicks = $.derived(() => {
+    const yTicks = $2.derived(() => {
       if (maxValue() <= 0)
         return [0];
       return Array.from({ length: tickCount }, (_, index) => maxValue() * index / (tickCount - 1));
@@ -716,8 +739,8 @@ function Spectrum_chart($$renderer, $$props) {
         return plotHeight();
       return plotHeight() - value / maxValue() * plotHeight();
     }
-    const barWidth = $.derived(() => bins.length > 0 ? plotWidth() / bins.length : 0);
-    const spectrumBars = $.derived(() => {
+    const barWidth = $2.derived(() => bins.length > 0 ? plotWidth() / bins.length : 0);
+    const spectrumBars = $2.derived(() => {
       return bins.map((bin, index) => {
         const magnitude = sanitizeMagnitude(bin.value);
         const barHeight = maxValue() > 0 ? magnitude / maxValue() * plotHeight() : 0;
@@ -732,22 +755,22 @@ function Spectrum_chart($$renderer, $$props) {
       });
     });
     const maxXLabels = 8;
-    const xLabelStep = $.derived(() => Math.max(1, Math.ceil(bins.length / maxXLabels)));
-    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
-    $$renderer2.push(`<figure${$.attributes({
+    const xLabelStep = $2.derived(() => Math.max(1, Math.ceil(bins.length / maxXLabels)));
+    const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
+    $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
-      class: $.clsx(classNames("cinder-spectrum-chart", customClassName)),
+      class: $2.clsx(classNames("cinder-spectrum-chart", customClassName)),
       "aria-label": label,
       "aria-describedby": descriptionId()
     })}>`);
     if (description) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-spectrum-chart__description">${$.escape(description)}</p>`);
+      $$renderer2.push(`<p${$2.attr("id", descriptionId())} class="cinder-spectrum-chart__description">${$2.escape(description)}</p>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <div class="cinder-spectrum-chart__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    $$renderer2.push(`<!--]--> <div class="cinder-spectrum-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-spectrum-chart__state">`);
@@ -775,35 +798,35 @@ function Spectrum_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${$.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
-      const each_array = $.ensure_array_like(yTicks());
+      $$renderer2.push(`<g${$2.attr("transform", `translate(${marginLeft}, ${marginTop})`)}><!--[-->`);
+      const each_array = $2.ensure_array_like(yTicks());
       for (let index = 0, $$length = each_array.length;index < $$length; index++) {
         let tick = each_array[index];
-        $$renderer2.push(`<text class="cinder-spectrum-chart__tick-label"${$.attr("x", -6)}${$.attr("y", scaleY(tick))} text-anchor="end" dominant-baseline="middle">${$.escape(formatNumericValue(tick, undefined, undefined, { index }))}</text><line class="cinder-spectrum-chart__grid-line" x1="0"${$.attr("x2", plotWidth())}${$.attr("y1", scaleY(tick))}${$.attr("y2", scaleY(tick))} aria-hidden="true"></line>`);
+        $$renderer2.push(`<text class="cinder-spectrum-chart__tick-label"${$2.attr("x", -6)}${$2.attr("y", scaleY(tick))} text-anchor="end" dominant-baseline="middle">${$2.escape(formatNumericValue(tick, undefined, undefined, { index }))}</text><line class="cinder-spectrum-chart__grid-line" x1="0"${$2.attr("x2", plotWidth())}${$2.attr("y1", scaleY(tick))}${$2.attr("y2", scaleY(tick))} aria-hidden="true"></line>`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_1 = $.ensure_array_like(spectrumBars());
+      const each_array_1 = $2.ensure_array_like(spectrumBars());
       for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
         let bar = each_array_1[index];
-        $$renderer2.push(`<rect class="cinder-spectrum-chart__bar"${$.attr("x", bar.x)}${$.attr("y", bar.y)}${$.attr("width", bar.barWidth)}${$.attr("height", bar.barHeight)} aria-hidden="true"${$.attr("data-cinder-bin", bar.label)}></rect>`);
+        $$renderer2.push(`<rect class="cinder-spectrum-chart__bar"${$2.attr("x", bar.x)}${$2.attr("y", bar.y)}${$2.attr("width", bar.barWidth)}${$2.attr("height", bar.barHeight)} aria-hidden="true"${$2.attr("data-cinder-bin", bar.label)}></rect>`);
       }
       $$renderer2.push(`<!--]--><!--[-->`);
-      const each_array_2 = $.ensure_array_like(spectrumBars());
+      const each_array_2 = $2.ensure_array_like(spectrumBars());
       for (let index = 0, $$length = each_array_2.length;index < $$length; index++) {
         let bar = each_array_2[index];
         if (index % xLabelStep() === 0) {
           $$renderer2.push("<!--[0-->");
-          $$renderer2.push(`<text class="cinder-spectrum-chart__tick-label"${$.attr("x", bar.x + bar.barWidth / 2)}${$.attr("y", plotHeight() + 16)} text-anchor="middle" dominant-baseline="auto">${$.escape(bar.label)}</text>`);
+          $$renderer2.push(`<text class="cinder-spectrum-chart__tick-label"${$2.attr("x", bar.x + bar.barWidth / 2)}${$2.attr("y", plotHeight() + 16)} text-anchor="middle" dominant-baseline="auto">${$2.escape(bar.label)}</text>`);
         } else {
           $$renderer2.push("<!--[-1-->");
         }
@@ -816,11 +839,11 @@ function Spectrum_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">Frequency</th><th scope="col">Magnitude</th></tr></thead><tbody><!--[-->`);
-      const each_array_3 = $.ensure_array_like(spectrumBars());
+      $$renderer2.push(`<table${$2.attr_class($2.clsx(dataTableClass(dataTableVisibility)))}><caption>${$2.escape(dataTableCaption ?? label)}</caption><thead><tr><th scope="col">Frequency</th><th scope="col">Magnitude</th></tr></thead><tbody><!--[-->`);
+      const each_array_3 = $2.ensure_array_like(spectrumBars());
       for (let index = 0, $$length = each_array_3.length;index < $$length; index++) {
         let bar = each_array_3[index];
-        $$renderer2.push(`<tr><td>${$.escape(bar.label)}</td><td>${$.escape(formatNumericValue(bar.value, undefined, undefined, { index }))}</td></tr>`);
+        $$renderer2.push(`<tr><td>${$2.escape(bar.label)}</td><td>${$2.escape(formatNumericValue(bar.value, undefined, undefined, { index }))}</td></tr>`);
       }
       $$renderer2.push(`<!--]--></tbody></table>`);
     } else {
@@ -837,4 +860,4 @@ export {
   Spectrum_chart as SpectrumChart
 };
 
-//# debugId=7468917917643DD864756E2164756E21
+//# debugId=2FB146BBE882719E64756E2164756E21

package/dist/server/components/speed-dial/index.css

@@ -49,7 +49,7 @@
     transform: translateY(-50%);
   }
 
-  .cinder-speed-dial[data-cinder-open="true"] .cinder-speed-dial__actions {
+  .cinder-speed-dial[data-cinder-open] .cinder-speed-dial__actions {
     pointer-events: auto;
   }
 
@@ -62,7 +62,7 @@
     transform: scale(.86);
   }
 
-  .cinder-speed-dial[data-cinder-open="true"] .cinder-speed-dial-action {
+  .cinder-speed-dial[data-cinder-open] .cinder-speed-dial-action {
     opacity: 1;
     transform: none;
   }
@@ -99,7 +99,7 @@
     max-inline-size: 12rem;
   }
 
-  .cinder-speed-dial[data-cinder-open="false"] .cinder-speed-dial-action {
+  .cinder-speed-dial:not([data-cinder-open]) .cinder-speed-dial-action {
     pointer-events: none;
   }
 

package/dist/server/components/speed-dial/index.js

@@ -28,9 +28,9 @@ function devWarn(message, ...args) {
 function Floating_action_button($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const {
-      variant = "filled",
+      shape = "filled",
       size = "md",
-      color = "primary",
+      variant = "primary",
       disabled = false,
       children,
       class: customClassName,
@@ -46,9 +46,9 @@ function Floating_action_button($$renderer, $$props) {
     const resolvedTabindex = $.derived(() => disabled ? -1 : tabindex);
     const mergedClassName = $.derived(() => classNames("cinder-fab", customClassName));
     const dataAttributes = $.derived(() => ({
-      "data-cinder-variant": variant,
+      "data-cinder-shape": shape,
       "data-cinder-size": size,
-      "data-cinder-color": color
+      "data-cinder-variant": variant
     }));
     const resolvedAriaLabel = $.derived(() => typeof ariaLabel === "string" && ariaLabel.trim().length > 0 ? ariaLabel : undefined);
     const resolvedAriaLabelledBy = $.derived(() => typeof ariaLabelledBy === "string" && ariaLabelledBy.trim().length > 0 ? ariaLabelledBy : undefined);
@@ -134,7 +134,7 @@ function Speed_dial_action($$renderer, $$props) {
       onclick?.(event);
       context.close({ focusTrigger: true });
     }
-    $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-speed-dial-action", customClassName)))}${$2.attr("data-cinder-label-placement", labelPlacement)}${$2.attr("data-cinder-open", context.isOpen ? "true" : "false")}${$2.attr("data-cinder-direction", context.direction)}>`);
+    $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-speed-dial-action", customClassName)))}${$2.attr("data-cinder-label-placement", labelPlacement)}${$2.attr("data-cinder-open", context.isOpen ? "" : undefined)}${$2.attr("data-cinder-direction", context.direction)}>`);
     Floating_action_button($$renderer2, $2.spread_props([
       rest,
       {
@@ -355,10 +355,10 @@ function Speed_dial($$renderer, $$props) {
       "aria-hidden": hidden ? "true" : undefined,
       inert: hidden ? true : undefined,
       class: $3.clsx(classNames("cinder-speed-dial", customClassName)),
-      "data-cinder-open": open ? "true" : "false",
+      "data-cinder-open": open ? "" : undefined,
       "data-cinder-direction": direction,
       "data-cinder-hidden": hidden ? "true" : undefined
-    })}><div${$3.attr("id", actionsId)} role="toolbar" aria-label="Actions"${$3.attr("aria-orientation", orientation())} class="cinder-speed-dial__actions"${$3.attr("data-cinder-open", open ? "true" : "false")}${$3.attr("inert", !open ? true : undefined, true)} tabindex="-1">`);
+    })}><div${$3.attr("id", actionsId)} role="toolbar" aria-label="Actions"${$3.attr("aria-orientation", orientation())} class="cinder-speed-dial__actions"${$3.attr("data-cinder-open", open ? "" : undefined)}${$3.attr("inert", !open ? true : undefined, true)} tabindex="-1">`);
     children?.($$renderer2);
     $$renderer2.push(`<!----></div> <div class="cinder-speed-dial__trigger">`);
     Floating_action_button($$renderer2, {
@@ -390,4 +390,4 @@ export {
   SpeedDial
 };
 
-//# debugId=4179406F57F7758A64756E2164756E21
+//# debugId=11B8BDD456ACCAAE64756E2164756E21

package/dist/server/components/speed-dial-action/index.js

@@ -28,9 +28,9 @@ function devWarn(message, ...args) {
 function Floating_action_button($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const {
-      variant = "filled",
+      shape = "filled",
       size = "md",
-      color = "primary",
+      variant = "primary",
       disabled = false,
       children,
       class: customClassName,
@@ -46,9 +46,9 @@ function Floating_action_button($$renderer, $$props) {
     const resolvedTabindex = $.derived(() => disabled ? -1 : tabindex);
     const mergedClassName = $.derived(() => classNames("cinder-fab", customClassName));
     const dataAttributes = $.derived(() => ({
-      "data-cinder-variant": variant,
+      "data-cinder-shape": shape,
       "data-cinder-size": size,
-      "data-cinder-color": color
+      "data-cinder-variant": variant
     }));
     const resolvedAriaLabel = $.derived(() => typeof ariaLabel === "string" && ariaLabel.trim().length > 0 ? ariaLabel : undefined);
     const resolvedAriaLabelledBy = $.derived(() => typeof ariaLabelledBy === "string" && ariaLabelledBy.trim().length > 0 ? ariaLabelledBy : undefined);
@@ -134,7 +134,7 @@ function Speed_dial_action($$renderer, $$props) {
       onclick?.(event);
       context.close({ focusTrigger: true });
     }
-    $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-speed-dial-action", customClassName)))}${$2.attr("data-cinder-label-placement", labelPlacement)}${$2.attr("data-cinder-open", context.isOpen ? "true" : "false")}${$2.attr("data-cinder-direction", context.direction)}>`);
+    $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-speed-dial-action", customClassName)))}${$2.attr("data-cinder-label-placement", labelPlacement)}${$2.attr("data-cinder-open", context.isOpen ? "" : undefined)}${$2.attr("data-cinder-direction", context.direction)}>`);
     Floating_action_button($$renderer2, $2.spread_props([
       rest,
       {
@@ -168,4 +168,4 @@ export {
   Speed_dial_action as SpeedDialAction
 };
 
-//# debugId=D83E78C64AF9BBB064756E2164756E21
+//# debugId=364CBD69B08698F964756E2164756E21

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

@@ -5,6 +5,27 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 // src/components/stat/stat.svelte
 import * as $ from "svelte/internal/server";
 
+// src/_internal/locale-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext();
+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(" ");
@@ -32,16 +53,17 @@ function Stat($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
+    const localeContext = getLocaleContext();
     const stableId = $.derived(() => id ?? generatedId);
     const labelId = $.derived(() => `${stableId()}-label`);
     const valueId = $.derived(() => `${stableId()}-value`);
-    const displayValue = $.derived(() => typeof value === "number" ? formatNumber(value, valueLocale, valueFormatOptions) : value);
+    const displayValue = $.derived(() => typeof value === "number" ? formatNumber(value, valueLocale ?? localeContext?.locale, valueFormatOptions) : value);
     const arrowGlyph = $.derived(() => change?.direction === "up" ? "↑" : change?.direction === "down" ? "↓" : "→");
     const changeAccessibleText = $.derived(() => {
       if (!change)
         return "";
-      if (change.ariaLabel)
-        return change.ariaLabel;
+      if (change.label)
+        return change.label;
       const suffix = change.description ? ` ${change.description}` : "";
       if (change.direction === "up")
         return `increased by ${change.value}${suffix}`;
@@ -90,4 +112,4 @@ export {
   Stat
 };
 
-//# debugId=734B993F0E47C8DD64756E2164756E21
+//# debugId=BB93102EA99CF98964756E2164756E21

package/dist/server/components/stat/stat.schema.js

@@ -24,7 +24,7 @@ var schema = {
     },
     valueLocale: {
       type: "string",
-      description: "Locale forwarded to formatNumber (defaults to en-US)."
+      description: "Locale forwarded to formatNumber. Defaults to the nearest LocaleProvider locale, then en-US."
     },
     class: {
       type: "string",
@@ -58,4 +58,4 @@ export {
   stat_schema_default as default
 };
 
-//# debugId=EDFDBC0FF5B93D6864756E2164756E21
+//# debugId=F880DCC6AF265C7064756E2164756E21

package/dist/server/components/stat-group/index.css

@@ -10,7 +10,7 @@
   }
 
   .cinder-stat-group[data-cinder-columns="auto"] {
-    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
   }
 
   .cinder-stat-group[data-cinder-columns="1"] {

package/dist/server/components/stat-group/index.js

@@ -5,6 +5,27 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 // src/components/stat/stat.svelte
 import * as $ from "svelte/internal/server";
 
+// src/_internal/locale-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext();
+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(" ");
@@ -32,16 +53,17 @@ function Stat($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
+    const localeContext = getLocaleContext();
     const stableId = $.derived(() => id ?? generatedId);
     const labelId = $.derived(() => `${stableId()}-label`);
     const valueId = $.derived(() => `${stableId()}-value`);
-    const displayValue = $.derived(() => typeof value === "number" ? formatNumber(value, valueLocale, valueFormatOptions) : value);
+    const displayValue = $.derived(() => typeof value === "number" ? formatNumber(value, valueLocale ?? localeContext?.locale, valueFormatOptions) : value);
     const arrowGlyph = $.derived(() => change?.direction === "up" ? "↑" : change?.direction === "down" ? "↓" : "→");
     const changeAccessibleText = $.derived(() => {
       if (!change)
         return "";
-      if (change.ariaLabel)
-        return change.ariaLabel;
+      if (change.label)
+        return change.label;
       const suffix = change.description ? ` ${change.description}` : "";
       if (change.direction === "up")
         return `increased by ${change.value}${suffix}`;
@@ -124,4 +146,4 @@ export {
   StatGroup
 };
 
-//# debugId=E6067F7A6F75EE9564756E2164756E21
+//# debugId=B8D03ADF13402CBC64756E2164756E21

package/dist/server/components/status-dot/index.css

@@ -14,6 +14,30 @@
     line-height: 1.25;
   }
 
+  .cinder-status-dot[data-cinder-state] {
+    padding: var(--cinder-space-0-5) var(--cinder-space-2);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    border-radius: var(--cinder-radius-full);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-status-dot[data-cinder-state="connected"] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-status-dot[data-cinder-state="connecting"] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-status-dot[data-cinder-state="disconnected"] {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-status-dot[data-cinder-state="error"] {
+    color: var(--cinder-danger);
+  }
+
   .cinder-status-dot__indicator {
     display: inline-block;
     inline-size: var(--cinder-status-dot-size);
@@ -48,7 +72,7 @@
     --cinder-status-dot-color: var(--cinder-warning);
   }
 
-  .cinder-status-dot[data-cinder-status="error"] {
+  .cinder-status-dot[data-cinder-status="danger"] {
     --cinder-status-dot-color: var(--cinder-danger);
   }
 
@@ -67,4 +91,24 @@
   .cinder-status-dot[data-cinder-status="accent"] {
     --cinder-status-dot-color: var(--cinder-accent);
   }
+
+  .cinder-status-dot[data-cinder-state="connecting"] .cinder-status-dot__indicator {
+    animation: cinder-status-dot-pulse 1.4s ease-in-out infinite;
+  }
+
+  @keyframes cinder-status-dot-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: .3;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-status-dot[data-cinder-state="connecting"] .cinder-status-dot__indicator {
+      animation: none;
+    }
+  }
 }

package/dist/server/components/status-dot/index.js

@@ -13,9 +13,23 @@ function classNames(...parts) {
 // src/components/status-dot/status-dot.svelte
 function Status_dot($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const connectionStatusMap = {
+      connected: "online",
+      connecting: "warning",
+      disconnected: "offline",
+      error: "danger"
+    };
+    const connectionLabels = {
+      connected: "Connected",
+      connecting: "Connecting",
+      disconnected: "Disconnected",
+      error: "Error"
+    };
     let {
       status,
+      connectionState,
       label,
+      live,
       showLabel = true,
       size = "md",
       class: className,
@@ -25,20 +39,34 @@ function Status_dot($$renderer, $$props) {
       ...rest
     } = $$props;
     const normalizedAriaLabel = $.derived(() => ariaLabel?.trim() ? ariaLabel.trim() : undefined);
-    const normalizedLabel = $.derived(() => label?.trim() ? label.trim() : undefined);
+    const resolvedStatus = $.derived(() => status ?? (connectionState === undefined ? "neutral" : connectionStatusMap[connectionState]));
+    const resolvedLive = $.derived(() => live ?? connectionState !== undefined);
+    const normalizedLabel = $.derived(() => label?.trim() ? label.trim() : connectionState === undefined ? undefined : connectionLabels[connectionState]);
     const hasVisibleLabel = $.derived(() => showLabel && normalizedLabel() !== undefined);
-    const resolvedAriaLabel = $.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? status);
+    const resolvedAriaLabel = $.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? resolvedStatus());
+    const visibleLabelIsLiveDuplicate = $.derived(() => resolvedLive() && normalizedLabel() !== undefined && resolvedAriaLabel() !== normalizedLabel());
+    const needsHiddenLiveLabel = $.derived(() => resolvedLive() && (!hasVisibleLabel() || visibleLabelIsLiveDuplicate()));
     $$renderer2.push(`<span${$.attributes({
       ...rest,
       class: $.clsx(classNames("cinder-status-dot", className)),
-      "data-cinder-status": status,
+      "data-cinder-status": resolvedStatus(),
+      "data-cinder-state": connectionState,
       "data-cinder-size": size,
-      role: "img",
-      "aria-label": resolvedAriaLabel()
+      role: resolvedLive() ? "status" : "img",
+      "aria-live": resolvedLive() ? "polite" : undefined,
+      "aria-atomic": resolvedLive() ? "true" : undefined,
+      "aria-label": resolvedLive() ? undefined : resolvedAriaLabel()
     })}><span class="cinder-status-dot__indicator" aria-hidden="true"></span> `);
     if (hasVisibleLabel()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<span class="cinder-status-dot__label">${$.escape(normalizedLabel())}</span>`);
+      $$renderer2.push(`<span class="cinder-status-dot__label"${$.attr("aria-hidden", visibleLabelIsLiveDuplicate() ? "true" : undefined)}>${$.escape(normalizedLabel())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (needsHiddenLiveLabel()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-sr-only">${$.escape(resolvedAriaLabel())}</span>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -53,4 +81,4 @@ export {
   Status_dot as StatusDot
 };
 
-//# debugId=D99ABF79E0E1548264756E2164756E21
+//# debugId=F7C51E1A72472F6264756E2164756E21

package/dist/server/components/status-dot/status-dot.schema.js

@@ -8,8 +8,12 @@ var schema = {
   type: "object",
   properties: {
     status: {
-      enum: ["online", "offline", "warning", "error", "pending", "neutral", "success", "accent"],
-      description: "Required semantic status. Drives color via `data-cinder-status`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`."
+      enum: ["online", "offline", "warning", "danger", "pending", "neutral", "success", "accent"],
+      description: "Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`."
+    },
+    connectionState: {
+      enum: ["connected", "connecting", "disconnected", "error"],
+      description: "Realtime connection preset. Sets status, default label, and live-region semantics."
     },
     label: {
       type: "string",
@@ -20,6 +24,10 @@ var schema = {
       description: "Whether to render the visible label.",
       default: true
     },
+    live: {
+      type: "boolean",
+      description: 'Use role="status" with polite live-region attributes. Defaults true when connectionState is provided.'
+    },
     size: {
       enum: ["sm", "md"],
       description: "Dot size.",
@@ -30,12 +38,11 @@ var schema = {
       description: "Extra classes appended to the root element."
     }
   },
-  additionalProperties: false,
-  required: ["status"]
+  additionalProperties: false
 };
 var status_dot_schema_default = schema;
 export {
   status_dot_schema_default as default
 };
 
-//# debugId=962FDBF5558FDB9764756E2164756E21
+//# debugId=2707A12BA2B6400B64756E2164756E21

package/dist/server/components/steps/index.css

@@ -110,14 +110,14 @@
 
   [data-cinder-state="current"] .cinder-steps__marker {
     background: var(--cinder-surface);
-    box-shadow: 0 0 0 2px var(--cinder-ring-color);
+    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
     color: var(--cinder-accent-text);
   }
 
   @media (forced-colors: active) {
     [data-cinder-state="current"] .cinder-steps__marker {
-      outline: 2px solid buttontext;
-      outline-offset: 2px;
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: var(--cinder-ring-width);
       box-shadow: none;
     }
   }

package/dist/server/components/table/index.css

@@ -125,6 +125,14 @@
     z-index: 2;
   }
 
+  @media (forced-colors: active) {
+    .cinder-table__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-table__sort-button:hover {
       background: var(--cinder-surface-hover);