@lostgradient/cinder 0.3.0 → 0.4.0

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/textarea/index.js

@@ -108,10 +108,11 @@ function resolveMaximumLength(value) {
 }
 
 // src/components/textarea/textarea.svelte
-var root_1 = $.from_html(`<label class="cinder-textarea-label"> </label>`);
-var root_2 = $.from_html(`<p class="cinder-textarea-description"> </p>`);
-var root_3 = $.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
-var root_4 = $.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<label class="cinder-textarea-label"> <!></label>`);
+var root_3 = $.from_html(`<p class="cinder-textarea-description"> </p>`);
+var root_4 = $.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
+var root_5 = $.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
 var root = $.from_html(`<div class="cinder-textarea-field"><!> <textarea></textarea> <!> <!> <!></div>`);
 function Textarea($$anchor, $$props) {
   $.push($$props, true);
@@ -154,19 +155,31 @@ function Textarea($$anchor, $$props) {
   var div = root();
   var node = $.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_1();
-      var text = $.child(label_1, true);
+      var text = $.child(label_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(field).required)
+            $$render(consequent);
+        });
+      }
       $.reset(label_1);
       $.template_effect(() => {
         $.set_attribute(label_1, "for", $$props.id);
-        $.set_text(text, $$props.label);
+        $.set_attribute(label_1, "data-disabled", $.get(field).disabled || undefined);
+        $.set_text(text, `${$$props.label ?? ""} `);
       });
       $.append($$anchor2, label_1);
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var textarea = $.sibling(node, 2);
@@ -184,10 +197,10 @@ function Textarea($$anchor, $$props) {
   }), [
     () => classNames("cinder-_input-frame", "cinder-textarea", $$props.class)
   ]);
-  var node_1 = $.sibling(textarea, 2);
+  var node_2 = $.sibling(textarea, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_2();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_3();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -196,15 +209,15 @@ function Textarea($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_2 = $.sibling(node_1, 2);
+  var node_3 = $.sibling(node_2, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var output = root_3();
+    var consequent_3 = ($$anchor2) => {
+      var output = root_4();
       var text_2 = $.child(output);
       $.reset(output);
       $.template_effect(() => {
@@ -214,15 +227,15 @@ function Textarea($$anchor, $$props) {
       });
       $.append($$anchor2, output);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($.get(countId))
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var node_3 = $.sibling(node_2, 2);
+  var node_4 = $.sibling(node_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var p_1 = root_4();
+    var consequent_4 = ($$anchor2) => {
+      var p_1 = root_5();
       var text_3 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -231,9 +244,9 @@ function Textarea($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_3, ($$render) => {
+    $.if(node_4, ($$render) => {
       if ($$props.error)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
   $.reset(div);
@@ -249,4 +262,4 @@ export {
   Textarea
 };
 
-//# debugId=403419D03851A13364756E2164756E21
+//# debugId=6C438CB1B660F07264756E2164756E21

package/dist/components/textarea/textarea.css

@@ -21,13 +21,20 @@
  * ---------------------------------------- */
 
   .cinder-textarea-label {
-    display: block;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     line-height: 1;
     color: var(--cinder-text);
   }
 
+  .cinder-textarea-label[data-disabled] {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
   /* ----------------------------------------
  * Textarea control
  * ---------------------------------------- */
@@ -99,6 +106,14 @@
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-danger);
   }
 
+  @media (forced-colors: active) {
+    .cinder-textarea[aria-invalid='true']:focus-visible {
+      outline: var(--cinder-ring-width) solid Mark;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   /* ----------------------------------------
  * Disabled state
  * ---------------------------------------- */

package/dist/components/time-field/index.d.ts

@@ -0,0 +1,5 @@
+import './time-field.css';
+import TimeField from './time-field.svelte';
+export default TimeField;
+export type { TimeFieldChange, TimeFieldGranularity, TimeFieldProps } from './time-field.types.ts';
+export { TimeField };