@ui-organized/svelte-table 0.0.0-stage → 0.1.0

package/dist/components/TablePagination/TablePagination.svelte

@@ -0,0 +1,61 @@
+<!--
+  Wraps the library's `Pagination`, which takes a page *count* — the conversion
+  from row count and page size happens here so consumers never do that arithmetic
+  themselves and get the off-by-one wrong.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Pagination, Select } from "@ui-organized/svelte";
+  import { PAGE_SIZE_OPTIONS, pageSizeOptions } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+
+  let {
+    showPageSize = true,
+    pageSizes = [...PAGE_SIZE_OPTIONS],
+    class: className,
+  }: { showPageSize?: boolean; pageSizes?: number[]; class?: string } = $props();
+
+  const table = getTable();
+  const pagination = $derived(table.state.pagination);
+  const pageIndex = $derived(pagination?.pageIndex ?? 0);
+  const pageSize = $derived(pagination?.pageSize ?? 10);
+  const total = $derived(table.selection.totalMatching);
+  const pageCount = $derived(Math.max(1, Math.ceil(total / pageSize)));
+
+  const first = $derived(total === 0 ? 0 : pageIndex * pageSize + 1);
+  const last = $derived(Math.min(total, (pageIndex + 1) * pageSize));
+  const status = $derived(total === 0 ? "No rows" : `${first}–${last} of ${total}`);
+  const sizeOptions = $derived(
+    pageSizeOptions(pageSizes, pageSize).map((entry) => ({
+      value: String(entry),
+      label: String(entry),
+    })),
+  );
+</script>
+
+<div class={clsx("data-table__pagination", className)}>
+  <!--
+    Announced on change, because the rows it describes change underneath a screen
+    reader user with no other signal that anything happened.
+  -->
+  <span class="data-table__pagination-status" aria-live="polite">{status}</span>
+
+  <Pagination
+    page={pageIndex + 1}
+    count={pageCount}
+    onPageChange={(page) => table.table.setPageIndex(page - 1)}
+  />
+
+  {#if showPageSize}
+    <div class="data-table__page-size">
+      <Select
+        size={table.size}
+        variant="ghost"
+        label="Rows per page"
+        value={String(pageSize)}
+        options={sizeOptions}
+        onValueChange={(next) => table.table.setPageSize(Number(next))}
+      />
+    </div>
+  {/if}
+</div>

package/dist/components/TablePagination/TablePagination.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    showPageSize?: boolean;
+    pageSizes?: number[];
+    class?: string;
+};
+declare const TablePagination: import("svelte").Component<$$ComponentProps, {}, "">;
+type TablePagination = ReturnType<typeof TablePagination>;
+export default TablePagination;
+//# sourceMappingURL=TablePagination.svelte.d.ts.map

package/dist/components/TablePagination/TablePagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TablePagination/TablePagination.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA+C3F,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as TablePagination } from "./TablePagination.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TablePagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TablePagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/TablePagination/index.js

@@ -0,0 +1 @@
+export { default as TablePagination } from "./TablePagination.svelte";

package/dist/components/TableRowActions/TableRowActions.svelte

@@ -0,0 +1,68 @@
+<!--
+  Per-row actions, as a menu rather than a row of buttons.
+
+  A menu is one tab stop per row instead of three, which matters a great deal
+  when there are two hundred rows — and it is the only affordance that survives
+  card mode unchanged.
+-->
+<script lang="ts" generics="T extends RowData">
+  import { Button, Menu, MenuContent, MenuItem, MenuTrigger } from "@ui-organized/svelte";
+  import type { RowData } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import type { RowAction } from "../../core/types.js";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let {
+    row,
+    actions,
+    label = "Row actions",
+  }: {
+    /** The row the actions operate on. */
+    row: T;
+    /**
+     * Overrides the table's own `rowActions`. Only needed when the part is used
+     * outside a `<DataTable>`.
+     */
+    actions?: RowAction<T>[];
+    /** Accessible name for the trigger. Defaults to "Row actions". */
+    label?: string;
+  } = $props();
+
+  const table = getTable<T>();
+  const items = $derived(actions ?? table.options.rowActions ?? []);
+</script>
+
+{#if items.length > 0}
+  <Menu>
+    <!--
+      `asChild` as a snippet, which is Ark Svelte's own convention: the trigger
+      hands its props in and the consumer spreads them at the point of use. That
+      is what puts the trigger's `id`, `aria-expanded` and click handler on the
+      Button rather than on a wrapper around it.
+    -->
+    <MenuTrigger>
+      {#snippet asChild(props)}
+        <Button
+          {...(props() as Record<string, never>)}
+          intent="ghost"
+          size={table.size}
+          icon={glyph("menu")}
+          aria-label={label}
+        />
+      {/snippet}
+    </MenuTrigger>
+    <MenuContent align="end">
+      {#each items as action (action.id)}
+        <MenuItem
+          value={action.id}
+          icon={action.icon}
+          destructive={action.destructive}
+          disabled={action.disabled?.(row)}
+          onSelect={() => void action.onRun(row)}
+        >
+          {action.label}
+        </MenuItem>
+      {/each}
+    </MenuContent>
+  </Menu>
+{/if}

package/dist/components/TableRowActions/TableRowActions.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { RowData } from "@ui-organized/table-core";
+import type { RowAction } from "../../core/types.js";
+declare function $$render<T extends RowData>(): {
+    props: {
+        /** The row the actions operate on. */
+        row: T;
+        /**
+         * Overrides the table's own `rowActions`. Only needed when the part is used
+         * outside a `<DataTable>`.
+         */
+        actions?: RowAction<T>[];
+        /** Accessible name for the trigger. Defaults to "Row actions". */
+        label?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableRowActions: $$IsomorphicComponent;
+type TableRowActions<T extends RowData> = InstanceType<typeof TableRowActions<T>>;
+export default TableRowActions;
+//# sourceMappingURL=TableRowActions.svelte.d.ts.map

package/dist/components/TableRowActions/TableRowActions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableRowActions/TableRowActions.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;QAO/B,sCAAsC;aACjC,CAAC;QACN;;;WAGG;kBACO,SAAS,CAAC,CAAC,CAAC,EAAE;QACxB,kEAAkE;gBAC1D,MAAM;;;;;;EAiCuG;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,OAAO;IACrC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5Y,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,eAAe,EAAE,qBAAmC,CAAC;AACzC,KAAK,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACpF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as TableRowActions } from "./TableRowActions.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableRowActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableRowActions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/TableRowActions/index.js

@@ -0,0 +1 @@
+export { default as TableRowActions } from "./TableRowActions.svelte";

package/dist/components/TableSelectionBar/TableSelectionBar.svelte

@@ -0,0 +1,88 @@
+<!--
+  Appears only while something is selected, and then takes the place of the
+  toolbar's sort, filter and table actions: with rows selected, what to do with
+  them is the decision in front of the user, so it sits where they were already
+  looking rather than on a line of its own. The count, and the offer to select
+  the rows off screen, are in `TableSelectionFooter` under the rows.
+
+  Plain buttons in a labelled group, with no surface of its own. It shares the
+  toolbar row with the search box, so `role="toolbar"`'s roving focus would make
+  it the only cluster in that row that Tab skips through. Destructive actions
+  route through `AlertDialog`; "archive 40,000 rows" is not an undo-able
+  mis-click.
+-->
+<script lang="ts" generics="T extends RowData">
+  import { clsx } from "clsx";
+  import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogConfirm,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    Button,
+  } from "@ui-organized/svelte";
+  import type { RowData } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import type { BulkAction } from "../../core/types.js";
+
+  let { actions, class: className }: { actions?: BulkAction<T>[]; class?: string } = $props();
+  const table = getTable<T>();
+
+  let confirming = $state<BulkAction<T> | null>(null);
+  const items = $derived(actions ?? table.options.bulkActions ?? []);
+  const count = $derived(table.selection.count);
+  const rowsWord = $derived(count === 1 ? "1 row" : `${count} rows`);
+
+  const run = (action: BulkAction<T>) => {
+    void action.onRun(table.selection.rows, table.selection.asBulk());
+  };
+  const choose = (action: BulkAction<T>) => {
+    if (action.destructive) confirming = action;
+    else run(action);
+  };
+</script>
+
+{#if count > 0}
+  <div role="group" class={clsx("data-table__selection-bar", className)} aria-label="Bulk actions">
+    {#each items as action (action.id)}
+      <Button
+        size={table.size}
+        intent={action.destructive ? "destructive-ghost" : "ghost"}
+        icon={action.icon}
+        onclick={() => choose(action)}
+      >
+        {action.label}
+      </Button>
+    {/each}
+
+    <Button size={table.size} intent="ghost" onclick={() => table.selection.clear()}>
+      Clear
+    </Button>
+
+    <AlertDialog open={confirming !== null} onOpenChange={(open) => !open && (confirming = null)}>
+      <AlertDialogContent>
+        <AlertDialogTitle>
+          {confirming?.confirm?.title ?? `${confirming?.label ?? "Continue"}?`}
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          {confirming?.confirm?.description ??
+            `This will ${confirming?.label.toLowerCase() ?? "act on"} ${rowsWord}. This cannot be undone.`}
+        </AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogConfirm
+            intent="destructive"
+            onclick={() => {
+              if (confirming) run(confirming);
+              confirming = null;
+            }}
+          >
+            {confirming?.confirm?.confirmLabel ?? confirming?.label ?? "Confirm"}
+          </AlertDialogConfirm>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </div>
+{/if}

package/dist/components/TableSelectionBar/TableSelectionBar.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { RowData } from "@ui-organized/table-core";
+import type { BulkAction } from "../../core/types.js";
+declare function $$render<T extends RowData>(): {
+    props: {
+        actions?: BulkAction<T>[];
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableSelectionBar: $$IsomorphicComponent;
+type TableSelectionBar<T extends RowData> = InstanceType<typeof TableSelectionBar<T>>;
+export default TableSelectionBar;
+//# sourceMappingURL=TableSelectionBar.svelte.d.ts.map

package/dist/components/TableSelectionBar/TableSelectionBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSelectionBar/TableSelectionBar.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;kBAMK,UAAU,CAAC,CAAC,CAAC,EAAE;gBAAU,MAAM;;;;;;EAwDkD;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,OAAO;IACrC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5Y,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,iBAAiB,EAAE,qBAAmC,CAAC;AAC3C,KAAK,iBAAiB,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AACxF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as TableSelectionBar } from "./TableSelectionBar.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableSelectionBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSelectionBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/TableSelectionBar/index.js

@@ -0,0 +1 @@
+export { default as TableSelectionBar } from "./TableSelectionBar.svelte";

package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte

@@ -0,0 +1,38 @@
+<!--
+  Under the rows: how many are selected, and the offer to select the matching
+  rows that are not on screen.
+
+  At the bottom rather than in the toolbar, because that is where the user's
+  eye is once they have ticked down a page — and where the visible rows run out
+  is where "there are more of these" belongs. The bulk actions stay in the
+  toolbar (see `TableSelectionBar`).
+
+  The offer is a real button, and counts the rows it would *add*: "Select
+  99,981 hidden rows" says plainly that the ticks so far only reached what was
+  visible.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Button } from "@ui-organized/svelte";
+  import { selectHiddenLabel, selectionCountLabel } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+</script>
+
+{#if table.selection.count > 0}
+  <div class={clsx("data-table__selection-footer", className)}>
+    <!-- Announced on change: ticking a row changes nothing else a screen
+         reader user would hear. -->
+    <span class="data-table__selection-count" aria-live="polite">
+      {selectionCountLabel(table.selection.count)}
+    </span>
+
+    {#if table.selection.canSelectAllMatching}
+      <Button size={table.size} intent="secondary" onclick={() => table.selection.selectAllMatching()}>
+        {selectHiddenLabel(table.selection.totalMatching, table.selection.count)}
+      </Button>
+    {/if}
+  </div>
+{/if}

package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const TableSelectionFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableSelectionFooter = ReturnType<typeof TableSelectionFooter>;
+export default TableSelectionFooter;
+//# sourceMappingURL=TableSelectionFooter.svelte.d.ts.map

package/dist/components/TableSelectionFooter/TableSelectionFooter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionFooter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSelectionFooter/TableSelectionFooter.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B7C,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as TableSelectionFooter } from "./TableSelectionFooter.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableSelectionFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSelectionFooter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/components/TableSelectionFooter/index.js

@@ -0,0 +1 @@
+export { default as TableSelectionFooter } from "./TableSelectionFooter.svelte";

package/dist/components/TableSheets/TableFilterSheet.svelte

@@ -0,0 +1,150 @@
+<!--
+  Every filterable field at once, one accordion section each, so filtering on a
+  phone is "open the field, pick the value" rather than "add a filter, choose
+  its field, then pick the value".
+
+  Each section edits a real condition. While the sheet is open every field has
+  at least one, so its editor has something to write to: the sheet adds an
+  empty draft for any field without one. A draft is an incomplete condition,
+  which the filter model keeps but never applies, so drafts change nothing
+  until they are given a value; the badge counts only complete conditions; and
+  closing the sheet removes the drafts nobody filled in.
+-->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import {
+    Accordion,
+    Button,
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetFooter,
+    SheetTitle,
+    SheetTrigger,
+  } from "@ui-organized/svelte";
+  import type { AccordionItem } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import TableFilterSheetCondition from "./TableFilterSheetCondition.svelte";
+  import TableSheetButton from "./TableSheetButton.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { label = "Filter", class: className }: { label?: string; class?: string } = $props();
+  const table = getTable();
+
+  let open = $state(false);
+  const fields = $derived(table.filters.fields);
+  const conditions = $derived(table.filters.conditions);
+  const applied = $derived(conditions.filter((c) => table.filters.describe(c).complete));
+  const count = $derived(applied.length);
+
+  // Re-run on every change while open, not just on opening: "Clear" empties a
+  // field, and that field then needs a fresh draft to keep its editor.
+  const missingKey = $derived(
+    open
+      ? fields
+          .filter((field) => !conditions.some((c) => c.columnId === field.columnId))
+          .map((field) => field.columnId)
+          .join(",")
+      : "",
+  );
+  $effect(() => {
+    const key = missingKey;
+    if (!key) return;
+    untrack(() => {
+      for (const columnId of key.split(",")) table.filters.add(columnId);
+      // `filters.add` also marks the condition as being edited, which opens a
+      // chip's popover in table mode. There are no chips here; undo it.
+      table.filters.setEditing(null);
+    });
+  });
+
+  const onOpenChange = (next: boolean) => {
+    open = next;
+    if (!next) {
+      for (const condition of table.filters.conditions) {
+        if (!table.filters.describe(condition).complete) table.filters.remove(condition.id);
+      }
+    }
+  };
+
+  const items = $derived<AccordionItem[]>(
+    fields.map((field) => ({
+      value: field.columnId,
+      title: sectionTitle,
+      content: sectionContent,
+    })),
+  );
+  const fieldOf = (item: AccordionItem) => fields.find((f) => f.columnId === item.value);
+  const conditionsOf = (item: AccordionItem) => conditions.filter((c) => c.columnId === item.value);
+  const summaryOf = (item: AccordionItem) =>
+    conditionsOf(item)
+      .map((c) => table.filters.describe(c))
+      .filter((d) => d.complete)
+      .map((d) => `${d.relative} ${d.value}`)
+      .join("; ");
+</script>
+
+{#snippet sectionTitle(item: AccordionItem)}
+  {@const summary = summaryOf(item)}
+  <span class="data-table__sheet-section-title">
+    <span>{fieldOf(item)?.label}</span>
+    <!-- What is applied stays readable with the section collapsed. -->
+    {#if summary}<span class="data-table__sheet-section-summary">{summary}</span>{/if}
+  </span>
+{/snippet}
+
+{#snippet sectionContent(item: AccordionItem)}
+  <div class="data-table__sheet-section">
+    {#each conditionsOf(item) as condition (condition.id)}
+      <TableFilterSheetCondition {condition} fieldLabel={fieldOf(item)?.label ?? ""} />
+    {/each}
+  </div>
+{/snippet}
+
+{#if fields.length > 0}
+  <Sheet {open} {onOpenChange}>
+    <SheetTrigger>
+      {#snippet asChild(props)}
+        <TableSheetButton
+          {...props()}
+          icon={glyph("filter")}
+          {label}
+          {count}
+          unit="applied"
+          class={className}
+        />
+      {/snippet}
+    </SheetTrigger>
+    <SheetContent side="bottom" size="lg" class="data-table__sheet">
+      <SheetTitle>{label}</SheetTitle>
+      <div class="data-table__sheet-body">
+        <!--
+          Every section starts collapsed, so the whole list of fields fits on
+          screen at once; each header says what it applies, so nothing is
+          hidden by being closed. Open one to edit it.
+        -->
+        <Accordion multiple class="data-table__sheet-sections" {items}
+        />
+      </div>
+      <SheetFooter>
+        <Button
+          intent="ghost"
+          size="lg"
+          disabled={count === 0}
+          onclick={() => {
+            for (const condition of applied) table.filters.remove(condition.id);
+          }}
+        >
+          Clear all
+        </Button>
+        <SheetClose>
+          {#snippet asChild(props)}
+            <Button {...(props() as Record<string, never>)} intent="primary" size="lg">
+              Done
+            </Button>
+          {/snippet}
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+{/if}

package/dist/components/TableSheets/TableFilterSheet.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label?: string;
+    class?: string;
+};
+declare const TableFilterSheet: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterSheet = ReturnType<typeof TableFilterSheet>;
+export default TableFilterSheet;
+//# sourceMappingURL=TableFilterSheet.svelte.d.ts.map

package/dist/components/TableSheets/TableFilterSheet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSheets/TableFilterSheet.svelte.ts"],"names":[],"mappings":"AAoBC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAqH7D,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TableSheets/TableFilterSheetCondition.svelte

@@ -0,0 +1,53 @@
+<!--
+  One condition inside a field's section: its relation, its value, and a way to
+  clear it. The field is the section, so there is no field control.
+-->
+<script lang="ts">
+  import { Button, Select } from "@ui-organized/svelte";
+  import type { TableFilterCondition } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import TableFilterValueEditor from "../TableFilters/TableFilterValueEditor.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { condition, fieldLabel }: { condition: TableFilterCondition; fieldLabel: string } =
+    $props();
+  const table = getTable();
+
+  // The sheet is a modal dialog, which hides everything outside itself from
+  // assistive tech; a Select or Listbox that portals to <body> would be painted
+  // but unreachable. Portalling into the condition keeps it inside.
+  let container = $state<HTMLElement | null>(null);
+  const description = $derived(table.filters.describe(condition));
+</script>
+
+<div class="data-table__sheet-filter" bind:this={container} data-filter-id={condition.id}>
+  <Select
+    size={table.size}
+    label="Condition"
+    options={table.filters
+      .operatorsFor(condition)
+      .map((op) => ({ value: op.id, label: op.label }))}
+    value={condition.operator}
+    onValueChange={(operator) => table.filters.update(condition.id, { operator })}
+    portalContainer={container}
+  />
+  <div class="data-table__sheet-filter-value">
+    <TableFilterValueEditor
+      {condition}
+      arity={table.filters.arityOf(condition)}
+      portalContainer={container}
+    />
+  </div>
+  {#if description.complete}
+    <Button
+      intent="ghost"
+      size={table.size}
+      icon={glyph("close")}
+      class="data-table__sheet-remove"
+      aria-label={`Clear filter: ${description.text}`}
+      onclick={() => table.filters.remove(condition.id)}
+    >
+      {`Clear ${fieldLabel}`}
+    </Button>
+  {/if}
+</div>

package/dist/components/TableSheets/TableFilterSheetCondition.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableFilterCondition } from "@ui-organized/table-core";
+type $$ComponentProps = {
+    condition: TableFilterCondition;
+    fieldLabel: string;
+};
+declare const TableFilterSheetCondition: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterSheetCondition = ReturnType<typeof TableFilterSheetCondition>;
+export default TableFilterSheetCondition;
+//# sourceMappingURL=TableFilterSheetCondition.svelte.d.ts.map

package/dist/components/TableSheets/TableFilterSheetCondition.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterSheetCondition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSheets/TableFilterSheetCondition.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAKpE,KAAK,gBAAgB,GAAI;IAAE,SAAS,EAAE,oBAAoB,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAoClF,QAAA,MAAM,yBAAyB,sDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}