@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -48,13 +48,13 @@ var root_1 = $.from_html(`<a><!></a>`);
 var root_3 = $.from_html(`<button><!></button>`);
 function Floating_action_button($$anchor, $$props) {
   $.push($$props, true);
-  const variant = $.prop($$props, "variant", 3, "filled"), size = $.prop($$props, "size", 3, "md"), color = $.prop($$props, "color", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
+  const shape = $.prop($$props, "shape", 3, "filled"), size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "primary"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
-    "variant",
+    "shape",
     "size",
-    "color",
+    "variant",
     "disabled",
     "children",
     "class",
@@ -67,9 +67,9 @@ function Floating_action_button($$anchor, $$props) {
   const resolvedTabindex = $.derived(() => disabled() ? -1 : $$props.tabindex);
   const mergedClassName = $.derived(() => classNames("cinder-fab", $$props.class));
   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 $$props["aria-label"] === "string" && $$props["aria-label"].trim().length > 0 ? $$props["aria-label"] : undefined);
   const resolvedAriaLabelledBy = $.derived(() => typeof $$props["aria-labelledby"] === "string" && $$props["aria-labelledby"].trim().length > 0 ? $$props["aria-labelledby"] : undefined);
@@ -78,8 +78,8 @@ function Floating_action_button($$anchor, $$props) {
   $.user_effect(() => {
     const hasAriaLabel = $.get(resolvedAriaLabel) !== undefined;
     const hasAriaLabelledBy = $.get(resolvedAriaLabelledBy) !== undefined;
-    if (variant() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
-      devWarn("[cinder/FloatingActionButton] filled variant requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
+    if (shape() === "filled" && !hasAriaLabel && !hasAriaLabelledBy) {
+      devWarn("[cinder/FloatingActionButton] filled shape requires aria-label or aria-labelledby — the icon alone does not provide an accessible name.");
     }
     if (!hasAriaLabel && !hasAriaLabelledBy && !$$props.children) {
       devWarn("[cinder/FloatingActionButton] rendered without an accessible name — pass aria-label, aria-labelledby, or children.");
@@ -245,7 +245,7 @@ function Speed_dial_action($$anchor, $$props) {
   $2.template_effect(($0) => {
     $2.set_class(div, 1, $0);
     $2.set_attribute(div, "data-cinder-label-placement", labelPlacement());
-    $2.set_attribute(div, "data-cinder-open", context.isOpen ? "true" : "false");
+    $2.set_attribute(div, "data-cinder-open", context.isOpen ? "" : undefined);
     $2.set_attribute(div, "data-cinder-direction", context.direction);
   }, [
     () => $2.clsx(classNames("cinder-speed-dial-action", $$props.class))
@@ -261,4 +261,4 @@ export {
   Speed_dial_action as SpeedDialAction
 };
 
-//# debugId=5C0D01823A7C306164756E2164756E21
+//# debugId=9B60165EF532BCA064756E2164756E21

package/dist/components/stat/index.js

@@ -28,6 +28,27 @@ import"@lostgradient/cinder/stat/styles";
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+// 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(" ");
@@ -59,16 +80,17 @@ function Stat($$anchor, $$props) {
     "class",
     "id"
   ]);
+  const localeContext = getLocaleContext();
   const stableId = $.derived(() => $$props.id ?? generatedId);
   const labelId = $.derived(() => `${$.get(stableId)}-label`);
   const valueId = $.derived(() => `${$.get(stableId)}-value`);
-  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale, $$props.valueFormatOptions) : $$props.value);
+  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale ?? localeContext?.locale, $$props.valueFormatOptions) : $$props.value);
   const arrowGlyph = $.derived(() => $$props.change?.direction === "up" ? "↑" : $$props.change?.direction === "down" ? "↓" : "→");
   const changeAccessibleText = $.derived(() => {
     if (!$$props.change)
       return "";
-    if ($$props.change.ariaLabel)
-      return $$props.change.ariaLabel;
+    if ($$props.change.label)
+      return $$props.change.label;
     const suffix = $$props.change.description ? ` ${$$props.change.description}` : "";
     if ($$props.change.direction === "up")
       return `increased by ${$$props.change.value}${suffix}`;
@@ -164,4 +186,4 @@ export {
   Stat
 };
 
-//# debugId=331363176812821F64756E2164756E21
+//# debugId=469A1677152A4C2A64756E2164756E21

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

@@ -43,7 +43,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",
@@ -77,4 +77,4 @@ export {
   stat_schema_default as default
 };
 
-//# debugId=5CA7603F66755CE664756E2164756E21
+//# debugId=DFCB66134E7EF2EF64756E2164756E21

package/dist/components/stat/stat.types.d.ts

@@ -15,7 +15,7 @@ export type StatChange = {
      * When omitted, a phrase is synthesized from `direction` + `value` (+ optional `description`).
      * When provided, used verbatim — the caller owns the full wording.
      */
-    ariaLabel?: string;
+    label?: string;
 };
 export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Short label describing the metric, e.g. "Monthly Revenue". */
@@ -28,7 +28,7 @@ export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     icon?: Snippet;
     /** Intl.NumberFormat options applied only when `value` is a number. */
     valueFormatOptions?: Intl.NumberFormatOptions;
-    /** Locale forwarded to formatNumber (defaults to en-US). */
+    /** Locale forwarded to formatNumber. Defaults to the nearest LocaleProvider locale, then en-US. */
     valueLocale?: string;
     /** Additional class names merged with `.cinder-stat`. */
     class?: string;

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

@@ -28,6 +28,27 @@ import"@lostgradient/cinder/stat-group/styles";
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+// 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(" ");
@@ -59,16 +80,17 @@ function Stat($$anchor, $$props) {
     "class",
     "id"
   ]);
+  const localeContext = getLocaleContext();
   const stableId = $.derived(() => $$props.id ?? generatedId);
   const labelId = $.derived(() => `${$.get(stableId)}-label`);
   const valueId = $.derived(() => `${$.get(stableId)}-value`);
-  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale, $$props.valueFormatOptions) : $$props.value);
+  const displayValue = $.derived(() => typeof $$props.value === "number" ? formatNumber($$props.value, $$props.valueLocale ?? localeContext?.locale, $$props.valueFormatOptions) : $$props.value);
   const arrowGlyph = $.derived(() => $$props.change?.direction === "up" ? "↑" : $$props.change?.direction === "down" ? "↓" : "→");
   const changeAccessibleText = $.derived(() => {
     if (!$$props.change)
       return "";
-    if ($$props.change.ariaLabel)
-      return $$props.change.ariaLabel;
+    if ($$props.change.label)
+      return $$props.change.label;
     const suffix = $$props.change.description ? ` ${$$props.change.description}` : "";
     if ($$props.change.direction === "up")
       return `increased by ${$$props.change.value}${suffix}`;
@@ -206,4 +228,4 @@ export {
   StatGroup
 };
 
-//# debugId=598B9C4A4C6B33FB64756E2164756E21
+//# debugId=8126FE7BE20A317264756E2164756E21

package/dist/components/stat-group/stat-group.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/components/status-dot/index.d.ts

@@ -1,5 +1,5 @@
 import './status-dot.css';
 import StatusDot from './status-dot.svelte';
 export default StatusDot;
-export type { StatusDotProps, StatusDotSize, StatusDotStatus } from './status-dot.types.ts';
+export type { StatusDotConnectionState, StatusDotProps, StatusDotSize, StatusDotStatus, } from './status-dot.types.ts';
 export { StatusDot };

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

@@ -35,32 +35,54 @@ function classNames(...parts) {
 
 // src/components/status-dot/status-dot.svelte
 var root_1 = $.from_html(`<span class="cinder-status-dot__label"> </span>`);
-var root = $.from_html(`<span><span class="cinder-status-dot__indicator" aria-hidden="true"></span> <!></span>`);
+var root_2 = $.from_html(`<span class="cinder-sr-only"> </span>`);
+var root = $.from_html(`<span><span class="cinder-status-dot__indicator" aria-hidden="true"></span> <!> <!></span>`);
 function Status_dot($$anchor, $$props) {
   $.push($$props, true);
+  const connectionStatusMap = {
+    connected: "online",
+    connecting: "warning",
+    disconnected: "offline",
+    error: "danger"
+  };
+  const connectionLabels = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error"
+  };
   let showLabel = $.prop($$props, "showLabel", 3, true), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "status",
+    "connectionState",
     "label",
+    "live",
     "showLabel",
     "size",
     "class",
     "aria-label"
   ]);
   const normalizedAriaLabel = $.derived(() => $$props["aria-label"]?.trim() ? $$props["aria-label"].trim() : undefined);
-  const normalizedLabel = $.derived(() => $$props.label?.trim() ? $$props.label.trim() : undefined);
+  const resolvedStatus = $.derived(() => $$props.status ?? ($$props.connectionState === undefined ? "neutral" : connectionStatusMap[$$props.connectionState]));
+  const resolvedLive = $.derived(() => $$props.live ?? $$props.connectionState !== undefined);
+  const normalizedLabel = $.derived(() => $$props.label?.trim() ? $$props.label.trim() : $$props.connectionState === undefined ? undefined : connectionLabels[$$props.connectionState]);
   const hasVisibleLabel = $.derived(() => showLabel() && $.get(normalizedLabel) !== undefined);
-  const resolvedAriaLabel = $.derived(() => $.get(normalizedAriaLabel) ?? $.get(normalizedLabel) ?? $$props.status);
+  const resolvedAriaLabel = $.derived(() => $.get(normalizedAriaLabel) ?? $.get(normalizedLabel) ?? $.get(resolvedStatus));
+  const visibleLabelIsLiveDuplicate = $.derived(() => $.get(resolvedLive) && $.get(normalizedLabel) !== undefined && $.get(resolvedAriaLabel) !== $.get(normalizedLabel));
+  const needsHiddenLiveLabel = $.derived(() => $.get(resolvedLive) && (!$.get(hasVisibleLabel) || $.get(visibleLabelIsLiveDuplicate)));
   var span = root();
   $.attribute_effect(span, ($0) => ({
     ...rest,
     class: $0,
-    "data-cinder-status": $$props.status,
+    "data-cinder-status": $.get(resolvedStatus),
+    "data-cinder-state": $$props.connectionState,
     "data-cinder-size": size(),
-    role: "img",
-    "aria-label": $.get(resolvedAriaLabel)
+    role: $.get(resolvedLive) ? "status" : "img",
+    "aria-live": $.get(resolvedLive) ? "polite" : undefined,
+    "aria-atomic": $.get(resolvedLive) ? "true" : undefined,
+    "aria-label": $.get(resolvedLive) ? undefined : $.get(resolvedAriaLabel)
   }), [() => classNames("cinder-status-dot", $$props.class)]);
   var node = $.sibling($.child(span), 2);
   {
@@ -68,7 +90,10 @@ function Status_dot($$anchor, $$props) {
       var span_1 = root_1();
       var text = $.child(span_1, true);
       $.reset(span_1);
-      $.template_effect(() => $.set_text(text, $.get(normalizedLabel)));
+      $.template_effect(() => {
+        $.set_attribute(span_1, "aria-hidden", $.get(visibleLabelIsLiveDuplicate) ? "true" : undefined);
+        $.set_text(text, $.get(normalizedLabel));
+      });
       $.append($$anchor2, span_1);
     };
     $.if(node, ($$render) => {
@@ -76,6 +101,20 @@ function Status_dot($$anchor, $$props) {
         $$render(consequent);
     });
   }
+  var node_1 = $.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_2 = root_2();
+      var text_1 = $.child(span_2, true);
+      $.reset(span_2);
+      $.template_effect(() => $.set_text(text_1, $.get(resolvedAriaLabel)));
+      $.append($$anchor2, span_2);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(needsHiddenLiveLabel))
+        $$render(consequent_1);
+    });
+  }
   $.reset(span);
   $.append($$anchor, span);
   $.pop();
@@ -88,4 +127,4 @@ export {
   Status_dot as StatusDot
 };
 
-//# debugId=B24EF27BAC17B95164756E2164756E21
+//# debugId=3BAACF7B147DE0FF64756E2164756E21

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

@@ -24,6 +24,30 @@
     vertical-align: middle;
   }
 
+  .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;
     flex-shrink: 0;
@@ -66,7 +90,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);
   }
 
@@ -85,4 +109,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: 0.3;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-status-dot[data-cinder-state='connecting'] .cinder-status-dot__indicator {
+      animation: none;
+    }
+  }
 }

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

@@ -27,8 +27,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",
@@ -39,6 +43,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.",
@@ -49,12 +57,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=76A76A1EB62DA4C964756E2164756E21
+//# debugId=D443FDE756D8733E64756E2164756E21

package/dist/components/status-dot/status-dot.svelte.d.ts

@@ -2,11 +2,15 @@
  * @cinder
  * @category feedback
  * @status stable
- * @purpose Static role="img" badge that communicates an entity's state through a colored dot with an accessible text label.
+ * @purpose Colored dot indicator that communicates static entity state or live realtime connection state with an accessible text label.
+ * @tag connection
  * @tag feedback
+ * @tag realtime
  * @tag status
  * @useWhen Indicating the current state of a list row, user, deployment, or other entity alongside its name.
  * @useWhen Communicating status compactly when many indicators appear together without triggering live-region announcements.
+ * @useWhen Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
+ * @useWhen Giving operators an at-a-glance health signal for a long-lived transport.
  * @avoidWhen Counting items or showing a numeric value — use badge instead.
  * @avoidWhen Announcing a transient status change — use toast-region or alert so assistive tech reads it.
  * @related badge

package/dist/components/status-dot/status-dot.types.d.ts

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'svelte/elements';
  * The string values are stamped onto the root as `data-cinder-status` and
  * drive color exclusively via CSS — there are no hard-coded color classes
  * on the component. The token mapping (e.g. `online` → `--cinder-success`,
- * `error` → `--cinder-danger`) lives in `status-dot.css` so consumers can
+ * `danger` → `--cinder-danger`) lives in `status-dot.css` so consumers can
  * theme without forking the component.
  *
  * - `success` maps to `--cinder-success` (same hue as `online`).
@@ -14,8 +14,10 @@ import type { HTMLAttributes } from 'svelte/elements';
  * Exported so host components (e.g. `stacked-list-item.svelte`) can type
  * their own `status` prop against this union rather than restating it.
  */
-export type StatusDotStatus = 'online' | 'offline' | 'warning' | 'error' | 'pending' | 'neutral' | 'success' | 'accent';
+export type StatusDotStatus = 'online' | 'offline' | 'warning' | 'danger' | 'pending' | 'neutral' | 'success' | 'accent';
 export type StatusDotSize = 'sm' | 'md';
+/** Realtime connection states that StatusDot can render as a live-region preset. */
+export type StatusDotConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
 /**
  * Props for StatusDot.
  *
@@ -26,10 +28,14 @@ export type StatusDotSize = 'sm' | 'md';
  * fallback.
  */
 export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
-    /** Required semantic status. Drives color via `data-cinder-status`. */
-    status: StatusDotStatus;
+    /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. */
+    status?: StatusDotStatus;
+    /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+    connectionState?: StatusDotConnectionState;
     /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
     label?: string;
+    /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+    live?: boolean;
     /** Whether to render the visible label. Default `true`. */
     showLabel?: boolean;
     /** Dot size. Default `'md'`. */
@@ -38,12 +44,16 @@ export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
     class?: string;
 };
 export interface StatusDotSchemaProps {
-    /** Required semantic status. Drives color via `data-cinder-status`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
-    status: StatusDotStatus;
+    /** 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`. */
+    status?: StatusDotStatus;
+    /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+    connectionState?: StatusDotConnectionState;
     /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
     label?: string;
     /** Whether to render the visible label. @default true */
     showLabel?: boolean;
+    /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+    live?: boolean;
     /** Dot size. @default "md" */
     size?: StatusDotSize;
     /** Extra classes appended to the root element. */

package/dist/components/steps/steps.css

@@ -191,14 +191,14 @@
     /* Ring uses --cinder-ring-color: the bright fill-accent (L 0.72) is only
        ~1.8:1 against the white marker surface, so the current-step indicator
        would be near-invisible in light mode. */
-    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/components/table/index.js

@@ -107,7 +107,7 @@ function Table_cell($$anchor, $$props) {
 // src/components/table-header-cell/table-header-cell.svelte
 import"svelte/internal/disclose-version";
 import * as $3 from "svelte/internal/client";
-var root_1 = $3.from_html(`<button type="button" class="cinder-table__sort-button"><!> <span class="cinder-table__sort-indicator" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
+var root_1 = $3.from_html(`<button><!> <span class="cinder-table__sort-indicator" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
 var root2 = $3.from_html(`<th><!></th>`);
 function Table_header_cell($$anchor, $$props) {
   $3.push($$props, true);
@@ -125,10 +125,12 @@ function Table_header_cell($$anchor, $$props) {
   const table = getTableContext();
   const isSortable = $3.derived(() => sortable() && !!$$props.column);
   const ariaSort = $3.derived(() => $3.get(isSortable) && table.sort?.column === $$props.column ? table.sort?.direction : $3.get(isSortable) ? "none" : undefined);
+  const nextSortDescription = $3.derived(() => $3.get(ariaSort) === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+  const sortButtonDescriptionAttributes = $3.derived(() => ({ "aria-description": $3.get(nextSortDescription) }));
   function handleClick() {
     if (!sortable() || !$$props.column)
       return;
-    table.onSortChange($$props.column);
+    table.onsortchange($$props.column);
   }
   var th = root2();
   $3.attribute_effect(th, ($0) => ({
@@ -143,12 +145,17 @@ function Table_header_cell($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       var button = root_1();
+      $3.attribute_effect(button, () => ({
+        ...$3.get(sortButtonDescriptionAttributes),
+        type: "button",
+        class: "cinder-table__sort-button",
+        onclick: handleClick
+      }));
       var node_1 = $3.child(button);
       $3.snippet(node_1, () => $$props.children);
       var span = $3.sibling(node_1, 2);
       $3.reset(button);
       $3.template_effect(() => $3.set_attribute(span, "data-cinder-direction", $3.get(ariaSort)));
-      $3.delegated("click", button, handleClick);
       $3.append($$anchor2, button);
     };
     var alternate = ($$anchor2) => {
@@ -168,7 +175,6 @@ function Table_header_cell($$anchor, $$props) {
   $3.append($$anchor, th);
   $3.pop();
 }
-$3.delegate(["click"]);
 
 // src/components/table-header/table-header.svelte
 import"svelte/internal/disclose-version";
@@ -180,8 +186,8 @@ function Table_header($$anchor, $$props) {
   let selectAllLabel = $4.prop($$props, "selectAllLabel", 3, "Select all rows");
   const table = tryGetTableContext();
   const selectionEnabled = table?.selectionEnabled ?? false;
-  if (selectionEnabled && untrack(() => $$props.allSelected === undefined || $$props.someSelected === undefined || !$$props.onSelectAll)) {
-    throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+  if (selectionEnabled && untrack(() => $$props.allSelected === undefined || $$props.someSelected === undefined || !$$props.onselectall)) {
+    throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
   }
   let hasSelectionHeaderCell = false;
   function claimSelectionHeaderCell() {
@@ -198,8 +204,8 @@ function Table_header($$anchor, $$props) {
     get someSelected() {
       return $$props.someSelected ?? false;
     },
-    get onSelectAll() {
-      return $$props.onSelectAll ?? (() => {});
+    get onselectall() {
+      return $$props.onselectall ?? (() => {});
     },
     get selectAllLabel() {
       return selectAllLabel();
@@ -245,7 +251,7 @@ function Table_row($$anchor, $$props) {
     "class",
     "children",
     "selected",
-    "onSelectedChange",
+    "onselectedchange",
     "selectionLabel",
     "selectionDisabled"
   ]);
@@ -258,12 +264,12 @@ function Table_row($$anchor, $$props) {
       const hasDisabled = $$props.selectionDisabled === true;
       if (!hasDisabled) {
         const hasSelected = $$props.selected !== undefined;
-        const hasOnChange = $$props.onSelectedChange !== undefined;
+        const hasOnChange = $$props.onselectedchange !== undefined;
         const hasLabel = $$props.selectionLabel !== undefined;
         if (!hasSelected || !hasOnChange || !hasLabel) {
-          throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+          throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onselectedchange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
             !hasSelected && "selected",
-            !hasOnChange && "onSelectedChange",
+            !hasOnChange && "onselectedchange",
             !hasLabel && "selectionLabel"
           ].filter(Boolean).join(", ")}.`);
         }
@@ -275,11 +281,11 @@ function Table_row($$anchor, $$props) {
   }
   function handleSelectAllChange(event) {
     const input = event.currentTarget;
-    headerSelection?.onSelectAll(input.checked);
+    headerSelection?.onselectall(input.checked);
   }
   function handleRowChange(event) {
     const input = event.currentTarget;
-    $$props.onSelectedChange?.(input.checked);
+    $$props.onselectedchange?.(input.checked);
   }
   const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
   if (shouldRenderHeaderSelectionCell) {
@@ -421,7 +427,7 @@ function Table($$anchor, $$props) {
       return;
     $7.set(captionHeight, entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height, true);
   }, { box: "border-box", enabled: () => stickyHeader() });
-  function onSortChange(column) {
+  function onsortchange(column) {
     if (!sort() || sort().column !== column) {
       sort({ column, direction: "ascending" });
       return;
@@ -438,7 +444,7 @@ function Table($$anchor, $$props) {
     get selectionEnabled() {
       return selectable();
     },
-    onSortChange
+    onsortchange
   });
   var table = root5();
   $7.attribute_effect(table, ($0) => ({
@@ -487,4 +493,4 @@ export {
   Table2 as Table
 };
 
-//# debugId=970B84181FA35F4964756E2164756E21
+//# debugId=C4B8B4CEF2DC2B6C64756E2164756E21