@lostgradient/cinder 0.3.0 → 0.4.1

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

@@ -26,14 +26,52 @@ import"@lostgradient/cinder/data-table/styles";
 
 // src/components/data-table/data-table.svelte
 import"svelte/internal/disclose-version";
-import * as $8 from "svelte/internal/client";
-import { tick } from "svelte";
+import * as $9 from "svelte/internal/client";
+import { tick, untrack as untrack3 } from "svelte";
 
-// src/components/table-body/table-body.svelte
+// src/components/checkbox/checkbox.svelte
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-// src/components/table/table.context.ts
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// src/_internal/form-field-context.ts
 import { createContext } from "svelte";
 
 // src/_internal/optional-context.ts
@@ -47,42 +85,243 @@ function optionalContext(getStrict) {
   };
 }
 
-// src/components/table/table.context.ts
-var [getTableContextStrict, setTableContext] = createContext();
-var getTableContext = getTableContextStrict;
-var tryGetTableContext = optionalContext(getTableContextStrict);
-var [getTableSectionContextStrict, setTableSectionContext] = createContext();
-var tryGetTableSectionContext = optionalContext(getTableSectionContextStrict);
-var [getTableHeaderSelectionContextStrict, setTableHeaderSelectionContext] = createContext();
-var tryGetTableHeaderSelectionContext = optionalContext(getTableHeaderSelectionContextStrict);
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
+// src/components/checkbox/checkbox.svelte
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
+var root_3 = $.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
+var root_4 = $.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root = $.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+function Checkbox($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  let checked = $.prop($$props, "checked", 15, false), indeterminate = $.prop($$props, "indeterminate", 11, false), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "id",
+    "checked",
+    "onValueChange",
+    "indeterminate",
+    "label",
+    "description",
+    "error",
+    "disabled",
+    "required",
+    "class",
+    "aria-describedby",
+    "aria-invalid",
+    "onchange"
+  ]);
+  const context = getFormFieldContext();
+  const field = $.derived(() => resolveFieldControl({
+    ...$$props.id !== undefined ? { id: $$props.id } : {},
+    generatedId,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "checkbox",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    disabled: $$props.disabled,
+    required: $$props.required ?? undefined
+  }));
+  $.user_effect(() => {
+    if (context && $$props.id && context.controlId !== $$props.id) {
+      devWarn(`[cinder/Checkbox] id mismatch: Checkbox id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both, or omit id on the Checkbox to inherit it.`);
+    }
+  });
+  let inputElement = $.state(undefined);
+  $.user_effect(() => {
+    if ($.get(inputElement)) {
+      $.get(inputElement).indeterminate = indeterminate() && !checked();
+    }
+  });
+  let resetSyncTimeout;
+  function syncCheckedAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (!$.get(inputElement))
+        return;
+      checked($.get(inputElement).checked);
+      $.get(inputElement).indeterminate = indeterminate() && !$.get(inputElement).checked;
+    }, 0);
+  }
+  $.user_effect(() => {
+    const form = $.get(inputElement)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncCheckedAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncCheckedAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleChange(event) {
+    const target = event.currentTarget;
+    const committed = commitValue(target.checked, $$props.onValueChange, (next2) => {
+      checked(next2);
+    });
+    target.checked = committed;
+    target.indeterminate = indeterminate() && !committed;
+    $$props.onchange?.(event);
+  }
+  var div = root();
+  var div_1 = $.child(div);
+  var span = $.child(div_1);
+  var input = $.child(span);
+  $.attribute_effect(input, ($0) => ({
+    id: $.get(field).id,
+    type: "checkbox",
+    ...rest,
+    disabled: $.get(field).disabled,
+    required: $.get(field).required,
+    checked: checked(),
+    onchange: handleChange,
+    class: $0,
+    "aria-invalid": $.get(field).ariaInvalid,
+    "aria-describedby": $.get(field).describedBy
+  }), [() => classNames("cinder-checkbox", $$props.class)], undefined, undefined, undefined, true);
+  $.bind_this(input, ($$value) => $.set(inputElement, $$value), () => $.get(inputElement));
+  $.next(2);
+  $.reset(span);
+  var node = $.sibling(span, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_1();
+      var text = $.child(label_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_2();
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(field).required)
+            $$render(consequent);
+        });
+      }
+      $.reset(label_1);
+      $.template_effect(() => {
+        $.set_attribute(label_1, "for", $.get(field).id);
+        $.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_1);
+    });
+  }
+  $.reset(div_1);
+  var node_2 = $.sibling(div_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var p = root_3();
+      var text_1 = $.child(p, true);
+      $.reset(p);
+      $.template_effect(() => {
+        $.set_attribute(p, "id", $.get(field).ownDescriptionId);
+        $.set_text(text_1, $$props.description);
+      });
+      $.append($$anchor2, p);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.description)
+        $$render(consequent_2);
+    });
+  }
+  var node_3 = $.sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var p_1 = root_4();
+      var text_2 = $.child(p_1, true);
+      $.reset(p_1);
+      $.template_effect(() => {
+        $.set_attribute(p_1, "id", $.get(field).ownErrorId);
+        $.set_text(text_2, $$props.error);
+      });
+      $.append($$anchor2, p_1);
+    };
+    $.if(node_3, ($$render) => {
+      if ($$props.error)
+        $$render(consequent_3);
+    });
+  }
+  $.reset(div);
+  $.append($$anchor, div);
+  $.pop();
+}
+
 // src/components/table-body/table-body.svelte
-var root = $.from_html(`<tbody><!></tbody>`);
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+
+// src/components/table/table.context.ts
+import { createContext as createContext2 } from "svelte";
+var [getTableContextStrict, setTableContext] = createContext2();
+var getTableContext = getTableContextStrict;
+var tryGetTableContext = optionalContext(getTableContextStrict);
+var [getTableSectionContextStrict, setTableSectionContext] = createContext2();
+var tryGetTableSectionContext = optionalContext(getTableSectionContextStrict);
+var [getTableHeaderSelectionContextStrict, setTableHeaderSelectionContext] = createContext2();
+var tryGetTableHeaderSelectionContext = optionalContext(getTableHeaderSelectionContextStrict);
+
+// src/components/table-body/table-body.svelte
+var root2 = $2.from_html(`<tbody><!></tbody>`);
 function Table_body($$anchor, $$props) {
-  $.push($$props, true);
+  $2.push($$props, true);
   setTableSectionContext("body");
-  var tbody = root();
-  var node = $.child(tbody);
-  $.snippet(node, () => $$props.children);
-  $.reset(tbody);
-  $.template_effect(($0) => $.set_class(tbody, 1, $0), [
-    () => $.clsx(classNames("cinder-table__body", $$props.class))
+  var tbody = root2();
+  var node = $2.child(tbody);
+  $2.snippet(node, () => $$props.children);
+  $2.reset(tbody);
+  $2.template_effect(($0) => $2.set_class(tbody, 1, $0), [
+    () => $2.clsx(classNames("cinder-table__body", $$props.class))
   ]);
-  $.append($$anchor, tbody);
-  $.pop();
+  $2.append($$anchor, tbody);
+  $2.pop();
 }
 
 // src/components/table-cell/table-cell.svelte
 import"svelte/internal/disclose-version";
-import * as $2 from "svelte/internal/client";
+import * as $3 from "svelte/internal/client";
 function Table_cell($$anchor, $$props) {
-  $2.push($$props, true);
-  let align = $2.prop($$props, "align", 3, "left"), as = $2.prop($$props, "as", 3, "td"), rest = $2.rest_props($$props, [
+  $3.push($$props, true);
+  let align = $3.prop($$props, "align", 3, "left"), as = $3.prop($$props, "as", 3, "td"), rest = $3.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -91,32 +330,32 @@ function Table_cell($$anchor, $$props) {
     "class",
     "children"
   ]);
-  var fragment = $2.comment();
-  var node = $2.first_child(fragment);
-  $2.element(node, as, false, ($$element, $$anchor2) => {
-    $2.attribute_effect($$element, ($0) => ({
+  var fragment = $3.comment();
+  var node = $3.first_child(fragment);
+  $3.element(node, as, false, ($$element, $$anchor2) => {
+    $3.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);
+    var fragment_1 = $3.comment();
+    var node_1 = $3.first_child(fragment_1);
+    $3.snippet(node_1, () => $$props.children ?? $3.noop);
+    $3.append($$anchor2, fragment_1);
   });
-  $2.append($$anchor, fragment);
-  $2.pop();
+  $3.append($$anchor, fragment);
+  $3.pop();
 }
 
 // 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 root2 = $3.from_html(`<th><!></th>`);
+import * as $4 from "svelte/internal/client";
+var root_12 = $4.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 root3 = $4.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, [
+  $4.push($$props, true);
+  let sortable = $4.prop($$props, "sortable", 3, false), scope = $4.prop($$props, "scope", 3, "col"), align = $4.prop($$props, "align", 3, "left"), rest = $4.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -128,65 +367,71 @@ function Table_header_cell($$anchor, $$props) {
     "children"
   ]);
   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 isSortable = $4.derived(() => sortable() && !!$$props.column);
+  const ariaSort = $4.derived(() => $4.get(isSortable) && table.sort?.column === $$props.column ? table.sort?.direction : $4.get(isSortable) ? "none" : undefined);
+  const nextSortDescription = $4.derived(() => $4.get(ariaSort) === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+  const sortButtonDescriptionAttributes = $4.derived(() => ({ "aria-description": $4.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) => ({
+  var th = root3();
+  $4.attribute_effect(th, ($0) => ({
     ...rest,
     scope: scope(),
     class: $0,
     "data-cinder-align": align(),
-    "data-cinder-sortable": $3.get(isSortable) || undefined,
-    "aria-sort": $3.get(ariaSort)
+    "data-cinder-sortable": $4.get(isSortable) || undefined,
+    "aria-sort": $4.get(ariaSort)
   }), [() => classNames("cinder-table__header-cell", $$props.class)]);
-  var node = $3.child(th);
+  var node = $4.child(th);
   {
     var consequent = ($$anchor2) => {
-      var button = root_1();
-      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 button = root_12();
+      $4.attribute_effect(button, () => ({
+        ...$4.get(sortButtonDescriptionAttributes),
+        type: "button",
+        class: "cinder-table__sort-button",
+        onclick: handleClick
+      }));
+      var node_1 = $4.child(button);
+      $4.snippet(node_1, () => $$props.children);
+      var span = $4.sibling(node_1, 2);
+      $4.reset(button);
+      $4.template_effect(() => $4.set_attribute(span, "data-cinder-direction", $4.get(ariaSort)));
+      $4.append($$anchor2, button);
     };
     var alternate = ($$anchor2) => {
-      var fragment = $3.comment();
-      var node_2 = $3.first_child(fragment);
-      $3.snippet(node_2, () => $$props.children);
-      $3.append($$anchor2, fragment);
+      var fragment = $4.comment();
+      var node_2 = $4.first_child(fragment);
+      $4.snippet(node_2, () => $$props.children);
+      $4.append($$anchor2, fragment);
     };
-    $3.if(node, ($$render) => {
-      if ($3.get(isSortable))
+    $4.if(node, ($$render) => {
+      if ($4.get(isSortable))
         $$render(consequent);
       else
         $$render(alternate, -1);
     });
   }
-  $3.reset(th);
-  $3.append($$anchor, th);
-  $3.pop();
+  $4.reset(th);
+  $4.append($$anchor, th);
+  $4.pop();
 }
-$3.delegate(["click"]);
 
 // src/components/table-header/table-header.svelte
 import"svelte/internal/disclose-version";
-import * as $4 from "svelte/internal/client";
+import * as $5 from "svelte/internal/client";
 import { untrack } from "svelte";
-var root3 = $4.from_html(`<thead><!></thead>`);
+var root4 = $5.from_html(`<thead><!></thead>`);
 function Table_header($$anchor, $$props) {
-  $4.push($$props, true);
-  let selectAllLabel = $4.prop($$props, "selectAllLabel", 3, "Select all rows");
+  $5.push($$props, true);
+  let selectAllLabel = $5.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() {
@@ -203,54 +448,43 @@ 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();
     },
     claimSelectionHeaderCell
   });
-  var thead = root3();
-  var node = $4.child(thead);
-  $4.snippet(node, () => $$props.children);
-  $4.reset(thead);
-  $4.template_effect(($0) => $4.set_class(thead, 1, $0), [
-    () => $4.clsx(classNames("cinder-table__header", $$props.class))
+  var thead = root4();
+  var node = $5.child(thead);
+  $5.snippet(node, () => $$props.children);
+  $5.reset(thead);
+  $5.template_effect(($0) => $5.set_class(thead, 1, $0), [
+    () => $5.clsx(classNames("cinder-table__header", $$props.class))
   ]);
-  $4.append($$anchor, thead);
-  $4.pop();
+  $5.append($$anchor, thead);
+  $5.pop();
 }
 
 // src/components/table-row/table-row.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
+import * as $6 from "svelte/internal/client";
 import { untrack as untrack2 } from "svelte";
-
-// ../../node_modules/esm-env/true.js
-var true_default = true;
-// src/utilities/dev-warn.ts
-function devWarn(message, ...args) {
-  if (!true_default)
-    return;
-  console.warn(message, ...args);
-}
-
-// src/components/table-row/table-row.svelte
-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 root4 = $5.from_html(`<tr><!><!><!></tr>`);
+var root_13 = $6.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_32 = $6.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_42 = $6.from_html(`<td class="cinder-table__cell cinder-table__cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"/></td>`);
+var root5 = $6.from_html(`<tr><!><!><!></tr>`);
 function Table_row($$anchor, $$props) {
-  $5.push($$props, true);
-  let rest = $5.rest_props($$props, [
+  $6.push($$props, true);
+  let rest = $6.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "class",
     "children",
     "selected",
-    "onSelectedChange",
+    "onselectedchange",
     "selectionLabel",
     "selectionDisabled"
   ]);
@@ -263,12 +497,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(", ")}.`);
         }
@@ -280,95 +514,95 @@ 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) {
     headerSelection?.claimSelectionHeaderCell();
   }
-  var tr = root4();
-  $5.attribute_effect(tr, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-table__row", $$props.class)]);
-  var node_1 = $5.child(tr);
+  var tr = root5();
+  $6.attribute_effect(tr, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-table__row", $$props.class)]);
+  var node_1 = $6.child(tr);
   {
     var consequent = ($$anchor2) => {
-      var th = root_12();
-      var input_1 = $5.child(th);
-      $5.remove_input_defaults(input_1);
-      $5.attach(input_1, () => (node) => {
-        $5.user_effect(() => {
+      var th = root_13();
+      var input_1 = $6.child(th);
+      $6.remove_input_defaults(input_1);
+      $6.attach(input_1, () => (node) => {
+        $6.user_effect(() => {
           node.indeterminate = headerSelection.someSelected && !headerSelection.allSelected;
         });
       });
-      $5.reset(th);
-      $5.template_effect(() => {
-        $5.set_checked(input_1, headerSelection.allSelected);
-        $5.set_attribute(input_1, "aria-label", headerSelection.selectAllLabel);
+      $6.reset(th);
+      $6.template_effect(() => {
+        $6.set_checked(input_1, headerSelection.allSelected);
+        $6.set_attribute(input_1, "aria-label", headerSelection.selectAllLabel);
       });
-      $5.delegated("change", input_1, handleSelectAllChange);
-      $5.append($$anchor2, th);
+      $6.delegated("change", input_1, handleSelectAllChange);
+      $6.append($$anchor2, th);
     };
-    $5.if(node_1, ($$render) => {
+    $6.if(node_1, ($$render) => {
       if (shouldRenderHeaderSelectionCell && headerSelection)
         $$render(consequent);
     });
   }
-  var node_2 = $5.sibling(node_1);
+  var node_2 = $6.sibling(node_1);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment = $5.comment();
-      var node_3 = $5.first_child(fragment);
+      var fragment = $6.comment();
+      var node_3 = $6.first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
-          var td = root_3();
-          var input_2 = $5.child(td);
-          $5.reset(td);
-          $5.template_effect(() => $5.set_attribute(input_2, "aria-label", $$props.selectionLabel ?? "Selection not allowed for this row"));
-          $5.append($$anchor3, td);
+          var td = root_32();
+          var input_2 = $6.child(td);
+          $6.reset(td);
+          $6.template_effect(() => $6.set_attribute(input_2, "aria-label", $$props.selectionLabel ?? "Selection not allowed for this row"));
+          $6.append($$anchor3, td);
         };
         var alternate = ($$anchor3) => {
-          var td_1 = root_4();
-          var input_3 = $5.child(td_1);
-          $5.remove_input_defaults(input_3);
-          $5.reset(td_1);
-          $5.template_effect(() => {
-            $5.set_checked(input_3, $$props.selected);
-            $5.set_attribute(input_3, "aria-label", $$props.selectionLabel);
+          var td_1 = root_42();
+          var input_3 = $6.child(td_1);
+          $6.remove_input_defaults(input_3);
+          $6.reset(td_1);
+          $6.template_effect(() => {
+            $6.set_checked(input_3, $$props.selected);
+            $6.set_attribute(input_3, "aria-label", $$props.selectionLabel);
           });
-          $5.delegated("change", input_3, handleRowChange);
-          $5.append($$anchor3, td_1);
+          $6.delegated("change", input_3, handleRowChange);
+          $6.append($$anchor3, td_1);
         };
-        $5.if(node_3, ($$render) => {
+        $6.if(node_3, ($$render) => {
           if ($$props.selectionDisabled)
             $$render(consequent_1);
           else
             $$render(alternate, -1);
         });
       }
-      $5.append($$anchor2, fragment);
+      $6.append($$anchor2, fragment);
     };
-    $5.if(node_2, ($$render) => {
+    $6.if(node_2, ($$render) => {
       if (selectionEnabled && section === "body")
         $$render(consequent_2);
     });
   }
-  var node_4 = $5.sibling(node_2);
-  $5.snippet(node_4, () => $$props.children);
-  $5.reset(tr);
-  $5.append($$anchor, tr);
-  $5.pop();
+  var node_4 = $6.sibling(node_2);
+  $6.snippet(node_4, () => $$props.children);
+  $6.reset(tr);
+  $6.append($$anchor, tr);
+  $6.pop();
 }
-$5.delegate(["change"]);
+$6.delegate(["change"]);
 
 // src/components/table/table.svelte
 import"svelte/internal/disclose-version";
-import * as $7 from "svelte/internal/client";
+import * as $8 from "svelte/internal/client";
 
 // src/utilities/use-resize-observer.svelte.ts
-import * as $6 from "svelte/internal/client";
+import * as $7 from "svelte/internal/client";
 function useResizeObserver(onResize, options = {}) {
   const { box, enabled = () => true } = options;
   return (node) => {
@@ -380,7 +614,7 @@ function useResizeObserver(onResize, options = {}) {
       observer?.disconnect();
       observer = null;
     };
-    $6.user_effect(() => {
+    $7.user_effect(() => {
       if (!enabled()) {
         disconnectObserver();
         return;
@@ -403,11 +637,11 @@ function useResizeObserver(onResize, options = {}) {
 }
 
 // src/components/table/table.svelte
-var root_13 = $7.from_html(`<caption class="cinder-table__caption"> </caption>`);
-var root5 = $7.from_html(`<table><!><!></table>`);
+var root_14 = $8.from_html(`<caption class="cinder-table__caption"> </caption>`);
+var root6 = $8.from_html(`<table><!><!></table>`);
 function Table($$anchor, $$props) {
-  $7.push($$props, true);
-  let sort = $7.prop($$props, "sort", 15), stickyHeader = $7.prop($$props, "stickyHeader", 3, false), density = $7.prop($$props, "density", 3, "comfortable"), selectable = $7.prop($$props, "selectable", 3, false), rest = $7.rest_props($$props, [
+  $8.push($$props, true);
+  let sort = $8.prop($$props, "sort", 15), stickyHeader = $8.prop($$props, "stickyHeader", 3, false), density = $8.prop($$props, "density", 3, "comfortable"), selectable = $8.prop($$props, "selectable", 3, false), rest = $8.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -419,14 +653,14 @@ function Table($$anchor, $$props) {
     "class",
     "children"
   ]);
-  let captionHeight = $7.state(0);
+  let captionHeight = $8.state(0);
   const measureCaption = useResizeObserver((entries) => {
     const entry = entries[0];
     if (!entry)
       return;
-    $7.set(captionHeight, entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height, true);
+    $8.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;
@@ -443,39 +677,39 @@ function Table($$anchor, $$props) {
     get selectionEnabled() {
       return selectable();
     },
-    onSortChange
+    onsortchange
   });
-  var table = root5();
-  $7.attribute_effect(table, ($0) => ({
+  var table = root6();
+  $8.attribute_effect(table, ($0) => ({
     ...rest,
     class: $0,
     "data-cinder-sticky-header": stickyHeader() || undefined,
     "data-cinder-density": density(),
     "data-cinder-selectable": selectable() || undefined,
-    [$7.STYLE]: {
-      "--cinder-table-caption-height": $$props.caption ? `${$7.get(captionHeight)}px` : undefined
+    [$8.STYLE]: {
+      "--cinder-table-caption-height": $$props.caption ? `${$8.get(captionHeight)}px` : undefined
     }
   }), [() => classNames("cinder-table", $$props.class)]);
-  var node = $7.child(table);
+  var node = $8.child(table);
   {
     var consequent = ($$anchor2) => {
-      var caption_1 = root_13();
-      var text = $7.child(caption_1, true);
-      $7.reset(caption_1);
-      $7.attach(caption_1, () => measureCaption);
-      $7.template_effect(() => $7.set_text(text, $$props.caption));
-      $7.append($$anchor2, caption_1);
+      var caption_1 = root_14();
+      var text = $8.child(caption_1, true);
+      $8.reset(caption_1);
+      $8.attach(caption_1, () => measureCaption);
+      $8.template_effect(() => $8.set_text(text, $$props.caption));
+      $8.append($$anchor2, caption_1);
     };
-    $7.if(node, ($$render) => {
+    $8.if(node, ($$render) => {
       if ($$props.caption)
         $$render(consequent);
     });
   }
-  var node_1 = $7.sibling(node);
-  $7.snippet(node_1, () => $$props.children);
-  $7.reset(table);
-  $7.append($$anchor, table);
-  $7.pop();
+  var node_1 = $8.sibling(node);
+  $8.snippet(node_1, () => $$props.children);
+  $8.reset(table);
+  $8.append($$anchor, table);
+  $8.pop();
 }
 
 // src/utilities/fixed-virtual-window.ts
@@ -550,15 +784,19 @@ function getFixedVirtualWindow({
 }
 
 // src/components/data-table/data-table.svelte
-var root_8 = $8.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
-var root_132 = $8.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
-var root_7 = $8.from_html(`<!> <!> <!>`, 1);
-var root_2 = $8.from_html(`<!> <!>`, 1);
-var root6 = $8.from_html(`<div><!></div>`);
+var root_5 = $9.from_html(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"><!></th>`);
+var root_43 = $9.from_html(`<!> <!>`, 1);
+var root_10 = $9.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
+var root_132 = $9.from_html(`<td class="cinder-table__cell cinder-table__cell--selection"><!></td>`);
+var root_122 = $9.from_html(`<!> <!>`, 1);
+var root_16 = $9.from_html(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"></td></tr>`);
+var root_9 = $9.from_html(`<!> <!> <!>`, 1);
+var root_22 = $9.from_html(`<!> <!>`, 1);
+var root7 = $9.from_html(`<div><!></div>`);
 function Data_table($$anchor, $$props) {
-  $8.push($$props, true);
+  $9.push($$props, true);
   const table = ($$anchor2) => {
-    Table($$anchor2, $8.spread_props(() => $$props.caption !== undefined ? { caption: $$props.caption } : {}, () => $8.get(shouldVirtualizeRows) ? { "aria-rowcount": $$props.rows.length + 1 } : {}, {
+    Table($$anchor2, $9.spread_props(() => $$props.caption !== undefined ? { caption: $$props.caption } : {}, () => $9.get(shouldVirtualizeRows) ? { "aria-rowcount": $$props.rows.length + 1 } : {}, {
       get stickyHeader() {
         return stickyHeader();
       },
@@ -572,131 +810,208 @@ function Data_table($$anchor, $$props) {
         sort($$value);
       },
       children: ($$anchor3, $$slotProps) => {
-        var fragment_1 = root_2();
-        var node = $8.first_child(fragment_1);
+        var fragment_1 = root_22();
+        var node = $9.first_child(fragment_1);
         Table_header(node, {
           children: ($$anchor4, $$slotProps2) => {
             Table_row($$anchor4, {
               children: ($$anchor5, $$slotProps3) => {
-                var fragment_3 = $8.comment();
-                var node_1 = $8.first_child(fragment_3);
-                $8.each(node_1, 17, () => $$props.columns, (column) => column.key, ($$anchor6, column) => {
+                var fragment_3 = root_43();
+                var node_1 = $9.first_child(fragment_3);
+                {
+                  var consequent_1 = ($$anchor6) => {
+                    var th = root_5();
+                    var node_2 = $9.child(th);
+                    {
+                      var consequent = ($$anchor7) => {
+                        {
+                          let $0 = $9.derived(() => $9.get(someRowsSelected) && !$9.get(allRowsSelected));
+                          Checkbox($$anchor7, {
+                            get checked() {
+                              return $9.get(allRowsSelected);
+                            },
+                            get indeterminate() {
+                              return $9.get($0);
+                            },
+                            get "aria-label"() {
+                              return selectAllLabel();
+                            },
+                            class: "cinder-table__selection-checkbox",
+                            onchange: (event) => {
+                              const input = event.currentTarget;
+                              setAllRowsSelected(input.checked);
+                            }
+                          });
+                        }
+                      };
+                      $9.if(node_2, ($$render) => {
+                        if (selectable() === "multiple")
+                          $$render(consequent);
+                      });
+                    }
+                    $9.reset(th);
+                    $9.template_effect(() => $9.set_attribute(th, "aria-label", selectable() === "single" ? "Row selection" : undefined));
+                    $9.append($$anchor6, th);
+                  };
+                  $9.if(node_1, ($$render) => {
+                    if ($9.get(selectionEnabled))
+                      $$render(consequent_1);
+                  });
+                }
+                var node_3 = $9.sibling(node_1, 2);
+                $9.each(node_3, 17, () => $$props.columns, (column) => column.key, ($$anchor6, column) => {
                   {
-                    let $0 = $8.derived(() => $8.get(column).sortable ?? false);
-                    let $1 = $8.derived(() => mapAlign($8.get(column).align) ?? "left");
-                    Table_header_cell($$anchor6, $8.spread_props(() => $8.get(column).sortable ? { column: $8.get(column).key } : {}, {
+                    let $0 = $9.derived(() => $9.get(column).sortable ?? false);
+                    let $1 = $9.derived(() => mapAlign($9.get(column).align) ?? "left");
+                    Table_header_cell($$anchor6, $9.spread_props(() => $9.get(column).sortable ? { column: $9.get(column).key } : {}, {
                       get sortable() {
-                        return $8.get($0);
+                        return $9.get($0);
                       },
                       get align() {
-                        return $8.get($1);
+                        return $9.get($1);
                       },
                       children: ($$anchor7, $$slotProps4) => {
-                        $8.next();
-                        var text2 = $8.text();
-                        $8.template_effect(() => $8.set_text(text2, $8.get(column).label));
-                        $8.append($$anchor7, text2);
+                        $9.next();
+                        var text2 = $9.text();
+                        $9.template_effect(() => $9.set_text(text2, $9.get(column).label));
+                        $9.append($$anchor7, text2);
                       },
                       $$slots: { default: true }
                     }));
                   }
                 });
-                $8.append($$anchor5, fragment_3);
+                $9.append($$anchor5, fragment_3);
               },
               $$slots: { default: true }
             });
           },
           $$slots: { default: true }
         });
-        var node_2 = $8.sibling(node, 2);
-        Table_body(node_2, {
+        var node_4 = $9.sibling(node, 2);
+        Table_body(node_4, {
           children: ($$anchor4, $$slotProps2) => {
-            var fragment_6 = root_7();
-            var node_3 = $8.first_child(fragment_6);
+            var fragment_7 = root_9();
+            var node_5 = $9.first_child(fragment_7);
             {
-              var consequent = ($$anchor5) => {
-                var tr = root_8();
-                var td = $8.child(tr);
+              var consequent_2 = ($$anchor5) => {
+                var tr = root_10();
+                var td = $9.child(tr);
                 let styles;
-                $8.reset(tr);
-                $8.template_effect(() => {
-                  $8.set_attribute(td, "colspan", $$props.columns.length);
-                  styles = $8.set_style(td, "", styles, { height: `${$8.get(virtualWindow).leadingSize}px` });
+                $9.reset(tr);
+                $9.template_effect(() => {
+                  $9.set_attribute(td, "colspan", $$props.columns.length + ($9.get(selectionEnabled) ? 1 : 0));
+                  styles = $9.set_style(td, "", styles, { height: `${$9.get(virtualWindow).leadingSize}px` });
                 });
-                $8.append($$anchor5, tr);
+                $9.append($$anchor5, tr);
               };
-              $8.if(node_3, ($$render) => {
-                if ($8.get(shouldVirtualizeRows) && $8.get(virtualWindow).leadingSize > 0)
-                  $$render(consequent);
+              $9.if(node_5, ($$render) => {
+                if ($9.get(shouldVirtualizeRows) && $9.get(virtualWindow).leadingSize > 0)
+                  $$render(consequent_2);
               });
             }
-            var node_4 = $8.sibling(node_3, 2);
-            $8.each(node_4, 17, () => $8.get(virtualRows), (virtualRow) => virtualRow.key, ($$anchor5, virtualRow) => {
-              Table_row($$anchor5, $8.spread_props(() => $8.get(shouldVirtualizeRows) ? {
-                "aria-rowindex": $8.get(virtualRow).index + 2,
-                tabindex: $8.get(tabbableRowIndex) === $8.get(virtualRow).index ? 0 : -1,
+            var node_6 = $9.sibling(node_5, 2);
+            $9.each(node_6, 17, () => $9.get(virtualRows), (virtualRow) => virtualRow.key, ($$anchor5, virtualRow) => {
+              Table_row($$anchor5, $9.spread_props(() => $9.get(shouldVirtualizeRows) ? {
+                "aria-rowindex": $9.get(virtualRow).index + 2,
+                tabindex: $9.get(tabbableRowIndex) === $9.get(virtualRow).index ? 0 : -1,
                 "data-cinder-virtual-row": "true",
-                "data-cinder-data-table-row-index": $8.get(virtualRow).index,
-                onfocus: () => handleRowFocus($8.get(virtualRow).index),
-                onkeydown: (event) => handleRowKeydown(event, $8.get(virtualRow).index)
+                "data-cinder-data-table-row-index": $9.get(virtualRow).index,
+                onfocus: () => handleRowFocus($9.get(virtualRow).index),
+                onkeydown: (event) => handleRowKeydown(event, $9.get(virtualRow).index)
               } : {}, {
                 children: ($$anchor6, $$slotProps3) => {
-                  var fragment_8 = $8.comment();
-                  var node_5 = $8.first_child(fragment_8);
-                  $8.each(node_5, 17, () => $$props.columns, (column) => column.key, ($$anchor7, column) => {
+                  var fragment_9 = root_122();
+                  var node_7 = $9.first_child(fragment_9);
+                  {
+                    var consequent_3 = ($$anchor7) => {
+                      const rowSelectionDisabled = $9.derived(() => $$props.isRowSelectionDisabled?.($9.get(virtualRow).row, $9.get(virtualRow).index) ?? false);
+                      const rowId = $9.derived(() => resolveRowId($9.get(virtualRow).row, $9.get(virtualRow).index));
+                      var td_1 = root_132();
+                      var node_8 = $9.child(td_1);
+                      {
+                        let $0 = $9.derived(() => $9.get(selectedRowIdSet).has($9.get(rowId)));
+                        let $1 = $9.derived(() => readableRowLabel($9.get(virtualRow).row, $9.get(virtualRow).index));
+                        Checkbox(node_8, {
+                          get checked() {
+                            return $9.get($0);
+                          },
+                          get disabled() {
+                            return $9.get(rowSelectionDisabled);
+                          },
+                          get "aria-label"() {
+                            return $9.get($1);
+                          },
+                          class: "cinder-table__selection-checkbox",
+                          onchange: (event) => {
+                            const input = event.currentTarget;
+                            setRowSelected($9.get(virtualRow).row, $9.get(virtualRow).index, input.checked);
+                          }
+                        });
+                      }
+                      $9.reset(td_1);
+                      $9.template_effect(() => $9.set_attribute(td_1, "data-cinder-selection-disabled", $9.get(rowSelectionDisabled) || undefined));
+                      $9.append($$anchor7, td_1);
+                    };
+                    $9.if(node_7, ($$render) => {
+                      if ($9.get(selectionEnabled))
+                        $$render(consequent_3);
+                    });
+                  }
+                  var node_9 = $9.sibling(node_7, 2);
+                  $9.each(node_9, 17, () => $$props.columns, (column) => column.key, ($$anchor7, column) => {
                     {
-                      let $0 = $8.derived(() => $8.get(column).key === $8.get(rowHeaderKey) ? "th" : "td");
-                      let $1 = $8.derived(() => mapAlign($8.get(column).align) ?? "left");
+                      let $0 = $9.derived(() => $9.get(column).key === $9.get(rowHeaderKey) ? "th" : "td");
+                      let $1 = $9.derived(() => mapAlign($9.get(column).align) ?? "left");
                       Table_cell($$anchor7, {
                         get as() {
-                          return $8.get($0);
+                          return $9.get($0);
                         },
                         get align() {
-                          return $8.get($1);
+                          return $9.get($1);
                         },
                         children: ($$anchor8, $$slotProps4) => {
-                          $8.next();
-                          var text_1 = $8.text();
-                          $8.template_effect(() => $8.set_text(text_1, $8.get(virtualRow).row[$8.get(column).key]));
-                          $8.append($$anchor8, text_1);
+                          $9.next();
+                          var text_1 = $9.text();
+                          $9.template_effect(() => $9.set_text(text_1, $9.get(virtualRow).row[$9.get(column).key]));
+                          $9.append($$anchor8, text_1);
                         },
                         $$slots: { default: true }
                       });
                     }
                   });
-                  $8.append($$anchor6, fragment_8);
+                  $9.append($$anchor6, fragment_9);
                 },
                 $$slots: { default: true }
               }));
             });
-            var node_6 = $8.sibling(node_4, 2);
+            var node_10 = $9.sibling(node_6, 2);
             {
-              var consequent_1 = ($$anchor5) => {
-                var tr_1 = root_132();
-                var td_1 = $8.child(tr_1);
+              var consequent_4 = ($$anchor5) => {
+                var tr_1 = root_16();
+                var td_2 = $9.child(tr_1);
                 let styles_1;
-                $8.reset(tr_1);
-                $8.template_effect(() => {
-                  $8.set_attribute(td_1, "colspan", $$props.columns.length);
-                  styles_1 = $8.set_style(td_1, "", styles_1, { height: `${$8.get(virtualWindow).trailingSize}px` });
+                $9.reset(tr_1);
+                $9.template_effect(() => {
+                  $9.set_attribute(td_2, "colspan", $$props.columns.length + ($9.get(selectionEnabled) ? 1 : 0));
+                  styles_1 = $9.set_style(td_2, "", styles_1, { height: `${$9.get(virtualWindow).trailingSize}px` });
                 });
-                $8.append($$anchor5, tr_1);
+                $9.append($$anchor5, tr_1);
               };
-              $8.if(node_6, ($$render) => {
-                if ($8.get(shouldVirtualizeRows) && $8.get(virtualWindow).trailingSize > 0)
-                  $$render(consequent_1);
+              $9.if(node_10, ($$render) => {
+                if ($9.get(shouldVirtualizeRows) && $9.get(virtualWindow).trailingSize > 0)
+                  $$render(consequent_4);
               });
             }
-            $8.append($$anchor4, fragment_6);
+            $9.append($$anchor4, fragment_7);
           },
           $$slots: { default: true }
         });
-        $8.append($$anchor3, fragment_1);
+        $9.append($$anchor3, fragment_1);
       },
       $$slots: { default: true }
     }));
   };
-  let sort = $8.prop($$props, "sort", 15), stickyHeader = $8.prop($$props, "stickyHeader", 3, false), density = $8.prop($$props, "density", 3, "comfortable"), scrollable = $8.prop($$props, "scrollable", 3, false), virtualized = $8.prop($$props, "virtualized", 3, false), rowHeight = $8.prop($$props, "rowHeight", 3, 44), overscan = $8.prop($$props, "overscan", 3, 5), height = $8.prop($$props, "height", 3, "24rem"), stickToBottom = $8.prop($$props, "stickToBottom", 3, false), rest = $8.rest_props($$props, [
+  let sort = $9.prop($$props, "sort", 15), selectable = $9.prop($$props, "selectable", 3, "none"), selectedRowIds = $9.prop($$props, "selectedRowIds", 31, () => $9.proxy([])), selectAllLabel = $9.prop($$props, "selectAllLabel", 3, "Select all rows"), stickyHeader = $9.prop($$props, "stickyHeader", 3, false), density = $9.prop($$props, "density", 3, "comfortable"), scrollable = $9.prop($$props, "scrollable", 3, false), virtualized = $9.prop($$props, "virtualized", 3, false), rowHeight = $9.prop($$props, "rowHeight", 3, 44), overscan = $9.prop($$props, "overscan", 3, 5), height = $9.prop($$props, "height", 3, "24rem"), stickToBottom = $9.prop($$props, "stickToBottom", 3, false), rest = $9.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -704,6 +1019,12 @@ function Data_table($$anchor, $$props) {
     "rows",
     "caption",
     "sort",
+    "selectable",
+    "selectedRowIds",
+    "getRowId",
+    "isRowSelectionDisabled",
+    "selectAllLabel",
+    "rowSelectionLabel",
     "stickyHeader",
     "density",
     "scrollable",
@@ -715,38 +1036,48 @@ function Data_table($$anchor, $$props) {
     "onscroll",
     "class"
   ]);
-  let wrapperElement = $8.state(undefined);
-  let scrollOffset = $8.state(0);
-  let measuredViewportHeight = $8.state(0);
-  let captionHeight = $8.state(0);
-  let headerHeight = $8.state(0);
-  let activeRowIndex = $8.state(0);
+  let wrapperElement = $9.state(undefined);
+  let scrollOffset = $9.state(0);
+  let measuredViewportHeight = $9.state(0);
+  let captionHeight = $9.state(0);
+  let headerHeight = $9.state(0);
+  let activeRowIndex = $9.state(0);
   let previousRowCount = 0;
   let hasObservedRowCount = false;
   let shouldStickAfterAppend = false;
-  const rowHeaderKey = $8.derived(() => ($$props.columns.find((column) => column.rowHeader === true) ?? $$props.columns[0])?.key);
-  const shouldVirtualizeRows = $8.derived(virtualized);
-  const resolvedRowHeight = $8.derived(() => resolveVirtualItemHeight(rowHeight(), 44));
-  const resolvedOverscan = $8.derived(() => resolveVirtualOverscan(overscan()));
-  const viewportHeight = $8.derived(() => $8.get(measuredViewportHeight) || estimateViewportHeight(height(), $8.get(resolvedRowHeight)));
-  const virtualWindow = $8.derived(() => getFixedVirtualWindow({
+  let resetSyncTimeout;
+  const initialSelectedRowIds = untrack3(() => new Set(selectedRowIds()));
+  const rowHeaderKey = $9.derived(() => ($$props.columns.find((column) => column.rowHeader === true) ?? $$props.columns[0])?.key);
+  const selectionEnabled = $9.derived(() => selectable() !== "none");
+  const selectedRowIdSet = $9.derived(() => new Set(selectedRowIds()));
+  const selectableRowIds = $9.derived(() => $$props.rows.map((row, index) => ({
+    id: resolveRowId(row, index),
+    disabled: $$props.isRowSelectionDisabled?.(row, index) ?? false
+  })).filter((row) => !row.disabled).map((row) => row.id));
+  const allRowsSelected = $9.derived(() => selectable() === "multiple" && $9.get(selectableRowIds).length > 0 && $9.get(selectableRowIds).every((id) => $9.get(selectedRowIdSet).has(id)));
+  const someRowsSelected = $9.derived(() => selectable() === "multiple" && $9.get(selectableRowIds).some((id) => $9.get(selectedRowIdSet).has(id)));
+  const shouldVirtualizeRows = $9.derived(virtualized);
+  const resolvedRowHeight = $9.derived(() => resolveVirtualItemHeight(rowHeight(), 44));
+  const resolvedOverscan = $9.derived(() => resolveVirtualOverscan(overscan()));
+  const viewportHeight = $9.derived(() => $9.get(measuredViewportHeight) || estimateViewportHeight(height(), $9.get(resolvedRowHeight)));
+  const virtualWindow = $9.derived(() => getFixedVirtualWindow({
     itemCount: $$props.rows.length,
-    itemHeight: $8.get(resolvedRowHeight),
-    scrollOffset: $8.get(scrollOffset),
-    viewportHeight: $8.get(viewportHeight),
-    overscan: $8.get(resolvedOverscan)
+    itemHeight: $9.get(resolvedRowHeight),
+    scrollOffset: $9.get(scrollOffset),
+    viewportHeight: $9.get(viewportHeight),
+    overscan: $9.get(resolvedOverscan)
   }));
-  const virtualRows = $8.derived(() => $8.get(shouldVirtualizeRows) ? $8.get(virtualWindow).items.flatMap((virtualItem) => {
+  const virtualRows = $9.derived(() => $9.get(shouldVirtualizeRows) ? $9.get(virtualWindow).items.flatMap((virtualItem) => {
     const row = $$props.rows[virtualItem.index];
     return row === undefined ? [] : [{ ...virtualItem, row }];
   }) : $$props.rows.map((row, index) => ({
     row,
     index,
     key: index,
-    start: index * $8.get(resolvedRowHeight),
-    size: $8.get(resolvedRowHeight)
+    start: index * $9.get(resolvedRowHeight),
+    size: $9.get(resolvedRowHeight)
   })));
-  const tabbableRowIndex = $8.derived(getTabbableRowIndex);
+  const tabbableRowIndex = $9.derived(getTabbableRowIndex);
   function mapAlign(align) {
     if (align === "start")
       return "left";
@@ -756,15 +1087,92 @@ function Data_table($$anchor, $$props) {
       return "center";
     return;
   }
-  $8.user_effect(() => {
-    const element2 = $8.get(wrapperElement);
-    if (!element2 || !$8.get(shouldVirtualizeRows))
+  function resolveRowId(row, index) {
+    if ($$props.getRowId)
+      return $$props.getRowId(row, index);
+    const candidate = row["id"];
+    if (typeof candidate === "string" || typeof candidate === "number")
+      return String(candidate);
+    return String(index);
+  }
+  function readableRowLabel(row, index) {
+    const customLabel = $$props.rowSelectionLabel?.(row, index)?.trim();
+    if (customLabel)
+      return customLabel;
+    const rowHeaderValue = $9.get(rowHeaderKey) ? row[$9.get(rowHeaderKey)] : undefined;
+    if (typeof rowHeaderValue === "string" || typeof rowHeaderValue === "number") {
+      return `Select ${rowHeaderValue}`;
+    }
+    return `Select row ${index + 1}`;
+  }
+  function commitSelectedRowIds(nextSelectedRowIds) {
+    selectedRowIds(selectedRowIds() instanceof Set ? new Set(nextSelectedRowIds) : Array.from(nextSelectedRowIds));
+  }
+  function setRowSelected(row, index, nextSelected) {
+    if (!$9.get(selectionEnabled) || $$props.isRowSelectionDisabled?.(row, index))
+      return;
+    const rowId = resolveRowId(row, index);
+    const nextSelectedRowIds = new Set($9.get(selectedRowIdSet));
+    if (selectable() === "single") {
+      commitSelectedRowIds(nextSelected ? new Set([rowId]) : new Set);
+      return;
+    }
+    if (nextSelected)
+      nextSelectedRowIds.add(rowId);
+    else
+      nextSelectedRowIds.delete(rowId);
+    commitSelectedRowIds(nextSelectedRowIds);
+  }
+  function setAllRowsSelected(nextSelected) {
+    if (selectable() !== "multiple")
+      return;
+    const nextSelectedRowIds = new Set($9.get(selectedRowIdSet));
+    for (const rowId of $9.get(selectableRowIds)) {
+      if (nextSelected)
+        nextSelectedRowIds.add(rowId);
+      else
+        nextSelectedRowIds.delete(rowId);
+    }
+    commitSelectedRowIds(nextSelectedRowIds);
+  }
+  function syncSelectionAfterFormReset(event) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented)
+        return;
+      commitSelectedRowIds(initialSelectedRowIds);
+    }, 0);
+  }
+  $9.user_effect(() => {
+    const form = $9.get(wrapperElement)?.closest("form");
+    if (!form || !$9.get(selectionEnabled))
+      return;
+    form.addEventListener("reset", syncSelectionAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncSelectionAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  $9.user_effect(() => {
+    const element2 = $9.get(wrapperElement);
+    if (!element2 || !$9.get(shouldVirtualizeRows))
       return;
     syncScrollMetrics(element2);
-    if (typeof ResizeObserver === "undefined")
+  });
+  const observeWrapperResize = useResizeObserver(() => {
+    if ($9.get(wrapperElement) && $9.get(shouldVirtualizeRows))
+      syncScrollMetrics($9.get(wrapperElement));
+  });
+  $9.user_effect(() => {
+    const element2 = $9.get(wrapperElement);
+    if (!element2 || !$9.get(shouldVirtualizeRows) || typeof ResizeObserver === "undefined")
       return;
     const observer = new ResizeObserver(() => syncScrollMetrics(element2));
-    observer.observe(element2);
     const caption = element2.querySelector("caption");
     if (caption)
       observer.observe(caption);
@@ -773,25 +1181,25 @@ function Data_table($$anchor, $$props) {
       observer.observe(header);
     return () => observer.disconnect();
   });
-  $8.user_pre_effect(() => {
+  $9.user_pre_effect(() => {
     const rowCount = $$props.rows.length;
-    const element2 = $8.get(wrapperElement);
+    const element2 = $9.get(wrapperElement);
     if (!hasObservedRowCount) {
       previousRowCount = rowCount;
       hasObservedRowCount = true;
       shouldStickAfterAppend = false;
       return;
     }
-    shouldStickAfterAppend = $8.get(shouldVirtualizeRows) && stickToBottom() && element2 !== undefined && rowCount > previousRowCount && isAtBottom(element2, previousRowCount * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight)));
+    shouldStickAfterAppend = $9.get(shouldVirtualizeRows) && stickToBottom() && element2 !== undefined && rowCount > previousRowCount && isAtBottom(element2, previousRowCount * $9.get(resolvedRowHeight), $9.get(viewportHeight), getTableChromeHeight($9.get(captionHeight), $9.get(headerHeight)));
     previousRowCount = rowCount;
   });
-  $8.user_effect(() => {
+  $9.user_effect(() => {
     const rowCount = $$props.rows.length;
-    const element2 = $8.get(wrapperElement);
-    if (!$8.get(shouldVirtualizeRows) || !stickToBottom() || !shouldStickAfterAppend || !element2)
+    const element2 = $9.get(wrapperElement);
+    if (!$9.get(shouldVirtualizeRows) || !stickToBottom() || !shouldStickAfterAppend || !element2)
       return;
     tick().then(() => {
-      element2.scrollTop = maxScrollTop(rowCount * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight)));
+      element2.scrollTop = maxScrollTop(rowCount * $9.get(resolvedRowHeight), $9.get(viewportHeight), getTableChromeHeight($9.get(captionHeight), $9.get(headerHeight)));
       syncScrollMetrics(element2);
       shouldStickAfterAppend = false;
     });
@@ -817,15 +1225,15 @@ function Data_table($$anchor, $$props) {
     const rect = element2.getBoundingClientRect();
     const nextCaptionHeight = getCaptionHeight(element2);
     const nextHeaderHeight = getHeaderHeight(element2);
-    $8.set(measuredViewportHeight, rect.height || element2.clientHeight || parsePixelLength(height()) || $8.get(resolvedRowHeight) * 10, true);
-    $8.set(captionHeight, nextCaptionHeight, true);
-    $8.set(headerHeight, nextHeaderHeight, true);
-    $8.set(scrollOffset, Math.max(0, element2.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight)), true);
+    $9.set(measuredViewportHeight, rect.height || element2.clientHeight || parsePixelLength(height()) || $9.get(resolvedRowHeight) * 10, true);
+    $9.set(captionHeight, nextCaptionHeight, true);
+    $9.set(headerHeight, nextHeaderHeight, true);
+    $9.set(scrollOffset, Math.max(0, element2.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight)), true);
   }
   function handleWrapperScroll(event) {
     if (typeof $$props.onscroll === "function")
       $$props.onscroll(event);
-    if (!$8.get(shouldVirtualizeRows))
+    if (!$9.get(shouldVirtualizeRows))
       return;
     syncScrollMetrics(event.currentTarget);
   }
@@ -839,12 +1247,12 @@ function Data_table($$anchor, $$props) {
     return stickyHeader() ? captionBlockSize : getTableChromeHeight(captionBlockSize, headerBlockSize);
   }
   function getTabbableRowIndex() {
-    if (!$8.get(shouldVirtualizeRows))
-      return $8.get(activeRowIndex);
-    if ($8.get(virtualRows).some((virtualRow) => virtualRow.index === $8.get(activeRowIndex))) {
-      return $8.get(activeRowIndex);
+    if (!$9.get(shouldVirtualizeRows))
+      return $9.get(activeRowIndex);
+    if ($9.get(virtualRows).some((virtualRow) => virtualRow.index === $9.get(activeRowIndex))) {
+      return $9.get(activeRowIndex);
     }
-    return $8.get(virtualRows)[0]?.index ?? $8.get(activeRowIndex);
+    return $9.get(virtualRows)[0]?.index ?? $9.get(activeRowIndex);
   }
   function isAtBottom(element2, totalBodyHeight, visibleHeight, chromeBlockSize) {
     return element2.scrollTop >= maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) - 1;
@@ -853,28 +1261,36 @@ function Data_table($$anchor, $$props) {
     return Math.min(Math.max(0, index), Math.max(0, $$props.rows.length - 1));
   }
   function scrollToRow(index) {
-    const element2 = $8.get(wrapperElement);
+    const element2 = $9.get(wrapperElement);
     if (!element2)
       return;
-    const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin($8.get(captionHeight), $8.get(headerHeight)) + index * $8.get(resolvedRowHeight);
-    element2.scrollTop = Math.min(maxScrollTop($$props.rows.length * $8.get(resolvedRowHeight), $8.get(viewportHeight), getTableChromeHeight($8.get(captionHeight), $8.get(headerHeight))), rowScrollTop);
+    const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin($9.get(captionHeight), $9.get(headerHeight)) + index * $9.get(resolvedRowHeight);
+    element2.scrollTop = Math.min(maxScrollTop($$props.rows.length * $9.get(resolvedRowHeight), $9.get(viewportHeight), getTableChromeHeight($9.get(captionHeight), $9.get(headerHeight))), rowScrollTop);
     syncScrollMetrics(element2);
   }
   function focusRow(index) {
     const nextIndex = clampRowIndex(index);
-    $8.set(activeRowIndex, nextIndex, true);
+    $9.set(activeRowIndex, nextIndex, true);
     scrollToRow(nextIndex);
     tick().then(() => {
-      const row = $8.get(wrapperElement)?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
+      const row = $9.get(wrapperElement)?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
       row?.focus({ preventScroll: true });
     });
   }
   function handleRowFocus(index) {
-    $8.set(activeRowIndex, clampRowIndex(index), true);
+    $9.set(activeRowIndex, clampRowIndex(index), true);
   }
   function handleRowKeydown(event, index) {
-    if (!$8.get(shouldVirtualizeRows))
+    if (!$9.get(shouldVirtualizeRows))
+      return;
+    if (event.key === " " && $9.get(selectionEnabled)) {
+      const row = $$props.rows[index];
+      if (!row || $$props.isRowSelectionDisabled?.(row, index))
+        return;
+      event.preventDefault();
+      setRowSelected(row, index, !$9.get(selectedRowIdSet).has(resolveRowId(row, index)));
       return;
+    }
     if (event.key === "ArrowDown") {
       event.preventDefault();
       focusRow(index + 1);
@@ -895,25 +1311,27 @@ function Data_table($$anchor, $$props) {
       focusRow($$props.rows.length - 1);
     }
   }
-  var div = root6();
-  $8.attribute_effect(div, ($0) => ({
+  var div = root7();
+  $9.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
-    "data-cinder-virtualized": $8.get(shouldVirtualizeRows) ? "true" : undefined,
+    "data-cinder-virtualized": $9.get(shouldVirtualizeRows) ? "true" : undefined,
+    "data-cinder-selectable": $9.get(selectionEnabled) || undefined,
     onscroll: handleWrapperScroll,
-    [$8.STYLE]: {
-      "--cinder-data-table-height": $8.get(shouldVirtualizeRows) ? height() : undefined,
-      "--_cinder-data-table-row-height": $8.get(shouldVirtualizeRows) ? `${$8.get(resolvedRowHeight)}px` : undefined
+    [$9.STYLE]: {
+      "--cinder-data-table-height": $9.get(shouldVirtualizeRows) ? height() : undefined,
+      "--_cinder-data-table-row-height": $9.get(shouldVirtualizeRows) ? `${$9.get(resolvedRowHeight)}px` : undefined
     }
   }), [
-    () => classNames("cinder-data-table", scrollable() || $8.get(shouldVirtualizeRows) ? "cinder-table-scroll" : undefined, $$props.class)
+    () => classNames("cinder-data-table", scrollable() || $9.get(shouldVirtualizeRows) ? "cinder-table-scroll" : undefined, $$props.class)
   ]);
-  var node_7 = $8.child(div);
-  table(node_7);
-  $8.reset(div);
-  $8.bind_this(div, ($$value) => $8.set(wrapperElement, $$value), () => $8.get(wrapperElement));
-  $8.append($$anchor, div);
-  $8.pop();
+  var node_11 = $9.child(div);
+  table(node_11);
+  $9.reset(div);
+  $9.bind_this(div, ($$value) => $9.set(wrapperElement, $$value), () => $9.get(wrapperElement));
+  $9.attach(div, () => observeWrapperResize);
+  $9.append($$anchor, div);
+  $9.pop();
 }
 
 // src/components/data-table/index.ts
@@ -923,4 +1341,4 @@ export {
   Data_table as DataTable
 };
 
-//# debugId=581D6FFDE2A96C2A64756E2164756E21
+//# debugId=2DEBD13F43DF1B7E64756E2164756E21