@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte

@@ -11,62 +11,77 @@
 	import { Size } from '../../../../../Types/Internal/Size.js';
 	import type { ActionsTableCell } from './ActionsTableCell.js';
 
+	/**
+	 * Props for {@link TableAction}. Renders a single row-action `<Button>`
+	 * inside the actions popover; resolves the per-row label and enabled flag
+	 * from the `action` callbacks (each may be sync or async).
+	 *
+	 * Kept inline because extracting it would change the public import path
+	 * for the `TableActionProps` type (breaking); the sibling-Props file
+	 * extraction is deferred to the cross-cutting Props-extraction sweep.
+	 */
 	export interface TableActionProps<T extends object, FilterValueType> {
+		/** The action button to render (one button per `cell.column.columnDef.actions[*]`). */
 		action: TableActionButton<T>;
+		/** The host actions-cell instance, used to resolve per-row state. */
 		cell: ActionsTableCell<T, FilterValueType>;
 	}
 </script>
 
 <script
 	lang="ts"
-	generics="T extends object,FilterValueType"
+	generics="T extends object, FilterValueType"
 >
+	import { dev } from '$app/environment';
+
 	const { action, cell }: TableActionProps<T, FilterValueType> = $props();
 
-	const isEnabledPromise: boolean | Promise<boolean> = $derived.by(() => {
-		const disabled = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
+	/**
+	 * Resolved [label, isEnabled] tuple. Both sources are awaited in parallel
+	 * via Promise.all so an async `getLabel` does not serialise behind an
+	 * async `isDisabled`.
+	 */
+	const buttonStatePromise: Promise<[string, boolean]> = $derived.by(() => {
+		const disabledResult = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
 
-		if (disabled != null) {
-			if (typeof disabled == 'boolean') {
-				return !disabled;
-			} else {
-				return disabled.then((it) => !it);
-			}
-		}
-		return (
-			cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ?? true
-		);
-	});
+		const isEnabledPromise: Promise<boolean> =
+			disabledResult == null
+				? Promise.resolve(
+						cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ??
+							true
+					)
+				: typeof disabledResult === 'boolean'
+					? Promise.resolve(!disabledResult)
+					: disabledResult.then((it) => !it);
 
-	const labelPromise: Promise<string> = $derived.by(() => {
-		const result = action.getLabel(cell.row.original, cell.row.originalIndex);
+		const labelPromise: Promise<string> = Promise.resolve(
+			action.getLabel(cell.row.original, cell.row.originalIndex)
+		);
 
-		if (typeof result == 'object') {
-			return result.then((it) => it);
-		} else {
-			return Promise.resolve(result);
-		}
+		return Promise.all([labelPromise, isEnabledPromise]);
 	});
 </script>
 
-{#await labelPromise then label}
-	{#await isEnabledPromise then isEnabled}
-		<Button
-			fullWidth
-			size={Size.Medium}
-			colourSet={cell.column.columnDef.getColourSet?.(
-				cell.row.original,
-				cell.row.originalIndex,
-				action
-			) ?? ColourSet.Secondary}
-			disabled={!isEnabled}
-			onclick={() => {
-				action.callback(cell.row.original, cell.row.originalIndex);
-			}}>{label}</Button
-		>
-	{:catch e}
-		Error Loading Button: {getErrorMessage(e)}
-	{/await}
+{#await buttonStatePromise}
+	<!-- intentionally empty: the actions popover frame already conveys the loading state -->
+{:then [label, isEnabled]}
+	<Button
+		fullWidth
+		size={Size.Medium}
+		colourSet={cell.column.columnDef.getColourSet?.(
+			cell.row.original,
+			cell.row.originalIndex,
+			action
+		) ?? ColourSet.Secondary}
+		disabled={!isEnabled}
+		onclick={() => {
+			action.callback(cell.row.original, cell.row.originalIndex);
+		}}>{label}</Button
+	>
 {:catch e}
-	Error Loading Button: {getErrorMessage(e)}
+	{#if dev}
+		Error Loading Button: {getErrorMessage(e)}
+	{:else}
+		Error Loading Button
+	{/if}
 {/await}

package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte.d.ts

@@ -1,7 +1,18 @@
 import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
 import type { ActionsTableCell } from './ActionsTableCell.js';
+/**
+ * Props for {@link TableAction}. Renders a single row-action `<Button>`
+ * inside the actions popover; resolves the per-row label and enabled flag
+ * from the `action` callbacks (each may be sync or async).
+ *
+ * Kept inline because extracting it would change the public import path
+ * for the `TableActionProps` type (breaking); the sibling-Props file
+ * extraction is deferred to the cross-cutting Props-extraction sweep.
+ */
 export interface TableActionProps<T extends object, FilterValueType> {
+    /** The action button to render (one button per `cell.column.columnDef.actions[*]`). */
     action: TableActionButton<T>;
+    /** The host actions-cell instance, used to resolve per-row state. */
     cell: ActionsTableCell<T, FilterValueType>;
 }
 declare function $$render<T extends object, FilterValueType>(): {

package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte

@@ -2,41 +2,35 @@
 
 <script
 	lang="ts"
-	module
+	generics="T extends object, RowIdType extends Primitive"
 >
-	export interface TableCheckboxProps<T extends object> {
-		cell: TableCell<T, BoolFilterValueType>;
-
-		onchange?: ChangeEventHandler<HTMLInputElement>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick } from 'svelte';
-
 	import type { ChangeEventHandler } from 'svelte/elements';
+	import type { TableCheckboxProps } from './TableCheckboxProps.js';
 
 	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
 
 	const value = $derived(!!cell.getValue());
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
 	);
 
 	let inputRef: HTMLInputElement | undefined = $state();
 
+	/**
+	 * Commits the new value through `TableContext.onEditCell` and forwards the
+	 * native event to the optional parent handler. The `tick` reconcile fixes a
+	 * race where the table edit was rejected by validation but the input
+	 * already showed the new checked state.
+	 */
 	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
 		tableContext
 			.onEditCell(
@@ -75,7 +69,8 @@
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
 	class="checkbox-cell"
 	onmousedown={(e) => {
 		// start focus only on left click
@@ -126,9 +121,13 @@
 			checked={value}
 		/>
 	</label>
-</td>
+</div>
 
-<style>td {
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -138,8 +137,11 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
 input[type=checkbox] {
@@ -178,12 +180,21 @@ label.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }</style>

package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte.d.ts

@@ -1,31 +1,26 @@
-export interface TableCheckboxProps<T extends object> {
-    cell: TableCell<T, BoolFilterValueType>;
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-}
-import type { TableCell } from '../../../Types/Columns/TableCell.js';
-import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
-import type { ChangeEventHandler } from 'svelte/elements';
-declare function $$render<T extends object>(): {
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+import type { TableCheckboxProps } from './TableCheckboxProps.js';
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableCheckboxProps<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, RowIdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(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 object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    <T extends object, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableCheckbox: $$IsomorphicComponent;
-type TableCheckbox<T extends object> = InstanceType<typeof TableCheckbox<T>>;
+type TableCheckbox<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableCheckbox<T, RowIdType>>;
 export default TableCheckbox;

package/dist/Components/Table/Body/Rows/Columns/TableCheckboxProps.d.ts

@@ -0,0 +1,17 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
+import type { ChangeEventHandler } from 'svelte/elements';
+/**
+ * Props for {@link TableCheckbox}. Renders a checkbox input bound to the
+ * row's boolean value; commit goes through `TableContext.onEditCell`.
+ *
+ * Extracted from the previous `<script module>` inline declaration so the
+ * type is consumable by the `AccessorComponent` dispatch table without
+ * a duplicate re-declaration.
+ */
+export interface TableCheckboxProps<T extends object> {
+    /** The boolean cell to render. */
+    cell: TableCell<T, BoolFilterValueType>;
+    /** Optional bubbled `onchange` handler invoked after the table edit is dispatched. */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+}

package/dist/Components/Table/Body/Rows/Columns/TableCheckboxProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte

@@ -24,14 +24,10 @@
 	import type { ActionsTableCell } from './ActionsTableCell.js';
 	import ProgressCell from './ProgressCell.svelte';
 	import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
+	import type { TableColumnProps } from './TableColumnProps.js';
 	import ValidityCell from './ValidityCell.svelte';
 
-	export interface TableColumnProps<T extends object> {
-		cell: TableCell<T>;
-		expandedColumnDef: ExpandDef<T, object> | undefined;
-		onExpandChange: (columnDef: ExpandDef<T, object>) => void;
-	}
-
+	/** Narrowing type-guard distinguishing a progress-bar cell by its `columnDef` instance. */
 	function isProgressBarTableCell<T extends object>(
 		cell: TableCell<T>
 	): cell is ProgressBarTableCell<T, unknown> {
@@ -50,11 +46,22 @@
 
 	let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T> = $props();
 
+	/** Narrowing type-guard distinguishing the row-selection cell. */
 	function isRowSelectionCell<T extends object>(
 		cell: TableCell<T>
 	): cell is RowSelectionTableCell<T> {
 		return cell.column.columnDef instanceof RowSelectionDef;
 	}
+
+	/**
+	 * Returns true when the accessor output is a Svelte component constructor.
+	 * Distinguishing a Svelte 5 component (a function) from a snippet is a
+	 * runtime-only heuristic (both are typeof 'function'); the
+	 * constructor-only branch is reached first because TableColumn checks
+	 * `valueOrComponentIsConstructor` before `isSnippet`. Tightening this to
+	 * a real type-level discriminator is tracked under the
+	 * RowGenericThreading follow-up.
+	 */
 	function valueOrComponentIsConstructor(
 		valueOrComponent: unknown
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -62,15 +69,19 @@
 		return typeof valueOrComponent === 'function';
 	}
 
+	/** Narrowing type-guard distinguishing an actions cell. */
 	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T, unknown> {
 		return cell.column.columnDef instanceof ActionsDef;
 	}
+
+	/** Narrowing type-guard distinguishing the expand-row cell. */
 	function isExpandTableCell(
 		cell: TableCell<T>
 	): cell is ExpandTableCell<T, object, Primitive, unknown> {
 		return cell.column.columnDef instanceof ExpandDef;
 	}
 
+	/** Heuristic snippet check; both Snippets and Components are functions at runtime. */
 	function isSnippet(value: unknown): value is Snippet<[TableCell<T>]> {
 		return !!value && typeof value == 'function';
 	}
@@ -137,7 +148,11 @@
 			{/if}
 		{:catch e}
 			<FocusableImmutableCell {cell}>
-				{getErrorMessage(e)}
+				{#if dev}
+					{getErrorMessage(e)}
+				{:else}
+					Error rendering cell
+				{/if}
 			</FocusableImmutableCell>
 		{/await}
 	{/if}

package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte.d.ts

@@ -1,10 +1,4 @@
-import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-import type { TableCell } from '../../../Types/Columns/TableCell.js';
-export interface TableColumnProps<T extends object> {
-    cell: TableCell<T>;
-    expandedColumnDef: ExpandDef<T, object> | undefined;
-    onExpandChange: (columnDef: ExpandDef<T, object>) => void;
-}
+import type { TableColumnProps } from './TableColumnProps.js';
 declare function $$render<T extends object>(): {
     props: TableColumnProps<T>;
     exports: {};

package/dist/Components/Table/Body/Rows/Columns/TableColumnProps.d.ts

@@ -0,0 +1,16 @@
+import type { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+/**
+ * Props for {@link TableColumn}. The component dispatches one of the
+ * specialised cell hosts (RowSelection / Actions / Expand / Accessor / Bubble
+ * / Validity / Progress / FocusableImmutable) based on the column's
+ * `columnDef.columnType` discriminant and the cell's value shape.
+ */
+export interface TableColumnProps<T extends object> {
+    /** The cell to render. */
+    cell: TableCell<T>;
+    /** The currently expanded child-table column def, or `undefined` for none. */
+    expandedColumnDef: ExpandDef<T, object> | undefined;
+    /** Callback to swap the expanded column. */
+    onExpandChange: (columnDef: ExpandDef<T, object>) => void;
+}

package/dist/Components/Table/Body/Rows/Columns/TableColumnProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte

@@ -2,12 +2,13 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, RowIdType extends Primitive"
 >
 	import { dev } from '$app/environment';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import type { CellCoordinates } from '../../../Types/Coordinates/CellCoordinates.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import DateModal from '../../../../Touch/DateModal.svelte';
 	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
@@ -18,9 +19,14 @@
 
 	const value = $derived(cell.getValue());
 
+	/**
+	 * Narrowed `Date` view of the raw value. Templates fall back to parsing a
+	 * string with `new Date(value)`; that parse happens once per render and
+	 * could be hoisted into a $derived in a follow-up (see workorder).
+	 */
 	const dateValue = $derived(value && value instanceof Date ? value : undefined);
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const columnDef = $derived(cell.column.columnDef);
 	const coordinates: CellCoordinates = $derived({
@@ -32,8 +38,8 @@
 	const editable = $derived(
 		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
 	);
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
 	);
 
 	let modalLock = $state(false);
@@ -87,7 +93,7 @@
 		}
 	});
 
-	let tdref: HTMLTableCellElement | undefined = $state();
+	let tdref: HTMLElement | undefined = $state();
 
 	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
 	async function handleSingleClick(event?: Event) {
@@ -142,24 +148,27 @@
 		handleDoubleClick().catch(devCatch);
 	}
 
-	let prevtdref: HTMLTableCellElement | undefined = undefined;
+	/**
+	 * Effect wires the custom `edit` event to the keyboard-triggered double-click
+	 * handler. The cleanup returns a removeEventListener so a remounted `tdref`
+	 * does not accumulate stale listeners (P1 workorder finding).
+	 */
 	$effect(() => {
-		if (tdref) {
-			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', tryHandleDoubleClick);
-			} else {
-				prevtdref = tdref;
-			}
+		const node = tdref;
+		if (!node) {
+			return;
 		}
+		node.addEventListener('edit', tryHandleDoubleClick);
+		return () => {
+			node.removeEventListener('edit', tryHandleDoubleClick);
+		};
 	});
 </script>
 
-<!-- // onKeyDown={handleTdKeydown} -->
-<!-- ref={tdref} -->
-
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
-
-<td
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
 	{id}
 	style={focusDetails.outline}
 	aria-label={reason}
@@ -217,7 +226,6 @@
 	{#if !value}
 		-
 	{:else if typeof value === 'string'}
-		<!-- TODO see if we need to mess with time zones here. Very likely -->
 		{@const parsed = new Date(value)}
 		{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
 	{:else if value instanceof Date}
@@ -233,9 +241,13 @@
 	{:else}
 		-
 	{/if}
-</td>
+</div>
 
-<style>td {
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -245,36 +257,54 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.multifocus {
+.focusable.multifocus,
+.checkbox-cell.multifocus,
+.input-cell.multifocus,
+.select-cell.multifocus {
   background-color: var(--multifocus-colour, #e6f8fd);
 }
-td.multifocus.multifocus-start {
+.focusable.multifocus.multifocus-start,
+.checkbox-cell.multifocus.multifocus-start,
+.input-cell.multifocus.multifocus-start,
+.select-cell.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }
 
-td {
+[role=cell] {
   position: static;
 }</style>

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte.d.ts

@@ -1,25 +1,26 @@
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 import type { TableDatePickerProps } from './TableDatePickerProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableDatePickerProps<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, RowIdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(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 object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    <T extends object, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableDatePicker: $$IsomorphicComponent;
-type TableDatePicker<T extends object> = InstanceType<typeof TableDatePicker<T>>;
+type TableDatePicker<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableDatePicker<T, RowIdType>>;
 export default TableDatePicker;

package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts

@@ -1,4 +1,13 @@
 import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+/**
+ * Props for {@link TableDatePicker}. The cell renders an inline localised
+ * date / date-time and opens a `DateModal` when the row enters edit mode.
+ *
+ * The `never` / `unknown` generics on `DateTableCell` are placeholders for
+ * the filter-value and options-value types; tightening them is deferred to
+ * the cross-cutting RowGenericThreading + DateInputDef.value follow-up.
+ */
 export interface TableDatePickerProps<T extends object> {
+    /** The date cell to render. */
     cell: DateTableCell<T, never, unknown>;
 }