@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/table/index.js

@@ -105,23 +105,32 @@ function Table_body($$anchor, $$props) {
 // src/components/table-cell/table-cell.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
-var root2 = $2.from_html(`<td><!></td>`);
 function Table_cell($$anchor, $$props) {
   $2.push($$props, true);
-  let align = $2.prop($$props, "align", 3, "left"), rest = $2.rest_props($$props, [
+  let align = $2.prop($$props, "align", 3, "left"), as = $2.prop($$props, "as", 3, "td"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "align",
+    "as",
     "class",
     "children"
   ]);
-  var td = root2();
-  $2.attribute_effect(td, ($0) => ({ ...rest, class: $0, "data-cinder-align": align() }), [() => classNames("cinder-table__cell", $$props.class)]);
-  var node = $2.child(td);
-  $2.snippet(node, () => $$props.children ?? $2.noop);
-  $2.reset(td);
-  $2.append($$anchor, td);
+  var fragment = $2.comment();
+  var node = $2.first_child(fragment);
+  $2.element(node, as, false, ($$element, $$anchor2) => {
+    $2.attribute_effect($$element, ($0) => ({
+      ...rest,
+      scope: as() === "th" ? "row" : undefined,
+      class: $0,
+      "data-cinder-align": align()
+    }), [() => classNames("cinder-table__cell", $$props.class)]);
+    var fragment_1 = $2.comment();
+    var node_1 = $2.first_child(fragment_1);
+    $2.snippet(node_1, () => $$props.children ?? $2.noop);
+    $2.append($$anchor2, fragment_1);
+  });
+  $2.append($$anchor, fragment);
   $2.pop();
 }
 
@@ -129,7 +138,7 @@ function Table_cell($$anchor, $$props) {
 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 root3 = $3.from_html(`<th><!></th>`);
+var root2 = $3.from_html(`<th><!></th>`);
 function Table_header_cell($$anchor, $$props) {
   $3.push($$props, true);
   let sortable = $3.prop($$props, "sortable", 3, false), scope = $3.prop($$props, "scope", 3, "col"), align = $3.prop($$props, "align", 3, "left"), rest = $3.rest_props($$props, [
@@ -151,7 +160,7 @@ function Table_header_cell($$anchor, $$props) {
       return;
     table.onSortChange($$props.column);
   }
-  var th = root3();
+  var th = root2();
   $3.attribute_effect(th, ($0) => ({
     ...rest,
     scope: scope(),
@@ -195,7 +204,7 @@ $3.delegate(["click"]);
 import"svelte/internal/disclose-version";
 import * as $4 from "svelte/internal/client";
 import { untrack } from "svelte";
-var root4 = $4.from_html(`<thead><!></thead>`);
+var root3 = $4.from_html(`<thead><!></thead>`);
 function Table_header($$anchor, $$props) {
   $4.push($$props, true);
   let selectAllLabel = $4.prop($$props, "selectAllLabel", 3, "Select all rows");
@@ -227,7 +236,7 @@ function Table_header($$anchor, $$props) {
     },
     claimSelectionHeaderCell
   });
-  var thead = root4();
+  var thead = root3();
   var node = $4.child(thead);
   $4.snippet(node, () => $$props.children);
   $4.reset(thead);
@@ -256,7 +265,7 @@ function devWarn(message, ...args) {
 var root_12 = $5.from_html(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"/></th>`);
 var root_3 = $5.from_html(`<td class="cinder-table__cell cinder-table__cell--selection cinder-table__cell--selection-disabled"><input type="checkbox" class="cinder-table__selection-checkbox" disabled=""/></td>`);
 var root_4 = $5.from_html(`<td class="cinder-table__cell cinder-table__cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"/></td>`);
-var root5 = $5.from_html(`<tr><!><!><!></tr>`);
+var root4 = $5.from_html(`<tr><!><!><!></tr>`);
 function Table_row($$anchor, $$props) {
   $5.push($$props, true);
   const table = tryGetTableContext();
@@ -295,7 +304,7 @@ function Table_row($$anchor, $$props) {
   if (shouldRenderHeaderSelectionCell) {
     headerSelection?.claimSelectionHeaderCell();
   }
-  var tr = root5();
+  var tr = root4();
   var node_1 = $5.child(tr);
   {
     var consequent = ($$anchor2) => {
@@ -372,7 +381,7 @@ $5.delegate(["change"]);
 import"svelte/internal/disclose-version";
 import * as $6 from "svelte/internal/client";
 var root_13 = $6.from_html(`<caption class="cinder-table__caption"> </caption>`);
-var root6 = $6.from_html(`<table><!><!></table>`);
+var root5 = $6.from_html(`<table><!><!></table>`);
 function Table($$anchor, $$props) {
   $6.push($$props, true);
   let sort = $6.prop($$props, "sort", 15), stickyHeader = $6.prop($$props, "stickyHeader", 3, false), density = $6.prop($$props, "density", 3, "comfortable"), selectable = $6.prop($$props, "selectable", 3, false);
@@ -395,7 +404,7 @@ function Table($$anchor, $$props) {
     },
     onSortChange
   });
-  var table = root6();
+  var table = root5();
   var node = $6.child(table);
   {
     var consequent = ($$anchor2) => {
@@ -437,4 +446,4 @@ export {
   Table2 as Table
 };
 
-//# debugId=E120B573DD464C2A64756E2164756E21
+//# debugId=15C87232CFBD0E8C64756E2164756E21

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

@@ -64,23 +64,32 @@ function classNames(...parts) {
 }
 
 // src/components/table-cell/table-cell.svelte
-var root = $.from_html(`<td><!></td>`);
 function Table_cell($$anchor, $$props) {
   $.push($$props, true);
-  let align = $.prop($$props, "align", 3, "left"), rest = $.rest_props($$props, [
+  let align = $.prop($$props, "align", 3, "left"), as = $.prop($$props, "as", 3, "td"), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "align",
+    "as",
     "class",
     "children"
   ]);
-  var td = root();
-  $.attribute_effect(td, ($0) => ({ ...rest, class: $0, "data-cinder-align": align() }), [() => classNames("cinder-table__cell", $$props.class)]);
-  var node = $.child(td);
-  $.snippet(node, () => $$props.children ?? $.noop);
-  $.reset(td);
-  $.append($$anchor, td);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.element(node, as, false, ($$element, $$anchor2) => {
+    $.attribute_effect($$element, ($0) => ({
+      ...rest,
+      scope: as() === "th" ? "row" : undefined,
+      class: $0,
+      "data-cinder-align": align()
+    }), [() => classNames("cinder-table__cell", $$props.class)]);
+    var fragment_1 = $.comment();
+    var node_1 = $.first_child(fragment_1);
+    $.snippet(node_1, () => $$props.children ?? $.noop);
+    $.append($$anchor2, fragment_1);
+  });
+  $.append($$anchor, fragment);
   $.pop();
 }
 
@@ -91,4 +100,4 @@ export {
   Table_cell as TableCell
 };
 
-//# debugId=210DAE0779EB1FD864756E2164756E21
+//# debugId=F8EFFDA528C80D7564756E2164756E21

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

@@ -60,6 +60,10 @@ var schema = {
       enum: ["left", "center", "right"],
       description: "Visual alignment for numeric columns."
     },
+    as: {
+      enum: ["td", "th"],
+      description: 'When `\'th\'`, renders a `<th scope="row">` instead of `<td>`, marking this\ncell as the row-header identifier for assistive technology. The component\nsets `scope="row"` itself (so `scope` is not part of the prop surface).\nDefaults to `\'td\'` so existing consumers are unaffected.\n\nThe attribute surface is typed against `<td>` for both modes — `<td>` and\n`<th>` share `HTMLTableCellElement`, so this covers the common attributes.\nThe `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are\nnot surfaced here; a discriminated `td`/`th` union was tried but produced a\nunion TypeScript reports as "too complex to represent" against the full\nelement attribute interfaces. Use the compositional Table family directly\nif a row-header cell needs those `<th>`-only attributes.'
+    },
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-table__cell`."
@@ -80,4 +84,4 @@ export {
   table_cell_schema_default as default
 };
 
-//# debugId=2123AA2F75393C7164756E2164756E21
+//# debugId=534BAF009F048BBB64756E2164756E21

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

@@ -1,8 +1,23 @@
 import type { Snippet } from 'svelte';
 import type { HTMLTdAttributes } from 'svelte/elements';
-export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align'> & {
+export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align' | 'scope'> & {
     /** Visual alignment for numeric columns. */
     align?: 'left' | 'center' | 'right';
+    /**
+     * When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this
+     * cell as the row-header identifier for assistive technology. The component
+     * sets `scope="row"` itself (so `scope` is not part of the prop surface).
+     * Defaults to `'td'` so existing consumers are unaffected.
+     *
+     * The attribute surface is typed against `<td>` for both modes — `<td>` and
+     * `<th>` share `HTMLTableCellElement`, so this covers the common attributes.
+     * The `<th>`-only attributes (`colspan`, `rowspan`, `headers`, `abbr`) are
+     * not surfaced here; a discriminated `td`/`th` union was tried but produced a
+     * union TypeScript reports as "too complex to represent" against the full
+     * element attribute interfaces. Use the compositional Table family directly
+     * if a row-header cell needs those `<th>`-only attributes.
+     */
+    as?: 'td' | 'th';
     /** Additional class names merged with `.cinder-table__cell`. */
     class?: string;
     /**

package/dist/components/tabs/index.js

@@ -129,6 +129,19 @@ import * as $3 from "svelte/internal/client";
 import { untrack } from "svelte";
 
 // src/_internal/collection.ts
+function createSingleSelection(getValue, setValue) {
+  return {
+    get value() {
+      return getValue();
+    },
+    select(next) {
+      setValue(next);
+    },
+    isSelected(candidate) {
+      return getValue() === candidate;
+    }
+  };
+}
 function createMultiSelection(getValues, setValues) {
   return {
     get values() {
@@ -491,4 +504,4 @@ export {
   Tabs2 as Tabs
 };
 
-//# debugId=83CA0F7E3F3BBDCC64756E2164756E21
+//# debugId=ABFA3DE27E00DCD264756E2164756E21

package/dist/components/waveform/index.d.ts

@@ -0,0 +1,5 @@
+import './waveform.css';
+import Waveform from './waveform.svelte';
+export default Waveform;
+export type { WaveformProps, WaveformRenderMode, WaveformSchemaProps } from './waveform.types.ts';
+export { Waveform };