@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/ui/__tests__/IconToggleGroup.test.js

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import IconToggleGroup from '../IconToggleGroup.svelte';
+const buttons = createRawSnippet(() => ({
+    render: () => '<span><button type="button" aria-pressed="true" aria-label="Draft (2)">D</button><button type="button" aria-pressed="false" aria-label="Review (0)">R</button></span>',
+}));
+describe('IconToggleGroup', () => {
+    it('is a named group around its toggles', () => {
+        render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        const group = screen.getByRole('group', { name: 'Filter by status' });
+        expect(group.querySelectorAll('button')).toHaveLength(2);
+    });
+    it('adds no state: the toggles keep their own pressed value', () => {
+        render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        expect(screen.getByRole('button', { name: 'Draft (2)' })).toHaveAttribute('aria-pressed', 'true');
+        expect(screen.getByRole('button', { name: 'Review (0)' })).toHaveAttribute('aria-pressed', 'false');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/Popover.test.js

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Popover from '../Popover.svelte';
+const icon = createRawSnippet(() => ({
+    render: () => '<svg viewBox="0 0 24 24" width="18" height="18"></svg>',
+}));
+const body = createRawSnippet(() => ({
+    render: () => '<p>No main picture</p>',
+}));
+describe('Popover', () => {
+    it('names an icon-only trigger with triggerLabel and opens its panel', async () => {
+        render(Popover, {
+            props: {
+                label: 'Issues',
+                triggerLabel: '3 issues',
+                trigger: icon,
+                children: body,
+            },
+        });
+        const trigger = screen.getByRole('button', { name: '3 issues' });
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+        await userEvent.click(trigger);
+        expect(trigger).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByRole('dialog', { name: 'Issues' })).toHaveTextContent('No main picture');
+    });
+    it('is named by its visible content when there is no triggerLabel', () => {
+        render(Popover, { props: { label: 'Filters', children: body } });
+        expect(screen.getByRole('button', { name: 'Filters' })).not.toHaveAttribute('aria-label');
+    });
+    it('is axe-clean with an icon-only trigger', async () => {
+        const { container } = render(Popover, {
+            props: {
+                label: 'Issues',
+                triggerLabel: '3 issues',
+                trigger: icon,
+                children: body,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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";
@@ -32,6 +73,30 @@ export declare const M: {
     readonly 'ui.pagination.last_page': "ui.pagination.last_page";
     readonly 'ui.reaction_picker.label': "ui.reaction_picker.label";
     readonly 'ui.reaction_picker.react_with': "ui.reaction_picker.react_with";
+    readonly 'ui.camera_capture.region': "ui.camera_capture.region";
+    readonly 'ui.camera_capture.preview': "ui.camera_capture.preview";
+    readonly 'ui.camera_capture.starting': "ui.camera_capture.starting";
+    readonly 'ui.camera_capture.off': "ui.camera_capture.off";
+    readonly 'ui.camera_capture.unsupported': "ui.camera_capture.unsupported";
+    readonly 'ui.camera_capture.permission_denied': "ui.camera_capture.permission_denied";
+    readonly 'ui.camera_capture.no_camera': "ui.camera_capture.no_camera";
+    readonly 'ui.camera_capture.error': "ui.camera_capture.error";
+    readonly 'ui.camera_capture.retry': "ui.camera_capture.retry";
+    readonly 'ui.camera_capture.capture': "ui.camera_capture.capture";
+    readonly 'ui.camera_capture.retake': "ui.camera_capture.retake";
+    readonly 'ui.camera_capture.use_photo': "ui.camera_capture.use_photo";
+    readonly 'ui.camera_capture.review_alt': "ui.camera_capture.review_alt";
+    readonly 'ui.camera_capture.committed_alt': "ui.camera_capture.committed_alt";
+    readonly 'ui.camera_capture.committed': "ui.camera_capture.committed";
+    readonly 'ui.camera_capture.choose_photo': "ui.camera_capture.choose_photo";
+    readonly 'ui.signature_pad.region': "ui.signature_pad.region";
+    readonly 'ui.signature_pad.canvas_empty': "ui.signature_pad.canvas_empty";
+    readonly 'ui.signature_pad.canvas_signed': "ui.signature_pad.canvas_signed";
+    readonly 'ui.signature_pad.hint_any': "ui.signature_pad.hint_any";
+    readonly 'ui.signature_pad.hint_stylus': "ui.signature_pad.hint_stylus";
+    readonly 'ui.signature_pad.clear': "ui.signature_pad.clear";
+    readonly 'ui.signature_pad.use_signature': "ui.signature_pad.use_signature";
+    readonly 'ui.signature_pad.committed': "ui.signature_pad.committed";
     readonly 'ui.staged_control_review.region': "ui.staged_control_review.region";
     readonly 'ui.staged_control_review.heading': "ui.staged_control_review.heading";
     readonly 'ui.staged_control_review.description': "ui.staged_control_review.description";

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKZ,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}',
@@ -44,6 +90,32 @@ export const M = defineMessages({
     // chat/ReactionPicker.svelte
     'ui.reaction_picker.label': 'Add reaction',
     'ui.reaction_picker.react_with': 'React with {emoji}',
+    // forms/CameraCapture.svelte
+    'ui.camera_capture.region': 'Camera',
+    'ui.camera_capture.preview': 'Live camera preview',
+    'ui.camera_capture.starting': 'Starting camera…',
+    'ui.camera_capture.off': 'The camera is off.',
+    'ui.camera_capture.unsupported': 'This browser cannot use the camera. Open this page over HTTPS in a current browser.',
+    'ui.camera_capture.permission_denied': 'Camera access was denied. Allow camera access for this site, then try again.',
+    'ui.camera_capture.no_camera': 'No camera was found on this device.',
+    'ui.camera_capture.error': 'Could not access the camera.',
+    'ui.camera_capture.retry': 'Try again',
+    'ui.camera_capture.capture': 'Take photo',
+    'ui.camera_capture.retake': 'Retake',
+    'ui.camera_capture.use_photo': 'Use photo',
+    'ui.camera_capture.review_alt': 'Captured photo, not yet used',
+    'ui.camera_capture.committed_alt': 'Attached photo',
+    'ui.camera_capture.committed': 'Photo attached.',
+    'ui.camera_capture.choose_photo': 'Take or choose a photo',
+    // forms/SignaturePad.svelte
+    'ui.signature_pad.region': 'Signature',
+    'ui.signature_pad.canvas_empty': 'Signature area, not yet signed',
+    'ui.signature_pad.canvas_signed': 'Signature area, signed',
+    'ui.signature_pad.hint_any': 'Sign with a stylus, your finger, or the mouse.',
+    'ui.signature_pad.hint_stylus': 'Sign with the stylus.',
+    'ui.signature_pad.clear': 'Clear',
+    'ui.signature_pad.use_signature': 'Use signature',
+    'ui.signature_pad.committed': 'Signature attached.',
     // forms/StagedControlReview.svelte
     'ui.staged_control_review.region': 'Review proposed changes',
     'ui.staged_control_review.heading': 'Proposed changes',

package/dist/styles/tokens.css

@@ -4,6 +4,8 @@
  */
 
 :root {
+  --smrt-touch-target-min: 48px;
+  --smrt-control-target-min: 0px;
   /* Colors - Primary */
   --color-primary-main: #1976d2;
   --color-primary-light: #e3f2fd;

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import playground from '../playground.js';
 describe('smrt-ui playground', () => {
-    it('publishes themed base-control and data-table previews', () => {
+    it('publishes themed base-control, data-table, and capture previews', () => {
         expect(playground.packageName).toBe('@happyvertical/smrt-ui');
         expect(playground.entries.map((entry) => entry.id)).toEqual([
             'base-controls',
@@ -9,6 +9,8 @@ describe('smrt-ui playground', () => {
             'feedback-overlays',
             'collections',
             'data-table',
+            'calendar',
+            'capture',
         ]);
         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"}