@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -89,10 +89,12 @@ function Table_header_cell($$renderer, $$props) {
     const table = getTableContext();
     const isSortable = $3.derived(() => sortable && !!column);
     const ariaSort = $3.derived(() => isSortable() && table.sort?.column === column ? table.sort?.direction : isSortable() ? "none" : undefined);
+    const nextSortDescription = $3.derived(() => ariaSort() === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+    const sortButtonDescriptionAttributes = $3.derived(() => ({ "aria-description": nextSortDescription() }));
     function handleClick() {
       if (!sortable || !column)
         return;
-      table.onSortChange(column);
+      table.onsortchange(column);
     }
     $$renderer2.push(`<th${$3.attributes({
       ...rest,
@@ -104,7 +106,11 @@ function Table_header_cell($$renderer, $$props) {
     })}>`);
     if (isSortable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<button type="button" class="cinder-table__sort-button">`);
+      $$renderer2.push(`<button${$3.attributes({
+        ...sortButtonDescriptionAttributes(),
+        type: "button",
+        class: "cinder-table__sort-button"
+      })}>`);
       children($$renderer2);
       $$renderer2.push(`<!----> <span class="cinder-table__sort-indicator" aria-hidden="true"${$3.attr("data-cinder-direction", ariaSort())}><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>`);
     } else {
@@ -126,13 +132,13 @@ function Table_header($$renderer, $$props) {
       children,
       allSelected,
       someSelected,
-      onSelectAll,
+      onselectall,
       selectAllLabel = "Select all rows"
     } = $$props;
     const table = tryGetTableContext();
     const selectionEnabled = table?.selectionEnabled ?? false;
-    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)) {
-      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
     }
     let hasSelectionHeaderCell = false;
     function claimSelectionHeaderCell() {
@@ -149,8 +155,8 @@ function Table_header($$renderer, $$props) {
       get someSelected() {
         return someSelected ?? false;
       },
-      get onSelectAll() {
-        return onSelectAll ?? (() => {});
+      get onselectall() {
+        return onselectall ?? (() => {});
       },
       get selectAllLabel() {
         return selectAllLabel;
@@ -185,7 +191,7 @@ function Table_row($$renderer, $$props) {
       class: className,
       children,
       selected,
-      onSelectedChange,
+      onselectedchange,
       selectionLabel,
       selectionDisabled,
       $$slots,
@@ -201,12 +207,12 @@ function Table_row($$renderer, $$props) {
         const hasDisabled = selectionDisabled === true;
         if (!hasDisabled) {
           const hasSelected = selected !== undefined;
-          const hasOnChange = onSelectedChange !== undefined;
+          const hasOnChange = onselectedchange !== undefined;
           const hasLabel = 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(", ")}.`);
           }
@@ -218,11 +224,11 @@ function Table_row($$renderer, $$props) {
     }
     function handleSelectAllChange(event) {
       const input = event.currentTarget;
-      headerSelection?.onSelectAll(input.checked);
+      headerSelection?.onselectall(input.checked);
     }
     function handleRowChange(event) {
       const input = event.currentTarget;
-      onSelectedChange?.(input.checked);
+      onselectedchange?.(input.checked);
     }
     const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
     if (shouldRenderHeaderSelectionCell) {
@@ -302,7 +308,7 @@ function Table($$renderer, $$props) {
         return;
       captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
     }, { box: "border-box", enabled: () => stickyHeader });
-    function onSortChange(column) {
+    function onsortchange(column) {
       if (!sort || sort.column !== column) {
         sort = { column, direction: "ascending" };
         return;
@@ -319,7 +325,7 @@ function Table($$renderer, $$props) {
       get selectionEnabled() {
         return selectable;
       },
-      onSortChange
+      onsortchange
     });
     $$renderer2.push(`<table${$7.attributes({
       ...rest,
@@ -357,4 +363,4 @@ export {
   Table2 as Table
 };
 
-//# debugId=A618BDB41C0A16E764756E2164756E21
+//# debugId=C309BFF0A694B73264756E2164756E21

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

@@ -42,13 +42,13 @@ function Table_header($$renderer, $$props) {
       children,
       allSelected,
       someSelected,
-      onSelectAll,
+      onselectall,
       selectAllLabel = "Select all rows"
     } = $$props;
     const table = tryGetTableContext();
     const selectionEnabled = table?.selectionEnabled ?? false;
-    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)) {
-      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
     }
     let hasSelectionHeaderCell = false;
     function claimSelectionHeaderCell() {
@@ -65,8 +65,8 @@ function Table_header($$renderer, $$props) {
       get someSelected() {
         return someSelected ?? false;
       },
-      get onSelectAll() {
-        return onSelectAll ?? (() => {});
+      get onselectall() {
+        return onselectall ?? (() => {});
       },
       get selectAllLabel() {
         return selectAllLabel;
@@ -86,4 +86,4 @@ export {
   Table_header as TableHeader
 };
 
-//# debugId=7F88C5C1E979096164756E2164756E21
+//# debugId=C628762351BF017D64756E2164756E21

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

@@ -17,7 +17,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",
@@ -34,7 +34,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."
       }
@@ -46,4 +46,4 @@ export {
   table_header_schema_default as default
 };
 
-//# debugId=6ACBAE840B8FFFAF64756E2164756E21
+//# debugId=093013900D7B4D4F64756E2164756E21

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

@@ -50,10 +50,12 @@ function Table_header_cell($$renderer, $$props) {
     const table = getTableContext();
     const isSortable = $.derived(() => sortable && !!column);
     const ariaSort = $.derived(() => isSortable() && table.sort?.column === column ? table.sort?.direction : isSortable() ? "none" : undefined);
+    const nextSortDescription = $.derived(() => ariaSort() === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+    const sortButtonDescriptionAttributes = $.derived(() => ({ "aria-description": nextSortDescription() }));
     function handleClick() {
       if (!sortable || !column)
         return;
-      table.onSortChange(column);
+      table.onsortchange(column);
     }
     $$renderer2.push(`<th${$.attributes({
       ...rest,
@@ -65,7 +67,11 @@ function Table_header_cell($$renderer, $$props) {
     })}>`);
     if (isSortable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<button type="button" class="cinder-table__sort-button">`);
+      $$renderer2.push(`<button${$.attributes({
+        ...sortButtonDescriptionAttributes(),
+        type: "button",
+        class: "cinder-table__sort-button"
+      })}>`);
       children($$renderer2);
       $$renderer2.push(`<!----> <span class="cinder-table__sort-indicator" aria-hidden="true"${$.attr("data-cinder-direction", ariaSort())}><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>`);
     } else {
@@ -84,4 +90,4 @@ export {
   Table_header_cell as TableHeaderCell
 };
 
-//# debugId=42CCAF132A4961D964756E2164756E21
+//# debugId=F3E1603F71EDE21E64756E2164756E21

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

@@ -52,7 +52,7 @@ function Table_row($$renderer, $$props) {
       class: className,
       children,
       selected,
-      onSelectedChange,
+      onselectedchange,
       selectionLabel,
       selectionDisabled,
       $$slots,
@@ -68,12 +68,12 @@ function Table_row($$renderer, $$props) {
         const hasDisabled = selectionDisabled === true;
         if (!hasDisabled) {
           const hasSelected = selected !== undefined;
-          const hasOnChange = onSelectedChange !== undefined;
+          const hasOnChange = onselectedchange !== undefined;
           const hasLabel = 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(", ")}.`);
           }
@@ -85,11 +85,11 @@ function Table_row($$renderer, $$props) {
     }
     function handleSelectAllChange(event) {
       const input = event.currentTarget;
-      headerSelection?.onSelectAll(input.checked);
+      headerSelection?.onselectall(input.checked);
     }
     function handleRowChange(event) {
       const input = event.currentTarget;
-      onSelectedChange?.(input.checked);
+      onselectedchange?.(input.checked);
     }
     const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
     if (shouldRenderHeaderSelectionCell) {
@@ -132,4 +132,4 @@ export {
   Table_row as TableRow
 };
 
-//# debugId=98B80A77568692F464756E2164756E21
+//# debugId=85F337D0238DD99364756E2164756E21

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

@@ -13,7 +13,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",
@@ -37,7 +37,7 @@ the seam for non-English applications or custom phrasing.`
         description: "Cell children (TableCell or TableHeaderCell)."
       },
       {
-        name: "onSelectedChange",
+        name: "onselectedchange",
         reason: "function-or-snippet"
       }
     ]
@@ -48,4 +48,4 @@ export {
   table_row_schema_default as default
 };
 
-//# debugId=165A59EE26C49D0464756E2164756E21
+//# debugId=A4E7011D02B2888A64756E2164756E21

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

@@ -199,12 +199,20 @@ 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
 function Tabs($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const baseId = $4.props_id($$renderer2);
     let {
       value = "",
+      onValueChange,
       orientation = "horizontal",
       activateOnFocus,
       class: className,
@@ -275,7 +283,9 @@ function Tabs($$renderer, $$props) {
         if (focusedValue === undefined)
           return;
         event.preventDefault();
-        value = focusedValue;
+        commitValue(focusedValue, onValueChange, (next) => {
+          value = next;
+        });
         return;
       }
       const isHorizontal = orientation === "horizontal";
@@ -303,7 +313,9 @@ function Tabs($$renderer, $$props) {
         return;
       focusValue(nextValue);
       if (effectiveActivateOnFocus()) {
-        value = nextValue;
+        commitValue(nextValue, onValueChange, (next) => {
+          value = next;
+        });
       }
     }
     setTabsContext({
@@ -320,7 +332,9 @@ function Tabs($$renderer, $$props) {
         return baseId;
       },
       select(next) {
-        value = next;
+        commitValue(next, onValueChange, (nextValue) => {
+          value = nextValue;
+        });
       },
       isActive(candidate) {
         return value === candidate;
@@ -380,4 +394,4 @@ export {
   Tabs2 as Tabs
 };
 
-//# debugId=FAB82836E77DE54464756E2164756E21
+//# debugId=8027256888FBA36164756E2164756E21

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

@@ -34,6 +34,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."
       }
     ]
   }
@@ -43,4 +48,4 @@ export {
   tabs_schema_default as default
 };
 
-//# debugId=074DF2373D8BBF6664756E2164756E21
+//# debugId=9B2F84A14BA5FAEE64756E2164756E21

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

@@ -10,13 +10,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);
     color: var(--cinder-text);
     line-height: 1;
   }
 
+  .cinder-textarea-label[data-disabled] {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
   .cinder-textarea {
     display: block;
     resize: vertical;
@@ -71,6 +78,14 @@
     border-color: #0000;
   }
 
+  @media (forced-colors: active) {
+    .cinder-textarea[aria-invalid="true"]:focus-visible {
+      outline: var(--cinder-ring-width) solid Mark;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-textarea:disabled {
     cursor: not-allowed;
     resize: none;

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

@@ -126,7 +126,14 @@ function Textarea($$renderer, $$props) {
     $$renderer2.push(`<div class="cinder-textarea-field">`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-textarea-label">${$.escape(label)}</label>`);
+      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-textarea-label"${$.attr("data-disabled", field().disabled || undefined)}>${$.escape(label)} `);
+      if (field().required) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -178,4 +185,4 @@ export {
   Textarea
 };
 
-//# debugId=21F6FBEF1E0BEEB664756E2164756E21
+//# debugId=1607E45539FED32764756E2164756E21

package/dist/server/components/time-field/index.css

@@ -0,0 +1,58 @@
+/* src/components/time-field/time-field.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-time-field {
+    display: grid;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text);
+  }
+
+  .cinder-time-field__label {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-time-field__controls {
+    display: flex;
+    gap: var(--cinder-space-2);
+    flex-wrap: wrap;
+    align-items:  center;
+  }
+
+  .cinder-time-field__input, .cinder-time-field__timezone {
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    min-height: 2.25rem;
+  }
+
+  .cinder-time-field__input:focus-visible, .cinder-time-field__timezone:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-time-field__input:focus-visible, .cinder-time-field__timezone:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
+  .cinder-time-field__description, .cinder-time-field__error {
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-time-field__description {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-time-field__error {
+    color: var(--cinder-danger);
+  }
+}