@happyvertical/smrt-ui 0.52.0 → 0.53.0

package/dist/components/data/__tests__/DataTableResponsive.test.js

@@ -0,0 +1,80 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import DataTable from '../DataTable.svelte';
+import { createDataTableController } from '../DataTableController.js';
+import { responsiveColumns } from '../DataTableResponsive.js';
+const columns = Array.from({ length: 6 }, (_, index) => ({
+    id: `c${index}`,
+    label: `Column ${index}`,
+    responsive: { priority: index, keepVisible: index === 0 },
+    headerPath: [{ id: 'group', label: 'Group' }],
+}));
+const data = [
+    {
+        id: 'row',
+        ...Object.fromEntries(columns.map((column) => [column.id, column.label])),
+    },
+];
+async function resize(container, width) {
+    const root = container.querySelector('.data-table-container');
+    Object.defineProperty(root, 'clientWidth', {
+        configurable: true,
+        value: width,
+    });
+    window.dispatchEvent(new Event('resize'));
+    await waitFor(() => expect(root).toHaveClass(width <= 800 ? 'data-table-container--narrow' : 'data-table-container'));
+}
+describe('responsive column collapse', () => {
+    it('keeps mandatory columns and highest priorities in display order', () => {
+        expect(responsiveColumns(columns, 390, 160).map((column) => column.id)).toEqual(['c0', 'c5']);
+        expect(responsiveColumns(columns, 768, 160).map((column) => column.id)).toEqual(['c0', 'c3', 'c4', 'c5']);
+    });
+    it('handles missing metadata, equal priorities, invalid numbers, and oversized mandatory sets', () => {
+        const plain = columns.map((column) => ({
+            ...column,
+            responsive: undefined,
+        }));
+        expect(responsiveColumns(plain, 320, Number.NaN).map((column) => column.id)).toEqual(['c0', 'c1']);
+        expect(responsiveColumns([{ ...plain[0], responsive: { priority: Number.NaN } }, plain[1]], 160, 160).map((column) => column.id)).toEqual(['c0']);
+        expect(responsiveColumns(columns.map((column) => ({
+            ...column,
+            responsive: { keepVisible: true },
+        })), 100, 160)).toHaveLength(6);
+        expect(responsiveColumns([], 0, 160)).toEqual([]);
+    });
+    it('matches headers/cells/groups to container width and restores without mutating controller visibility', async () => {
+        const controller = createDataTableController({
+            initialState: { columnVisibility: [{ columnId: 'c5', visible: false }] },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data,
+                columns,
+                rowKey: 'id',
+                controller,
+                responsiveMode: 'hide-columns',
+            },
+        });
+        const visibility = controller.getState().columnVisibility;
+        await resize(container, 390);
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(2));
+        expect(screen.getByRole('columnheader', { name: 'Group' })).toHaveAttribute('colspan', '2');
+        expect(screen.queryByRole('columnheader', { name: 'Column 5' })).toBeNull();
+        expect(screen.getByRole('columnheader', { name: 'Column 4' })).toBeInTheDocument();
+        expect(controller.getState().columnVisibility).toEqual(visibility);
+        await resize(container, 1200);
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(5));
+        expect(screen.getByRole('columnheader', { name: 'Group' })).toHaveAttribute('colspan', '5');
+    });
+    it('preserves the scroll default regardless of narrow width', async () => {
+        const { container } = render(DataTable, { props: { data, columns } });
+        const root = container.querySelector('.data-table-container');
+        Object.defineProperty(root, 'clientWidth', {
+            configurable: true,
+            value: 390,
+        });
+        window.dispatchEvent(new Event('resize'));
+        await waitFor(() => expect(screen.getAllByRole('cell')).toHaveLength(6));
+        expect(root).not.toHaveClass('data-table-container--narrow');
+    });
+});

package/dist/components/data/__tests__/responsive-table.fixture.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ThemeProvider from '../../../themes/ThemeProvider.svelte';
+import DataTable from '../DataTable.svelte';
+
+let { mode = 'hide-columns' }: { mode?: 'scroll' | 'hide-columns' } = $props();
+const columns = Array.from({ length: 7 }, (_, index) => ({
+  id: `c${index}`,
+  label: `Column ${index}`,
+  sortable: true,
+  width: '200px',
+  minWidth: '180px',
+  responsive: { priority: index, keepVisible: index === 0 },
+  headerPath: [{ id: 'group', label: 'Group' }],
+}));
+const data = [
+  {
+    id: 'one',
+    ...Object.fromEntries(
+      columns.map((column) => [
+        column.id,
+        `${column.label}LongUnbrokenTextThatMustWrap`,
+      ]),
+    ),
+  },
+];
+</script>
+<ThemeProvider density="touch" persist={false} inlineVariables>
+  <DataTable {columns} {data} responsiveMode={mode} rowKey="id" sortable caption="Responsive table" />
+</ThemeProvider>

package/dist/components/data/__tests__/responsive-table.fixture.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    mode?: 'scroll' | 'hide-columns';
+};
+declare const ResponsiveTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResponsiveTable = ReturnType<typeof ResponsiveTable>;
+export default ResponsiveTable;
+//# sourceMappingURL=responsive-table.fixture.svelte.d.ts.map

package/dist/components/data/__tests__/responsive-table.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-table.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/data/__tests__/responsive-table.fixture.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAA;CAAE,CAAC;AAiC/D,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/data/types.d.ts

@@ -145,6 +145,14 @@ export interface SortState {
  * DataTable props
  */
 export interface DataTableProps<T> {
+    /** Sort-control target density; omit to inherit ThemeProvider. */
+    density?: 'comfortable' | 'touch';
+    /** Opt-in container-width column collapse; default keeps horizontal scrolling. */
+    responsiveMode?: 'scroll' | 'hide-columns';
+    /** Container-width threshold in pixels for narrow mode (default 800). */
+    responsiveBreakpoint?: number;
+    /** Target width per retained column in narrow mode (default 160 pixels). */
+    responsiveColumnMinWidth?: number;
     /** Data rows */
     data: T[];
     /** Column definitions */

package/dist/components/data/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAE3B,8DAA8D;AAC9D,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,4EAA4E;IAC5E,UAAU,EAAE,qBAAqB,CAAC;IAClC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,+BAA+B,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAED,MAAM,MAAM,+BAA+B,GAAG,CAC5C,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,gBAAgB,KACtB,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;AAE9E,gEAAgE;AAChE,MAAM,WAAW,mCAAmC;IAClD,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,UAAU,EAAE,qBAAqB,CAAC;IAClC,oBAAoB,CAAC,EAAE,+BAA+B,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAED,+EAA+E;AAC/E,MAAM,WAAW,0BAA0B;IACzC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qDAAqD;AACrD,MAAM,WAAW,yBAAyB;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE/D,MAAM,MAAM,0BAA0B,GAClC,SAAS,GACT,UAAU,GACV,WAAW,GACX,QAAQ,CAAC;AAEb,6EAA6E;AAC7E,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,IAAI,EAAE,0BAA0B,CAAC;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CACZ;QACE;YACE,GAAG,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAC3B,KAAK,EAAE,OAAO,CAAC;SAChB;KACF,CACF,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAC5B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5D,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IACnD,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IACnD;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,wEAAwE;IACxE,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,MAAM,CAAC;IAC1D,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,KAAK,OAAO,CAAC;IACxE,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAElD,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,KAAK,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,kEAAkE;IAClE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,kFAAkF;IAClF,cAAc,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;IAC3C,yEAAyE;IACzE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,gBAAgB;IAChB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,yBAAyB;IACzB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,mCAAmC;IACnC,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7D,yBAAyB;IACzB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,8BAA8B,CAAC;IAChD,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,4BAA4B;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACvD,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,CAAC,EAAE,CAAA;KAAE,CAAC,CAAC,CAAC;IAClC,kFAAkF;IAClF,cAAc,CAAC,EAAE,SAAS,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC3C,yEAAyE;IACzE,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,gBAAgB,KACtB,IAAI,CAAC;IACV,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAO/D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,aAAa,GACvB,MAAM,CAwBR"}

package/dist/components/display/DateDisplay.svelte

@@ -17,6 +17,8 @@ export interface Props {
   showTime?: boolean;
   /** Locale for formatting (defaults to en-CA) */
   locale?: string;
+  /** IANA zone for timestamps and relative calendar-day boundaries. */
+  timeZone?: string;
   /** Optional CSS class */
   class?: string;
 }
@@ -27,15 +29,22 @@ const {
   fallback = 'N/A',
   showTime = false,
   locale = 'en-CA',
+  timeZone,
   class: className = '',
 }: Props = $props();
 
-// Parse the date
+const isCalendarDate = $derived(
+  typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date),
+);
+
+// Bare dates denote a calendar day, never a browser-local instant.
 const parsedDate = $derived.by(() => {
   if (date === null || date === undefined) return null;
-  if (date instanceof Date) return date;
+  if (date instanceof Date) return Number.isNaN(date.getTime()) ? null : date;
   const d = new Date(date);
-  return Number.isNaN(d.getTime()) ? null : d;
+  if (Number.isNaN(d.getTime())) return null;
+  if (isCalendarDate && d.toISOString().slice(0, 10) !== date) return null;
+  return d;
 });
 
 // Format options for Intl.DateTimeFormat
@@ -45,8 +54,52 @@ const dateOptions: Record<string, Intl.DateTimeFormatOptions> = {
   long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
 };
 
-// Format relative time
+// Convert zone-local Gregorian dates to ordinals so DST does not alter day counts.
+function calendarDay(d: Date, zone?: string): number {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: zone,
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  }).formatToParts(d);
+  const part = (type: string) =>
+    Number(parts.find((entry) => entry.type === type)?.value);
+  const midnight = new Date(0);
+  midnight.setUTCFullYear(part('year'), part('month') - 1, part('day'));
+  return midnight.getTime() / 86400000;
+}
+
+function formatCalendarRelative(d: Date): string {
+  const now = new Date();
+  const days =
+    calendarDay(now, timeZone) -
+    (isCalendarDate ? d.getTime() / 86400000 : calendarDay(d, timeZone));
+  if (days === 0) {
+    if (isCalendarDate || d > now) return 'today';
+    const minutes = Math.floor((now.getTime() - d.getTime()) / 60000);
+    if (minutes === 0) return 'just now';
+    return minutes < 60
+      ? `${minutes}m ago`
+      : `${Math.floor(minutes / 60)}h ago`;
+  }
+  if (days === 1) return 'yesterday';
+  if (days === -1) return 'tomorrow';
+  const count = Math.abs(days);
+  const [amount, unit] =
+    count < 7
+      ? [count, 'days']
+      : count < 30
+        ? [Math.floor(count / 7), 'weeks']
+        : count < 365
+          ? [Math.floor(count / 30), 'months']
+          : [Math.floor(count / 365), 'years'];
+  return days < 0 ? `in ${amount} ${unit}` : `${amount} ${unit} ago`;
+}
+
+// Preserve duration-based relative defaults for instant inputs without a zone.
 function formatRelative(d: Date): string {
+  if (timeZone !== undefined || isCalendarDate)
+    return formatCalendarRelative(d);
   const now = new Date();
   const diffMs = now.getTime() - d.getTime();
   const diffSec = Math.floor(diffMs / 1000);
@@ -83,21 +136,30 @@ function formatRelative(d: Date): string {
 const formatted = $derived.by(() => {
   if (!parsedDate) return fallback;
 
-  if (format === 'relative') {
-    return formatRelative(parsedDate);
-  }
+  try {
+    if (format === 'relative') return formatRelative(parsedDate);
 
-  const options = { ...dateOptions[format] };
-  if (showTime) {
-    options.hour = 'numeric';
-    options.minute = '2-digit';
+    const options = {
+      ...dateOptions[format],
+      timeZone: isCalendarDate ? 'UTC' : timeZone,
+    };
+    if (showTime && !isCalendarDate) {
+      options.hour = 'numeric';
+      options.minute = '2-digit';
+    }
+    return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+  } catch (error) {
+    if (error instanceof RangeError) return fallback;
+    throw error;
   }
-
-  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
 });
 
 // ISO string for datetime attribute
-const isoString = $derived(parsedDate?.toISOString() ?? '');
+const isoString = $derived(
+  isCalendarDate && parsedDate
+    ? String(date)
+    : (parsedDate?.toISOString() ?? ''),
+);
 </script>
 
 {#if parsedDate}

package/dist/components/display/DateDisplay.svelte.d.ts

@@ -15,6 +15,8 @@ export interface Props {
     showTime?: boolean;
     /** Locale for formatting (defaults to en-CA) */
     locale?: string;
+    /** IANA zone for timestamps and relative calendar-day boundaries. */
+    timeZone?: string;
     /** Optional CSS class */
     class?: string;
 }

package/dist/components/display/DateDisplay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/DateDisplay.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AAEH,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,uDAAuD;IACvD,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IAClD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DateDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/DateDisplay.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AAEH,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,uDAAuD;IACvD,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IAClD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6JD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/display/Icon.svelte

@@ -9,6 +9,8 @@
  * - Uses aria-hidden="true" by default (decorative)
  */
 
+import { resolveIconPath } from './icons.svelte.js';
+
 /** Props for Icon component */
 export interface Props {
   /** Preset icon name */
@@ -36,22 +38,7 @@ const {
 
 const isInformative = $derived(!!ariaLabel);
 
-// Common M3 Icon Paths (Simplified)
-const presets: Record<string, string> = {
-  menu: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z',
-  search:
-    'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
-  close:
-    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z',
-  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z',
-  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z',
-  'chevron-down': 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
-  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
-  add: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
-  mic: 'M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.04 6.43 5 7.07V21h4v-2.93c2.96-.64 5-3.54 5-7.07h-2z',
-};
-
-const finalPath = $derived(path ?? (name ? presets[name] : ''));
+const finalPath = $derived(path ?? (name ? resolveIconPath(name) : ''));
 const pxSize = $derived(typeof size === 'number' ? `${size}px` : size);
 </script>
 

package/dist/components/display/Icon.svelte.d.ts

@@ -1,12 +1,3 @@
-/**
- * Icon - SVG icon component
- *
- * Displays SVG icons from presets or custom paths.
- *
- * Accessibility:
- * - Use aria-label for informative icons
- * - Uses aria-hidden="true" by default (decorative)
- */
 /** Props for Icon component */
 export interface Props {
     /** Preset icon name */

package/dist/components/display/Icon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/Icon.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,+BAA+B;AAC/B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/Icon.svelte.ts"],"names":[],"mappings":"AAeA,+BAA+B;AAC/B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/display/StatusBadge.svelte

@@ -3,10 +3,10 @@
  * StatusBadge - Generic status indicator badge
  *
  * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
- * or allows custom styling via CSS variables.
+ * or an explicit semantic tone for custom status vocabulary.
  */
 
-import type { StatusType } from './types.js';
+import type { StatusTone, StatusType } from './types.js';
 
 /** Props for StatusBadge component */
 export interface Props {
@@ -14,6 +14,8 @@ export interface Props {
   status: string;
   /** Pre-defined color scheme type */
   type?: StatusType;
+  /** Semantic tone overriding the domain color scheme. */
+  tone?: StatusTone;
   /** Badge size */
   size?: 'sm' | 'md' | 'lg';
   /** Visual variant */
@@ -25,6 +27,7 @@ export interface Props {
 const {
   status,
   type = 'default',
+  tone,
   size = 'md',
   variant = 'filled',
   label,
@@ -201,11 +204,35 @@ const colorSchemes: Record<
   },
 };
 
+const toneSchemes: Record<StatusTone, { bg: string; text: string }> = {
+  success: {
+    bg: 'var(--smrt-color-success-container)',
+    text: 'var(--smrt-color-on-success-container)',
+  },
+  warning: {
+    bg: 'var(--smrt-color-warning-container)',
+    text: 'var(--smrt-color-on-warning-container)',
+  },
+  danger: {
+    bg: 'var(--smrt-color-error-container)',
+    text: 'var(--smrt-color-on-error-container)',
+  },
+  info: {
+    bg: 'var(--smrt-color-primary-container)',
+    text: 'var(--smrt-color-on-primary-container)',
+  },
+  neutral: {
+    bg: 'var(--smrt-color-surface-container-highest)',
+    text: 'var(--smrt-color-on-surface-variant)',
+  },
+};
+
 // Normalize status for lookup (lowercase, handle spaces/underscores)
 const normalizedStatus = $derived(status.toLowerCase().replace(/[\s-]/g, '_'));
 
 // Get colors for current status
 const colors = $derived.by(() => {
+  if (tone && Object.hasOwn(toneSchemes, tone)) return toneSchemes[tone];
   const scheme = colorSchemes[type] ?? colorSchemes.default;
   return (
     scheme[normalizedStatus] ?? {

package/dist/components/display/StatusBadge.svelte.d.ts

@@ -2,15 +2,17 @@
  * StatusBadge - Generic status indicator badge
  *
  * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
- * or allows custom styling via CSS variables.
+ * or an explicit semantic tone for custom status vocabulary.
  */
-import type { StatusType } from './types.js';
+import type { StatusTone, StatusType } from './types.js';
 /** Props for StatusBadge component */
 export interface Props {
     /** The status value to display */
     status: string;
     /** Pre-defined color scheme type */
     type?: StatusType;
+    /** Semantic tone overriding the domain color scheme. */
+    tone?: StatusTone;
     /** Badge size */
     size?: 'sm' | 'md' | 'lg';
     /** Visual variant */

package/dist/components/display/StatusBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoND,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGzD,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6OD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/display/__tests__/DateDisplay.test.js

@@ -8,7 +8,7 @@
  * offsets from `now`. Tests assert the real API from DateDisplay.svelte.
  */
 import { render, screen } from '@testing-library/svelte';
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import DateDisplay from '../DateDisplay.svelte';
 const LOCALE = 'en-CA';
@@ -25,6 +25,83 @@ const LONG = {
     day: 'numeric',
 };
 describe('DateDisplay', () => {
+    afterEach(() => vi.useRealTimers());
+    it.each([
+        'America/Edmonton',
+        'UTC',
+        'Asia/Tokyo',
+    ])('formats timestamp dates and times in %s', (timeZone) => {
+        const instant = '2026-10-01T04:00:00Z';
+        const { container } = render(DateDisplay, {
+            props: { date: instant, timeZone, showTime: true },
+        });
+        expect(container.querySelector('time')?.textContent?.trim()).toBe(expected(new Date(instant), {
+            ...MEDIUM,
+            timeZone,
+            hour: 'numeric',
+            minute: '2-digit',
+        }));
+    });
+    it.each([
+        'America/Edmonton',
+        'Asia/Tokyo',
+    ])('keeps a bare calendar date in %s', (timeZone) => {
+        const { container } = render(DateDisplay, {
+            props: { date: '2026-09-30', timeZone },
+        });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', '2026-09-30');
+        expect(container.querySelector('time')?.textContent?.trim()).toBe(expected(new Date('2026-09-30T00:00:00Z'), {
+            ...MEDIUM,
+            timeZone: 'UTC',
+        }));
+    });
+    it('keeps date-only values stable in the default browser zone', () => {
+        render(DateDisplay, { props: { date: '2026-09-30' } });
+        expect(screen.getByText(expected(new Date('2026-09-30T00:00:00Z'), {
+            ...MEDIUM,
+            timeZone: 'UTC',
+        }))).toBeInTheDocument();
+    });
+    it.each([
+        '2026-02-30',
+        '2025-02-29',
+        '2026-13-01',
+    ])('rejects impossible calendar date %s', (date) => {
+        render(DateDisplay, { props: { date, fallback: 'Invalid date' } });
+        expect(screen.getByText('Invalid date')).toBeInTheDocument();
+    });
+    it('accepts a leap day', () => {
+        const { container } = render(DateDisplay, {
+            props: { date: '2028-02-29' },
+        });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', '2028-02-29');
+    });
+    it.each([
+        ['2026-10-01T06:30:00Z', '2026-10-01T05:30:00Z', 'yesterday'],
+        ['2026-10-01T05:30:00Z', '2026-10-01T06:30:00Z', 'tomorrow'],
+        ['2026-10-01T06:30:00Z', '2026-10-01T07:30:00Z', 'today'],
+        ['2026-03-09T06:30:00Z', '2026-03-08T07:30:00Z', 'yesterday'],
+        ['2026-10-01T05:30:00Z', '2026-09-30', 'today'],
+        ['2026-10-01T05:30:00Z', '2026-10-01', 'tomorrow'],
+        ['2026-10-01T05:30:00Z', '2026-09-29', 'yesterday'],
+    ])('uses calendar boundaries for %s → %s', (now, date, text) => {
+        vi.useFakeTimers({ toFake: ['Date'] });
+        vi.setSystemTime(new Date(now));
+        render(DateDisplay, {
+            props: { date, format: 'relative', timeZone: 'America/Edmonton' },
+        });
+        expect(screen.getByText(text)).toBeInTheDocument();
+    });
+    it('uses the fallback for an invalid explicit zone', () => {
+        render(DateDisplay, {
+            props: {
+                date: '2026-09-30T00:00:00Z',
+                timeZone: 'not/a/zone',
+                fallback: 'Invalid date',
+            },
+        });
+        expect(screen.getByText('Invalid date')).toBeInTheDocument();
+    });
     // Use a fixed local-noon date so date-part is timezone-stable.
     const sample = new Date(2024, 0, 15, 12, 0, 0); // 15 Jan 2024, local noon
     it('renders a <time> element with the ISO datetime attribute', () => {
@@ -79,6 +156,10 @@ describe('DateDisplay', () => {
         const span = screen.getByText('No date');
         expect(span).toHaveClass('date-fallback');
     });
+    it('renders the fallback for an invalid Date instance', () => {
+        render(DateDisplay, { props: { date: new Date(Number.NaN) } });
+        expect(screen.getByText('N/A')).toBeInTheDocument();
+    });
     it('renders the default fallback for an invalid date string', () => {
         render(DateDisplay, { props: { date: 'not-a-date' } });
         expect(screen.getByText('N/A')).toBeInTheDocument();