@godxjp/ui 21.0.0 → 22.0.0

package/dist/props/components/data-entry.prop.d.ts

@@ -1,8 +1,5 @@
 /** Data Entry component prop types — @see docs/COMPONENTS.md#data-entry */
-import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import type * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type * as SliderPrimitive from "@radix-ui/react-slider";
-import type * as SwitchPrimitive from "@radix-ui/react-switch";
 import type { RenderProps as InputOTPRenderProps } from "input-otp";
 import type { DayPickerProps } from "react-day-picker";
 import type { DateRange } from "react-day-picker";
@@ -285,6 +282,22 @@ export type FormFieldProp = {
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
+    /**
+     * Which side of the control the helper line sits on — `after` (default, under the input) or
+     * `before` (between the label and the input).
+     *
+     * `before` is for a helper the reader needs BEFORE they answer rather than after: the
+     * secondary language of a bilingual form, a unit or format note, a pick-one-of-these
+     * preamble. `labelAddon` cannot carry that — it is an inline row beside the label with no
+     * wrap, sized for a chip or a help button, so a full sentence squeezes the label instead of
+     * taking its own line. Putting the second line inside `label` does work, but costs the
+     * string-label fallbacks (`aria-label`, `FieldNameContext`), which fire only when `label` is
+     * a plain string.
+     *
+     * Paint only: the helper keeps its id and stays on the control's `aria-describedby`, so this
+     * never changes what a screen reader reads or the order it reads it in.
+     */
+    helperPlacement?: "before" | "after";
     error?: ErrorProp;
     validateStatus?: "success" | "warning" | "error" | "validating";
     hasFeedback?: boolean;
@@ -316,6 +329,22 @@ export type FormFieldProp = {
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
+    /**
+     * Which side of the control the helper line sits on — `after` (default, under the input) or
+     * `before` (between the label and the input).
+     *
+     * `before` is for a helper the reader needs BEFORE they answer rather than after: the
+     * secondary language of a bilingual form, a unit or format note, a pick-one-of-these
+     * preamble. `labelAddon` cannot carry that — it is an inline row beside the label with no
+     * wrap, sized for a chip or a help button, so a full sentence squeezes the label instead of
+     * taking its own line. Putting the second line inside `label` does work, but costs the
+     * string-label fallbacks (`aria-label`, `FieldNameContext`), which fire only when `label` is
+     * a plain string.
+     *
+     * Paint only: the helper keeps its id and stays on the control's `aria-describedby`, so this
+     * never changes what a screen reader reads or the order it reads it in.
+     */
+    helperPlacement?: "before" | "after";
     error?: ErrorProp;
     validateStatus?: "success" | "warning" | "error" | "validating";
     hasFeedback?: boolean;
@@ -386,8 +415,20 @@ export type SearchInputProp = FieldA11yProps & {
     /** Chrome level — antd `variant`. Default `outlined`. */
     variant?: ControlVariantProp;
 };
-/** @see Checkbox — extends Radix checkbox root props. */
-export type CheckboxProp = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+/**
+ * @see Checkbox
+ *
+ * Public shape unchanged from the @radix-ui/react-checkbox era — `checked` / `defaultChecked` take
+ * the tri-state `"indeterminate"`, `onCheckedChange` reports it back, and `disabled` / `required`
+ * keep their HTML spelling. checkbox.tsx translates all of it to react-aria's `isSelected` /
+ * `isIndeterminate` / `onChange` / `isDisabled`; none of those names reach a consumer. Written out
+ * here rather than derived from a primitive that the component no longer uses.
+ */
+export type CheckboxProp = Omit<React.ComponentPropsWithoutRef<"button">, "checked" | "defaultChecked" | "onChange"> & {
+    checked?: boolean | "indeterminate";
+    defaultChecked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    required?: boolean;
     /**
      * antd `indeterminate` — paint the PARTIAL mark (a dash) without changing `checked`. Radix
      * spells the same state as `checked="indeterminate"`; this is the antd spelling of it, and the
@@ -442,10 +483,30 @@ export type RadioGroupProp = FieldA11yProps & {
 export type RadioOptionTypeProp = "default" | "button";
 /** antd `RadioGroupButtonStyle` — the selected button is outlined, or filled with the brand. */
 export type RadioButtonStyleProp = "outline" | "solid";
-/** @see Radio.Item — Radix radio group item. */
-export type RadioProp = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
-/** @see Switch — extends Radix switch root props. */
-export type SwitchProp = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
+/**
+ * @see Radio.Item
+ *
+ * Public shape unchanged from the @radix-ui/react-radio-group era — `value` / `disabled` keep
+ * their HTML spelling; react-aria's `isDisabled` never reaches a consumer.
+ */
+export type RadioProp = Omit<React.ComponentPropsWithoutRef<"button">, "value"> & {
+    value: string;
+};
+/**
+ * @see Switch
+ *
+ * The PUBLIC shape is unchanged from the @radix-ui/react-switch era — `checked` /
+ * `defaultChecked` / `onCheckedChange` / `disabled` / `required` keep their HTML spelling.
+ * react-aria-components spells the same five `isSelected` / `defaultSelected` / `onChange` /
+ * `isDisabled`, and that translation happens inside `switch.tsx`; none of those names reach a
+ * consumer. Written out here rather than derived from a primitive so the surface stops moving
+ * whenever the base does.
+ */
+export type SwitchProp = Omit<React.ComponentPropsWithoutRef<"button">, "checked" | "defaultChecked" | "onChange" | "value"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
     size?: "sm" | "md";
     /**
      * antd `loading` — the toggle is mid-flight: a spinner replaces the thumb glyph and the control
@@ -579,28 +640,90 @@ export type PickerChromeProp = {
 };
 /** date-fns pattern, Intl options (including Japanese era), or a display function. */
 export type PickerDateFormatProp = string | Intl.DateTimeFormatOptions | ((date: Date) => string);
-/** @see DatePicker */
+/**
+ * @see DatePicker — ONE date control for every date-shaped question this library used to ask with
+ * four components (`DatePicker`, `DateRangePicker`, `MonthPicker`, `MonthRangePicker`).
+ *
+ * Two axes, both antd's: `picker` chooses the GRANULARITY of a selection, `range` chooses its
+ * CARDINALITY. Everything else — bounds, disabling, formatting, clearing, the open triad, the
+ * chrome ladder — is written once and therefore behaves the same on all eight combinations.
+ *
+ * ON THE NAME `picker`. It is antd's own prop name for this axis, and it already shipped here with
+ * exactly this union, so keeping it renames nothing and breaks no call site. (`granularity` is
+ * react-aria's spelling; this cluster is not on react-aria.) The house rule stated on `TreeProp` —
+ * map Ant's KEY-SHAPED names onto this package's controlled vocabulary and do not re-spell the
+ * rest — is what the surrounding props already do: `showTime`, `needConfirm`, `allowClear`,
+ * `cellRender`, `disabledDate`, `inputReadOnly`, `preserveInvalidOnBlur`, `renderExtraFooter`,
+ * `presets`, `order`, `minDate`/`maxDate` are all spelled antd's way, while selection is spelled
+ * `value`/`defaultValue`/`onValueChange` rather than antd's `onChange`.
+ */
 export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
     /** Display format; native submission remains ISO. */
     format?: PickerDateFormatProp;
     /** Parser for a custom display function or Intl era display; ISO always remains accepted. */
     parseFormat?: (text: string) => Date | undefined;
+    /**
+     * Selectable bounds, inclusive, at day precision (antd `minDate`/`maxDate`).
+     *
+     * These are the ONLY bounds props. `MonthPicker`/`MonthRangePicker` used to take
+     * `fromYear`/`toYear` numbers instead, which expressed strictly less (a whole year is the
+     * smallest thing they could say) and — measurably — clamped nothing: they only greyed the
+     * grid's year chevrons, while both routes into the value, the grid cells and the typed text,
+     * ignored them. `minDate`/`maxDate` are enforced on BOTH routes for every `picker`, so the
+     * keyboard is not a way around the rule the mouse obeys. Migration is mechanical:
+     * `fromYear={2024}` → `minDate={new Date(2024, 0, 1)}`, `toYear={2027}` →
+     * `maxDate={new Date(2027, 11, 31)}`.
+     */
     minDate?: Date;
     maxDate?: Date;
     showWeek?: boolean;
     needConfirm?: boolean;
+    /**
+     * Which period the PANEL opens on, independently of the value (antd `defaultPickerValue`, and
+     * like antd's it is RE-APPLIED every time the panel opens rather than only at mount).
+     *
+     * Without it a panel can only open on the value or on today, so "open on the fiscal year's
+     * start month" and "open on the month of the row being edited" have no expression — the two
+     * cases the parity audit files as P1. Only the period matters; the day is ignored.
+     */
+    defaultPickerValue?: Date;
+    /** Controlled panel period (antd `pickerValue`) — wins over `defaultPickerValue` and over the value. */
+    pickerValue?: Date;
+    /**
+     * GRANULARITY of one selection (antd `picker`). `date` picks a day from a month grid; `week`
+     * picks a day and normalises it to the locale's week start; `month`, `quarter` and `year` swap
+     * the day grid for a period grid and normalise to the period's first day.
+     *
+     * The emitted value is always a `Date` at the START of the chosen period, so a coarse
+     * selection interoperates with a fine one and with `DateRange`.
+     */
     picker?: "date" | "week" | "month" | "quarter" | "year";
+    /**
+     * Normalise the selection into ascending order (antd `order`; default `true`).
+     *
+     * ONE rule, applied to whichever value shape is in play: a `range` whose endpoints were picked
+     * backwards is SWAPPED, and a `multiple` selection is SORTED. The four split components spelled
+     * this two ways — `DatePicker.order` sorted an array, `DateRangePicker.order` swapped a pair,
+     * `MonthRangePicker` swapped unconditionally with no prop at all — which read as a collision
+     * but is one invariant seen through three value shapes. Set `false` to keep pick order.
+     */
     order?: boolean;
     showTime?: boolean | Pick<TimePickerProp, "hourStep" | "minuteStep" | "secondStep" | "showSeconds" | "use12Hours" | "disabledTime">;
-    presets?: {
-        label: React.ReactNode;
-        value: Date | (() => Date);
-    }[];
     placeholder?: PlaceholderProp;
-    disabled?: DisabledProp;
+    /**
+     * Inert control. With `range`, the TUPLE form `[from, to]` locks one endpoint and leaves the
+     * other editable (antd's RangePicker `disabled`) — "the start date is fixed by the contract,
+     * only the end is negotiable" is a real screen that a scalar cannot say. The tuple is
+     * meaningless without `range` and is ignored there.
+     */
+    disabled?: DisabledProp | [boolean, boolean];
     className?: ClassNameProp;
     id?: IdProp;
-    /** Form field name — emits the value as an ISO-8601 `yyyy-MM-dd` string for native submission. */
+    /**
+     * Form field name. Submits ISO-8601 at the precision `picker` selects — `2026-03-01` for
+     * `date`/`week`, `2026-03` for `month` and `quarter` (the period's first month), `2026` for
+     * `year`. With `range`, the pair submits as `${name}_from` / `${name}_to`.
+     */
     name?: NameProp;
     locale?: DayPickerProps["locale"];
     fromDate?: Date;
@@ -608,11 +731,11 @@ export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
     cellRender?: CalendarCellRenderProp;
     /**
-     * Forbid individual dates by predicate — the rule `fromDate`/`toDate` cannot express, because a
+     * Forbid individual dates by predicate — the rule `minDate`/`maxDate` cannot express, because a
      * business calendar is rarely one contiguous range: 土日, a closed accounting period, a 祝日, a
      * day already fully booked.
      *
-     * Applies to BOTH routes into the value. The calendar greys the cell out, and a date typed into
+     * Applies to BOTH routes into the value. The grid greys the cell out, and a date typed into
      * the field is rejected the same way an unparseable one is — otherwise the keyboard becomes a
      * way around the rule the mouse obeys.
      */
@@ -623,104 +746,50 @@ export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
      */
     allowClear?: AllowClearProp;
 } & Pick<CalendarFooterProp, "showToday" | "showClose">;
-/** Single and multiple selections keep their callback types distinct. */
+/**
+ * CARDINALITY. One `Date`, an array of them, or a `DateRange` — each keeps its own callback type,
+ * so a consumer never has to narrow what it gets back.
+ */
 export type DatePickerProp = DatePickerBaseProp & ({
+    range?: false;
     multiple?: false;
     value?: Date;
     defaultValue?: Date;
     onValueChange?: (value: Date | undefined) => void;
+    presets?: {
+        label: React.ReactNode;
+        value: Date | (() => Date);
+    }[];
 } | {
+    range?: false;
     multiple: true;
     value?: Date[];
     defaultValue?: Date[];
     onValueChange?: (value: Date[] | undefined) => void;
     showTime?: false;
-});
-/** @see MonthPicker */
-export type MonthPickerProp = FieldA11yProps & PickerChromeProp & {
-    value?: ValueProp<Date>;
-    defaultValue?: DefaultValueProp<Date | undefined>;
-    onValueChange?: OnValueChangeProp<Date | undefined>;
-    placeholder?: PlaceholderProp;
-    disabled?: DisabledProp;
-    className?: ClassNameProp;
-    id?: IdProp;
-    /** Form field name — submits the display text (`yyyy/MM`). */
-    name?: NameProp;
-    /** Clamp the year navigation (inclusive). */
-    fromYear?: number;
-    toYear?: number;
-    /**
-     * Show an inline ✕ to clear the value when one is set (default true). The OBJECT form
-     * additionally replaces the icon and/or the accessible label (antd `allowClear`).
-     */
-    allowClear?: AllowClearProp;
-    /** Node appended below the month grid (antd `renderExtraFooter`). */
-    renderExtraFooter?: () => React.ReactNode;
-};
-/**
- * @see MonthRangePicker — both edges are normalized to the FIRST day of their month
- * (the `DateRange` shape is shared with DateRangePicker so ranges interop).
- */
-export type MonthRangePickerProp = FieldA11yProps & PickerChromeProp & {
-    value?: ValueProp<DateRange>;
-    defaultValue?: DefaultValueProp<DateRange | undefined>;
-    onValueChange?: OnValueChangeProp<DateRange | undefined>;
-    placeholder?: PlaceholderProp;
-    disabled?: DisabledProp;
-    className?: ClassNameProp;
-    id?: IdProp;
-    /** Form field name — emits the range as `${name}_from` / `${name}_to` `yyyy/MM` fields. */
-    name?: NameProp;
-    /** Clamp the year navigation (inclusive). */
-    fromYear?: number;
-    toYear?: number;
+    presets?: {
+        label: React.ReactNode;
+        value: Date | (() => Date);
+    }[];
+} | {
     /**
-     * Show an inline ✕ to clear the range when one is set (default true). The OBJECT form
-     * additionally replaces the icon and/or the accessible label (antd `allowClear`).
+     * Two endpoints in one field — antd's `DatePicker.RangePicker`, which this library used to
+     * ship as two separate components (`DateRangePicker`, `MonthRangePicker`). It composes with
+     * `picker`, so a month range is `<DatePicker range picker="month" />`.
      */
-    allowClear?: AllowClearProp;
-    /** Node appended below the month grid (antd `renderExtraFooter`). */
-    renderExtraFooter?: () => React.ReactNode;
-};
-/** @see DateRangePicker */
-export type DateRangePickerProp = FieldA11yProps & PickerChromeProp & {
-    /** Display format; native submission remains ISO. */
-    format?: PickerDateFormatProp;
-    /** Parser for a custom display function or Intl era display; ISO always remains accepted. */
-    parseFormat?: (text: string) => Date | undefined;
-    minDate?: Date;
-    maxDate?: Date;
-    showWeek?: boolean;
-    needConfirm?: boolean;
+    range: true;
+    multiple?: false;
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+    showTime?: false;
+    /** Which endpoints may stay empty (antd `allowEmpty`), as `[from, to]`. */
+    allowEmpty?: [boolean, boolean];
     presets?: {
         label: React.ReactNode;
         value: DateRange | (() => DateRange);
     }[];
-    allowEmpty?: [boolean, boolean];
-    order?: boolean;
-    value?: ValueProp<DateRange>;
-    defaultValue?: DefaultValueProp<DateRange | undefined>;
-    onValueChange?: OnValueChangeProp<DateRange | undefined>;
-    placeholder?: PlaceholderProp;
-    disabled?: DisabledProp;
-    className?: ClassNameProp;
-    id?: IdProp;
-    /** Form field name — emits the range as `${name}_from` / `${name}_to` ISO `yyyy-MM-dd` fields. */
-    name?: NameProp;
-    locale?: DayPickerProps["locale"];
-    fromDate?: Date;
-    toDate?: Date;
-    /** Decorate a day cell — see `CalendarCellRenderProp`. */
-    cellRender?: CalendarCellRenderProp;
-    /** Forbid individual dates by predicate — see `DatePickerProp.disabledDate`. */
-    disabledDate?: (date: Date) => boolean;
-    /**
-     * antd `allowClear` — an inline ✕ that clears the range when one is set (default true). The
-     * OBJECT form additionally replaces the icon and/or the accessible label.
-     */
-    allowClear?: AllowClearProp;
-} & Pick<CalendarFooterProp, "showToday" | "showClose">;
+});
 /**
  * Which times a TimePicker refuses, in antd's shape: one call returns the two predicates, so a
  * consumer computing them from the same source (a start time, a shift window) does that work once
@@ -889,6 +958,18 @@ export type SearchSelectBaseProp = {
     readOnly?: boolean;
     /** Trigger height tier — forwarded to the underlying Button. Default matches Button's own default. */
     size?: SizeProp;
+    /**
+     * Trigger width, the SAME axis `SelectTrigger` carries on the compound API — `full` (default,
+     * the width a field wants), `auto` (the width the current label wants), `bounded` (one width
+     * from `--control-bounded-width`, for a trigger whose value varies in length).
+     *
+     * It exists here because the two APIs are one component to a caller: `docs/CONSUMER-RULES.md`
+     * rule 5 tells everyone that "a Select outside a form takes `width=\"auto\"`", and until this
+     * prop existed that sentence was false for the `options` form — a filter bar with two of them
+     * stretched each to full width and stacked them, and the only way out was to wrap each in a
+     * `<Flex width={280}>`.
+     */
+    width?: ControlWidthProp;
     /**
      * Validation status (antd `status`). `error` recolours the trigger AND sets `aria-invalid`;
      * `warning` recolours only. A `status` set here never overrides an `aria-invalid` arriving from

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

@@ -1,6 +1,6 @@
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
-export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
+export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";

package/dist/props/components/layout.prop.d.ts

@@ -1,7 +1,7 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
 /**
  * Arrangement of the page header's title band and its `extra` slot below the 640px step.
@@ -505,6 +505,17 @@ export type MobileShellProp = {
      * device-frame preview, a phone view embedded in a wider page).
      */
     height?: MobileShellHeightProp;
+    /**
+     * How wide the shell is allowed to get. `"fill"` (default) takes the whole inline size it is
+     * given — a real handheld, where that IS the phone. `"phone"` caps it at
+     * `--mobile-shell-max-inline-size` and centres the column, for the case `height="fill"` already
+     * names on the other axis: a handheld screen rendered on a viewport wider than a handheld.
+     *
+     * Measured at a 1280px viewport before this axis existed: `max-inline-size: none`, shell 1232px
+     * wide, a four-destination tab bar spread across the whole screen. `height` had two named values
+     * for exactly these two contexts and `width` had none — the asymmetry was the bug.
+     */
+    width?: MobileShellWidthProp;
     className?: ClassNameProp;
 };
 /**

package/dist/props/components/navigation.prop.d.ts

@@ -190,7 +190,19 @@ export type StepItemProp = {
  */
 export type StepsTypeProp = "default" | "dot" | "inline" | "navigation";
 /** @see Steps */
-export type StepsProp = {
+/**
+ * The rest of a native `<ol>`'s attributes ride through to the list element.
+ *
+ * Not a convenience: without them a consumer had no supported handle on the rendered list at all,
+ * so its browser test bound to `.ui-steps-list > li[data-status]` — an INTERNAL class and an
+ * internal data attribute, both of which this package is free to rename. A `data-testid` or an
+ * `id` on the component is what that test wanted, and every sibling primitive already forwards
+ * them.
+ *
+ * `aria-label` is the one exception: the list names itself from the locale, and a caller-supplied
+ * name wins — the same contract Progress and Toolbar follow.
+ */
+export type StepsProp = Omit<React.OlHTMLAttributes<HTMLOListElement>, "onChange" | "defaultValue" | "children" | "type"> & {
     items?: StepItemProp[];
     value?: number;
     defaultValue?: number;
@@ -235,6 +247,17 @@ export type TabItemProp = {
     closable?: boolean;
     /** Ant Design `Tab.closeIcon` — replaces the default × on this item's remove button. */
     closeIcon?: React.ReactNode;
+    /**
+     * Ant Design `Tab.forceRender`. Mounts THIS panel up front and keeps it mounted while another
+     * tab is selected, without turning that on for the whole strip the way `destroyOnHidden={false}`
+     * does — so the one panel holding a live chart, a scroll position or an unsent draft survives a
+     * tab switch while the rest are still destroyed.
+     *
+     * antd 5.25 also grew a per-item `destroyOnHidden`. It is NOT offered here: on this component
+     * "kept mounted" is a single state, so an item-level `destroyOnHidden: false` would be a second
+     * prop spelling exactly what `forceRender: true` already says (cardinal rule #32).
+     */
+    forceRender?: boolean;
 };
 /**
  * @see Tabs — trigger-strip appearance. This is Ant Design's `type` spelled in the library's own
@@ -264,6 +287,32 @@ export type TabsExtraProp = React.ReactNode | {
  * commas, and an inline `(target, action) => void` leaks its second PARAMETER as a phantom prop.
  */
 export type TabsOnEditProp = (target: string | React.MouseEvent<HTMLButtonElement>, action: "add" | "remove") => void;
+/**
+ * @see Tabs — what the trigger strip does when there are more tabs than fit its container.
+ *
+ * This is Ant Design's `more`, mapped onto the `overflow` vocabulary this package already uses
+ * for the same question (`FilterBarOverflowProp` on Toolbar) rather than re-spelled: antd names
+ * the AFFORDANCE it happens to draw, this library names the BEHAVIOUR and owns the affordance.
+ *
+ * `scroll` (the default, and what every strip does today) keeps one bounded row that scrolls its
+ * own inline overflow, with `TabsList` re-pinning the active — or, under manual activation, the
+ * focused — trigger. `menu` keeps all of that AND puts a real button beside the strip listing the
+ * tabs currently outside the scrollport.
+ *
+ * WHERE THIS DELIBERATELY DIVERGES FROM ANTD, and why: antd REMOVES the overflowing tabs from the
+ * bar and re-homes them in the dropdown. The WAI-ARIA APG tab pattern requires the tablist to own
+ * every tab, and a tab hidden with `display: none` cannot take roving focus — so removing them
+ * would make the keyboard route to those tabs disappear along with the pixels. Here the strip
+ * still holds and still scrolls to every tab; the menu is an ADDITIONAL pointer route to the ones
+ * a mouse user cannot currently see. The APG wins; the affordance is kept.
+ */
+export type TabsOverflowProp = "scroll" | "menu";
+/**
+ * @see Tabs — Ant Design `onTabClick`. A NAMED alias rather than an inline signature for the same
+ * reason as `TabsOnEditProp`: the catalog-sync guard splits an object type on top-level commas,
+ * so an inline `(value, event) => void` leaks its second PARAMETER as a phantom prop.
+ */
+export type TabsOnTabClickProp = (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
 /** @see Tabs — high-level tabs with optional `items` array. */
 export type TabsProp = {
     items?: TabItemProp[];
@@ -292,6 +341,32 @@ export type TabsProp = {
     addIcon?: React.ReactNode;
     /** Ant Design `hideAdd` — keep `editable-card`'s remove buttons but drop the add button. */
     hideAdd?: boolean;
+    /**
+     * Ant Design `removeIcon` — the strip-wide default glyph on `editable-card`'s remove shortcut.
+     * A `TabItemProp.closeIcon` on one item still wins over it, which is antd's own precedence.
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * Ant Design `more`. Default `scroll` — the behaviour every strip has today, unchanged.
+     * @see TabsOverflowProp for what `menu` adds and where it parts company with antd.
+     *
+     * The default is deliberately NOT `menu`: switching it would change the rendered bar for every
+     * existing consumer at once, and which of the two a dense strip wants is a service decision, not
+     * a library one.
+     */
+    overflow?: TabsOverflowProp;
+    /**
+     * Ant Design `onTabClick`. Fires on EVERY pointer activation of a trigger — including a click on
+     * the tab that is already selected, where `onValueChange` is silent by design. That is the whole
+     * reason it is a separate prop and not a re-spelling of `onValueChange` (cardinal rule #32):
+     * "the user asked for this tab again" (re-fetch, close a drawer, scroll a panel back to the top)
+     * is a different event from "the selection changed".
+     *
+     * Keyboard activation is NOT routed here, and that is the APG winning over antd: under
+     * `activationMode="manual"` the arrow keys move focus without activating, so a key-driven
+     * "click" would be a fiction. Use `onValueChange` for selection, whatever moved it.
+     */
+    onTabClick?: TabsOnTabClickProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -244,6 +244,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "layout";
         readonly description: "MobileShell block-size contract — viewport (100dvh root, the real app) | fill (fills a bounded parent, e.g. a device-frame preview)";
     };
+    readonly MobileShellWidthProp: {
+        readonly file: "vocabulary/layout.prop.ts";
+        readonly category: "layout";
+        readonly description: "MobileShell inline-size contract — fill (takes the whole inline size, the default) | phone (caps at the handheld measure and centres, for a handheld screen on a wider viewport)";
+    };
     readonly CenteredShellPresetProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
@@ -841,7 +846,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly MobileShellProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", "ActionProp", "MobileShellHeightProp", {
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", "ActionProp", "MobileShellHeightProp", "MobileShellWidthProp", {
             readonly field: "header";
             readonly local: true;
             readonly reason: "MobileShell app-bar band — the screen title row; it absorbs the top safe-area inset when no statusBar precedes it.";
@@ -1304,21 +1309,6 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"];
     };
-    readonly MonthPickerProp: {
-        readonly group: "data-entry";
-        readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"];
-    };
-    readonly MonthRangePickerProp: {
-        readonly group: "data-entry";
-        readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"];
-    };
-    readonly DateRangePickerProp: {
-        readonly group: "data-entry";
-        readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"];
-    };
     readonly CalendarCellRenderProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -2012,6 +2002,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly ["HandlerProp"];
     };
+    readonly TabsOnTabClickProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["HandlerProp"];
+    };
+    readonly TabsOverflowProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly TabItemProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";

package/dist/props/registry.js

@@ -242,6 +242,11 @@ const VOCABULARY_REGISTRY = {
     category: "layout",
     description: "MobileShell block-size contract \u2014 viewport (100dvh root, the real app) | fill (fills a bounded parent, e.g. a device-frame preview)"
   },
+  MobileShellWidthProp: {
+    file: "vocabulary/layout.prop.ts",
+    category: "layout",
+    description: "MobileShell inline-size contract \u2014 fill (takes the whole inline size, the default) | phone (caps at the handheld measure and centres, for a handheld screen on a wider viewport)"
+  },
   CenteredShellPresetProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
@@ -861,6 +866,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp",
       "ActionProp",
       "MobileShellHeightProp",
+      "MobileShellWidthProp",
       {
         field: "header",
         local: true,
@@ -1472,21 +1478,6 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"]
   },
-  MonthPickerProp: {
-    group: "data-entry",
-    file: "components/data-entry.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"]
-  },
-  MonthRangePickerProp: {
-    group: "data-entry",
-    file: "components/data-entry.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"]
-  },
-  DateRangePickerProp: {
-    group: "data-entry",
-    file: "components/data-entry.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "PlaceholderProp", "DisabledProp", "IdProp"]
-  },
   CalendarCellRenderProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2316,6 +2307,16 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/navigation.prop.ts",
     vocabulary: ["HandlerProp"]
   },
+  TabsOnTabClickProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: ["HandlerProp"]
+  },
+  TabsOverflowProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
   TabItemProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

package/dist/props/vocabulary/data.prop.d.ts

@@ -100,6 +100,18 @@ export type SelectedIdsProp = Set<string>;
 export type OnSelectChangeProp = (next: Set<string>) => void;
 /** Table density change callback. */
 export type OnTableDensityChangeProp = (density: TableDensityProp) => void;
+/**
+ * A row's STATE, drawn as a leading-edge rail plus a wash — the same six tones, with the same
+ * names and the same meanings, that `Card accent` already carries. A row that needs attention and
+ * a card that needs attention should not be two vocabularies.
+ *
+ * It is a state, never a category: colour is not the only signal a row may carry (WCAG 1.4.1), so
+ * the reason still belongs in a cell — a Badge, a status column, an icon with a label. The rail
+ * is what makes that cell findable in a long table, not a replacement for it.
+ */
+export type TableRowToneProp = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
+/** Per-row tone resolver — return `undefined` for a row in the ordinary state. */
+export type RowToneProp<T> = (row: T) => TableRowToneProp | undefined;
 /** Sort change callback — undefined clears sort. */
 export type OnSortChangeProp = (sort: {
     key: string;