@happyvertical/smrt-svelte 0.30.0

package/dist/components/forms/__tests__/rich-inputs-a11y.test.js

@@ -0,0 +1,87 @@
+/**
+ * Accessibility golden tests for the standalone rich form inputs (Sweep L1,
+ * #1420). These inputs carry their own <label> + supporting/error text (they do
+ * NOT compose the base primitives), so each was given aria-describedby →
+ * supporting text and aria-invalid on its error state.
+ *
+ * They depend on the Provider-backed useAppState/useSTT hooks (which throw
+ * outside a <Provider>), so both are mocked once here to non-listening stubs.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+vi.mock('../../../hooks/useSTT.svelte.js', () => ({
+    useSTT: () => ({
+        isListening: false,
+        isInitializing: false,
+        isReady: false,
+        adapterType: null,
+        downloadProgress: 0,
+        lastResult: '',
+        initialize: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+    }),
+}));
+import NumberInput from '../NumberInput.svelte';
+import PhoneInput from '../PhoneInput.svelte';
+import SelectInput from '../SelectInput.svelte';
+import TextareaInput from '../TextareaInput.svelte';
+import TextInput from '../TextInput.svelte';
+describe('rich form inputs — accessibility', () => {
+    it('TextInput: labelled + describedby + axe-clean', async () => {
+        const { container } = render(TextInput, {
+            props: { name: 'fullname', label: 'Full name' },
+        });
+        const input = screen.getByLabelText('Full name');
+        expect(input).toHaveAttribute('aria-describedby', 'fullname-supporting');
+        await expectNoA11yViolations(container);
+    });
+    it('TextareaInput: labelled + describedby + axe-clean', async () => {
+        const { container } = render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio' },
+        });
+        const input = screen.getByLabelText('Bio');
+        expect(input).toHaveAttribute('aria-describedby', 'bio-supporting');
+        await expectNoA11yViolations(container);
+    });
+    it('SelectInput: labelled + describedby + axe-clean', async () => {
+        const { container } = render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                placeholder: 'Choose…',
+                options: [{ value: 'us', label: 'United States' }],
+            },
+        });
+        const select = screen.getByLabelText('Country');
+        expect(select).toHaveAttribute('aria-describedby', 'country-supporting');
+        await expectNoA11yViolations(container);
+    });
+    it('PhoneInput: labelled + axe-clean', async () => {
+        const { container } = render(PhoneInput, {
+            props: { name: 'phone', label: 'Phone' },
+        });
+        expect(screen.getByLabelText('Phone')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('NumberInput: labelled + axe-clean', async () => {
+        const { container } = render(NumberInput, {
+            props: { name: 'age', label: 'Age' },
+        });
+        expect(screen.getByLabelText('Age')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('NumberInput: sets aria-invalid + links the error when out of range', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', max: 10, value: 99 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-describedby', 'age-error');
+        expect(document.getElementById('age-error')).toHaveAttribute('role', 'alert');
+    });
+});

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

@@ -0,0 +1,25 @@
+/**
+ * SMRT Form components with voice input capabilities
+ */
+export { default as AddressInput } from './AddressInput.svelte';
+export { default as CheckboxInput } from './CheckboxInput.svelte';
+export { default as DateRangeInput } from './DateRangeInput.svelte';
+export { default as DateTimeInput } from './DateTimeInput.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as Form } from './Form.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as Input } from './Input.svelte';
+export { default as MeasurementInput } from './MeasurementInput.svelte';
+export { default as MoneyInput } from './MoneyInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as PhoneInput } from './PhoneInput.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SelectInput } from './SelectInput.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextareaInput } from './TextareaInput.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export type { AddressValue, DateRangeValue, LLMModelId, MeasurementUnit, MeasurementValue, SelectOption, STTAdapterType, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGpD,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/forms/index.js

@@ -0,0 +1,25 @@
+/**
+ * SMRT Form components with voice input capabilities
+ */
+// SMRT-enhanced form components with voice support (v2.0 naming)
+export { default as AddressInput } from './AddressInput.svelte';
+export { default as CheckboxInput } from './CheckboxInput.svelte';
+export { default as DateRangeInput } from './DateRangeInput.svelte';
+export { default as DateTimeInput } from './DateTimeInput.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as Form } from './Form.svelte';
+// Generic form components (migrated from @happyvertical/svelte)
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as Input } from './Input.svelte';
+export { default as MeasurementInput } from './MeasurementInput.svelte';
+export { default as MoneyInput } from './MoneyInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as PhoneInput } from './PhoneInput.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as Select } from './Select.svelte';
+export { default as SelectInput } from './SelectInput.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextareaInput } from './TextareaInput.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as Toggle } from './Toggle.svelte';

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

@@ -0,0 +1,33 @@
+/**
+ * Types for SMRT Form components
+ */
+/** Speech-to-text adapter type */
+export type STTAdapterType = 'browser-speech' | 'whisper-wasm' | 'whisper-cpp';
+/** LLM model ID for field extraction */
+export type LLMModelId = 'none' | 'smollm2-360m' | 'smollm2-1.7b' | 'qwen2.5-1.5b' | 'llama-3.2-1b';
+/** Option for SMRTSelect component */
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/** Address value for SMRTAddress component */
+export interface AddressValue {
+    street: string;
+    city: string;
+    province: string;
+    postalCode: string;
+    country: string;
+}
+/** Date range value for SMRTDateRange component */
+export interface DateRangeValue {
+    startDate: string;
+    endDate: string;
+}
+/** Measurement unit types */
+export type MeasurementUnit = 'ft' | 'in' | 'm' | 'cm' | 'mm' | 'yd';
+/** Measurement value for SMRTMeasurement component */
+export interface MeasurementValue {
+    value: number;
+    unit: MeasurementUnit;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/forms/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,aAAa,CAAC;AAE/E,wCAAwC;AACxC,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,CAAC;AAEnB,sCAAsC;AACtC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,8CAA8C;AAC9C,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,mDAAmD;AACnD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,6BAA6B;AAC7B,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErE,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;CACvB"}

package/dist/components/forms/types.js

@@ -0,0 +1,4 @@
+/**
+ * Types for SMRT Form components
+ */
+export {};

package/dist/components/module/ModulePanel.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+/**
+ * ModulePanel - Shell component for rendering module UI slots
+ *
+ * Dynamically renders a module's registered UI component by looking up
+ * the component in the ModuleUIRegistry.
+ *
+ * Usage:
+ * 1. Import ModulePanel from '@happyvertical/smrt-svelte'
+ * 2. Import the module's svelte package to register components
+ * 3. Use ModulePanel with moduleName and slotId props
+ */
+
+import type {
+  ModuleUIBaseProps,
+  SmrtModuleMeta,
+} from '@happyvertical/smrt-types';
+import { M, useI18n } from '@happyvertical/smrt-ui/i18n';
+import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
+
+const { t } = useI18n();
+
+interface Props extends ModuleUIBaseProps {
+  /** Module name (e.g., '@happyvertical/smrt-commerce') */
+  moduleName: string;
+  /** Slot ID to render */
+  slotId: string;
+}
+
+const {
+  moduleName,
+  slotId,
+  data,
+  config,
+  onChange,
+  onSave,
+  readonly = false,
+  loading = false,
+  class: className = '',
+}: Props = $props();
+
+// Get the component and slot metadata from registry
+const Component = $derived(ModuleUIRegistry.get(moduleName, slotId));
+const moduleMeta = $derived(ModuleUIRegistry.getModuleMeta(moduleName));
+const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
+</script>
+
+{#if Component}
+  <Component
+    {data}
+    {config}
+    {onChange}
+    {onSave}
+    {readonly}
+    {loading}
+    class={className}
+  />
+{:else}
+  <div class="module-panel-placeholder {className}">
+    <div class="module-panel-placeholder__icon">
+      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+        <polyline points="3.29 7 12 12 20.71 7"/>
+        <line x1="12" y1="22" x2="12" y2="12"/>
+      </svg>
+    </div>
+    <p class="module-panel-placeholder__title">
+      {t(M['ui.module_panel.component_not_registered'])}
+    </p>
+    <code class="module-panel-placeholder__code">
+      {moduleName}/{slotId}
+    </code>
+    <p class="module-panel-placeholder__hint">
+      {t(M['ui.module_panel.register_hint'])}
+    </p>
+    {#if slotMeta}
+      <p class="module-panel-placeholder__meta">
+        Expected: <strong>{slotMeta.label}</strong>
+        {#if slotMeta.description}
+          — {slotMeta.description}
+        {/if}
+      </p>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .module-panel-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+    background: var(--smrt-color-surface-container-low, #f8fafc);
+    border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
+    border-radius: var(--smrt-radius-medium, 8px);
+    min-height: 150px;
+    gap: 0.75rem;
+  }
+
+  .module-panel-placeholder__icon {
+    color: var(--smrt-color-on-surface-variant, #94a3b8);
+    opacity: 0.6;
+  }
+
+  .module-panel-placeholder__title {
+    margin: 0;
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1e293b);
+  }
+
+  .module-panel-placeholder__code {
+    font-family: var(--smrt-font-family-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
+    background: var(--smrt-color-surface-container-high, #e2e8f0);
+    border-radius: var(--smrt-radius-small, 4px);
+    color: var(--smrt-color-on-surface-variant, #64748b);
+  }
+
+  .module-panel-placeholder__hint {
+    margin: 0;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant, #64748b);
+  }
+
+  .module-panel-placeholder__meta {
+    margin: 0;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #94a3b8);
+  }
+</style>

package/dist/components/module/ModulePanel.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ModulePanel - Shell component for rendering module UI slots
+ *
+ * Dynamically renders a module's registered UI component by looking up
+ * the component in the ModuleUIRegistry.
+ *
+ * Usage:
+ * 1. Import ModulePanel from '@happyvertical/smrt-svelte'
+ * 2. Import the module's svelte package to register components
+ * 3. Use ModulePanel with moduleName and slotId props
+ */
+import type { ModuleUIBaseProps } from '@happyvertical/smrt-types';
+interface Props extends ModuleUIBaseProps {
+    /** Module name (e.g., '@happyvertical/smrt-commerce') */
+    moduleName: string;
+    /** Slot ID to render */
+    slotId: string;
+}
+declare const ModulePanel: import("svelte").Component<Props, {}, "">;
+type ModulePanel = ReturnType<typeof ModulePanel>;
+export default ModulePanel;
+//# sourceMappingURL=ModulePanel.svelte.d.ts.map

package/dist/components/module/ModulePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModulePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/module/ModulePanel.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,2BAA2B,CAAC;AAKnC,UAAU,KAAM,SAAQ,iBAAiB;IACvC,yDAAyD;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;CAChB;AA+DD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,5 @@
+/**
+ * Module UI components
+ */
+export { default as ModulePanel } from './ModulePanel.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/module/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/module/index.js

@@ -0,0 +1,4 @@
+/**
+ * Module UI components
+ */
+export { default as ModulePanel } from './ModulePanel.svelte';

package/dist/components/workspace/Breadcrumbs.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+/**
+ * Breadcrumbs — generic breadcrumb trail primitive.
+ *
+ * Two modes:
+ *
+ *  - **Explicit**: pass `items` directly.
+ *  - **Auto**: pass `nav` + `pathname` and the component will walk the
+ *    pathname segments, matching against the nav tree for labels and
+ *    falling back to capitalized segments otherwise. Use `rootCrumb`
+ *    to prepend a site/section identity and `startAfter` to skip a
+ *    pathname prefix (e.g. `'sites/foo'` to ignore the
+ *    `/sites/foo` portion of a per-site path).
+ *
+ * SvelteKit-agnostic: no `$app/*` imports. Consumers supply the
+ * pathname externally.
+ */
+import { deriveCrumbsFromNav } from './breadcrumbs-helpers.js';
+import type { BreadcrumbItem, NavItem } from './types.js';
+
+interface Props {
+  /** Explicit crumbs. When provided, `nav` and `pathname` are ignored. */
+  items?: BreadcrumbItem[];
+  /** Nav tree to derive labels from in auto mode. */
+  nav?: NavItem[];
+  /** Pathname to walk in auto mode. */
+  pathname?: string;
+  /** Optional leading crumb (e.g. site name). Auto mode only. */
+  rootCrumb?: BreadcrumbItem;
+  /** Capitalize fallback labels for unknown segments. Default: true. */
+  capitalize?: boolean;
+  /** Skip pathname segments through this path (e.g. `'sites/foo'`). */
+  startAfter?: string;
+  /** Accessible label for the breadcrumb nav. */
+  'aria-label'?: string;
+}
+
+const {
+  items,
+  nav,
+  pathname,
+  rootCrumb,
+  capitalize = true,
+  startAfter,
+  'aria-label': ariaLabel = 'Breadcrumb',
+}: Props = $props();
+
+const crumbs = $derived.by((): BreadcrumbItem[] => {
+  if (items) return items;
+  if (!nav || pathname == null) {
+    return rootCrumb ? [rootCrumb] : [];
+  }
+  return deriveCrumbsFromNav(pathname, nav, {
+    rootCrumb,
+    startAfter,
+    capitalize,
+  });
+});
+
+const lastIndex = $derived(crumbs.length - 1);
+</script>
+
+<nav class="smrt-breadcrumbs" aria-label={ariaLabel}>
+  <ol class="crumb-list">
+    {#each crumbs as crumb, i (`${i}:${crumb.href ?? crumb.label}`)}
+      <li class="crumb-item">
+        {#if i > 0}
+          <span class="separator" aria-hidden="true">/</span>
+        {/if}
+        {#if i === lastIndex || !crumb.href}
+          <span
+            class="current"
+            aria-current={i === lastIndex ? 'page' : undefined}
+            >{crumb.label}</span
+          >
+        {:else}
+          <a href={crumb.href} class="crumb-link">{crumb.label}</a>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .smrt-breadcrumbs {
+    width: 100%;
+  }
+
+  .crumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .crumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .separator {
+    margin: 0 0.5rem;
+    color: var(--smrt-color-outline-variant);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+  }
+
+  .current {
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .crumb-link {
+    color: var(--smrt-color-on-surface-variant);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  .crumb-link:hover {
+    color: var(--smrt-color-on-surface);
+    text-decoration: underline;
+  }
+
+  .crumb-link:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+    border-radius: var(--smrt-radius-sm, 4px);
+  }
+
+  @media (max-width: 640px) {
+    .crumb-item {
+      font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
+    }
+    .separator {
+      margin: 0 0.35rem;
+    }
+  }
+</style>

package/dist/components/workspace/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { BreadcrumbItem, NavItem } from './types.js';
+interface Props {
+    /** Explicit crumbs. When provided, `nav` and `pathname` are ignored. */
+    items?: BreadcrumbItem[];
+    /** Nav tree to derive labels from in auto mode. */
+    nav?: NavItem[];
+    /** Pathname to walk in auto mode. */
+    pathname?: string;
+    /** Optional leading crumb (e.g. site name). Auto mode only. */
+    rootCrumb?: BreadcrumbItem;
+    /** Capitalize fallback labels for unknown segments. Default: true. */
+    capitalize?: boolean;
+    /** Skip pathname segments through this path (e.g. `'sites/foo'`). */
+    startAfter?: string;
+    /** Accessible label for the breadcrumb nav. */
+    'aria-label'?: string;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.svelte.d.ts.map

package/dist/components/workspace/Breadcrumbs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/workspace/Breadcrumbs.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG1D,UAAU,KAAK;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,mDAAmD;IACnD,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC;IAChB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}