themelia-react-ui 2.0.0 → 2.0.1

package/dist/components/base/display/dialog.d.ts

@@ -5,9 +5,9 @@ import type { TextGap } from '../structure';
  * Not published from any entrypoint: applications use `ActionDialog` (or
  * `ConfirmDialog`) from `themelia-react-ui/features/overlays`, which owns the
  * lifecycle, focus, dismissal and action contract. This wrapper supplies the
- * modal geometry those features share: one framed popover surface whose shell
- * owns the block inset and the gap between header, scrolling body and footer,
- * as Card does, with no static rules between regions.
+ * modal geometry those features share: one framed popover surface whose
+ * header, scrolling body and footer each own their inset, with exactly one rule
+ * between adjacent visible regions (`modalRegionRecipes`).
  */
 import * as React from 'react';
 import { Dialog as DialogPrimitive, DialogOverlay, DialogPortal } from '../../ui/dialog';
@@ -24,11 +24,7 @@ export declare const DialogContent: React.ForwardRefExoticComponent<Omit<import(
 export declare const DialogHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
     textGap?: TextGap;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * Scroll-owning content region between the pinned dialog header and footer.
- * A rule appears on its top or bottom edge only while content is scrolled out
- * of view there.
- */
+/** Scroll-owning content region between the pinned dialog header and footer. */
 export declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     showCloseButton?: boolean;

package/dist/components/base/display/icon-badge/icon-badge.d.ts

@@ -4,7 +4,7 @@
  * coupon checks, conversation initials, search-result tones, AI-bot avatars.
  *
  * Tones reuse the shadcn semantic tokens, with the foreground colour picked
- * to read against a 10–15% background tint (e.g. `bg-success/15 text-success`).
+ * to read against its tone's shared tint (`toneRecipes`, contrast-tested).
  * For a fully-saturated mark (primary fill, inverse foreground), use
  * `tone="primary"` and pass `solid`.
  *

package/dist/components/base/forms/form-sizing.d.ts

@@ -60,20 +60,23 @@ export declare const formControlMinHeightClasses: {
     lg: string;
 };
 /**
- * Canonical "input-shaped trigger" chrome — used by any control that
- * renders as a button-style trigger but visually has to read as a form
- * field (DatePicker, TimePicker, the inner Select inside composite
- * fields, etc.). Mirrors `Input`'s `border-input rounded-inner
- * bg-transparent focus-visible:ring` chrome (no shadow — the library
- * is intentionally flat) plus the size-driven height + horizontal
- * padding.
+ * The one field frame, drawn by `Input` on its native field and by
+ * `formFieldTriggerClasses` on button-shaped triggers: the `--input` boundary,
+ * inner radius, transparent fill (the library is intentionally flat), control
+ * height, editable text size, control padding and the shared focus, invalid and
+ * disabled states. Layout (`flex`, width) stays with each owner.
  *
  * The displayed value is the field's value, so it follows the editable text
- * recipe: on coarse pointers it matches the touch input size of an adjoining
- * `Input` instead of rendering a step smaller.
- *
- * Kept here so the chrome lives in exactly one place — when we tweak
- * the canonical input look, every trigger picks it up.
+ * recipe: on coarse pointers a trigger matches the touch input size of an
+ * adjoining `Input` instead of rendering a step smaller.
+ */
+export declare function formFieldFrameClasses(size: ComponentScale): string;
+/**
+ * Canonical "input-shaped trigger" chrome — used by any control that
+ * renders as a button-style trigger but visually has to read as a form
+ * field (DatePicker, TimePicker, Cascader, the inner Select inside composite
+ * fields, etc.). It is `Input`'s own frame plus button resets, so when the
+ * canonical input look changes every trigger picks it up.
  */
 export declare function formFieldTriggerClasses(size: ComponentScale): string;
 export declare const formTextareaSizeClasses: {

package/dist/components/base/metadata-list/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * metadata-list — label/value facts about one entity.
+ *
+ * A base structure: it composes typography, primitives and base display parts,
+ * and any surface (Card, panel, drawer or block) places it. Previously
+ * published from `themelia-react-ui/blocks/data-display`, which re-exports it
+ * as a deprecated compatibility path.
+ */
+export { MetadataList, defaultMetadataListStrings } from './metadata-list';
+export type { MetadataDensity, MetadataInlineListItem, MetadataLayout, MetadataListItem, MetadataListProps, MetadataListStrings, } from './metadata-list';
+export { MetadataValue } from './metadata-value';
+export type { MetadataValueDescriptor, MetadataValueKind, MetadataValueProps, } from './metadata-value';

package/dist/components/{blocks/data-display/metadata → base/metadata-list}/metadata-list.d.ts

@@ -1,37 +1,28 @@
-/**
- * MetadataList — flexible label/value list for entity metadata.
- *
- * Three layouts:
- *  - `grid` (default): label-on-top, value-below cells for entity details.
- *  - `rows`: two-column definition rows with hairline separators.
- *  - `inline`: label/separator/value pairs that wrap, suitable for
- *    pill-style summaries (e.g. "Created Jan 4 · By Alice · v3.2").
- *
- * Each item supports an optional icon, tooltip, React-node value, custom
- * `render`, and per-item `emptyLabel`. Falls back to the shared `EMPTY` when
- * both are missing. Returns `null` when the list is empty so callers can render
- * unconditionally.
- */
-import { type LucideIcon } from 'lucide-react';
 import React from 'react';
-import { type ResponsiveValue } from '../../../base/structure';
-import { type StringsProp } from '../../../../lib/strings';
+import { type ResponsiveValue } from '../structure';
+import { type StringsProp } from '../../../lib/strings';
 import { defaultMetadataListStrings, type MetadataListStrings } from './metadata-list.strings';
 import { type MetadataValueDescriptor } from './metadata-value';
 export type { MetadataListStrings };
 export { defaultMetadataListStrings };
 export type MetadataListItem = {
-    /** Stable identity for this entry. */
+    /** Stable identity for this entry. Without one the label and index stand in. */
     id?: string;
     /** Display label. */
     label: React.ReactNode;
+    /** A node, or a descriptor that names the fact's kind. */
     value?: React.ReactNode | MetadataValueDescriptor | null;
-    /** Supporting copy shown under the label. */
+    /** Supporting copy shown under the value. */
     description?: React.ReactNode | null;
+    /** Shown from an info trigger beside the label, named after the label through `strings.formatInfoAriaLabel`. */
     tooltip?: React.ReactNode;
-    /** Leading glyph. */
-    icon?: LucideIcon;
+    /** Leading glyph. Any component that accepts `className`, including Lucide icons. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Shown when this item's value is absent, in place of the list's `emptyLabel`. */
     emptyLabel?: React.ReactNode;
+    /** Takes over the value. The output sits in the value box, so it inherits the value's type role. */
     render?: (item: MetadataListItem) => React.ReactNode;
 };
 export type MetadataInlineListItem = Omit<MetadataListItem, 'description'> & {
@@ -54,7 +45,11 @@ type MetadataListSharedProps = {
     className?: string;
     /** Character placed between a label and its value. Defaults to a colon. */
     separator?: string;
-    /** Divider between items — `true` for the default rule, or a character for inline layouts. */
+    /**
+     * Divider between items, off by default. In `rows`, any truthy value draws a
+     * rule between rows (never at the ends). In `inline`, `true` places a middle
+     * dot (`·`) and a string places that character.
+     */
     itemSeparator?: boolean | string;
     /** Per-instance string overrides (deep-merged over `defaultMetadataListStrings`). */
     strings?: StringsProp<MetadataListStrings>;
@@ -64,15 +59,23 @@ type MetadataGridRowsProps = MetadataListSharedProps & {
     items: MetadataListItem[];
     /** `grid` flows items into `columns`; `rows` stacks them one per line. Default: `grid`. */
     layout?: 'grid' | 'rows';
+    /**
+     * Rows layout only. `start` (default) places values and descriptions at the
+     * start of proportional label/value tracks; `end` pins them to the row's end
+     * edge, for figures that read down a column.
+     */
+    valueAlign?: 'start' | 'end';
 };
 type MetadataInlineProps = MetadataListSharedProps & {
-    /** Values to render, without labels. */
+    /** Label/value pairs run together on wrapping lines. Inline items take no description. */
     items: MetadataInlineListItem[];
-    /** Runs the values together on one line, separated by `itemSeparator`. */
+    /** Runs the label/value pairs together on one line, separated by `itemSeparator`. */
     layout: 'inline';
+    /** Not used by the inline layout. */
+    valueAlign?: never;
 };
 export type MetadataListProps = MetadataGridRowsProps | MetadataInlineProps;
-export declare function MetadataList({ items, columns, density, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, strings: stringsProp, }: MetadataListProps): React.JSX.Element | null;
+export declare function MetadataList({ items, columns, density, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, valueAlign, strings: stringsProp, }: MetadataListProps): React.JSX.Element | null;
 export declare namespace MetadataList {
     var displayName: string;
 }

package/dist/components/{blocks/data-display/metadata → base/metadata-list}/metadata-value.d.ts

@@ -6,8 +6,8 @@
  */
 import type { ReactNode } from 'react';
 import type { Locale } from 'date-fns';
-import { type BadgeProps } from '../../../base/badge';
-import { type DateInput, type DatePreset, type MoneyProps, type TimeProps } from '../../../primitives';
+import { type BadgeProps } from '../badge';
+import { type DateInput, type DatePreset, type MoneyProps, type TimeProps } from '../../primitives';
 export type MetadataValueKind = 'text' | 'mono' | 'email' | 'phone' | 'url' | 'link' | 'date' | 'time' | 'datetime' | 'money' | 'badge' | 'node' | 'empty';
 type MetadataDisplayValue = Exclude<ReactNode, null | undefined>;
 type MetadataDateInput = Exclude<DateInput, null | undefined>;

package/dist/components/base/navigation/index.d.ts

@@ -16,6 +16,6 @@ export { LanguageSwitcher, type LanguageSwitcherProps } from './language-switche
 export { NavigationTabs, defaultNavigationTabsStrings, type NavigationTabItem, type NavigationTabsProps, type NavigationTabsStrings, type NavigationTabsVariant, } from './navigation-tabs';
 export { Tabs, TabsContent, TabsList, TabsTrigger, type TabsListProps } from './tabs';
 export { defaultTabsScrollStrings, type TabsScrollStrings } from './tab-scroll-viewport';
-export { PageHeading, type PageHeadingProps, type PageHeadingBadge, } from './page-header';
+export { PageHeading, type PageHeadingProps, type PageHeadingBadge, type PageHeaderAction, type PageHeaderLinkRenderProps, type PageHeaderLinkRenderer, } from './page-header';
 export { OverflowTabBar, defaultOverflowTabBarStrings, type OverflowTabBarProps, type OverflowTabBarStrings, type OverflowTabItem, } from './overflow-tab-bar';
 export { PaginationPrimitive, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, defaultPaginationStrings, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationNextProps, type PaginationPreviousProps, type PaginationProps, type PaginationStrings, } from './pagination';

package/dist/components/base/navigation/page-header/index.d.ts

@@ -1 +1,2 @@
 export { PageHeading, type PageHeadingProps, type PageHeadingBadge, } from './page-header';
+export { type PageHeaderAction, type PageHeaderLinkRenderProps, type PageHeaderLinkRenderer, } from './page-header-commands';

package/dist/components/base/navigation/page-header/page-header-commands.d.ts

@@ -0,0 +1,73 @@
+/**
+ * PageHeaderCommands — role-based commands for page and record headers.
+ *
+ * The role chooses each command's treatment and place: outline secondary
+ * commands, then one solid primary command, then the More actions menu for
+ * overflow and destructive commands, which always closes the row. Below `sm`,
+ * secondary commands collapse into that menu through CSS alone, so server and
+ * client markup agree. PageHeading owns the row, so every header that takes
+ * `primaryAction` and `secondaryActions` places its commands the same way.
+ */
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
+/**
+ * A page command described by its role. `primaryAction` and `secondaryActions`
+ * choose the treatment, so a command carries no tone or button style.
+ */
+export interface PageHeaderAction {
+    /** Stable key. Defaults to the command's position. */
+    id?: string;
+    /** Visible command text. */
+    label: ReactNode;
+    /** Runs the command. When both are set, `onClick` wins over `href`. */
+    onClick?: () => void;
+    /** Navigates through the header's `renderLink` instead of running a callback. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    /** Marks the destination as leaving the app; forwarded to `renderLink`. */
+    external?: boolean;
+    /** Leading glyph. Pass a Lucide icon component. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Shows the pending indicator and blocks activation. */
+    loading?: boolean;
+    /** Blocks activation while keeping the command visible. */
+    disabled?: boolean;
+    /** Set false to omit the command, for example without permission. */
+    visible?: boolean;
+    /**
+     * Irreversible or harmful command. A destructive secondary command moves to
+     * the More actions menu; a destructive primary command keeps its place with
+     * the destructive treatment. Confirm it from the handler, e.g. ConfirmDialog.
+     */
+    destructive?: boolean;
+}
+/** What a header hands its link renderer for an `href` command. */
+export interface PageHeaderLinkRenderProps {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    target?: string;
+    rel?: string;
+    /** Marks the destination as leaving the app. */
+    external?: boolean;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    'aria-label'?: string;
+}
+/** Renders framework links for `href` commands. Layout `renderLink` functions fit. */
+export type PageHeaderLinkRenderer = (props: PageHeaderLinkRenderProps) => ReactNode;
+/** Native anchor fallback, matching the layout default: external links open a new tab. */
+export declare const defaultPageHeaderLinkRenderer: PageHeaderLinkRenderer;
+/** Secondary commands rendered as buttons from `sm` up; later ones overflow. */
+export declare const PAGE_HEADER_INLINE_SECONDARY_LIMIT = 2;
+export interface PageHeaderCommandsProps {
+    primaryAction?: PageHeaderAction;
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. */
+    moreActionsLabel: string;
+    renderLink?: PageHeaderLinkRenderer;
+}
+/** Whether the header has any role-based command to render. */
+export declare function hasPageHeaderCommands(primaryAction: PageHeaderAction | undefined, secondaryActions: readonly PageHeaderAction[] | undefined): boolean;
+export declare function PageHeaderCommands({ primaryAction, secondaryActions, moreActionsLabel, renderLink, }: PageHeaderCommandsProps): import("react").JSX.Element | null;

package/dist/components/base/navigation/page-header/page-header.d.ts

@@ -2,12 +2,15 @@
  * PageHeading — reusable visual heading block for sections and resources.
  * Higher-level layout components add routing/back behavior around this base
  * visual primitive instead of reimplementing title, description, badge, and
- * action spacing.
+ * action spacing. `primaryAction` and `secondaryActions` describe commands by
+ * role; the heading owns their treatment and placement for every header built
+ * on it.
  */
 import type { Key, ReactNode } from 'react';
 import { type HeadingTag } from '../../../typography';
 import { type BadgeTone } from '../../badge';
 import { type TextGap } from '../../structure';
+import { type PageHeaderAction, type PageHeaderLinkRenderer } from './page-header-commands';
 export interface PageHeadingBadge {
     label: ReactNode;
     tone?: BadgeTone;
@@ -58,8 +61,28 @@ export interface PageHeadingProps {
     titleSuffix?: ReactNode;
     /** Content directly beneath the description, sharing its alignment — a metadata line. */
     afterDescription?: ReactNode;
-    /** Independent actions column beside the copy; follows it on narrow widths. */
+    /**
+     * Independent actions column beside the copy; follows it on narrow widths.
+     * Holds non-command controls such as a period select; they render before
+     * the role-based commands.
+     */
     actions?: ReactNode;
+    /**
+     * The header's one main command: a solid primary button after the secondary
+     * commands, visible at every width.
+     */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order. The first two render as outline
+     * buttons before the primary command; the rest, and every destructive
+     * command, move into the More actions menu, which always closes the row.
+     * Below `sm`, all secondary commands collapse into that menu.
+     */
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
+    /** Renders `href` commands as framework links. Defaults to a native anchor. */
+    renderLink?: PageHeaderLinkRenderer;
     /** Content below the whole header block, above the separator. */
     children?: ReactNode;
     /** Merged onto the `<header>` root. */
@@ -85,7 +108,7 @@ export interface PageHeadingProps {
      */
     withSeparator?: boolean;
 }
-export declare function PageHeading({ eyebrow, title, description, textGap, headingTag, badge, badges, breadcrumbs, leading, beforeTitle, titlePrefix, titleSuffix, afterDescription, actions, children, className, contentClassName, eyebrowClassName, titleClassName, titleRowClassName, descriptionClassName, actionsClassName, withSeparator, }: PageHeadingProps): import("react").JSX.Element;
+export declare function PageHeading({ eyebrow, title, description, textGap, headingTag, badge, badges, breadcrumbs, leading, beforeTitle, titlePrefix, titleSuffix, afterDescription, actions, primaryAction, secondaryActions, moreActionsLabel, renderLink, children, className, contentClassName, eyebrowClassName, titleClassName, titleRowClassName, descriptionClassName, actionsClassName, withSeparator, }: PageHeadingProps): import("react").JSX.Element;
 export declare namespace PageHeading {
     var displayName: string;
 }

package/dist/components/base/sheet/sheet.d.ts

@@ -7,9 +7,9 @@ import type { TextGap } from '../structure';
  * which owns the lifecycle, focus, dismissal and action contract; the
  * `themelia-react-ui/base/sheet` entrypoint remains only as a deprecated
  * compatibility surface. The panel shares the modal geometry of the internal
- * Dialog wrapper: the shell owns the block inset and the gap between header,
- * scrolling body and footer, regions own their inline inset, and one edge rule
- * separates the panel from the page.
+ * Dialog wrapper: header, scrolling body and footer each own their inset, one
+ * rule separates adjacent visible regions, and one edge rule separates the
+ * panel from the page.
  */
 import * as React from 'react';
 import { Sheet as SheetPrimitive } from '../../ui/sheet';
@@ -29,11 +29,7 @@ export declare const SheetContent: React.ForwardRefExoticComponent<Omit<import("
 export declare const SheetHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & {
     textGap?: TextGap;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * Scroll-owning content region between the pinned sheet header and footer.
- * A rule appears on its top or bottom edge only while content is scrolled out
- * of view there.
- */
+/** Scroll-owning content region between the pinned sheet header and footer. */
 export declare const SheetBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const SheetFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTitleProps & {

package/dist/components/base/signature-pad/signature-pad.types.d.ts

@@ -54,7 +54,11 @@ export interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<'div'>,
     name?: string;
     form?: string;
     required?: boolean;
-    /** Shows the keyboard-accessible typed signature alternative. @default true */
+    /**
+     * Shows the keyboard-accessible typed signature alternative. The typed name is
+     * drawn and exported in the pad's font family: the theme sans unless a font is
+     * set on the pad through `className` or `style`. @default true
+     */
     allowTypedSignature?: boolean;
     /** Ink diameter in CSS drawing pixels; pen pressure varies it. @default 2 */
     strokeWidth?: number;

package/dist/components/base/signature-pad/signature-pad.utils.d.ts

@@ -2,7 +2,15 @@ import type { SignaturePadValue } from './signature-pad.types';
 export declare const emptySignature: SignaturePadValue;
 export declare function isSignatureEmpty(value: SignaturePadValue): boolean;
 export declare function normalizeSignature(value: SignaturePadValue): SignaturePadValue;
+/**
+ * A typed name is drawn in the field's own font family: the theme sans unless the
+ * consumer sets a font on the pad. This fallback applies only outside the DOM.
+ */
+export declare const signatureFallbackFont = "sans-serif";
 /** Drawing geometry, separate from structural UI spacing and theme tokens. */
-export declare function drawSignature(context: CanvasRenderingContext2D, value: SignaturePadValue, width: number, height: number, strokeWidth: number): void;
-/** Semantic currentColor is preserved unless a resolved export ink is supplied. */
-export declare function signaturePadToSVG(value: SignaturePadValue, width?: number, height?: number, strokeWidth?: number, ink?: string): string;
+export declare function drawSignature(context: CanvasRenderingContext2D, value: SignaturePadValue, width: number, height: number, strokeWidth: number, fontFamily?: string): void;
+/**
+ * Semantic currentColor is preserved unless a resolved export ink is supplied. The
+ * typed name uses `fontFamily`, which SignaturePad resolves from its rendered font.
+ */
+export declare function signaturePadToSVG(value: SignaturePadValue, width?: number, height?: number, strokeWidth?: number, ink?: string, fontFamily?: string): string;

package/dist/components/base/text-inputs/field-clear-button.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The inline clear action shared by Input, Textarea and Cascader: a native button
+ * drawing the shared clear target, focus edge and glyph. Its owner places it and
+ * supplies the accessible name, handler and disabled state.
+ */
+export declare const FieldClearButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/base/upload/upload.recipes.d.ts

@@ -1,11 +1,33 @@
 /**
  * Private drop-target states shared by Dropzone, AvatarUpload and ImageUpload.
- * An empty target draws the dashed `--input` control boundary (3:1 on every
- * surface), so all three upload targets read as the same kind of control.
- * Hover, drag and invalid states replace only the boundary colour and fill.
+ * An empty target draws the dashed `--input` control boundary, so all three
+ * upload targets read as the same kind of control as every field. Hover, drag
+ * and invalid states replace only the boundary colour and fill.
+ *
+ * Keyboard focus on the hidden file input draws the shared focus frame on the
+ * target (each owner adds the `ring-3` width). The valid and invalid colours are
+ * alternatives, never stacked, so an invalid target keeps its destructive border
+ * and tints the halo instead of tying with the ring colour.
  */
 export declare const uploadDropTargetRecipes: {
     readonly idle: "border-input";
     readonly invalid: "border-destructive";
+    readonly invalidHover: "hover:bg-destructive/5";
+    readonly invalidDragging: "border-destructive bg-destructive/5";
     readonly dragging: "border-primary bg-primary/10";
+    /** Pointer over an enabled target previews the drop: the boundary takes the primary colour. */
+    readonly hover: "hover:border-primary hover:bg-primary/5";
+    /** A file dragged over an already selected file row: the row keeps its edge and gains the tone halo. */
+    readonly draggingRing: "ring-3 ring-primary/30";
+    readonly invalidDraggingRing: "ring-3 ring-destructive/30";
+    readonly focus: {
+        readonly input: {
+            readonly valid: "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50";
+            readonly invalid: "has-[input:focus-visible]:ring-destructive/30 dark:has-[input:focus-visible]:ring-destructive/50";
+        };
+        readonly filePicker: {
+            readonly valid: "has-[[data-slot=file-picker-input]:focus-visible]:border-ring has-[[data-slot=file-picker-input]:focus-visible]:ring-ring/50";
+            readonly invalid: "has-[[data-slot=file-picker-input]:focus-visible]:ring-destructive/30 dark:has-[[data-slot=file-picker-input]:focus-visible]:ring-destructive/50";
+        };
+    };
 };

package/dist/components/base/value-inputs/index.d.ts

@@ -7,10 +7,10 @@
  * (chips, country prefix menu, swatch and picker, track, calendar) rather than
  * a text box.
  *
- * This family composes the other two: the phone, colour and tags controls all
- * render `Input` from `base/text-inputs`, and the phone control renders the
- * shared `SelectPopup*` parts from `base/choice-inputs`. The dependency runs
- * one way only.
+ * This family composes the other two: the phone and colour controls render
+ * `Input` from `base/text-inputs`, the tags control draws the same field frame
+ * around its chips, and the phone control renders the shared `SelectPopup*`
+ * parts from `base/choice-inputs`. The dependency runs one way only.
  *
  * Related families:
  *   - `themelia-react-ui/base/text-inputs` — free-form text entry
@@ -18,7 +18,7 @@
  *   - `themelia-react-ui/base/forms-numeric` — money, weight, dimensions
  *   - `themelia-react-ui/base/date-pickers` — calendars and time pickers
  */
-export { TagsInput, type TagsInputProps } from './tags-input';
+export { TagsInput, defaultTagsInputStrings, type TagsInputProps, type TagsInputStrings, } from './tags-input';
 export { PhoneInput, defaultPhoneInputStrings, DEFAULT_COUNTRY_PREFIXES, COUNTRY_PREFIX_MAP, type PhoneInputProps, type PhoneInputStrings, type CountryPrefixOption, type CountryPrefixInput, } from './phone-input';
 export { ColorInput, defaultColorInputStrings, type ColorInputProps, type ColorInputStrings, } from './color-input';
 export { SliderField, defaultSliderStrings, type SliderProps, type SliderStrings, type SliderImitationEvent, } from './slider';

package/dist/components/base/value-inputs/tags-input.d.ts

@@ -10,49 +10,73 @@ export interface TagsInputStrings {
     summary: (current: number, max: number) => string;
     /** Accessible name of a tag's remove action. Defaults to `"Remove {tag}"`. */
     removeTag?: (tag: string) => string;
+    /**
+     * Announced when a commit leaves entries it could not add (too short or
+     * long, duplicate, refused by `validate`, or over `maxTags`). Receives the
+     * rejected entries joined with commas. Defaults to `"Not added: {entries}."`.
+     */
+    notAdded?: (entries: string) => string;
+    /** Accessible name of the recommendation list. Defaults to `"Suggested tags"`. */
+    recommendationsLabel?: string;
 }
 export declare const defaultTagsInputStrings: TagsInputStrings;
 export interface TagsInputProps<T = string> {
     /** ID of the editable input, for an external field label. */
     id?: string;
+    /** Names the editable input when no visible label points at it. */
+    'aria-label'?: string;
+    /** IDs of the elements that label the editable input. */
+    'aria-labelledby'?: string;
     /** Additional supporting/error descriptions associated with the editable control. */
     'aria-describedby'?: string;
-    /** Current value (array of T) */
+    /** Marks the field invalid, like `invalid`; a FormField or form library may inject it. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Marks the editable input as required for assistive tech. */
+    'aria-required'?: boolean | 'true' | 'false';
+    /** Current value (array of T). Pass it to control the field. */
     value?: T[];
+    /** Initial value when uncontrolled. Ignored when `value` is set. */
+    defaultValue?: T[];
     /** Callback when value changes */
     onValueChange?: (value: T[]) => void;
-    /** Placeholder text for the input */
+    /** Form field name. Each tag is serialised as a hidden `name[]` input (its display value), disabled with the field. */
+    name?: string;
+    /** Placeholder text for the input, shown while there are no tags. */
     placeholder?: string;
     /** Array of recommendations to suggest */
     recommendations?: Array<T | {
         value: T;
         label: string;
     }>;
-    /** Maximum number of tags allowed */
+    /** Maximum number of tags allowed. Entry is refused and announced once it is reached; the input stays focusable. */
     maxTags?: number;
-    /** Show the label for the maximum tags */
+    /** Shows the `strings.summary` count under the field. Requires `maxTags`. */
     showMaxTags?: boolean;
     /** Whether duplicate tags are allowed */
     allowDuplicates?: boolean;
-    /** Custom validation function */
+    /** Custom validation function. Runs after the length, limit and duplicate checks. */
     validate?: (value: T) => boolean;
     /** Whether the input is disabled */
     disabled?: boolean;
-    /** Whether to show the clear all button */
+    /** Shows a clear-all action under the field while there are tags. */
     showClearAll?: boolean;
-    /** Custom tag component */
+    /**
+     * Custom tag component. `index` is the tag's position in the value, and
+     * `onRemove(index)` removes it and moves focus to the neighbouring remove
+     * action (an element with `data-tag-remove`), else the input.
+     */
     renderTag?: (tag: T, index: number, onRemove: (index: number) => void) => React.ReactNode;
-    /** Delimiter for separating tags when pasting */
+    /** Splits typed and pasted text into several tags. Defaults to a comma or a newline. */
     delimiter?: string | RegExp;
     /** Whether to trigger add on blur */
     addOnBlur?: boolean;
     /** Minimum length for a tag */
     minLength?: number;
-    /** Maximum length for a tag */
+    /** Maximum length for a tag. Longer entries are refused and announced, never truncated. */
     maxLength?: number;
-    /** Override default English strings (placeholder, empty list, clear-all). */
+    /** Override default English strings (placeholder, empty list, clear-all, announcements). */
     strings?: StringsProp<TagsInputStrings>;
-    /** Whether tags should be sorted */
+    /** Keeps the value sorted by display text as tags are added. */
     sortTags?: boolean;
     /** Case sensitivity for duplicate checking */
     caseSensitive?: boolean;
@@ -63,7 +87,7 @@ export interface TagsInputProps<T = string> {
     /** Additional class names */
     className?: string;
 }
-export declare function TagsInput<T = string>({ id, 'aria-describedby': ariaDescribedBy, value, onValueChange, placeholder, recommendations, maxTags, showMaxTags, allowDuplicates, validate, disabled, showClearAll, renderTag, delimiter, addOnBlur, minLength, maxLength, sortTags, caseSensitive, field, invalid, className, strings: stringsProp, }: TagsInputProps<T>): React.JSX.Element;
+export declare function TagsInput<T = string>({ id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, value, defaultValue, onValueChange, name, placeholder, recommendations, maxTags, showMaxTags, allowDuplicates, validate, disabled, showClearAll, renderTag, delimiter, addOnBlur, minLength, maxLength, sortTags, caseSensitive, field, invalid, className, strings: stringsProp, }: TagsInputProps<T>): React.JSX.Element;
 export declare namespace TagsInput {
     var displayName: string;
 }

package/dist/components/blocks/commerce/address-card/address-card.d.ts

@@ -1,5 +1,5 @@
 import { type AddressCardProps } from './types';
-export declare function AddressCard({ kind, name, line1, line2, city, region, postalCode, country, phone, default: defaultAddress, onEdit, onRemove, onMakeDefault, surface, padding, headerDivider, className, strings: stringsProp, }: AddressCardProps): import("react").JSX.Element;
+export declare function AddressCard({ kind, name, line1, line2, city, region, postalCode, country, phone, default: defaultAddress, onEdit, onRemove, onMakeDefault, surface, padding, headerDivider, className, strings: stringsProp, ...props }: AddressCardProps): import("react").JSX.Element;
 export declare namespace AddressCard {
     var displayName: string;
 }

package/dist/components/blocks/commerce/address-card/types.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentPropsWithoutRef } from 'react';
 import type { CardProps } from '../../../base/cards';
 import type { StringsProp } from '../../../../lib/strings';
 export type AddressKind = 'shipping' | 'billing' | 'pickup';
@@ -12,7 +13,7 @@ export interface AddressCardStrings {
 }
 export declare const defaultAddressCardStrings: AddressCardStrings;
 /** Unframed by default. Set surface="card" to let this owner frame its heading and body. */
-export interface AddressCardProps extends Pick<CardProps, 'surface' | 'padding' | 'headerDivider'> {
+export interface AddressCardProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>, Pick<CardProps, 'surface' | 'padding' | 'headerDivider'> {
     /** What the address is for — billing, shipping, or both. */
     kind?: AddressKind;
     /** Display name. */

package/dist/components/blocks/commerce/cart-summary/cart-summary.d.ts

@@ -1,5 +1,7 @@
 import { type CartSummaryCardProps } from './types';
-export declare function CartSummaryCard({ items, subtotal, tax, shipping, discount, total, onCheckout, className, strings: stringsProp, }: CartSummaryCardProps): import("react").JSX.Element;
+export declare function CartSummaryCard({ items, subtotal, tax, shipping, discount, total, onCheckout, className, strings: stringsProp, ...props }: CartSummaryCardProps): import("react").JSX.Element;
 export declare namespace CartSummaryCard {
     var displayName: string;
 }
+/** The source kit's name for `CartSummaryCard`; the same component. */
+export declare const CartSummary: typeof CartSummaryCard;

package/dist/components/blocks/commerce/cart-summary/index.d.ts

@@ -1,2 +1,2 @@
-export { CartSummaryCard } from './cart-summary';
-export { defaultCartSummaryStrings, type CartSummaryCardProps, type CartSummaryStrings, type CartLineItem, } from './types';
+export { CartSummary, CartSummaryCard } from './cart-summary';
+export { defaultCartSummaryStrings, type CartSummaryCardProps, type CartSummaryProps, type CartSummaryStrings, type CartLineItem, } from './types';

package/dist/components/blocks/commerce/cart-summary/types.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentPropsWithoutRef } from 'react';
 import type { StringsProp } from '../../../../lib/strings';
 export interface CartLineItem {
     /** Stable identity for this entry. */
@@ -30,9 +31,11 @@ export interface CartSummaryStrings {
     /** Formatted order total. */
     total: string;
     checkout: string;
+    /** Writes a line's quantity, so a translation owns the multiplication sign. */
+    formatQuantity: (quantity: number) => string;
 }
 export declare const defaultCartSummaryStrings: CartSummaryStrings;
-export interface CartSummaryCardProps {
+export interface CartSummaryCardProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'> {
     /** Line items in the cart. */
     items: CartLineItem[];
     /** Formatted total before tax, shipping, and discounts. */
@@ -51,3 +54,5 @@ export interface CartSummaryCardProps {
     /** Overrides this surface's own copy. */
     strings?: StringsProp<CartSummaryStrings>;
 }
+/** The source kit's name for `CartSummaryCardProps`. */
+export type CartSummaryProps = CartSummaryCardProps;