@happyvertical/smrt-ui 0.51.39 → 0.52.0

package/dist/components/ui/__tests__/dropdown-popover-icon.test.js

@@ -0,0 +1,125 @@
+/**
+ * Dropdown menu items take an icon, and Dropdown and Popover each offer an
+ * icon-only trigger look (a borderless 44px round button in the surrounding
+ * colour), so an app does not restyle `.dropdown__trigger` / `.popover__trigger`.
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Dropdown from '../Dropdown.svelte';
+import Popover from '../Popover.svelte';
+const glyph = createRawSnippet(() => ({
+    render: () => '<svg data-testid="glyph" viewBox="0 0 24 24" width="18" height="18"></svg>',
+}));
+const body = createRawSnippet(() => ({ render: () => '<p>Details</p>' }));
+describe('Dropdown icons', () => {
+    it('shows an item icon beside the label and hides it from assistive technology', async () => {
+        render(Dropdown, {
+            props: {
+                label: 'Actions',
+                items: [
+                    { id: 'edit', label: 'Edit', icon: glyph },
+                    { id: 'plain', label: 'Plain' },
+                ],
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+        const edit = screen.getByRole('menuitem', { name: 'Edit' });
+        const icon = edit.querySelector('.dropdown__item-icon');
+        expect(icon).not.toBeNull();
+        expect(icon).toHaveAttribute('aria-hidden', 'true');
+        expect(icon?.querySelector('svg')).not.toBeNull();
+        expect(screen
+            .getByRole('menuitem', { name: 'Plain' })
+            .querySelector('.dropdown__item-icon')).toBeNull();
+    });
+    it('is an icon-only 44px trigger named by triggerLabel', async () => {
+        const { container } = render(Dropdown, {
+            props: {
+                variant: 'icon',
+                triggerLabel: 'Actions for July 14 Council',
+                trigger: glyph,
+                items: [{ id: 'edit', label: 'Edit', icon: glyph }],
+            },
+        });
+        const trigger = screen.getByRole('button', {
+            name: 'Actions for July 14 Council',
+        });
+        expect(trigger).toHaveClass('dropdown__trigger--icon');
+        expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+        await userEvent.click(trigger);
+        await expectNoA11yViolations(container);
+    });
+    it('an icon trigger falls back to label, and warns when it has no name at all', () => {
+        const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+        render(Dropdown, {
+            props: {
+                variant: 'icon',
+                label: 'Row actions',
+                trigger: glyph,
+                items: [{ id: 'a', label: 'A' }],
+            },
+        });
+        expect(screen.getByRole('button', { name: 'Row actions' })).toHaveClass('dropdown__trigger--icon');
+        expect(warn).not.toHaveBeenCalled();
+        render(Dropdown, {
+            props: {
+                variant: 'icon',
+                trigger: glyph,
+                items: [{ id: 'a', label: 'A' }],
+            },
+        });
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('triggerLabel'));
+        warn.mockRestore();
+    });
+    it('keeps the bordered button look by default', () => {
+        render(Dropdown, {
+            props: { label: 'Actions', items: [{ id: 'a', label: 'A' }] },
+        });
+        expect(screen.getByRole('button', { name: 'Actions' })).not.toHaveClass('dropdown__trigger--icon');
+    });
+});
+describe('Popover icon variant', () => {
+    it('renders the icon trigger and opens its panel', async () => {
+        render(Popover, {
+            props: {
+                label: 'Issues',
+                triggerLabel: '2 issues',
+                variant: 'icon',
+                trigger: glyph,
+                children: body,
+            },
+        });
+        const trigger = screen.getByRole('button', { name: '2 issues' });
+        expect(trigger).toHaveClass('popover__trigger--icon');
+        await userEvent.click(trigger);
+        expect(screen.getByRole('dialog', { name: 'Issues' })).toHaveTextContent('Details');
+    });
+    it('an icon trigger without triggerLabel is named by label', () => {
+        render(Popover, {
+            props: {
+                label: 'Issues',
+                variant: 'icon',
+                trigger: glyph,
+                children: body,
+            },
+        });
+        expect(screen.getByRole('button', { name: 'Issues' })).toHaveClass('popover__trigger--icon');
+    });
+    it('keeps the standard primary focus ring on the icon trigger', () => {
+        const source = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '..', 'Popover.svelte'), 'utf8');
+        const css = source.slice(source.indexOf('<style>'));
+        expect(css).toMatch(/\.popover__trigger:focus-visible[^{]*\{ outline: 2px solid var\(--smrt-color-primary\)/);
+        // No icon-specific outline override (a currentColor ring under 3:1).
+        expect(css).not.toMatch(/\.popover__trigger--icon:focus-visible \{[^}]*outline/);
+    });
+    it('keeps the bordered button look by default', () => {
+        render(Popover, { props: { label: 'Filters', children: body } });
+        expect(screen.getByRole('button', { name: 'Filters' })).not.toHaveClass('popover__trigger--icon');
+    });
+});

package/dist/components/ui/__tests__/phone-touch-targets.test.js

@@ -0,0 +1,39 @@
+/**
+ * Touch targets: on phones (48rem and under) Button of every size and the
+ * Switch row are at least 44px tall, and TagsInput's remove button is a 44px
+ * target on phones and touch screens. The sizing lives in each component's
+ * stylesheet, so an app never needs its own `min-height: 44px` override.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+const root = process.cwd().endsWith('packages/smrt-ui')
+    ? process.cwd()
+    : join(process.cwd(), 'packages/smrt-ui');
+const read = (path) => readFileSync(join(root, 'src/components', path), 'utf8');
+/** The body of the first `@media (…max-width: 48rem…)` block in `source`. */
+function phoneBlock(source) {
+    const start = source.indexOf('@media (max-width: 48rem)');
+    expect(start).toBeGreaterThan(-1);
+    return source.slice(start, source.indexOf('\n  }', start) + 4);
+}
+describe('phone touch targets', () => {
+    it('Button is at least 44px tall on phones, in every size', () => {
+        const phone = phoneBlock(read('ui/Button.svelte'));
+        expect(phone).toMatch(/\.button\s*\{[^}]*min-block-size:\s*2\.75rem/);
+    });
+    it('Switch is at least 44px tall on phones', () => {
+        expect(read('forms/Switch.svelte')).toMatch(/@media \(max-width: 48rem\)\s*\{\s*\.switch\s*\{\s*min-block-size:\s*2\.75rem/);
+    });
+    it('TagsInput remove buttons are 44px on phones and touch screens', () => {
+        const source = read('forms/TagsInput.svelte');
+        const start = source.indexOf('@media (max-width: 48rem), (pointer: coarse)');
+        expect(start).toBeGreaterThan(-1);
+        const block = source.slice(start, source.indexOf('\n  }', start));
+        expect(block).toMatch(/\.tag button\s*\{[^}]*min-inline-size:\s*2\.75rem/);
+        expect(block).toMatch(/\.tag button\s*\{[^}]*min-block-size:\s*2\.75rem/);
+    });
+    it('Dropdown menu rows are at least 44px tall', () => {
+        expect(read('ui/Dropdown.svelte')).toMatch(/\.dropdown__item\s*\{[^}]*min-block-size:\s*2\.75rem/);
+    });
+});

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

@@ -10,6 +10,8 @@ export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
 export { default as Disclosure } from './Disclosure.svelte';
 export { default as Dropdown, default as Menu } from './Dropdown.svelte';
+export { default as IconToggle } from './IconToggle.svelte';
+export { default as IconToggleGroup } from './IconToggleGroup.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Skeleton } from './Skeleton.svelte';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/ui/index.js

@@ -11,6 +11,8 @@ export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
 export { default as Disclosure } from './Disclosure.svelte';
 export { default as Dropdown, default as Menu } from './Dropdown.svelte';
+export { default as IconToggle } from './IconToggle.svelte';
+export { default as IconToggleGroup } from './IconToggleGroup.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Skeleton } from './Skeleton.svelte';

package/dist/i18n/strings.ui.d.ts

@@ -11,9 +11,50 @@ export declare const M: {
     readonly 'ui.calendar.next_month': "ui.calendar.next_month";
     readonly 'ui.calendar.select_month': "ui.calendar.select_month";
     readonly 'ui.calendar.select_year': "ui.calendar.select_year";
+    readonly 'ui.calendar.today': "ui.calendar.today";
+    readonly 'ui.calendar.more': "ui.calendar.more";
+    readonly 'ui.calendar.more_short': "ui.calendar.more_short";
+    readonly 'ui.calendar.all_day': "ui.calendar.all_day";
+    readonly 'ui.calendar.until': "ui.calendar.until";
+    readonly 'ui.calendar.items_one': "ui.calendar.items_one";
+    readonly 'ui.calendar.items_other': "ui.calendar.items_other";
+    readonly 'ui.calendar.nothing_day': "ui.calendar.nothing_day";
+    readonly 'ui.calendar.nothing_month': "ui.calendar.nothing_month";
+    readonly 'ui.calendar.days_in': "ui.calendar.days_in";
+    readonly 'ui.calendar.close_day': "ui.calendar.close_day";
     readonly 'ui.day_view.back_to_calendar': "ui.day_view.back_to_calendar";
     readonly 'ui.day_view.no_events': "ui.day_view.no_events";
     readonly 'ui.modal.close': "ui.modal.close";
+    readonly 'ui.phone_sheet.close': "ui.phone_sheet.close";
+    readonly 'ui.working_strip.working': "ui.working_strip.working";
+    readonly 'ui.working_strip.done': "ui.working_strip.done";
+    readonly 'ui.working_strip.open': "ui.working_strip.open";
+    readonly 'ui.working_strip.stop': "ui.working_strip.stop";
+    readonly 'ui.working_strip.paused': "ui.working_strip.paused";
+    readonly 'ui.working_strip.waiting': "ui.working_strip.waiting";
+    readonly 'ui.working_strip.failed': "ui.working_strip.failed";
+    readonly 'ui.working_strip.cancelled': "ui.working_strip.cancelled";
+    readonly 'ui.working_strip.pause': "ui.working_strip.pause";
+    readonly 'ui.working_strip.resume': "ui.working_strip.resume";
+    readonly 'ui.working_strip.review': "ui.working_strip.review";
+    readonly 'ui.working_strip.dismiss': "ui.working_strip.dismiss";
+    readonly 'ui.form_action_bar.label': "ui.form_action_bar.label";
+    readonly 'ui.dictation.start': "ui.dictation.start";
+    readonly 'ui.dictation.start_hint': "ui.dictation.start_hint";
+    readonly 'ui.dictation.stop': "ui.dictation.stop";
+    readonly 'ui.dictation.starting': "ui.dictation.starting";
+    readonly 'ui.dictation.listening': "ui.dictation.listening";
+    readonly 'ui.dictation.unsupported': "ui.dictation.unsupported";
+    readonly 'ui.dictation.denied': "ui.dictation.denied";
+    readonly 'ui.dictation.no_speech': "ui.dictation.no_speech";
+    readonly 'ui.dictation.microphone': "ui.dictation.microphone";
+    readonly 'ui.dictation.interrupted': "ui.dictation.interrupted";
+    readonly 'ui.dictation.failed': "ui.dictation.failed";
+    readonly 'ui.dictation.transcribing': "ui.dictation.transcribing";
+    readonly 'ui.dictation.too_long': "ui.dictation.too_long";
+    readonly 'ui.dictation.not_transcribed': "ui.dictation.not_transcribed";
+    readonly 'ui.dictation.unavailable': "ui.dictation.unavailable";
+    readonly 'ui.dictation.forbidden': "ui.dictation.forbidden";
     readonly 'ui.progress_bar.label': "ui.progress_bar.label";
     readonly 'ui.progress_bar.over_by': "ui.progress_bar.over_by";
     readonly 'ui.footer.all_rights_reserved': "ui.footer.all_rights_reserved";

package/dist/i18n/strings.ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEZ,CAAC"}
+{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIZ,CAAC"}

package/dist/i18n/strings.ui.js

@@ -13,11 +13,57 @@ export const M = defineMessages({
     'ui.calendar.next_month': 'Next month',
     'ui.calendar.select_month': 'Select month',
     'ui.calendar.select_year': 'Select year',
+    // calendar/CalendarView.svelte
+    'ui.calendar.today': 'Today',
+    'ui.calendar.more': '+{count} more',
+    'ui.calendar.more_short': '+{count}',
+    'ui.calendar.all_day': 'All day',
+    'ui.calendar.until': 'Until {date}',
+    'ui.calendar.items_one': '1 item',
+    'ui.calendar.items_other': '{count} items',
+    'ui.calendar.nothing_day': 'Nothing scheduled',
+    'ui.calendar.nothing_month': 'Nothing scheduled this month',
+    'ui.calendar.days_in': 'Days in {month}',
+    'ui.calendar.close_day': 'Close {date}',
     // calendar/DayView.svelte
     'ui.day_view.back_to_calendar': 'Back to Calendar',
     'ui.day_view.no_events': 'No events scheduled for this day',
     // feedback/Modal.svelte
     'ui.modal.close': 'Close modal',
+    // feedback/PhoneSheet.svelte
+    'ui.phone_sheet.close': 'Close {title}',
+    // feedback/WorkingStrip.svelte
+    'ui.working_strip.working': 'Working…',
+    'ui.working_strip.done': 'Done',
+    'ui.working_strip.open': 'Open',
+    'ui.working_strip.stop': 'Stop',
+    'ui.working_strip.paused': 'Paused',
+    'ui.working_strip.waiting': 'Waiting for you',
+    'ui.working_strip.failed': "Couldn't finish",
+    'ui.working_strip.cancelled': 'Stopped',
+    'ui.working_strip.pause': 'Pause',
+    'ui.working_strip.resume': 'Continue',
+    'ui.working_strip.review': 'Review',
+    'ui.working_strip.dismiss': 'Close',
+    // forms/FormActionBar.svelte
+    'ui.form_action_bar.label': 'Form actions',
+    // forms/DictationButton.svelte, forms/DictationStatus.svelte
+    'ui.dictation.start': 'Speak instead of typing',
+    'ui.dictation.start_hint': 'Speak instead of typing. You can also press and hold the text box.',
+    'ui.dictation.stop': 'Stop listening',
+    'ui.dictation.starting': 'Getting the microphone ready…',
+    'ui.dictation.listening': 'Listening. Tap the microphone when you are done.',
+    'ui.dictation.unsupported': "Speech recognition isn't available in this browser. Brave blocks it; try Chrome, Edge or Safari, or type instead.",
+    'ui.dictation.denied': 'The microphone is blocked. Allow it for this site in your browser settings, then try again.',
+    'ui.dictation.no_speech': "Didn't hear anything. Tap the mic and try again.",
+    'ui.dictation.microphone': "Couldn't use the microphone. Check that one is connected and no other app is using it, then try again.",
+    'ui.dictation.interrupted': 'Listening stopped straight away. This browser may not support speaking into text; try Chrome, Edge or Safari, or type instead.',
+    'ui.dictation.failed': 'Listening stopped. Tap the microphone to try again.',
+    'ui.dictation.transcribing': 'Writing it down…',
+    'ui.dictation.too_long': 'That was too long to write down. Try a shorter message, or type instead.',
+    'ui.dictation.not_transcribed': "Couldn't write that down. Tap the microphone to try again, or type instead.",
+    'ui.dictation.unavailable': "Speaking isn't set up here yet. Please type instead.",
+    'ui.dictation.forbidden': "You can't use speaking here. Please type instead.",
     // feedback/ProgressBar.svelte
     'ui.progress_bar.label': 'Progress',
     'ui.progress_bar.over_by': 'Over by {amount}',

package/dist/svelte/__tests__/playground.test.js

@@ -9,6 +9,7 @@ describe('smrt-ui playground', () => {
             'feedback-overlays',
             'collections',
             'data-table',
+            'calendar',
         ]);
         for (const entry of playground.entries) {
             expect(entry.loadComponent).toEqual(expect.any(Function));

package/dist/svelte/playground/CalendarPreview.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+import CalendarView from '../../components/calendar/CalendarView.svelte';
+import type {
+  CalendarItem,
+  CalendarMode,
+} from '../../components/calendar/calendar-model.js';
+import SegmentedControl from '../../components/forms/SegmentedControl.svelte';
+
+const zone = 'America/Edmonton';
+const today = new Date();
+const y = today.getUTCFullYear();
+const m = today.getUTCMonth() + 1;
+const pad = (n: number) => String(n).padStart(2, '0');
+const day = (d: number) => `${y}-${pad(m)}-${pad(d)}`;
+const at = (d: number, hour: number) =>
+  new Date(`${day(d)}T${pad(hour)}:00:00-06:00`);
+
+let mode = $state<CalendarMode>('auto');
+let picked = $state('');
+
+const items: CalendarItem[] = [
+  {
+    id: 'fair',
+    title: 'Fall fair',
+    start: day(4),
+    end: day(7),
+    group: 'community',
+    label: 'Community',
+  },
+  {
+    id: 'council',
+    title: 'Council meeting',
+    start: at(9, 19),
+    end: at(9, 21),
+    group: 'council',
+    label: 'Council',
+  },
+  {
+    id: 'game-1',
+    title: 'Hawks vs Owls',
+    start: at(12, 13),
+    group: 'sports',
+    label: 'Sports',
+  },
+  {
+    id: 'game-2',
+    title: 'Owls vs Crows',
+    start: at(12, 15),
+    group: 'sports',
+    label: 'Sports',
+  },
+  {
+    id: 'game-3',
+    title: 'Crows vs Hawks',
+    start: at(12, 17),
+    group: 'sports',
+    label: 'Sports',
+  },
+  {
+    id: 'game-4',
+    title: 'Final',
+    start: at(12, 19),
+    group: 'sports',
+    label: 'Sports',
+  },
+  {
+    id: 'deadline',
+    title: 'Budget comments close',
+    start: day(15),
+    tone: 'warning',
+  },
+  {
+    id: 'camp',
+    title: 'Hockey camp',
+    start: at(18, 9),
+    end: at(21, 16),
+    group: 'sports',
+    label: 'Sports',
+  },
+];
+</script>
+
+<div class="workbench">
+  <header>
+    <div>
+      <p class="eyebrow">Calendar</p>
+      <h4>Month grid, all-day bands, and the phone agenda ({zone})</h4>
+    </div>
+    <SegmentedControl
+      label="Mode"
+      value={mode}
+      interaction={false}
+      options={[
+        { value: 'auto', label: 'Auto' },
+        { value: 'month', label: 'Month' },
+        { value: 'agenda', label: 'Agenda' },
+      ]}
+      onvaluechange={(value) => (mode = value as CalendarMode)}
+    />
+  </header>
+  <CalendarView
+    {items}
+    {mode}
+    timeZone={zone}
+    onItemSelect={(item) => (picked = item.title)}
+  />
+  <p class="picked" aria-live="polite">{picked ? `Selected: ${picked}` : ''}</p>
+</div>
+
+<style>
+  .workbench {
+    display: grid;
+    gap: var(--smrt-spacing-4, 1rem);
+  }
+
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .eyebrow {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #44474e);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    text-transform: uppercase;
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+
+  .picked {
+    margin: 0;
+    min-height: 1.5rem;
+    color: var(--smrt-color-on-surface-variant, #44474e);
+  }
+</style>

package/dist/svelte/playground/CalendarPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const CalendarPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarPreview = ReturnType<typeof CalendarPreview>;
+export default CalendarPreview;
+//# sourceMappingURL=CalendarPreview.svelte.d.ts.map

package/dist/svelte/playground/CalendarPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CalendarPreview.svelte.ts"],"names":[],"mappings":"AA6GA,QAAA,MAAM,eAAe,2DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/playground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAQA,wBAiEE"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AASA,wBA2EE"}

package/dist/svelte/playground.js

@@ -3,6 +3,7 @@ const loadDataTable = () => import('./playground/DataTablePreview.svelte');
 const loadInteractiveControls = () => import('./playground/InteractiveControlsPreview.svelte');
 const loadFeedback = () => import('./playground/FeedbackPreview.svelte');
 const loadCollections = () => import('./playground/CollectionsPreview.svelte');
+const loadCalendar = () => import('./playground/CalendarPreview.svelte');
 export default {
     packageName: '@happyvertical/smrt-ui',
     displayName: 'UI Foundation',
@@ -61,5 +62,14 @@ export default {
                 },
             },
         },
+        {
+            id: 'calendar',
+            title: 'Calendar',
+            description: 'Time-zone-aware month grid with all-day bands and "+N more", and the phone agenda (day strip + day list).',
+            loadComponent: loadCalendar,
+            order: 6,
+            tags: ['calendar', 'events', 'agenda', 'mobile'],
+            modes: { mock: { label: 'Interactive' } },
+        },
     ],
 };

package/dist/types-generic.d.ts

@@ -48,6 +48,8 @@ export interface MenuItem {
     label: string;
     /** Disable this item. */
     disabled?: boolean;
+    /** Leading icon (any icon set). Decorative: hidden from assistive technology. */
+    icon?: Snippet;
     /** Per-item activation handler. */
     onselect?: () => void;
 }

package/dist/types-generic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types-generic.d.ts","sourceRoot":"","sources":["../src/types-generic.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types-generic.d.ts","sourceRoot":"","sources":["../src/types-generic.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.51.39",
+  "version": "0.52.0",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -129,11 +129,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.51.39",
+    "@happyvertical/smrt-types": "0.52.0",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
-    "svelte": "^5.57.1"
+    "svelte": "^5.57.0"
   },
   "peerDependenciesMeta": {
     "svelte": {