@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/table/table.css

@@ -162,6 +162,16 @@
     z-index: 2;
   }
 
+  @media (forced-colors: active) {
+    .cinder-table__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 2px is correct here: sort-button has border:none so there is no
+         ButtonBorder to merge with at 2px. */
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-table__sort-button:hover {
       background: var(--cinder-surface-hover);

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

@@ -20,13 +20,13 @@ export type TableSectionContext = 'header' | 'body';
 export type TableHeaderSelectionContext = {
     readonly allSelected: boolean;
     readonly someSelected: boolean;
-    readonly onSelectAll: (next: boolean) => void;
+    readonly onselectall: (next: boolean) => void;
     readonly selectAllLabel: string;
     claimSelectionHeaderCell: () => void;
 };
 /**
  * Shape of the table context provided to child components. Header cells call
- * `onSortChange` with their column key when activated; the table propagates
+ * `onsortchange` with their column key when activated; the table propagates
  * the new sort state to its bindable `sort` prop. Children read
  * `selectionEnabled` to render the leading selection cell.
  *
@@ -36,7 +36,7 @@ export type TableHeaderSelectionContext = {
  */
 export type TableContext = {
     readonly sort: TableSort | undefined;
-    onSortChange: (column: string) => void;
+    onsortchange: (column: string) => void;
     /** Mirror of Table.selectable. Set synchronously at construction time. */
     readonly selectionEnabled?: boolean;
 };

package/dist/components/table-header/index.js

@@ -64,8 +64,8 @@ function Table_header($$anchor, $$props) {
   let selectAllLabel = $.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() {
@@ -82,8 +82,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();
@@ -108,4 +108,4 @@ export {
   Table_header as TableHeader
 };
 
-//# debugId=5C1033EE2356BA3F64756E2164756E21
+//# debugId=2FBC006E7F08061464756E2164756E21

package/dist/components/table-header/table-header.schema.js

@@ -36,7 +36,7 @@ var schema = {
     },
     someSelected: {
       type: "boolean",
-      description: 'When true and `allSelected` is false, the select-all checkbox renders as indeterminate.\nThe browser exposes that as `aria-checked="mixed"` to assistive tech.\nRequired (alongside `allSelected` and `onSelectAll`) when `Table.selectable`\nis true for accurate checkbox state.'
+      description: 'When true and `allSelected` is false, the select-all checkbox renders as indeterminate.\nThe browser exposes that as `aria-checked="mixed"` to assistive tech.\nRequired (alongside `allSelected` and `onselectall`) when `Table.selectable`\nis true for accurate checkbox state.'
     },
     selectAllLabel: {
       type: "string",
@@ -53,7 +53,7 @@ var schema = {
         description: "TableRow children — typically a single header row."
       },
       {
-        name: "onSelectAll",
+        name: "onselectall",
         reason: "function-or-snippet",
         description: "Called when the user activates the select-all checkbox. Required when `Table.selectable` is true."
       }
@@ -65,4 +65,4 @@ export {
   table_header_schema_default as default
 };
 
-//# debugId=484C77D335A117C764756E2164756E21
+//# debugId=8F7C915F64C3121464756E2164756E21

package/dist/components/table-header/table-header.types.d.ts

@@ -9,12 +9,12 @@ export type TableHeaderProps = {
     /**
      * When true and `allSelected` is false, the select-all checkbox renders as indeterminate.
      * The browser exposes that as `aria-checked="mixed"` to assistive tech.
-     * Required (alongside `allSelected` and `onSelectAll`) when `Table.selectable`
+     * Required (alongside `allSelected` and `onselectall`) when `Table.selectable`
      * is true for accurate checkbox state.
      */
     someSelected?: boolean;
     /** Called when the user activates the select-all checkbox. Required when `Table.selectable` is true. */
-    onSelectAll?: (next: boolean) => void;
+    onselectall?: (next: boolean) => void;
     /**
      * Accessible name for the select-all checkbox. Defaults to "Select all rows".
      * When the table contains rows with `selectionDisabled={true}`, pass a more

package/dist/components/table-header-cell/index.js

@@ -57,7 +57,7 @@ function classNames(...parts) {
 }
 
 // src/components/table-header-cell/table-header-cell.svelte
-var root_1 = $.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 = $.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 root = $.from_html(`<th><!></th>`);
 function Table_header_cell($$anchor, $$props) {
   $.push($$props, true);
@@ -75,10 +75,12 @@ function Table_header_cell($$anchor, $$props) {
   const table = getTableContext();
   const isSortable = $.derived(() => sortable() && !!$$props.column);
   const ariaSort = $.derived(() => $.get(isSortable) && table.sort?.column === $$props.column ? table.sort?.direction : $.get(isSortable) ? "none" : undefined);
+  const nextSortDescription = $.derived(() => $.get(ariaSort) === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+  const sortButtonDescriptionAttributes = $.derived(() => ({ "aria-description": $.get(nextSortDescription) }));
   function handleClick() {
     if (!sortable() || !$$props.column)
       return;
-    table.onSortChange($$props.column);
+    table.onsortchange($$props.column);
   }
   var th = root();
   $.attribute_effect(th, ($0) => ({
@@ -93,12 +95,17 @@ function Table_header_cell($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       var button = root_1();
+      $.attribute_effect(button, () => ({
+        ...$.get(sortButtonDescriptionAttributes),
+        type: "button",
+        class: "cinder-table__sort-button",
+        onclick: handleClick
+      }));
       var node_1 = $.child(button);
       $.snippet(node_1, () => $$props.children);
       var span = $.sibling(node_1, 2);
       $.reset(button);
       $.template_effect(() => $.set_attribute(span, "data-cinder-direction", $.get(ariaSort)));
-      $.delegated("click", button, handleClick);
       $.append($$anchor2, button);
     };
     var alternate = ($$anchor2) => {
@@ -118,7 +125,6 @@ function Table_header_cell($$anchor, $$props) {
   $.append($$anchor, th);
   $.pop();
 }
-$.delegate(["click"]);
 
 // src/components/table-header-cell/index.ts
 var table_header_cell_default = Table_header_cell;
@@ -127,4 +133,4 @@ export {
   Table_header_cell as TableHeaderCell
 };
 
-//# debugId=0D96D6FE3B9C76AF64756E2164756E21
+//# debugId=311EFEA83A1B7EFB64756E2164756E21

package/dist/components/table-row/index.js

@@ -80,7 +80,7 @@ function Table_row($$anchor, $$props) {
     "class",
     "children",
     "selected",
-    "onSelectedChange",
+    "onselectedchange",
     "selectionLabel",
     "selectionDisabled"
   ]);
@@ -93,12 +93,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(", ")}.`);
         }
@@ -110,11 +110,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) {
@@ -200,4 +200,4 @@ export {
   Table_row as TableRow
 };
 
-//# debugId=E1787551258CDD4964756E2164756E21
+//# debugId=0FC9B3381A6D24D764756E2164756E21

package/dist/components/table-row/table-row.schema.js

@@ -32,7 +32,7 @@ var schema = {
     },
     selected: {
       type: "boolean",
-      description: "Whether the row's selection checkbox is checked. Required in selectable tables alongside `onSelectedChange` and `selectionLabel`."
+      description: "Whether the row's selection checkbox is checked. Required in selectable tables alongside `onselectedchange` and `selectionLabel`."
     },
     selectionLabel: {
       type: "string",
@@ -56,7 +56,7 @@ the seam for non-English applications or custom phrasing.`
         description: "Cell children (TableCell or TableHeaderCell)."
       },
       {
-        name: "onSelectedChange",
+        name: "onselectedchange",
         reason: "function-or-snippet"
       }
     ]
@@ -67,4 +67,4 @@ export {
   table_row_schema_default as default
 };
 
-//# debugId=DBFFC4D8A86E7EF564756E2164756E21
+//# debugId=DF019E5492FE50CE64756E2164756E21

package/dist/components/table-row/table-row.types.d.ts

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 /**
  * Discriminated union for row selection props.
  *
- * - Active branch: supply `selected` + `onSelectedChange` + `selectionLabel`.
+ * - Active branch: supply `selected` + `onselectedchange` + `selectionLabel`.
  * - Opt-out branch: supply `selectionDisabled: true` — renders an empty alignment cell.
  * - Inert branch: supply nothing — only valid when `Table.selectable` is false or
  *   the row is inside `TableHeader`.
@@ -12,19 +12,19 @@ import type { HTMLAttributes } from 'svelte/elements';
  * object at destructuring time. TypeScript cannot narrow the active vs inert
  * branch after destructuring. Runtime validation enforces the contract when
  * `Table.selectable` is true — both `selected` and `selectionLabel` are
- * required together and `onSelectedChange` must be present.
+ * required together and `onselectedchange` must be present.
  */
 export type TableRowSelectionProps = {
-    /** Whether the row's selection checkbox is checked. Required in selectable tables alongside `onSelectedChange` and `selectionLabel`. */
+    /** Whether the row's selection checkbox is checked. Required in selectable tables alongside `onselectedchange` and `selectionLabel`. */
     selected: boolean;
-    onSelectedChange: (next: boolean) => void;
+    onselectedchange: (next: boolean) => void;
     selectionLabel: string;
     selectionDisabled?: false;
 } | {
     /** When true, renders a disabled selection checkbox for this row, preventing selection while keeping the alignment cell. */
     selectionDisabled: true;
     selected?: undefined;
-    onSelectedChange?: undefined;
+    onselectedchange?: undefined;
     /**
      * Accessible name for the disabled selection checkbox. Provide a localised
      * string to override the English default ("Selection not allowed for this
@@ -34,7 +34,7 @@ export type TableRowSelectionProps = {
     selectionLabel?: string;
 } | {
     selected?: undefined;
-    onSelectedChange?: undefined;
+    onselectedchange?: undefined;
     selectionLabel?: undefined;
     selectionDisabled?: undefined;
 };

package/dist/components/tabs/index.js

@@ -290,6 +290,13 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
   return findFirstIndex(length, isDisabled, 0);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/tabs/tabs.svelte
 var root3 = $4.from_html(`<div><!></div>`);
 function Tabs($$anchor, $$props) {
@@ -362,7 +369,9 @@ function Tabs($$anchor, $$props) {
       if (focusedValue === undefined)
         return;
       event.preventDefault();
-      value(focusedValue);
+      commitValue(focusedValue, $$props.onValueChange, (next) => {
+        value(next);
+      });
       return;
     }
     const isHorizontal = orientation() === "horizontal";
@@ -390,7 +399,9 @@ function Tabs($$anchor, $$props) {
       return;
     focusValue(nextValue);
     if ($4.get(effectiveActivateOnFocus)) {
-      value(nextValue);
+      commitValue(nextValue, $$props.onValueChange, (next) => {
+        value(next);
+      });
     }
   }
   setTabsContext({
@@ -407,7 +418,9 @@ function Tabs($$anchor, $$props) {
       return baseId;
     },
     select(next) {
-      value(next);
+      commitValue(next, $$props.onValueChange, (nextValue) => {
+        value(nextValue);
+      });
     },
     isActive(candidate) {
       return value() === candidate;
@@ -474,4 +487,4 @@ export {
   Tabs2 as Tabs
 };
 
-//# debugId=7A2B56FA66EDDB3864756E2164756E21
+//# debugId=2FF392C9D4A5C3C864756E2164756E21

package/dist/components/tabs/tabs.schema.js

@@ -53,6 +53,11 @@ var schema = {
         reason: "function-or-snippet",
         required: true,
         description: "Tab and TabPanel children."
+      },
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed tab value before the bindable value is written. Return a replacement value to transform it."
       }
     ]
   }
@@ -62,4 +67,4 @@ export {
   tabs_schema_default as default
 };
 
-//# debugId=7E3552F9AEC9758C64756E2164756E21
+//# debugId=F4B0380269105D2A64756E2164756E21

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

@@ -58,6 +58,8 @@ export type TabsContext = {
 export type TabsProps = {
     /** Bound active tab value. */
     value?: string;
+    /** Intercept a proposed tab value before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: string) => string | void;
     /** Layout orientation. Affects which arrow keys move between tabs. */
     orientation?: TabsOrientation;
     /**

package/dist/components/tag-input/index.d.ts

@@ -1,3 +1,5 @@
 import './tag-input.css';
-export { default as TagInput, default } from './tag-input.svelte';
+import TagInput from './tag-input.svelte';
+export default TagInput;
 export type { TagInputProps } from './tag-input.types.ts';
+export { TagInput };