themelia-ui 3.0.0 → 3.2.0

package/dist/components/base/action-menu/action-menu.d.ts

@@ -76,7 +76,7 @@ export interface ActionMenuProps {
 export interface ActionButtonsProps {
     /**
      * The same definitions `ActionMenu` takes, side by side rather than collapsed into a menu:
-     * that is the point of the shape. Each entry's `tone` and `buttonStyle` carry through to
+     * that is the point of the shape. Each entry's `tone` and `appearance` carry through to
      * its button.
      */
     actions: readonly ActionDefinition[];

package/dist/components/base/action-menu/action-menu.types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
-import { ButtonStyle, ButtonTone } from '../buttons/index.js';
+import { ButtonAppearance, ButtonTone } from '../buttons/index.js';
 /** A Lucide icon, any component taking a className, or an already-rendered node. */
 export type ActionIcon = ComponentType<{
     className?: string;
@@ -45,7 +45,7 @@ export interface ActionDefinition {
     /** Semantic intent. `destructive` also moves the entry last and separates it. */
     tone?: ButtonTone;
     /** Treatment when the action renders as a button. `link` is a ghost that underlines. */
-    buttonStyle?: ButtonStyle | "link";
+    appearance?: ButtonAppearance | "link";
     /**
      * `false` omits the action entirely.
      * @default true

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

@@ -1,7 +1,7 @@
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from "react";
 /** An avatar keeps a size prop: it has no content to scale with. */
-export type AvatarSize = "default" | "sm" | "lg";
+export type AvatarSize = "default" | "sm";
 export type AvatarProps = AvatarPrimitive.Root.Props & {
     /** Disc size. One of the kit's few size props: an avatar has no content to scale with. */
     size?: AvatarSize;
@@ -13,7 +13,10 @@ declare function Avatar({ className, size, ...props }: AvatarProps): React.JSX.E
  * the person.
  */
 declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props & Pick<AvatarPrimitive.Image.Props, "src" | "alt">): React.JSX.Element;
-/** Shown when there is no image. Initials, not a placeholder glyph. */
+/**
+ * Shown when there is no image. Initials, not a placeholder glyph. They take the smaller
+ * step on a small disc, and in a group, so the overlap doesn't clip them.
+ */
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
 /** A small status mark on the disc's corner. */
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

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

@@ -1,18 +1,18 @@
-import { VariantProps } from '../../../lib/cvm.js';
-import { badgeVariants } from './badge.variants.js';
+import { SemanticTone } from '../../../lib/component-vocabulary.js';
 /**
  * Badge — a short status mark. Takes `tone` (semantic colour) like the rest of the kit.
  * The status dot is built in, so status isn't carried by colour alone.
  */
 import * as React from "react";
-export type BadgeTone = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "destructive";
-/** Structural presentation. The tone supplies the hue; this decides how it is applied. */
-export type BadgeVariant = "soft" | "solid" | "outline";
-export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
-    /** Semantic colour: what the badge means. `variant` decides how much of it is applied. */
+/** Semantic colour: the kit's one tone union. */
+export type BadgeTone = SemanticTone;
+/** Fill treatment. The tone supplies the hue; this decides how much of it is applied. */
+export type BadgeAppearance = "soft" | "solid" | "outline";
+export interface BadgeProps extends React.ComponentProps<"span"> {
+    /** Semantic colour: what the badge means. `appearance` decides how much of it is applied. */
     tone?: BadgeTone;
-    /** How much of the tone is applied. Structural, not semantic. */
-    variant?: BadgeVariant;
+    /** How much of the tone is applied: a soft wash, a solid fill or an outline. */
+    appearance?: BadgeAppearance;
     /** A leading status dot in the badge's own tone. */
     dot?: boolean;
     /** Draws the dot hollow, for a state that has not happened yet: "queued", not "failed". */
@@ -25,5 +25,5 @@ export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<t
      */
     render?: React.ReactElement;
 }
-declare function Badge({ className, tone, variant, render, dot, pending, pulse, children, ...props }: BadgeProps): React.JSX.Element;
+declare function Badge({ className, tone, appearance, render, dot, pending, pulse, children, ...props }: BadgeProps): React.JSX.Element;
 export { Badge };

package/dist/components/base/badge/badge.variants.d.ts

@@ -1,6 +1,5 @@
 export declare const badgeVariants: (props?: ({
-    tone?: ("neutral" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive") | null | undefined;
-    variant?: ("solid" | "outline" | "soft") | null | undefined;
+    appearance?: ("solid" | "outline" | "soft") | null | undefined;
 } & {
     className?: import('clsx').ClassValue;
 }) | undefined) => string;

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

@@ -1,2 +1 @@
-export { Badge, type BadgeProps, type BadgeTone, type BadgeVariant } from './badge.js';
-export { badgeVariants } from './badge.variants.js';
+export { Badge, type BadgeProps, type BadgeTone, type BadgeAppearance } from './badge.js';

package/dist/components/base/buttons/button.d.ts

@@ -1,8 +1,9 @@
-import { ButtonStyle, ButtonTone } from './button.types.js';
+import { ButtonAppearance, ButtonTone } from './button.types.js';
 /**
- * Button — the kit's action primitive. `tone` (colour intent) and `buttonStyle` (fill) are
- * independent axes; the tone × style matrix lives in button-tones.module.css.
- * Defaults resolve through the provider, so a scope can restyle every button in it.
+ * Button — the kit's action primitive. `tone` (colour intent) and `appearance` (fill) are
+ * independent axes: the tone reaches the stylesheet as `data-tone`, through the shared tone
+ * rule, and button-tones.module.css applies each appearance to it. Defaults resolve through
+ * the provider, so a scope can restyle every button in it.
  */
 import * as React from "react";
 export interface ButtonProps extends Omit<React.ComponentProps<"button">, "children"> {
@@ -16,7 +17,7 @@ export interface ButtonProps extends Omit<React.ComponentProps<"button">, "child
      * Fill treatment, independent of `tone`. `UIProvider` defaults can change it.
      * @default "solid"
      */
-    buttonStyle?: ButtonStyle;
+    appearance?: ButtonAppearance;
     /** Square button sized to its height. The label becomes the accessible name. */
     iconOnly?: boolean;
     /** Stretches the button to its container's width. */
@@ -38,7 +39,7 @@ export interface ButtonProps extends Omit<React.ComponentProps<"button">, "child
     children?: React.ReactNode;
 }
 /**
- * The kit's action primitive. No `size` prop by design: geometry follows the scale factors,
- * so a denser region is a scope (styles/FACTORS.md).
+ * The kit's action primitive. No `size` prop by design: geometry follows the provider's density
+ * and scale, so a denser region is a scope.
  */
-export declare function Button({ tone, buttonStyle, iconOnly, fullWidth, loading, render, className, disabled, children, onClick, ...props }: ButtonProps): React.JSX.Element;
+export declare function Button({ tone, appearance, iconOnly, fullWidth, loading, render, className, disabled, children, onClick, ...props }: ButtonProps): React.JSX.Element;

package/dist/components/base/buttons/button.types.d.ts

@@ -1,13 +1,13 @@
 import { SemanticTone } from '../../../lib/component-vocabulary.js';
 /** Fill treatment. Structural, independent of the tone's colour. */
-export type ButtonStyle = "solid" | "outline" | "ghost";
+export type ButtonAppearance = "solid" | "outline" | "ghost";
 export type ButtonTone = SemanticTone;
 declare module '../../../lib/ui-provider' {
     interface ComponentDefaults {
         /** Registered here, not in the provider's core type, so adding a family never edits `lib/`. */
         button: {
             tone: ButtonTone;
-            buttonStyle: ButtonStyle;
+            appearance: ButtonAppearance;
         };
     }
 }

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

@@ -4,4 +4,4 @@ export { TextButton, type TextButtonProps } from './text-button.js';
 export { LoaderButton, type LoaderButtonProps } from './loader-button.js';
 export { TooltipButton, type TooltipButtonProps } from './tooltip-button.js';
 export { defaultButtonLoadingStrings, type ButtonLoadingStrings } from './button.strings.js';
-export type { ButtonStyle, ButtonTone } from './button.types.js';
+export type { ButtonAppearance, ButtonTone } from './button.types.js';

package/dist/components/base/buttons/text-button.d.ts

@@ -5,7 +5,7 @@ import { ButtonTone } from './button.types.js';
  * button, activated by Space). Anything that navigates should be a real anchor.
  */
 import * as React from "react";
-export type TextButtonProps = Omit<ButtonProps, "tone" | "buttonStyle" | "iconOnly" | "fullWidth"> & {
+export type TextButtonProps = Omit<ButtonProps, "tone" | "appearance" | "iconOnly" | "fullWidth"> & {
     /**
      * Semantic colour intent. A text button always sets it, so the provider's button defaults
      * do not reach it.

package/dist/components/base/cards/card-actions.d.ts

@@ -4,7 +4,7 @@ import { LinkRenderer } from '../../../lib/navigation.js';
 export interface CardActionStripProps extends Omit<ComponentProps<"div">, "children"> {
     /**
      * The commands, as the overflow menu takes them. The first is the primary action; the rest
-     * follow in outline unless an entry sets its own `buttonStyle`.
+     * follow in outline unless an entry sets its own `appearance`.
      */
     actions: ActionDefinition[];
     /** A rule above the strip, ruling it off from content that runs right into it. */

package/dist/components/base/cards/card.d.ts

@@ -42,6 +42,8 @@ export interface CardProps extends Omit<React.ComponentProps<"div">, "title"> {
      * Unset, the title is a span that heading navigation can't find.
      */
     titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Title type size. `xl` is for a Card that heads a page, such as an auth form. */
+    titleSize?: "base" | "xl";
     /**
      * A full-bleed strip above the header — a cover image, a map, a brand band — clipped to
      * the card's top corners.
@@ -93,4 +95,4 @@ export interface CardProps extends Omit<React.ComponentProps<"div">, "title"> {
  * …) cover the common shape; `CardHeader`, `CardContent` and `CardFooter` are exported for
  * composing.
  */
-export declare function Card({ icon, title, titleSuffix, tooltip, description, surface, titleLevel, media, headerStart, headerEnd, headerAction, actions, alert, alertTone, contentTop, contentBottom, footerText, footerSlot, headerDivider, footerDivider, expandable, expanded, defaultExpanded, onExpandedChange, strings, className, children, ...props }: CardProps): React.JSX.Element;
+export declare function Card({ icon, title, titleSuffix, tooltip, description, surface, titleLevel, titleSize, media, headerStart, headerEnd, headerAction, actions, alert, alertTone, contentTop, contentBottom, footerText, footerSlot, headerDivider, footerDivider, expandable, expanded, defaultExpanded, onExpandedChange, strings, className, children, ...props }: CardProps): React.JSX.Element;

package/dist/components/base/cards/partials/card-header.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The header region: a title row with trailing controls, plus an optional full-width row
  * above. The title truncates rather than pushing the controls off the row.
  */
-export declare function CardHeader({ icon, title, titleSuffix, tooltip, tooltipLabel, description, headerStart, headerEnd, headerAction, divider, titleLevel, className, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
+export declare function CardHeader({ icon, title, titleSuffix, tooltip, tooltipLabel, description, headerStart, headerEnd, headerAction, divider, titleLevel, titleSize, className, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
     icon?: React.ReactNode;
     title?: React.ReactNode;
     titleSuffix?: React.ReactNode;
@@ -16,4 +16,5 @@ export declare function CardHeader({ icon, title, titleSuffix, tooltip, tooltipL
     divider?: boolean;
     /** Renders the title as a heading of this level. See `CardProps.titleLevel`. */
     titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    titleSize?: "base" | "xl";
 }): React.JSX.Element;

package/dist/components/base/choice-inputs/choice.types.d.ts

@@ -33,7 +33,7 @@ export interface ChoiceGroupBaseProps {
     "aria-describedby"?: string;
 }
 /**
- * Column cap for card groups. There is no `size` prop: geometry follows `--density-scale`
- * (styles/FACTORS.md).
+ * Column cap for card groups. There is no `size` prop: spacing follows the density a scope
+ * sets.
  */
 export type ChoiceColumns = 1 | 2 | 3 | 4;

package/dist/components/base/choice-inputs/partials/choice-parts.d.ts

@@ -8,14 +8,14 @@ import { ChoiceOption } from '../choice.types.js';
  */
 export declare function ChoiceLabel({ option, weight, className, descriptionId, }: {
     option: ChoiceOption;
-    weight?: "regular" | "medium" | "semibold";
+    weight?: "normal" | "medium" | "semibold";
     className?: string;
     /** Id for the hidden copy of the tooltip, which the option points `aria-describedby` at. */
     descriptionId?: string;
 }): import("react").JSX.Element;
 /**
- * A card's title and description as one block, so they sit at `--space-xs` instead of the
- * card's icon-to-text gap.
+ * A card's title and description as one block, so they sit at half the small gap instead of
+ * the card's icon-to-text gap.
  */
 export declare function ChoiceCardText({ children }: {
     children: ReactNode;

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

@@ -3,7 +3,10 @@ import { OverlayRootProps } from '../overlay/index.js';
 import { CommandStrings } from './command.strings.js';
 import * as React from "react";
 export type CommandProps = React.ComponentProps<typeof CommandPrimitive>;
-/** The command palette's root: filtering, keyboard navigation and the rows' shared state. */
+/**
+ * The command palette's root: filtering, keyboard navigation and the rows' shared state. It
+ * sets the rows' type; a group heading and a shortcut take the small step.
+ */
 declare function Command({ className, ...props }: CommandProps): React.JSX.Element;
 export type CommandDialogProps = Omit<OverlayRootProps, "children"> & {
     /** Shorthand for `strings.title`: the palette's accessible name. */
@@ -33,7 +36,7 @@ declare function CommandList({ className, ...props }: React.ComponentProps<typeo
 /** Shown when nothing matches. Not optional — a silent empty list reads as broken. */
 declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
 /** A captioned block of rows. */
-declare function CommandGroup({ className, ref, ...props }: React.ComponentProps<typeof CommandPrimitive.Group> & Pick<React.ComponentProps<typeof CommandPrimitive.Group>, "heading">): React.JSX.Element;
+declare function CommandGroup({ className, ref, heading, ...props }: React.ComponentProps<typeof CommandPrimitive.Group> & Pick<React.ComponentProps<typeof CommandPrimitive.Group>, "heading">): React.JSX.Element;
 /**
  * The rule between groups. Presentational and skipped by the keyboard, so arrowing through
  * results never lands on it.

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

@@ -1,5 +1,7 @@
 import { ComponentProps, ComponentType, ReactNode } from 'react';
-export type IconBadgeTone = "neutral" | "primary" | "success" | "warning" | "destructive" | "info";
+import { SemanticTone } from '../../../lib/component-vocabulary.js';
+/** A medallion's tones: the kit's tone union, without secondary. */
+export type IconBadgeTone = Extract<SemanticTone, "neutral" | "primary" | "success" | "warning" | "destructive" | "info">;
 export type IconBadgeShape = "rounded" | "circle";
 export interface IconBadgeProps extends Omit<ComponentProps<"span">, "children"> {
     /**
@@ -20,7 +22,7 @@ export interface IconBadgeProps extends Omit<ComponentProps<"span">, "children">
     bordered?: boolean;
 }
 /**
- * A glyph in a tinted medallion. Its size comes from `--icon-badge-size`, so a caller
- * needing a smaller mark re-points the token instead of redrawing the badge.
+ * A glyph in a tinted medallion. `tone` coordinates fill and glyph; `shape` chooses
+ * rounded or circular geometry. Internal sizing variables are not consumer overrides.
  */
 export declare function IconBadge({ icon, children, tone, shape, solid, bordered, className, ...props }: IconBadgeProps): import("react").JSX.Element;

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

@@ -9,7 +9,7 @@ export { DateBlock, type DateBlockLayout, type DateBlockProps } from './date-blo
 export { PlaceholderPattern, type PlaceholderPatternProps } from './placeholder-pattern.js';
 export { defaultBooleanIndicatorStrings, type BooleanIndicatorStrings, } from './boolean-indicator.strings.js';
 export { Kbd, KbdGroup } from './kbd.js';
-export { MetadataList, type MetadataListProps, type MetadataListItem, type MetadataInlineListItem, type MetadataColumns, type MetadataLayout, type MetadataDensity, } from './metadata-list.js';
+export { MetadataList, type MetadataListProps, type MetadataListItem, type MetadataInlineListItem, type MetadataColumns, type MetadataLayout, type MetadataSize, } from './metadata-list.js';
 export { defaultMetadataListStrings, type MetadataListStrings, } from './metadata-list.strings.js';
 export { MetadataValue, type MetadataValueProps, type MetadataValueKind, type MetadataValueDescriptor, type MetadataTextValueDescriptor, type MetadataMonoValueDescriptor, type MetadataContactValueDescriptor, type MetadataLinkValueDescriptor, type MetadataDateValueDescriptor, type MetadataTimeValueDescriptor, type MetadataDateTimeValueDescriptor, type MetadataMoneyValueDescriptor, type MetadataBadgeValueDescriptor, type MetadataNodeValueDescriptor, type MetadataEmptyValueDescriptor, } from './metadata-value.js';
 export { InlineStat, type InlineStatProps, type InlineStatLayout } from './inline-stat.js';

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

@@ -4,8 +4,8 @@ import { MetadataValueDescriptor } from './metadata-value.js';
 import { MetadataListStrings } from './metadata-list.strings.js';
 export type MetadataColumns = 1 | 2 | 3 | 4;
 export type MetadataLayout = "grid" | "rows" | "inline";
-/** `compact` tightens the rhythm for a dense panel. */
-export type MetadataDensity = "default" | "compact";
+/** `sm` tightens the rhythm for a dense panel. */
+export type MetadataSize = "default" | "sm";
 /** One fact: a label and a value, and optionally a description, a tooltip and an icon. */
 export interface MetadataListItem {
     /** Stable identity. Without one the label and index stand in. */
@@ -42,10 +42,10 @@ interface MetadataListSharedProps {
      */
     columns?: ResponsiveValue<MetadataColumns>;
     /**
-     * `compact` tightens the rhythm — the gaps and the row inset — for a dense panel. The value
-     * keeps its size.
+     * `sm` tightens the rhythm — the gaps and the row inset — for a dense panel. The value
+     * keeps its type size.
      */
-    density?: MetadataDensity;
+    size?: MetadataSize;
     /**
      * Shown for a fact whose value is absent. A dash says "we looked"; an omitted row does
      * not.
@@ -91,5 +91,5 @@ export type MetadataListProps = MetadataGridRowsProps | MetadataInlineProps;
  * Label/value facts about one thing, in three layouts over the same data. Returns `null`
  * when the list is empty, so a caller can render it unconditionally.
  */
-export declare function MetadataList({ items, columns, density, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, strings, }: MetadataListProps): import("react").JSX.Element | null;
+export declare function MetadataList({ items, columns, size, emptyLabel, title, titleSeparator, className, layout, separator, itemSeparator, strings, }: MetadataListProps): import("react").JSX.Element | null;
 export {};

package/dist/components/base/display/metadata-value.d.ts

@@ -69,7 +69,7 @@ export type MetadataBadgeValueDescriptor = DescriptorBase & ValueFallback & Disp
     kind: "badge";
     value: DisplayValue;
     badgeTone?: BadgeProps["tone"];
-    badgeVariant?: BadgeProps["variant"];
+    badgeAppearance?: BadgeProps["appearance"];
 };
 export type MetadataNodeValueDescriptor = {
     /** Arbitrary content, bypassing every formatting path here. */

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

@@ -9,8 +9,8 @@ export interface SeparatorProps extends SeparatorPrimitive.Props, Pick<Separator
      */
     variant?: SeparatorVariant;
     /**
-     * The rule's thickness: a CSS length, or a number in pixels. Overrides
-     * `--separator-thickness` for this rule, e.g. a seam between panels.
+     * The rule's thickness: a CSS length, or a number in pixels. Overrides the hairline for
+     * this rule, e.g. a seam between panels.
      */
     thickness?: string | number;
     /**

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

@@ -1,12 +1,13 @@
+import { SemanticTone } from '../../../lib/component-vocabulary.js';
 import { VariantProps } from '../../../lib/cvm.js';
 import * as React from "react";
 declare const alertVariants: (props?: ({
-    tone?: ("neutral" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive") | null | undefined;
     variant?: ("default" | "inverse") | null | undefined;
 } & {
     className?: import('clsx').ClassValue;
 }) | undefined) => string;
-export type AlertTone = "neutral" | "primary" | "secondary" | "destructive" | "warning" | "success" | "info";
+/** Semantic colour: the kit's one tone union. */
+export type AlertTone = SemanticTone;
 export type AlertVariant = "default" | "inverse";
 export interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
     /** Semantic colour intent. Never `default` — the vocabulary is fixed across the kit. */

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

@@ -7,8 +7,8 @@ import { EmptyStrings } from './empty.strings.js';
  */
 import * as React from "react";
 /**
- * Breathing room: `sm` for panels and cells, `lg` for a whole page. Not derived from
- * provider density, which already reaches these tokens via `--density-scale`.
+ * Breathing room: `sm` for panels and cells, `default` for a card body or a page. Not
+ * derived from provider density, which already reaches the paddings through the presets.
  */
 export type EmptyPadding = ComponentScale;
 /**
@@ -51,8 +51,9 @@ export interface EmptyProps extends Omit<React.ComponentProps<"div">, "title"> {
     /** Quiet copy under the action — a hint, a learn-more, a shortcut. */
     footer?: React.ReactNode;
     /**
-     * Breathing room, on both axes: `sm` for panels and cells, `lg` for a whole page. The
-     * inline padding is what keeps copy off a dashed edge.
+     * Breathing room, on both axes: `sm` for panels and cells, `default` for a card body or a
+     * page. The inline padding is what keeps copy off a dashed edge.
+     * @default "default"
      */
     padding?: EmptyPadding;
     /**

package/dist/components/base/feedback/progress-circle.d.ts

@@ -2,7 +2,7 @@ import { ProgressTone } from './progress.js';
 /**
  * ProgressCircle — a determinate ring with the reading inside it, for tiles, scores and
  * grids of small measures. A conic gradient masked into a ring (one sweep, no
- * circumference maths); size comes from `--progress-circle`, with no size prop.
+ * circumference maths); one fixed size, with no size prop.
  */
 import * as React from "react";
 export interface ProgressCircleProps extends React.ComponentProps<"div"> {
@@ -29,6 +29,6 @@ export interface ProgressCircleProps extends React.ComponentProps<"div"> {
 }
 /**
  * A determinate ring with the reading inside it, for tiles, scores and grids of small
- * measures. Its size comes from `--progress-circle`; there is no size prop.
+ * measures. It has one size, big enough for a percentage in the hole; there is no size prop.
  */
 export declare function ProgressCircle({ value, max, tone, label, children, className, style, ...props }: ProgressCircleProps): React.JSX.Element;

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

@@ -1,9 +1,11 @@
+import { SemanticTone } from '../../../lib/component-vocabulary.js';
 /**
  * Progress — a `progressbar` with its real bounds. Omit `value` for indeterminate; the ARIA
  * value attributes are then dropped rather than reporting 0%.
  */
 import * as React from "react";
-export type ProgressTone = "primary" | "success" | "warning" | "destructive" | "info";
+/** The tones a measure takes: the kit's tone union, without neutral and secondary. */
+export type ProgressTone = Extract<SemanticTone, "primary" | "success" | "warning" | "destructive" | "info">;
 export interface ProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
     /** 0–`max`. Non-finite values resolve to 0. Omit for indeterminate. */
     value?: number;

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

@@ -1,7 +1,7 @@
 /**
  * FormField — label, control and one supporting line: `error || helperText || hint`, one
- * replacing the next so the field never shifts as validation changes (so copy needed while
- * fixing an error belongs in the error). The field owns the ids and wires the label,
+ * replacing the next rather than stacking. Supporting copy can wrap; copy needed while
+ * fixing an error belongs in the error. The field owns the ids and wires the label,
  * `aria-describedby` and `aria-invalid` onto the control.
  */
 import * as React from "react";

package/dist/components/base/input-group/input-group.d.ts

@@ -18,21 +18,19 @@ export interface InputGroupAddonProps extends React.ComponentProps<"div"> {
  * control, as a label does, unless the click lands on a button.
  */
 declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
-export interface InputGroupButtonProps extends Omit<React.ComponentProps<typeof Button>, "size" | "type"> {
-    /**
-     * The sizes that fit inside a field: two text sizes and their icon-only twins. A
-     * full-height Button would set the field's height rather than fit in it, which is why
-     * this is the one place the kit keeps a size prop on a control.
-     */
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm";
+/**
+ * One size, inset inside the field: a full-height Button would set the field's height rather
+ * than fit in it. `iconOnly` makes it square.
+ */
+export interface InputGroupButtonProps extends Omit<React.ComponentProps<typeof Button>, "type"> {
     /** The native button type: `button` unless set, so pressing it never submits the form around the field. */
     type?: "button" | "submit" | "reset";
 }
 /** A quiet Button sized to sit inside the field rather than beside it. */
-declare function InputGroupButton({ className, type, tone, buttonStyle, size, ...props }: InputGroupButtonProps): React.JSX.Element;
+declare function InputGroupButton({ className, type, tone, appearance, iconOnly, ...props }: InputGroupButtonProps): React.JSX.Element;
 /**
- * Secondary text at the group's own size — a unit, a domain suffix, a counter. It inherits
- * the size, so it cannot drift from the input beside it.
+ * Secondary text at the field's size — a unit, a domain suffix, a counter. Text's `sm`, the
+ * step every field control's value uses, so it cannot drift from the input beside it.
  */
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 /**

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

@@ -23,8 +23,8 @@ interface ItemProps extends useRender.ComponentProps<"div"> {
     surface?: "neutral" | "bordered" | "muted";
 }
 /**
- * A row — a list row, a menu row, a table row. No size prop: row height follows
- * `--density-scale`, so use a denser scope for a denser list.
+ * A row — a list row, a menu row, a table row. No size prop: row height follows the
+ * density, so use a denser scope for a denser list.
  */
 declare function Item({ className, surface, render, ...props }: ItemProps): React.JSX.Element;
 interface ItemMediaProps extends React.ComponentProps<"div"> {

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

@@ -1,3 +1,3 @@
 export { Overlay, OverlayTrigger, OverlayClose, OverlayContent, OverlayDismissArea, OverlayHeader, OverlayBody, OverlayFooter, OverlayTitle, OverlayDescription, } from './overlay.js';
-export type { OverlayPlacement, OverlayModality, OverlaySurface, OverlaySize, OverlayLength, OverlayInset, OverlayDismissal, OverlayRootProps, OverlayContentProps, } from './overlay.types.js';
+export type { OverlayPlacement, OverlayModality, OverlaySurface, CssLength, OverlaySize, OverlayLength, OverlayInset, OverlayDismissal, OverlayRootProps, OverlayContentProps, } from './overlay.types.js';
 export { defaultOverlayStrings, type OverlayStrings } from './overlay.strings.js';

package/dist/components/base/overlay/overlay.types.d.ts

@@ -1,5 +1,7 @@
-import { OverlayStrings } from './overlay.strings.js';
 import { ReactNode, RefObject } from 'react';
+import { CssLength } from '../../../lib/css-length.js';
+import { OverlayStrings } from './overlay.strings.js';
+export type { CssLength };
 /** Where the surface sits. Centre reads as a dialog; edges read as sheets and drawers. */
 export type OverlayPlacement = "center" | "inline-start" | "inline-end" | "block-start" | "block-end";
 /**
@@ -11,14 +13,14 @@ export type OverlayModality = "modal" | "trap-focus" | "non-modal";
 /** Chrome treatment. `bare` drops the region dividers for a surface that owns its own. */
 export type OverlaySurface = "framed" | "bare";
 /** Cross-axis extent of an edge-placed surface (a side panel's width): a step or any CSS length. */
-export type OverlaySize = "sm" | "md" | "lg" | "full" | (string & {});
+export type OverlaySize = "default" | "sm" | "full" | CssLength;
 /** Along-axis extent (a side panel's height). `full` welds it to both ends; less centres it. */
-export type OverlayLength = "full" | (string & {});
+export type OverlayLength = "full" | CssLength;
 /**
  * The gap to the viewport edges: `false` is flush, `true` the kit's gap, or any CSS length.
  * An inset panel rounds all four corners.
  */
-export type OverlayInset = boolean | (string & {});
+export type OverlayInset = boolean | CssLength;
 /** The two routes out of an overlay, each switchable on its own. */
 export interface OverlayDismissal {
     /**
@@ -52,7 +54,7 @@ export interface OverlayContentProps {
      * Cross-axis extent for an edge placement — the width of a side panel; a top or bottom
      * one sizes to its content and takes this as the ceiling. Named steps resolve to tokens;
      * any other CSS length is used as given. Ignored when centred.
-     * @default "md"
+     * @default "default"
      */
     size?: OverlaySize;
     /**

package/dist/components/base/qr-code/qr-code.d.ts

@@ -13,13 +13,13 @@ export interface QRCodeProps extends Omit<ComponentProps<"div">, "children"> {
      */
     value: string;
     /**
-     * Overrides the dark modules. Defaults to the inverse background, dark in both themes.
-     * Any CSS colour; it is converted to hex for the encoder.
+     * Overrides the dark modules. Defaults to the theme's foreground as the light theme draws
+     * it, dark in both themes. Any CSS colour; it is converted to hex for the encoder.
      */
     foreground?: string;
     /**
-     * Overrides the light modules. Defaults to the inverse foreground, light in both themes.
-     * Any CSS colour; it is converted to hex for the encoder.
+     * Overrides the light modules. Defaults to the theme's background as the light theme draws
+     * it, light in both themes. Any CSS colour; it is converted to hex for the encoder.
      */
     background?: string;
     /**

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

@@ -17,7 +17,7 @@ export interface SheetContentProps extends Omit<OverlayContentProps, "placement"
 /**
  * OverlayContent at an edge. `side` is OverlayContent's `placement` minus centre — logical,
  * so it follows the writing mode — and the sheet adds a default shape: `side="inline-end"`,
- * `size="md"`, `length="full"` and `inset={false}`. `UIProvider`'s `defaults.sheet` takes
+ * `size="default"`, `length="full"` and `inset={false}`. `UIProvider`'s `defaults.sheet` takes
  * the same four, for a product that decides the shape once.
  *
  * `modality`, `surface`, `dismissal`, `initialFocusRef` and `showCloseButton` pass through