@lostgradient/cinder 0.1.0 → 0.2.0

package/src/components/data-table/data-table.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category data-display
+   * @status alpha
+   * @purpose Data-driven convenience wrapper over the compositional Table family that renders a full semantic table from a columns array and a rows array.
+   * @tag table
+   * @tag data
+   * @useWhen Rendering a structured dataset where columns and rows are known at runtime (e.g. API responses, config-driven dashboards).
+   * @useWhen You want correct scope=col / scope=row semantics and aria-sort wiring without writing Table.Header / Table.Body manually.
+   * @avoidWhen You need custom cell rendering, interactive cells, nested components, or column spanning — use the compositional Table family directly.
+   * @avoidWhen You need row selection — DataTable does not expose a selection prop; use Table with selectable instead.
+   * @related table, table-header, table-body, table-row, table-cell, table-header-cell
+   */
+  export type { DataTableColumn, DataTableProps, DataTableRow } from './data-table.types.ts';
+</script>
+
+<script lang="ts" generics="Row extends DataTableRow">
+  import TableBody from '../table-body/table-body.svelte';
+  import TableCell from '../table-cell/table-cell.svelte';
+  import TableHeaderCell from '../table-header-cell/table-header-cell.svelte';
+  import TableHeader from '../table-header/table-header.svelte';
+  import TableRow from '../table-row/table-row.svelte';
+  import TableRoot from '../table/table.svelte';
+
+  import { classNames } from '../../utilities/class-names.ts';
+  import type { DataTableColumn, DataTableProps, DataTableRow } from './data-table.types.ts';
+
+  let {
+    columns,
+    rows,
+    caption,
+    sort = $bindable(),
+    stickyHeader = false,
+    density = 'comfortable',
+    scrollable = false,
+    class: className,
+  }: DataTableProps<Row> = $props();
+
+  /**
+   * The key of the row-header column. Explicitly set via `column.rowHeader === true`,
+   * or falls back to the first column's key. Used to render `<th scope="row">` on
+   * the appropriate body cell.
+   */
+  const rowHeaderKey = $derived(
+    (columns.find((column) => column.rowHeader === true) ?? columns[0])?.key,
+  );
+
+  /**
+   * Map a DataTableColumn's `align` value to the value accepted by TableHeaderCell
+   * and TableCell (`'left' | 'center' | 'right'`).
+   */
+  function mapAlign(align: DataTableColumn['align']): 'left' | 'center' | 'right' | undefined {
+    if (align === 'start') return 'left';
+    if (align === 'end') return 'right';
+    if (align === 'center') return 'center';
+    return undefined;
+  }
+</script>
+
+{#snippet table()}
+  <TableRoot {...caption !== undefined ? { caption } : {}} {stickyHeader} {density} bind:sort>
+    <TableHeader>
+      <TableRow>
+        {#each columns as column (column.key)}
+          <TableHeaderCell
+            {...column.sortable ? { column: column.key } : {}}
+            sortable={column.sortable ?? false}
+            align={mapAlign(column.align) ?? 'left'}
+          >
+            {column.label}
+          </TableHeaderCell>
+        {/each}
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <!-- Key by positional index, not the row-header value: row-header values
+           (names, labels, statuses) are display data and are NOT guaranteed
+           unique, so keying by them would corrupt row identity when two rows
+           share a value. DataTable does not reorder rows itself, so the index
+           is a stable identity for the consumer-owned ordering. -->
+      {#each rows as row, rowIndex (rowIndex)}
+        <TableRow>
+          {#each columns as column (column.key)}
+            <TableCell
+              as={column.key === rowHeaderKey ? 'th' : 'td'}
+              align={mapAlign(column.align) ?? 'left'}
+            >
+              {row[column.key]}
+            </TableCell>
+          {/each}
+        </TableRow>
+      {/each}
+    </TableBody>
+  </TableRoot>
+{/snippet}
+
+{#if scrollable}
+  <div class={classNames('cinder-data-table', 'cinder-table-scroll', className)}>
+    {@render table()}
+  </div>
+{:else}
+  <div class={classNames('cinder-data-table', className)}>
+    {@render table()}
+  </div>
+{/if}

package/src/components/data-table/data-table.types.ts

@@ -0,0 +1,89 @@
+import type { TableDensity, TableSort } from '../table/table.types.ts';
+
+/**
+ * A generic record type representing a single data row.
+ * Keys are strings; values may be anything renderable.
+ */
+export type DataTableRow = Record<string, unknown>;
+
+/**
+ * Column descriptor for a DataTable.
+ *
+ * @template Row - The row record type. Defaults to `DataTableRow`.
+ */
+export type DataTableColumn<Row extends DataTableRow = DataTableRow> = {
+  /**
+   * The key used to read the cell value from each row object.
+   * Should be a key of `Row` when Row is a typed record.
+   */
+  key: keyof Row & string;
+  /** Human-readable column label rendered in the `<th scope="col">` header cell. */
+  label: string;
+  /**
+   * When true, the header cell renders a sort button and reports `aria-sort`.
+   * Sort state is controlled by the consumer via the `sort` bindable — DataTable
+   * never reorders rows itself.
+   */
+  sortable?: boolean;
+  /**
+   * Horizontal alignment for both the header and body cells of this column.
+   * - `'start'` maps to left-aligned text (default).
+   * - `'center'` maps to centered text.
+   * - `'end'` maps to right-aligned text with `font-variant-numeric: tabular-nums`.
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * When true, the body cells in this column render as `<th scope="row">` instead
+   * of `<td>`, identifying this column as the row-header for assistive technology.
+   *
+   * At most one column should set `rowHeader: true`. If no column sets it, the
+   * first column automatically acts as the row header.
+   */
+  rowHeader?: boolean;
+};
+
+/**
+ * Props for the DataTable component.
+ *
+ * DataTable is a data-driven convenience wrapper over the compositional Table family.
+ * It accepts an array of column descriptors and row records and renders the correct
+ * semantic table markup automatically. For full compositional control, use Table,
+ * Table.Header, Table.Body, Table.Row, Table.HeaderCell, and Table.Cell directly.
+ *
+ * @template Row - The row record type. Defaults to `DataTableRow`.
+ */
+export type DataTableProps<Row extends DataTableRow = DataTableRow> = {
+  /** Column descriptors defining the headers and cell rendering for each column. */
+  columns: DataTableColumn<Row>[];
+  /** Row data. Each entry is read via `column.key` for each column. */
+  rows: Row[];
+  /** Visual caption rendered as a `<caption>` element above the table. */
+  caption?: string;
+  /**
+   * Bound sort state. When the user activates a sortable header cell, this prop
+   * is updated with the new `{ column, direction }`. The consumer is responsible
+   * for reordering `rows` in response — DataTable does not sort internally.
+   *
+   * Pass `undefined` initially when no column is sorted; the component will never
+   * write back `undefined` itself (sort always toggles to a column).
+   */
+  sort?: TableSort | undefined;
+  /** When true, the header sticks to the top of the scrolling container. */
+  stickyHeader?: boolean;
+  /**
+   * Vertical padding density for header and body cells.
+   * Defaults to `'comfortable'`.
+   */
+  density?: TableDensity;
+  /**
+   * When true, wraps the table in a `.cinder-table-scroll` container that
+   * enables horizontal overflow scrolling on small viewports.
+   */
+  scrollable?: boolean;
+  /**
+   * Additional class names merged onto DataTable's root wrapper element (the
+   * `<div class="cinder-data-table">` that contains the table). To style the
+   * `<table>` itself, target `.cinder-data-table table` from this class.
+   */
+  class?: string;
+};

package/src/components/data-table/data-table.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/data-table/data-table.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/data-table/index.ts

@@ -0,0 +1,6 @@
+import './data-table.css';
+import DataTable from './data-table.svelte';
+
+export default DataTable;
+export type { DataTableColumn, DataTableProps, DataTableRow } from './data-table.types.ts';
+export { DataTable };

package/src/components/diff-viewer/README.md

@@ -0,0 +1,59 @@
+# DiffViewer
+
+Side-by-side or unified Markdown diff surface with hunk grouping, word-level inline changes, and size-based debounce gating.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { DiffViewer } from '@lostgradient/cinder/diff-viewer';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Comparing two Markdown documents and wanting the bundled toolbar, view-mode toggle, front-matter handling, and large-payload safeguards.
+- Building a review workflow that needs hunked, line-anchored Markdown diffs out of the box as a heavyweight suite.
+
+### Avoid When
+
+- Showing only a counts summary — use diff-statistics on its own for a lightweight presentation.
+- Diffing non-Markdown source code where syntax-aware highlighting matters more than prose-aware rendering.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop              | Type                                     | Required | Default | Description                                                                                                                                                                                                     |
+| ----------------- | ---------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`           | `string`                                 | no       | —       | Additional CSS classes                                                                                                                                                                                          |
+| `current`         | `string`                                 | yes      | —       | The current/modified text                                                                                                                                                                                       |
+| `normalizeInputs` | `boolean`                                | no       | —       | Whether to normalize markdown inputs before comparison. When true (default), both original and current are normalized to canonical form before diffing, preventing false positives from formatting differences. |
+| `original`        | `string`                                 | yes      | —       | The original/baseline text                                                                                                                                                                                      |
+| `readonly`        | `boolean`                                | no       | —       | Whether the viewer is read-only (hides revert buttons)                                                                                                                                                          |
+| `viewMode`        | `"unified"` \| `"final"` \| `"original"` | no       | —       | Bindable: reactive access to current view mode. Parent components can bind to control or observe the view mode.                                                                                                 |
+| `hunks`           | `(opaque)`                               | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                         |
+| `onrevertall`     | `(opaque)`                               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                      |
+| `onreverthunk`    | `(opaque)`                               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                      |
+| `toolbar`         | `(opaque)`                               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                      |
+| `toolbarActions`  | `(opaque)`                               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                      |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/diff-viewer/front-matter-header.svelte

@@ -142,10 +142,26 @@
   }
 
   .front-matter-header:focus-visible {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
-      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .front-matter-header[data-variant='inline']:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: inset 0 0 0 var(--cinder-ring-width)
+      var(--_cinder-front-matter-header-ring, var(--cinder-ring-color));
+  }
+
+  @media (forced-colors: active) {
+    .front-matter-header:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
+
+    .front-matter-header[data-variant='inline']:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(var(--cinder-ring-width) * -1);
+    }
   }
 
   .front-matter-icon {

package/src/components/dropdown-group/README.md

@@ -0,0 +1,52 @@
+# DropdownGroup
+
+Accessible group boundary that clusters related dropdown-item rows inside a dropdown-menu.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { DropdownGroup } from '@lostgradient/cinder/dropdown-group';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Grouping related dropdown actions under one accessible heading.
+- Pairing dropdown-label with a role='group' container inside dropdown-menu.
+
+### Avoid When
+
+- Rendering a clickable row — use dropdown-item.
+- Separating sections without a group label — use dropdown-separator.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop         | Type       | Required | Default | Description                                                                                                                |
+| ------------ | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `ariaLabel`  | `string`   | no       | —       |                                                                                                                            |
+| `class`      | `string`   | no       | —       | Additional class names merged onto the group root.                                                                         |
+| `labelledBy` | `string`   | no       | —       |                                                                                                                            |
+| `children`   | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/dropdown-item/README.md

@@ -14,13 +14,16 @@ snippet. The flat `@lostgradient/cinder/dropdown-item` subpath remains exported
 
 <!-- generated:props:start -->
 
-| Prop            | Type                      | Required | Default | Description                                                                                                                |
-| --------------- | ------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `class`         | `string`                  | no       | —       |                                                                                                                            |
-| `closeOnSelect` | `boolean`                 | no       | —       |                                                                                                                            |
-| `inset`         | `boolean`                 | no       | —       |                                                                                                                            |
-| `variant`       | `"default"` \| `"danger"` | no       | —       |                                                                                                                            |
-| `children`      | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| Prop            | Type                                  | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`         | `string`                              | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `closeOnSelect` | `boolean`                             | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `disabled`      | `boolean`                             | no       | —       | When true the item is inert: click is blocked and aria-disabled is set.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `href`          | `string`                              | no       | —       | Destination URL. Any defined value — including an empty string — selects the anchor branch and renders an `<a>`. Omit `href` entirely to render a `<button>`.                                                                                                                                                                                                                                                                                                                                             |
+| `inset`         | `boolean`                             | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `type`          | `"button"` \| `"submit"` \| `"reset"` | no       | —       | Button type forwarded to the `<button>` element. Defaults to `"button"`. NOTE: `type="submit"` only submits a surrounding `<form>` when the menu stays inside that form's DOM subtree. DropdownMenu portals its panel to `document.body` on the non-popover fallback path, so a submit item is then NOT a form descendant and native submission is skipped. To submit a form from a portaled menu, set `form="<form-id>"` to associate the button with the form by id, or handle submission in `onclick`. |
+| `variant`       | `"default"` \| `"danger"`             | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `children`      | `(opaque)`                            | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                |
 
 <!-- generated:props:end -->
 

package/src/components/dropdown-item/dropdown-item.schema.json

@@ -13,6 +13,18 @@
     },
     "class": {
       "type": "string"
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "When true the item is inert: click is blocked and aria-disabled is set."
+    },
+    "href": {
+      "type": "string",
+      "description": "Destination URL. Any defined value — including an empty string — selects\nthe anchor branch and renders an `<a>`. Omit `href` entirely to render a\n`<button>`."
+    },
+    "type": {
+      "enum": ["button", "submit", "reset"],
+      "description": "Button type forwarded to the `<button>` element. Defaults to `\"button\"`.\n\nNOTE: `type=\"submit\"` only submits a surrounding `<form>` when the menu\nstays inside that form's DOM subtree. DropdownMenu portals its panel to\n`document.body` on the non-popover fallback path, so a submit item is then\nNOT a form descendant and native submission is skipped. To submit a form\nfrom a portaled menu, set `form=\"<form-id>\"` to associate the button with\nthe form by id, or handle submission in `onclick`."
     }
   },
   "additionalProperties": false,

package/src/components/dropdown-item/dropdown-item.schema.ts

@@ -16,6 +16,20 @@ const schema = {
     class: {
       type: 'string',
     },
+    disabled: {
+      type: 'boolean',
+      description: 'When true the item is inert: click is blocked and aria-disabled is set.',
+    },
+    href: {
+      type: 'string',
+      description:
+        'Destination URL. Any defined value — including an empty string — selects\nthe anchor branch and renders an `<a>`. Omit `href` entirely to render a\n`<button>`.',
+    },
+    type: {
+      enum: ['button', 'submit', 'reset'],
+      description:
+        'Button type forwarded to the `<button>` element. Defaults to `"button"`.\n\nNOTE: `type="submit"` only submits a surrounding `<form>` when the menu\nstays inside that form\'s DOM subtree. DropdownMenu portals its panel to\n`document.body` on the non-popover fallback path, so a submit item is then\nNOT a form descendant and native submission is skipped. To submit a form\nfrom a portaled menu, set `form="<form-id>"` to associate the button with\nthe form by id, or handle submission in `onclick`.',
+    },
   },
   additionalProperties: false,
   metadata: {

package/src/components/dropdown-item/dropdown-item.svelte

@@ -12,10 +12,17 @@
    * @avoidWhen Grouping a static heading row above menu items — use dropdown-label.
    * @related dropdown, dropdown-menu, dropdown-label, dropdown-separator
    */
-  export type { DropdownItemProps, DropdownItemVariant } from './dropdown-item.types.ts';
+  export type {
+    DropdownItemAnchorProps,
+    DropdownItemButtonProps,
+    DropdownItemProps,
+    DropdownItemVariant,
+  } from './dropdown-item.types.ts';
 </script>
 
 <script lang="ts">
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
   import type { DropdownItemProps } from './dropdown-item.types.ts';
 
   import { classNames } from '../../utilities/class-names.ts';
@@ -28,27 +35,88 @@
     closeOnSelect = true,
     class: customClassName,
     onclick,
+    onkeydown,
+    href,
     children,
     ...rest
   }: DropdownItemProps = $props();
 
   const context = getDropdownContext();
 
-  type DropdownItemClickHandler = (
+  const isLink = $derived(href !== undefined);
+
+  const sharedClass = $derived(
+    classNames(
+      'cinder-_option-row',
+      'cinder-dropdown-item',
+      inset && 'cinder-dropdown-item--inset',
+      customClassName,
+    ),
+  );
+
+  type ButtonClickHandler = (
     event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
   ) => void;
 
+  type AnchorClickHandler = (
+    event: MouseEvent & { currentTarget: EventTarget & HTMLAnchorElement },
+  ) => void;
+
   function handleClick(
-    event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
+    event: MouseEvent & { currentTarget: EventTarget & (HTMLButtonElement | HTMLAnchorElement) },
   ): void {
-    if (disabled) return;
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
     if (typeof onclick === 'function') {
-      (onclick as DropdownItemClickHandler)(event);
+      if (isLink) {
+        (onclick as AnchorClickHandler)(
+          event as MouseEvent & { currentTarget: EventTarget & HTMLAnchorElement },
+        );
+      } else {
+        (onclick as ButtonClickHandler)(
+          event as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
+        );
+      }
     }
     if (closeOnSelect) {
       context.close();
     }
   }
+
+  type AnchorKeydownHandler = (
+    event: KeyboardEvent & { currentTarget: EventTarget & HTMLAnchorElement },
+  ) => void;
+
+  // A native `<a>` activates on Enter but NOT Space, whereas a `<button>` (and
+  // the WAI-ARIA menuitem pattern) activates on both. Without this, Space on a
+  // link row would scroll the page instead of following the row — inconsistent
+  // with button rows. Translate Space into an activation click on the anchor,
+  // while still forwarding any consumer-provided onkeydown handler (which runs
+  // first and may preventDefault to opt out of Space-to-activate).
+  function handleAnchorKeydown(
+    event: KeyboardEvent & { currentTarget: EventTarget & HTMLAnchorElement },
+  ): void {
+    if (typeof onkeydown === 'function') {
+      (onkeydown as AnchorKeydownHandler)(event);
+    }
+    if (event.defaultPrevented) return;
+    if (event.key !== ' ' && event.key !== 'Spacebar') return;
+    event.preventDefault(); // stop the page from scrolling
+    if (disabled) return;
+    event.currentTarget.click();
+  }
+
+  const anchorAttributes = rest as Omit<
+    HTMLAnchorAttributes,
+    'class' | 'href' | 'onclick' | 'onkeydown'
+  >;
+  const buttonAttributes = rest as Omit<
+    HTMLButtonAttributes,
+    'class' | 'type' | 'disabled' | 'onclick'
+  >;
+  const buttonType = $derived((rest as { type?: HTMLButtonAttributes['type'] }).type ?? 'button');
 </script>
 
 <!--
@@ -56,23 +124,38 @@
   cannot override role="menuitem", tabindex (the roving-focus model), aria-disabled,
   or the click handler — overriding any of those would break menu semantics.
 -->
-<button
-  {...rest}
-  type="button"
-  role="menuitem"
-  class={classNames(
-    'cinder-_option-row',
-    'cinder-dropdown-item',
-    inset && 'cinder-dropdown-item--inset',
-    customClassName,
-  )}
-  data-cinder-variant={variant}
-  tabindex={-1}
-  data-disabled={disabled ? '' : undefined}
-  aria-disabled={disabled ? 'true' : undefined}
-  onclick={handleClick}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</button>
+{#if isLink}
+  <a
+    {...anchorAttributes}
+    {href}
+    role="menuitem"
+    class={sharedClass}
+    data-cinder-variant={variant}
+    tabindex={-1}
+    data-disabled={disabled ? '' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+    onclick={handleClick}
+    onkeydown={handleAnchorKeydown}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button
+    {...buttonAttributes}
+    type={buttonType}
+    role="menuitem"
+    class={sharedClass}
+    data-cinder-variant={variant}
+    tabindex={-1}
+    data-disabled={disabled ? '' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+    onclick={handleClick}
+    {onkeydown}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}