themelia-react-ui 2.0.4 → 2.0.6

package/dist/components/base/date-pickers/date-picker-internals.d.ts

@@ -1,5 +1,7 @@
 import { type ButtonTone, type ButtonStyle } from '../buttons';
-import type { DatePickerProps, SingleDatePickerProps, MultipleDatePickerProps, RangeDatePickerProps, DatePickerStrings, PresetDateRange } from './datepicker.types';
+import type { DatePickerProps, DatePickerBaseProps, SingleDatePickerProps, MultipleDatePickerProps, RangeDatePickerProps, DatePickerStrings, PresetDateRange } from './datepicker.types';
+/** Per-mount visibility; a provider never owns an individual picker's open state. */
+export declare function usePickerOpenState({ open, defaultOpen, onOpenChange, disabled }: Pick<DatePickerBaseProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'>): readonly [boolean, (next: boolean) => void];
 export declare function resolvePickerButtonProps(tone?: ButtonTone, buttonStyle?: ButtonStyle): {
     tone: ButtonTone;
     buttonStyle: ButtonStyle;

package/dist/components/base/date-pickers/datepicker.types.d.ts

@@ -1,6 +1,6 @@
 import type { AriaAttributes, FocusEventHandler, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
-import type { DateRange, PropsSingle, PropsRange, PropsMulti, Locale } from 'react-day-picker';
+import type { DateRange, PropsBase, PropsSingle, PropsRange, PropsMulti, Locale } from 'react-day-picker';
 import type { FormControlSize } from '../../../lib/ui-provider';
 import type { StringsProp } from '../../../lib/strings';
 import type { ActionPresentation } from '../../../lib/action-presentation';
@@ -66,6 +66,12 @@ export interface DatePickerStrings {
     year: string;
 }
 export interface DatePickerBaseProps {
+    /** Controlled popup visibility. Explicit values take precedence over defaultOpen. */
+    open?: boolean;
+    /** Initial popup visibility when uncontrolled. Defaults to false. */
+    defaultOpen?: boolean;
+    /** Reports trigger, dismissal and selection requests without changing a controlled value. */
+    onOpenChange?: (open: boolean) => void;
     /** Trigger ref for focus and form adapters; the forwarded ref remains the field root. */
     triggerRef?: Ref<HTMLButtonElement>;
     /** Native trigger blur callback. */
@@ -201,7 +207,7 @@ export interface SingleDatePickerProps extends DatePickerBaseProps {
     /** Dates to disable, as a list or a predicate. */
     disabledDates?: Date[] | ((date: Date) => boolean);
     /** Escape hatch forwarded to the underlying react-day-picker calendar. */
-    calendarProps?: Omit<PropsSingle, 'mode' | 'selected' | 'onSelect'> & {
+    calendarProps?: Omit<PropsBase & PropsSingle, 'mode' | 'selected' | 'onSelect'> & {
         className?: string;
     };
 }
@@ -231,7 +237,7 @@ export interface MultipleDatePickerProps extends DatePickerBaseProps {
     /** Dates to disable, as a list or a predicate. */
     disabledDates?: Date[] | ((date: Date) => boolean);
     /** Escape hatch forwarded to the underlying react-day-picker calendar. */
-    calendarProps?: Omit<PropsMulti, 'mode' | 'selected' | 'onSelect'> & {
+    calendarProps?: Omit<PropsBase & PropsMulti, 'mode' | 'selected' | 'onSelect'> & {
         className?: string;
     };
 }
@@ -265,7 +271,7 @@ export interface RangeDatePickerProps extends DatePickerBaseProps {
     /** Dates to disable, as a list or a predicate. */
     disabledDates?: Date[] | ((date: Date) => boolean);
     /** Escape hatch forwarded to the underlying react-day-picker calendar. */
-    calendarProps?: Omit<PropsRange, 'mode' | 'selected' | 'onSelect'> & {
+    calendarProps?: Omit<PropsBase & PropsRange, 'mode' | 'selected' | 'onSelect'> & {
         className?: string;
     };
 }

package/dist/components/base/date-pickers/time-picker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type FieldControlAttributes } from '../../../lib/field-control-attributes';
 import { type StringsProp } from '../../../lib/strings';
 import { type FormControlSize } from '../../../lib/ui-provider';
 export interface TimePickerStrings {
@@ -16,13 +17,14 @@ export interface TimePickerStrings {
     pm: string;
 }
 export declare const defaultTimePickerStrings: TimePickerStrings;
-export interface TimePickerProps {
+export interface TimePickerProps extends FieldControlAttributes, Pick<React.AriaAttributes, 'aria-required'> {
     /**
      * Selected time as `'HH:mm'` or `'HH:mm:ss'`, always on a 24-hour clock
-     * regardless of `format`. Controlled. `null` or omitted leaves every
-     * segment blank.
+     * regardless of `format`. A controlled `null` leaves every segment blank.
      */
     value?: string | null;
+    /** Initial time when uncontrolled, in the same format as value. */
+    defaultValue?: string | null;
     /**
      * Fired with the next time in the same shape as `value` — `'HH:mm'` when
      * `precision` is `'minutes'`, `'HH:mm:ss'` when it is `'seconds'`. Fires
@@ -31,11 +33,23 @@ export interface TimePickerProps {
      * showing exactly what was typed until blur snaps them to that value.
      */
     onValueChange?: (value: string | null) => void;
+    /** Native form name. The submitted value uses a 24-hour clock. */
+    name?: string;
+    /** Requires a selected time when the browser validates the form. */
+    required?: boolean;
+    /** Runs when focus leaves the segments, trigger and popup. */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
      * `'inline'` renders the segments directly; `'popover'` puts them behind a
      * field-shaped trigger showing the formatted time. Default: `'inline'`.
      */
     mode?: 'inline' | 'popover';
+    /** Controlled visibility in popover mode. */
+    open?: boolean;
+    /** Initial visibility in uncontrolled popover mode. */
+    defaultOpen?: boolean;
+    /** Reports requests to open or close the popup. */
+    onOpenChange?: (open: boolean) => void;
     /** Clock convention. `'12'` adds the AM/PM segment. Default: `'24'`. */
     format?: '12' | '24';
     /** Finest segment offered. Default: `'minutes'`. */

package/dist/components/base/feedback/alert.d.ts

@@ -1,5 +1,5 @@
 /**
- * Alert — base notice primitive with semantic variants and responsive actions.
+ * Alert — base notice primitive with semantic variants and container-driven actions.
  *
  * Package-owned notice inspired by ReUI's alert layout. Consumers import this
  * base alert for the library's typography, token, and DOM-hook contract.

package/dist/components/base/feedback/state-display.d.ts

@@ -1,4 +1,7 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type StringsProp } from '../../../lib/strings';
+import { type ErrorStateStrings } from './state-display.strings';
+export { defaultErrorStateStrings, type ErrorStateStrings } from './state-display.strings';
 type DivProps = ComponentPropsWithoutRef<'div'>;
 type StateDisplayVariant = 'inline' | 'panel';
 export type LoadingStateVariant = StateDisplayVariant;
@@ -21,6 +24,8 @@ export interface LoadingStateProps extends DivProps {
 export declare const LoadingState: import("react").ForwardRefExoticComponent<LoadingStateProps & import("react").RefAttributes<HTMLDivElement>>;
 export type ErrorStateVariant = StateDisplayVariant;
 export interface ErrorStateProps extends Omit<DivProps, 'title'> {
+    /** Default error copy. Explicit title, description and retryLabel props win. */
+    strings?: StringsProp<ErrorStateStrings>;
     /** Heading above the description. */
     title?: ReactNode;
     /** Supporting copy under the label. */
@@ -37,4 +42,3 @@ export interface ErrorStateProps extends Omit<DivProps, 'title'> {
     icon?: ReactNode;
 }
 export declare const ErrorState: import("react").ForwardRefExoticComponent<ErrorStateProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/base/feedback/state-display.strings.d.ts

@@ -0,0 +1,9 @@
+export interface ErrorStateStrings {
+    /** Default heading when no error-specific title was supplied. */
+    title: string;
+    /** Default guidance when no error-specific description was supplied. */
+    description: string;
+    /** Label of the recovery action when `onRetry` is supplied. */
+    retry: string;
+}
+export declare const defaultErrorStateStrings: ErrorStateStrings;

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

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export interface FieldChromeProps {
-    /** Caption rendered above the control, associated through `htmlFor`. */
+    /** Caption rendered above the control. Supplies a default accessible name to direct controls while preserving explicit names and native `htmlFor` association. */
     label?: ReactNode;
     /** Marks the field required and renders the required indicator by the label. */
     required?: boolean;
@@ -33,7 +33,12 @@ export interface FieldChromeProps {
 }
 export interface FormFieldProps extends FieldChromeProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     children: ReactNode;
-    /** Native ID of the labelled control. With compound children, assign it to the nested control; passive wrappers are left untouched. Direct controls receive an automatic ID when omitted. */
+    /**
+     * Native ID of the labelled control. Direct controls receive it when omitted.
+     * A matching ID in declared descendants leaves the outer child untouched.
+     * For a custom compound that creates unseen controls internally, use a passive
+     * host and assign this ID to its nested control; component bodies are not inspected.
+     */
     htmlFor?: string;
     /** ID for the resolved hint, helper, or error; controls can reference it explicitly. */
     supportingTextId?: string;

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

@@ -68,7 +68,7 @@ export declare const formControlMinHeightClasses: {
 /**
  * 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
+ * default 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.
  *
@@ -97,9 +97,9 @@ export declare const formTextareaSizeClasses: {
  * line height, so the inset follows the editable text size on every pointer.
  */
 export declare const formTextareaInsetClasses: {
-    readonly sm: "py-[calc((var(--height-control)*8/9*var(--density-scale)-1lh)/2-1px)]";
+    readonly sm: "py-[calc((var(--height-control)*7/8*var(--density-scale)-1lh)/2-1px)]";
     readonly md: "py-[calc((var(--height-control)*var(--density-scale)-1lh)/2-1px)]";
-    readonly lg: "py-[calc((var(--height-control)*10/9*var(--density-scale)-1lh)/2-1px)]";
+    readonly lg: "py-[calc((var(--height-control)*9/8*var(--density-scale)-1lh)/2-1px)]";
 };
 /**
  * Top offsets that centre multi-line field affordances on the first line, where a
@@ -108,14 +108,14 @@ export declare const formTextareaInsetClasses: {
  */
 export declare const formTextareaAffordanceTopClasses: {
     readonly target: {
-        readonly sm: "top-[calc((var(--height-control)*8/9-1.375rem)*var(--density-scale)/2)]";
+        readonly sm: "top-[calc((var(--height-control)*7/8-1.375rem)*var(--density-scale)/2)]";
         readonly md: "top-[calc((var(--height-control)-1.375rem)*var(--density-scale)/2)]";
-        readonly lg: "top-[calc((var(--height-control)*10/9-1.375rem)*var(--density-scale)/2)]";
+        readonly lg: "top-[calc((var(--height-control)*9/8-1.375rem)*var(--density-scale)/2)]";
     };
     readonly icon: {
-        readonly sm: "top-[calc((var(--height-control)*8/9*var(--density-scale)-var(--icon))/2)]";
+        readonly sm: "top-[calc((var(--height-control)*7/8*var(--density-scale)-var(--icon))/2)]";
         readonly md: "top-[calc((var(--height-control)*var(--density-scale)-var(--icon))/2)]";
-        readonly lg: "top-[calc((var(--height-control)*10/9*var(--density-scale)-var(--icon))/2)]";
+        readonly lg: "top-[calc((var(--height-control)*9/8*var(--density-scale)-var(--icon))/2)]";
     };
 };
 export declare const formLabelSizeClasses: {

package/dist/components/base/forms/workflow.d.ts

@@ -18,11 +18,17 @@ export interface FormSectionProps {
     surface?: SmartCardSurface;
     /** Card region insets. Defaults to Card's ordinary inset; use `none` when the parent already owns padding. */
     padding?: CardProps['padding'];
+    /**
+     * Section title size. Embedded `surface="flat" padding="none"` inside a padded
+     * Card defaults to the subordinate `sm` title, below the card's own title;
+     * otherwise Card's default applies.
+     */
+    titleSize?: CardProps['titleSize'];
     className?: string;
     /** Merged onto the section body. */
     contentClassName?: string;
 }
-export declare function FormSection({ title, description, actions, children, footer, surface, padding, className, contentClassName, }: FormSectionProps): import("react").JSX.Element;
+export declare function FormSection({ title, description, actions, children, footer, surface, padding, titleSize, className, contentClassName, }: FormSectionProps): import("react").JSX.Element;
 export interface FormActionsBarProps {
     /** Action content used when `trailing` is not provided. */
     children?: ReactNode;

package/dist/components/base/forms-numeric/coordinates-input.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type StringsProp } from '../../../lib/strings';
 import type { FormControlSize } from '../../../lib/ui-provider';
+import type { NumericCompositeFieldProps } from './numeric-composite-field';
 export interface CoordinatesObjectValue {
     lat?: string;
     lng?: string;
@@ -17,9 +18,15 @@ export interface CoordinatesInputStrings {
     lngPlaceholder: string;
     /** Anchor text for the Google Maps preview link. Empty string hides it. */
     previewLinkLabel: string;
+    /** Accessible name for the latitude input while `latLabel` is empty. */
+    latAccessibleLabel: string;
+    /** Accessible name for the longitude input while `lngLabel` is empty. */
+    lngAccessibleLabel: string;
 }
 export declare const defaultCoordinatesInputStrings: CoordinatesInputStrings;
-export interface CoordinatesInputProps {
+export interface CoordinatesInputProps extends NumericCompositeFieldProps<CoordinatesValue> {
+    /** Native form name. Submits latitude and longitude separated by a comma, or an empty string. */
+    name?: string;
     /** Controlled value */
     value?: CoordinatesValue;
     /** Default value for uncontrolled mode */

package/dist/components/base/forms-numeric/decimal-input.d.ts

@@ -32,9 +32,9 @@ export declare const defaultDecimalInputStrings: DecimalInputStrings;
 export interface DecimalInputProps extends Omit<InputProps, 'type' | 'inputMode' | 'strings'> {
     /** Maximum fractional digits accepted and used during normalization. */
     decimalPlaces?: number;
-    /** Minimum accepted numeric value. */
+    /** Minimum used when normalising on blur or stepping. */
     min?: number;
-    /** Maximum accepted numeric value. */
+    /** Maximum used when normalising on blur or stepping. Also limits unsigned text while typing. */
     max?: number;
     /** Whether a leading negative sign is accepted. */
     allowNegative?: boolean;

package/dist/components/base/forms-numeric/dimensions-input.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type StringsProp } from '../../../lib/strings';
 import { type FormControlSize } from '../../../lib/ui-provider';
+import type { NumericCompositeFieldProps } from './numeric-composite-field';
 export interface DimensionObject {
     width?: string;
     height?: string;
@@ -18,7 +19,9 @@ export interface DimensionsInputStrings {
     depthPlaceholder: string;
 }
 export declare const defaultDimensionsInputStrings: DimensionsInputStrings;
-export interface DimensionsInputProps {
+export interface DimensionsInputProps extends NumericCompositeFieldProps<DimensionValue> {
+    /** Native form name. Submits width, height and depth joined by x, or an empty string. */
+    name?: string;
     /** Current value (string "WxHxD" or object { width, height, depth }) */
     value?: DimensionValue;
     /** Default value for uncontrolled mode */

package/dist/components/base/forms-numeric/numeric-composite-field.d.ts

@@ -0,0 +1,12 @@
+import type { AriaAttributes, FocusEventHandler } from 'react';
+import type { FieldControlAttributes } from '../../../lib/field-control-attributes';
+export interface NumericCompositeFieldProps<T> extends FieldControlAttributes, Pick<AriaAttributes, 'aria-required'> {
+    /** Reports the same value as the event-shaped change callback. */
+    onValueChange?: (value: T) => void;
+    /** Runs when focus leaves the field and its unit picker. */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /** Requires each numeric part when the browser validates the form. */
+    required?: boolean;
+    /** Shows the value and units without allowing edits. */
+    readOnly?: boolean;
+}

package/dist/components/base/forms-numeric/weight-input.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type StringsProp } from '../../../lib/strings';
 import { type FormControlSize } from '../../../lib/ui-provider';
+import type { NumericCompositeFieldProps } from './numeric-composite-field';
 export type WeightUnit = 'g' | 'kg' | 'lb' | 'oz';
 export interface WeightInputStrings {
     /** Above-field label for the unit selector. Empty string hides it. */
@@ -11,7 +12,11 @@ export interface WeightInputStrings {
     unitPlaceholder: string;
 }
 export declare const defaultWeightInputStrings: WeightInputStrings;
-export interface WeightInputProps {
+export interface WeightInputProps extends NumericCompositeFieldProps<string> {
+    /** ID of the numeric value field. */
+    id?: string;
+    /** Native form name for the numeric value. Units remain separate. */
+    name?: string;
     /** Controlled value */
     value?: string;
     /** Default value for uncontrolled mode */

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

@@ -33,7 +33,7 @@ export type MetadataDensity = 'default' | 'compact';
 type MetadataListSharedProps = {
     /** How many columns the grid layout uses. Accepts a per-breakpoint value. */
     columns?: ResponsiveValue<1 | 2 | 3 | 4>;
-    /** Measure responsive grid columns against the viewport (default) or this list's own width. */
+    /** Measure responsive grid columns against this list's own width (default) or the viewport. */
     adaptTo?: 'viewport' | 'container';
     /** Row spacing. `compact` tightens the list for dense panels. */
     density?: MetadataDensity;

package/dist/components/base/navigation/dropdown-menu.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { type CollectionDensity } from '../popover/popover.recipes';
 declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
-declare function DropdownMenuPortal({ container, ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ container, className, ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
 declare function DropdownMenuTrigger({ children, ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
 declare function DropdownMenuContent({ positionMethod, align, alignOffset, side, sideOffset, className, density: densityProp, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'positionMethod'> & {
     /** Vertical row rhythm. Inherits in submenus; defaults to default. */

package/dist/components/base/navigation/language-switcher.d.ts

@@ -1,15 +1,23 @@
 import type { LocaleOption } from '../../../types/locale.types';
+type LanguageSwitcherLocale = Omit<LocaleOption, 'active'> & {
+    active?: boolean;
+};
 export interface LanguageSwitcherProps {
-    /** Locales to offer, in order. The entry with `active: true` is marked as current. */
-    locales: LocaleOption[];
+    /** Locales to offer, in order. Their active flags apply when value is omitted. */
+    locales: LanguageSwitcherLocale[];
+    /** Controlled current locale. Takes precedence over the option flags. */
+    value?: string;
+    /** Requests another locale. Takes precedence over onSelect. */
+    onValueChange?: (value: string) => void;
     /** Custom label for each locale. Defaults to `nativeLabel`. */
     onRenderLabel?: (options: LocaleOption) => string;
-    /** Layout: `buttons` (default) for a row of buttons, `inline` for compact dot-separated text links. */
+    /** Layout: `buttons` (default) for a row of buttons, `inline` for compact dot-separated text buttons. */
     variant?: 'buttons' | 'inline';
     /** Called with the chosen locale's value. Not called for the current locale. */
     onSelect?: (value: string) => void;
 }
-export declare function LanguageSwitcher({ locales, onRenderLabel, variant, onSelect, }: LanguageSwitcherProps): import("react").JSX.Element | null;
+export declare function LanguageSwitcher({ locales, value, onValueChange, onRenderLabel, variant, onSelect, }: LanguageSwitcherProps): import("react").JSX.Element | null;
 export declare namespace LanguageSwitcher {
     var displayName: string;
 }
+export {};

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

@@ -3,12 +3,12 @@
  *
  * 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.
+ * overflow and destructive commands, which always closes the row. Below the
+ * named header container breakpoint, every command collapses into that menu
+ * through CSS alone, so server and client markup agree. Both page and section
+ * headers use this owner for the same command behavior.
  */
-import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import { type ComponentType, type MouseEvent, type 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.
@@ -59,15 +59,22 @@ export interface PageHeaderLinkRenderProps {
 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. */
+/** Secondary commands rendered as buttons on wide headers; later ones overflow. */
 export declare const PAGE_HEADER_INLINE_SECONDARY_LIMIT = 2;
 export interface PageHeaderCommandsProps {
     primaryAction?: PageHeaderAction;
     secondaryActions?: readonly PageHeaderAction[];
+    /**
+     * How many routine secondary commands render as outline buttons on wide
+     * headers; later ones join the More actions menu. Use `1` or `0` when long
+     * labels beside the primary command would crowd the header; `Infinity`
+     * keeps every routine command inline. @default 2
+     */
+    maxVisibleSecondaryActions?: number;
     /** 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;
+export declare function PageHeaderCommands({ primaryAction, secondaryActions, maxVisibleSecondaryActions, moreActionsLabel, renderLink, }: PageHeaderCommandsProps): import("react").JSX.Element | null;

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

@@ -71,16 +71,23 @@ export interface PageHeadingProps {
     actions?: ReactNode;
     /**
      * The header's one main command: a solid primary button after the secondary
-     * commands, visible at every width.
+     * commands, placed in the command menu below 40rem of header 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.
+     * Below 40rem of header width, every command collapses into that menu.
      */
     secondaryActions?: readonly PageHeaderAction[];
+    /**
+     * How many routine secondary commands render as outline buttons on wide
+     * headers; later ones join the More actions menu. Use `1` or `0` when long
+     * labels beside the primary command would crowd the header; `Infinity`
+     * keeps every routine command inline. @default 2
+     */
+    maxVisibleSecondaryActions?: number;
     /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
     moreActionsLabel?: string;
     /** Renders `href` commands as framework links. Defaults to a native anchor. */
@@ -110,7 +117,7 @@ export interface PageHeadingProps {
      */
     withSeparator?: boolean;
 }
-export declare function PageHeading({ eyebrow, title, description, textGap, headingTag, titleSize, 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 function PageHeading({ eyebrow, title, description, textGap, headingTag, titleSize, badge, badges, breadcrumbs, leading, beforeTitle, titlePrefix, titleSuffix, afterDescription, actions, primaryAction, secondaryActions, maxVisibleSecondaryActions, 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/popover/popover.d.ts

@@ -26,8 +26,8 @@ export type PopoverContentInset = 'default' | 'compact' | 'flush';
 export type PopoverContentProps = PopoverContentBaseProps & {
     /**
      * Surface inset role. `default` is for card-like or multi-content popovers,
-     * `compact` for pure item/option collections, and `flush` when child regions
-     * own their padding.
+     * `compact` for item collections (or the small surface tier with explicit
+     * type="display"), and `flush` when child regions own their padding.
      */
     inset?: PopoverContentInset;
     /** Anatomy role; supplies the inferred inset only when inset is omitted. */
@@ -47,7 +47,7 @@ declare function PopoverTitle({ children, className, ...props }: PopoverTitleBas
 type PopoverDescriptionBaseProps = React.ComponentProps<typeof PopoverDescriptionPrimitive>;
 declare function PopoverDescription({ children, className, ...props }: PopoverDescriptionBaseProps): React.JSX.Element;
 type PopoverFooterProps = React.ComponentProps<'div'> & {
-    /** Leading supporting content, aligned with collection labels; children are trailing actions. */
+    /** Leading supporting content, one small step inside the region edge like the header; children are trailing actions. */
     caption?: React.ReactNode;
 };
 declare function PopoverFooter({ className, children, caption, ...props }: PopoverFooterProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { type RowDensity } from '../../../lib/row-recipes';
+import type { RowDensity } from '../../../lib/row-recipes';
 /** Shared anchored-surface chrome; Menu and Popover retain their own accessible behavior. */
 /**
  * One width scale for anchored surfaces. Menus, pickers and popovers choose a
@@ -15,18 +15,22 @@ export declare const popoverWidthRecipes: {
     readonly menuMin: "min-w-40";
 };
 export declare const popoverRecipes: {
-    readonly surface: "box-border max-w-[calc(100vw-2rem)] rounded-radius border border-border bg-popover text-popover-foreground shadow-md ring-0";
+    readonly surface: "box-border max-w-[calc(100vw-2rem)] rounded-surface border border-border bg-popover text-popover-foreground shadow-md ring-0";
     readonly display: "p-surface";
-    readonly menu: "p-surface-xs";
-    readonly menuRegion: "px-surface-xs py-space-md";
+    readonly displayCompact: "p-surface-xs";
+    readonly menu: "p-space-md";
+    readonly menuInline: "px-space-md";
+    readonly menuRegion: "px-space-md py-space-md";
+    readonly menuCopyInset: "px-space-xs";
+    readonly menuSearch: "[&_[data-slot=command-input-wrapper]]:p-space-md";
     readonly separator: "mx-0 my-space-xs h-px w-full shrink-0 bg-border/60";
-    readonly row: "box-border min-h-control rounded-inner px-row-x gap-space-sm font-medium leading-tight";
+    readonly row: "box-border min-h-control rounded-radius px-row-x gap-space-sm font-medium leading-tight";
 };
 export type PopoverContentType = 'display' | 'menu';
 /** One surface inset vocabulary for Popover, Command and their collections. */
 export declare const surfaceInsetClasses: {
     readonly default: "p-surface";
-    readonly compact: "p-surface-xs";
+    readonly compact: "p-space-md";
     readonly flush: "p-0";
 };
 /** Collection density changes vertical rhythm; inline room and primary text stay stable. */

package/dist/components/base/repeaters/key-value-editor.d.ts

@@ -1,3 +1,4 @@
+import { type FieldControlAttributes } from '../../../lib/field-control-attributes';
 import { type StringsProp } from '../../../lib/strings';
 export type KeyValuePair = {
     key: string;
@@ -13,7 +14,7 @@ export interface KeyValueEditorStrings {
     emptyState: string;
 }
 export declare const defaultKeyValueEditorStrings: KeyValueEditorStrings;
-export interface KeyValueEditorProps {
+export interface KeyValueEditorProps extends FieldControlAttributes {
     /** Current value. Controlled. */
     value?: Record<string, string>;
     onValueChange?: (val: Record<string, string>) => void;

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

@@ -23,6 +23,8 @@ export declare const SheetClose: React.ForwardRefExoticComponent<Omit<import("@b
 export declare const SheetContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPopupProps & {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
+    forceRenderBackdrop?: boolean;
+    backdropClassName?: string;
 } & {
     container?: import("../../../lib/theme-scope").ThemePortalContainer;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, defaultSidebarStrings, type SidebarProps, type SidebarInputProps, type SidebarMenuBadgeProps, type SidebarMenuButtonProps, type SidebarMenuDensity, type SidebarMenuProps, type SidebarMenuSkeletonProps, type SidebarMenuSubButtonProps, type SidebarProviderProps, type SidebarStrings, } from './sidebar';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRegion, SidebarRail, SidebarSeparator, SidebarTrigger, defaultSidebarStrings, type SidebarProps, type SidebarInputProps, type SidebarMenuBadgeProps, type SidebarMenuButtonProps, type SidebarMenuDensity, type SidebarMenuProps, type SidebarMenuSkeletonProps, type SidebarMenuSubButtonProps, type SidebarProviderProps, type SidebarRegionProps, type SidebarPanelId, type SidebarPresentation, type SidebarStrings, } from './sidebar';
 /**
  * @deprecated Use `useLayoutSidebar` from `themelia-react-ui/layout/sidebar`.
  * This vendored compatibility re-export remains available through 1.x.