@happyvertical/smrt-svelte 0.55.6 → 0.55.8

package/dist/components/command-palette/rank.d.ts

@@ -0,0 +1,20 @@
+import type { PaletteItem, PaletteProvider, PaletteResult, PaletteSection } from './types.js';
+/** Default rows per group. */
+export declare const DEFAULT_MAX_PER_GROUP = 8;
+export interface RankInput {
+    /** In registration order. */
+    providers: readonly PaletteProvider[];
+    /** `items()` output by provider id. */
+    local: Readonly<Record<string, readonly PaletteItem[]>>;
+    /** `search()` output by provider id (for the current or previous query). */
+    remote: Readonly<Record<string, readonly PaletteItem[]>>;
+    query: string;
+    maxPerGroup?: number;
+}
+/** Providers by `order`, then registration order. */
+export declare function orderProviders(providers: readonly PaletteProvider[]): PaletteProvider[];
+/** Group, match and rank. A group with no rows is omitted. */
+export declare function buildPaletteSections(input: RankInput): PaletteSection[];
+/** The rows of `sections` in display order. */
+export declare function flattenSections(sections: readonly PaletteSection[]): PaletteResult[];
+//# sourceMappingURL=rank.d.ts.map

package/dist/components/command-palette/rank.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/rank.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEV,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,YAAY,CAAC;AAEpB,8BAA8B;AAC9B,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,6BAA6B;IAC7B,SAAS,EAAE,SAAS,eAAe,EAAE,CAAC;IACtC,uCAAuC;IACvC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,CAAC,CAAC;IACxD,4EAA4E;IAC5E,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD,qDAAqD;AACrD,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,eAAe,EAAE,GACpC,eAAe,EAAE,CAQnB;AAED,8DAA8D;AAC9D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,EAAE,CA4DvE;AAED,+CAA+C;AAC/C,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,cAAc,EAAE,GAClC,aAAa,EAAE,CAEjB"}

package/dist/components/command-palette/rank.js

@@ -0,0 +1,74 @@
+/**
+ * Turns provider output into the grouped, ranked rows the palette renders.
+ * Pure: the controller feeds it the current local items, remote results and
+ * query. No DOM, no Svelte.
+ */
+import { matchItem, matchText } from './match.js';
+/** Default rows per group. */
+export const DEFAULT_MAX_PER_GROUP = 8;
+function resultFor(provider, item, score, titleRanges) {
+    return {
+        key: `${provider.id}:${item.id}`,
+        providerId: provider.id,
+        group: item.group ?? provider.label,
+        item,
+        score,
+        titleRanges,
+        selectable: !item.disabled,
+    };
+}
+/** Providers by `order`, then registration order. */
+export function orderProviders(providers) {
+    return providers
+        .map((provider, index) => ({ provider, index }))
+        .sort((a, b) => (a.provider.order ?? 0) - (b.provider.order ?? 0) || a.index - b.index)
+        .map(({ provider }) => provider);
+}
+/** Group, match and rank. A group with no rows is omitted. */
+export function buildPaletteSections(input) {
+    const query = input.query.trim();
+    const maxPerGroup = input.maxPerGroup ?? DEFAULT_MAX_PER_GROUP;
+    const sections = [];
+    const sectionFor = (label) => {
+        let section = sections.find((candidate) => candidate.id === label);
+        if (!section) {
+            section = { id: label, label, results: [] };
+            sections.push(section);
+        }
+        return section;
+    };
+    const seen = new Set();
+    for (const provider of orderProviders(input.providers)) {
+        const limit = provider.limit ?? maxPerGroup;
+        const matched = [];
+        for (const item of input.local[provider.id] ?? []) {
+            const match = matchItem(query, item);
+            if (!match)
+                continue;
+            matched.push(resultFor(provider, item, match.score + (item.boost ?? 0), match.titleRanges));
+        }
+        // Stable: equal scores keep the provider's own order.
+        matched.sort((a, b) => b.score - a.score);
+        const searched = [];
+        if (query.length > 0) {
+            for (const item of input.remote[provider.id] ?? []) {
+                searched.push(resultFor(provider, item, item.boost ?? 0, matchText(query, item.title)?.ranges ?? []));
+            }
+        }
+        let taken = 0;
+        for (const result of [...matched, ...searched]) {
+            if (taken >= limit)
+                break;
+            if (seen.has(result.key))
+                continue;
+            seen.add(result.key);
+            sectionFor(result.group).results.push(result);
+            taken += 1;
+        }
+    }
+    return sections.filter((section) => section.results.length > 0);
+}
+/** The rows of `sections` in display order. */
+export function flattenSections(sections) {
+    return sections.flatMap((section) => [...section.results]);
+}

package/dist/components/command-palette/types.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Command palette contracts (#3713).
+ *
+ * The palette is a thin shell over a *provider* contract: anything that wants
+ * to appear in "find anything" registers a {@link PaletteProvider}. The shell
+ * ships two (see `providers.ts`): navigation from the shell nav model, and a
+ * model-driven pair derived from the SMRT manifest. Packages and recipes add
+ * their own through the same contract.
+ */
+/** What an item does when chosen, for grouping hints and screen readers. */
+export type PaletteItemKind = 'command' | 'navigation' | 'create' | 'record' | (string & {});
+/** Passed to {@link PaletteItem.run}. */
+export interface PaletteRunContext {
+    /** The text typed when the item was chosen. */
+    query: string;
+    /** The provider that owns the item. */
+    providerId: string;
+    /** Navigate with the palette's `navigate` seam (same as an `href` item). */
+    navigate: (href: string) => void | Promise<void>;
+}
+/** One selectable row. */
+export interface PaletteItem {
+    /** Stable id, unique within its provider. */
+    id: string;
+    /** Primary text; matched against the query and highlighted. */
+    title: string;
+    /** Secondary line, e.g. the model an item belongs to. Matched at lower weight. */
+    subtitle?: string;
+    /** Extra match terms that are not shown ("invoice" for "Billing"). */
+    keywords?: readonly string[];
+    /** Overrides the provider's group heading for this item. */
+    group?: string;
+    /** A shell icon name (`SHELL_ICON_PATHS`); unknown names draw no icon. */
+    icon?: string;
+    /** Free-form tag, exposed as `data-kind` and read by assistants. */
+    kind?: PaletteItemKind;
+    /** Navigates here when chosen and no `run` is set. */
+    href?: string;
+    /** Runs when chosen. Takes precedence over `href`. */
+    run?: (context: PaletteRunContext) => void | Promise<void>;
+    /** A hotkey hint shown at the end of the row (display only), e.g. `Mod+N`. */
+    shortcut?: string;
+    /**
+     * Shown but not selectable. A string is the reason, announced and shown as
+     * the row tooltip.
+     */
+    disabled?: boolean | string;
+    /** Static ranking bias added to the match score (default 0). */
+    boost?: number;
+}
+/** Passed to {@link PaletteProvider.items}. */
+export interface PaletteItemsContext {
+    /** Aborted when the palette closes before the items arrive. */
+    signal: AbortSignal;
+}
+/** Passed to {@link PaletteProvider.search}. */
+export interface PaletteSearchContext {
+    /** Aborted when the query changes or the palette closes. */
+    signal: AbortSignal;
+    /** The most rows the palette will show for this provider. */
+    limit: number;
+}
+/**
+ * A source of palette rows. A provider offers either or both of:
+ *
+ * - `items` - a set the palette matches locally (commands, navigation). Read
+ *   every time the palette opens, so it can follow app state.
+ * - `search` - results for a typed query, fetched by the provider (records).
+ *   Called after a short debounce, with a signal that aborts on the next
+ *   keystroke. Results are shown as returned; the palette does not re-filter.
+ *
+ * Authorization stays with the provider: return only what the user may see.
+ * The palette is not a security boundary.
+ */
+export interface PaletteProvider {
+    /** Stable id; registering the same id again replaces the earlier provider. */
+    id: string;
+    /** Group heading for this provider's rows. */
+    label: string;
+    /** Lower sorts first (default 0); ties keep registration order. */
+    order?: number;
+    items?(context: PaletteItemsContext): readonly PaletteItem[] | Promise<readonly PaletteItem[]>;
+    search?(query: string, context: PaletteSearchContext): readonly PaletteItem[] | Promise<readonly PaletteItem[]>;
+    /** Shortest trimmed query `search` is called with (default 2). */
+    minQueryLength?: number;
+    /** Rows shown for this provider (default: the palette's `maxPerGroup`). */
+    limit?: number;
+}
+/** A character range `[start, end)` in a string. */
+export type MatchRange = readonly [start: number, end: number];
+/** A row the palette renders. */
+export interface PaletteResult {
+    /** `${providerId}:${item.id}`; unique in the palette. */
+    key: string;
+    providerId: string;
+    /** Group heading the row sits under. */
+    group: string;
+    item: PaletteItem;
+    /** Match score; higher is better. 0 for rows that were not text-matched. */
+    score: number;
+    /** Ranges of `item.title` that matched the query. */
+    titleRanges: readonly MatchRange[];
+    /** Whether the row can be chosen. */
+    selectable: boolean;
+}
+/** A heading and its rows. */
+export interface PaletteSection {
+    /** Stable: the group heading. */
+    id: string;
+    label: string;
+    results: readonly PaletteResult[];
+}
+/** Where an error came from. */
+export interface PaletteErrorContext {
+    providerId: string;
+    phase: 'items' | 'search' | 'run';
+    item?: PaletteItem;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/command-palette/types.d.ts.map

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

package/dist/components/command-palette/types.js

@@ -0,0 +1,10 @@
+/**
+ * Command palette contracts (#3713).
+ *
+ * The palette is a thin shell over a *provider* contract: anything that wants
+ * to appear in "find anything" registers a {@link PaletteProvider}. The shell
+ * ships two (see `providers.ts`): navigation from the shell nav model, and a
+ * model-driven pair derived from the SMRT manifest. Packages and recipes add
+ * their own through the same contract.
+ */
+export {};

package/dist/components/command-palette/use-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CommandPaletteController } from './controller.svelte.js';
+import type { PaletteProvider } from './types.js';
+/**
+ * Register a palette provider for the calling component's lifetime. Pass a
+ * getter to follow reactive state: the provider re-registers (replacing the
+ * earlier one, same `id`) whenever what it reads changes. A silent no-op when
+ * there is no palette on context, so a recipe's component works with or
+ * without one. Call during component initialization.
+ *
+ * @param source The provider, or a function returning it (or null for none).
+ * @param controller Override the palette from context.
+ */
+export declare function useCommandPaletteProvider(source: PaletteProvider | (() => PaletteProvider | null), controller?: CommandPaletteController | null): void;
+//# sourceMappingURL=use-provider.svelte.d.ts.map

package/dist/components/command-palette/use-provider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-provider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/use-provider.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,GAAG,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,EACxD,UAAU,GAAE,wBAAwB,GAAG,IAA6B,GACnE,IAAI,CAQN"}

package/dist/components/command-palette/use-provider.svelte.js

@@ -0,0 +1,23 @@
+import { untrack } from 'svelte';
+import { tryUseCommandPalette } from './context.js';
+/**
+ * Register a palette provider for the calling component's lifetime. Pass a
+ * getter to follow reactive state: the provider re-registers (replacing the
+ * earlier one, same `id`) whenever what it reads changes. A silent no-op when
+ * there is no palette on context, so a recipe's component works with or
+ * without one. Call during component initialization.
+ *
+ * @param source The provider, or a function returning it (or null for none).
+ * @param controller Override the palette from context.
+ */
+export function useCommandPaletteProvider(source, controller = tryUseCommandPalette()) {
+    if (!controller)
+        return;
+    $effect(() => {
+        const provider = typeof source === 'function' ? source() : source;
+        if (!provider)
+            return;
+        // Registering reads and writes the registry; keep that out of this effect.
+        return untrack(() => controller.registerProvider(provider));
+    });
+}

package/dist/components/forms/AddressInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { untrack } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
@@ -396,10 +397,7 @@ function handleCountryChange(e: Event) {
 
   <div class="smrt-address" data-smrt-field-owner={fieldOwnerToken}>
   {#if label}
-    <label class="smrt-label" for={primaryFieldId}>
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel for={primaryFieldId} {label} {required} />
   {/if}
 
   <div class="address-fields" class:smrt-mode={isSmrt}>
@@ -525,17 +523,6 @@ function handleCountryChange(e: Event) {
     gap: var(--smrt-spacing-2, 8px);
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .address-fields {
     display: flex;
     flex-direction: column;

package/dist/components/forms/AddressInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/AddressInput.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,KAAK,YAAY,GAAG,MAAM,YAAY,CAAC;AAEvC,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CACnD;AAibD,QAAA,MAAM,YAAY,gDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AddressInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/AddressInput.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,KAAK,YAAY,GAAG,MAAM,YAAY,CAAC;AAEvC,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CACnD;AA+aD,QAAA,MAAM,YAAY,gDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/DateRangeInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { useSTT } from '../../hooks/useSTT.svelte.js';
@@ -452,10 +453,7 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
   data-smrt-field-owner={fieldOwnerToken}
 >
   {#if label}
-    <label class="smrt-label" for={primaryControlId}>
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel for={primaryControlId} {label} {required} />
   {/if}
 
   <div class="range-wrapper" class:smrt-mode={isSmrt} class:invalid={showInvalid}>
@@ -575,17 +573,6 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
     gap: var(--smrt-spacing-2, 8px);
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .range-wrapper {
     display: flex;
     flex-direction: column;

package/dist/components/forms/DateRangeInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateRangeInput.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAkfD,QAAA,MAAM,cAAc,gEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateRangeInput.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAgfD,QAAA,MAAM,cAAc,gEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/forms/DateTimeInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { importOptional } from '@happyvertical/smrt-ui/utils/import-optional.js';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
@@ -48,6 +49,10 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const stt = useSTT();
 const formContext = tryGetFormContext();
@@ -346,10 +351,7 @@ function handleNativeChange(e: Event) {
 
 <div class="smrt-datetime" class:listening={isHolding} class:parsing={isParsing}>
   {#if label}
-    <label for={name} class="smrt-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
 
   <div class="input-wrapper">
@@ -358,6 +360,7 @@ function handleNativeChange(e: Event) {
       <input
         bind:this={inputEl}
         id={name}
+        aria-labelledby={label ? labelId : undefined}
         name={name}
         type="text"
         placeholder={placeholder}
@@ -423,6 +426,7 @@ function handleNativeChange(e: Event) {
       <input
         bind:this={inputEl}
         id={name}
+        aria-labelledby={label ? labelId : undefined}
         name={name}
         type={includeTime ? 'datetime-local' : 'date'}
         value={value}
@@ -455,17 +459,6 @@ function handleNativeChange(e: Event) {
     position: relative;
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .input-wrapper {
     display: flex;
     position: relative;

package/dist/components/forms/DateTimeInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateTimeInput.svelte.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiXD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateTimeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateTimeInput.svelte.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmXD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/forms/MeasurementInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -442,10 +443,7 @@ function handleUnitChange(e: Event) {
 
 <div class="smrt-measurement" data-smrt-field-owner={fieldOwnerToken}>
   {#if label}
-    <label for={name} class="smrt-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel for={name} {label} {required} />
   {/if}
 
   <div class="input-wrapper" class:smrt-mode={isSmrt}>
@@ -505,17 +503,6 @@ function handleUnitChange(e: Event) {
     gap: var(--smrt-spacing-1, 4px);
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .input-wrapper {
     display: flex;
     gap: var(--smrt-spacing-2, 8px);

package/dist/components/forms/MeasurementInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeasurementInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MeasurementInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGpE,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D;AAgcD,QAAA,MAAM,gBAAgB,yDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MeasurementInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MeasurementInput.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGpE,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D;AA8bD,QAAA,MAAM,gBAAgB,yDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/forms/MoneyInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -52,6 +53,10 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const formContext = tryGetFormContext();
 
@@ -305,16 +310,13 @@ function handleBlur() {
 
 <div class="smrt-money">
   {#if label}
-    <label for={name} class="smrt-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
 
   <div class="input-wrapper">
-    <span class="currency-symbol">{currencySymbol}</span>
     <input
       id={name}
+        aria-labelledby={label ? labelId : undefined}
       {name}
       type="text"
       inputmode="decimal"
@@ -357,31 +359,12 @@ function handleBlur() {
     gap: var(--smrt-spacing-1, 4px);
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .input-wrapper {
     display: flex;
     position: relative;
     align-items: center;
   }
 
-  .currency-symbol {
-    position: absolute;
-    left: 12px;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    pointer-events: none;
-  }
-
   .currency-code {
     position: absolute;
     right: 12px;
@@ -393,7 +376,7 @@ function handleBlur() {
 
   .smrt-input {
     flex: 1;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-12, 48px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-7, 28px);
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-12, 48px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     font-size: var(--smrt-typography-body-large-size, 1rem);
     border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
     border-radius: var(--smrt-radius-small, 6px);

package/dist/components/forms/MoneyInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MoneyInput.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAuTD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MoneyInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MoneyInput.svelte.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAwTD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/NumberInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -49,6 +50,10 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const formContext = tryGetFormContext();
 
@@ -230,15 +235,13 @@ function handleInput(e: Event) {
 
 <div class="smrt-number">
   {#if label}
-    <label for={name} class="smrt-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
+    <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
 
   <div class="input-wrapper">
     <input
       id={name}
+      aria-labelledby={label ? labelId : undefined}
       {name}
       type="number"
       {placeholder}
@@ -277,17 +280,6 @@ function handleInput(e: Event) {
     gap: var(--smrt-spacing-1, 4px);
   }
 
-  .smrt-label {
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-body-medium-weight, 500);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .smrt-label .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
-  }
-
   .input-wrapper {
     display: flex;
     position: relative;

package/dist/components/forms/NumberInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/NumberInput.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAuOD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/NumberInput.svelte.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAyOD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}