@godxjp/ui 19.4.1 → 19.5.0

package/dist/components/navigation/tabs.js

@@ -47,9 +47,28 @@ function Tabs({
             "data-slot": "tabs-list",
             variant: variant === "line" ? "line" : "default",
             className: cn(
-              // The padding override is an arbitrary value reading the knob (never `p-0`): it must
-              // stay a UTILITY so tailwind-merge still drops the strip's own padding step, and a
-              variant === "line" && "h-auto w-full justify-start border-b p-[var(--tabs-list-line-space-inset)]",
+              // The inset override is an arbitrary value reading the knob (never `p-0`): it must
+              // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
+              //
+              // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
+              // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
+              // inset is 0px, so a focused trigger had NO block headroom at all — measured in
+              // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
+              // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
+              // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
+              // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
+              // the ring's outer reach and an equal negative block margin hands it straight back —
+              // the ring paints inside the scrollport and the strip's OUTER box is unchanged
+              // (measured: 38px before and after). Both values read the same token the ring is
+              // sized from, so the two can never drift apart.
+              //
+              // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
+              // border box) now sits the ring's reach below the triggers instead of flush. That is
+              // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
+              // the same block inset — so the two construction paths now agree. A service that
+              // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
+              // which exists for exactly that.
+              variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
               variant === "card" && "w-full justify-start",
               listClassName
             ),
@@ -134,12 +153,25 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     "data-slot": "tabs-trigger",
     className: cn(
-      // The SELECTED-state ring (`ring-1 ring-primary/25`) is scoped to the default/card lists —
-      // it competes with (and at equal specificity overrides) the `:focus-visible` ring. The
-      // focus-visible ring/outline below is deliberately left unscoped: every variant keeps a
-      // visible keyboard focus indicator (WCAG 2.4.7). The line indicator itself lives in
-      // src/styles/navigation-layout.css so it reads the --tabs-indicator-* tokens.
-      "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:ring-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=default]/tabs-list:data-[state=active]:ring-1 group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+      // SELECTED IS A BORDER TINT, NOT A RING — and that is a WCAG fix, not a style preference.
+      // It used to be `ring-1 ring-primary/25`, which writes `--tw-ring-shadow` in the UTILITIES
+      // layer and therefore overwrote the focus ring that focus-ring.css feeds from `components`.
+      // Measured: a focused ACTIVE tab painted `oklab(… / 0.25) 0 0 0 1px` and nothing else — a
+      // 1px indicator at 25% alpha, failing both clauses of SC 2.4.13 (2px perimeter, ≥3:1),
+      // while every other control in the library carried a full 2px ring. The trigger already
+      // owns `border border-transparent`, so tinting that border reproduces the selected hairline
+      // at the same colour and width with no layout change, and leaves `--tw-ring-shadow` free for
+      // the focus ring. `shadow-sm` stays: its composite READS `--tw-ring-shadow`, so the lift and
+      // the ring coexist.
+      //
+      // No `focus-visible:outline-1` either. It was the fallback that survived the clobber — a 1px
+      // currentColor line squeezed between the border and the ring once both paint. The ring is
+      // the indicator now; two marks for one state is what this pass exists to remove.
+      //
+      // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
+      // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
+      // border, focused is the 2px ring plus its halo outside it.
+      "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
       className
     ),
     ...props
@@ -151,7 +183,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     "data-slot": "tabs-content",
-    className: cn("focus-visible:ring-ring flex-1 outline-none focus-visible:ring-2", className),
+    className: cn("ui-focus-ring flex-1 outline-none", className),
     ...props
   }
 ));

package/dist/components/ui/segmented.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+/** One choice in a {@link Segmented}. */
+export type SegmentedOption = {
+    /** Wire value — what `onValueChange` reports and what a form submits. */
+    value: string;
+    /** Visible label. It is also the item's accessible name, so it is required. */
+    label: React.ReactNode;
+    /** Optional leading glyph, rendered `aria-hidden` beside the label. */
+    icon?: React.ReactNode;
+    /** Disable this one choice; the rest of the group stays operable. */
+    disabled?: boolean;
+};
+export type SegmentedProp = {
+    /** The closed set of choices, in reading order. */
+    options: readonly SegmentedOption[];
+    /** Controlled selection. */
+    value?: string;
+    /** Uncontrolled initial selection. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Form field name — submits the selected value with the form. */
+    name?: string;
+    id?: string;
+    className?: string;
+    /** Accessible name of the group. Required unless a visible label points at `id`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export type SegmentedProps = SegmentedProp;
+/**
+ * Segmented — one-of-N from a small, closed, always-visible set. antd's `Segmented`
+ * (docs/DESIGN-AUTHORITY.md names Ant Design the taxonomy authority) drawn on Radix's RadioGroup,
+ * which is this repo's authority for behaviour primitives.
+ *
+ * WHY NOT `ToggleGroup`. A ToggleGroup is a row of PRESSED buttons: `aria-pressed`, independently
+ * togglable, and — even at `type="single"` — deselectable, so "no theme at all" is a state the
+ * markup permits. A segmented control is a radio group: exactly one member is always chosen, the
+ * arrow keys move between members rather than Tab, and a screen reader must say "Light, radio
+ * button, 1 of 3, selected" and not "Light, toggle button, pressed". WAI-ARIA APG owns that
+ * distinction and it is not a skin.
+ *
+ * The primitive gives roving tabindex, arrow-key traversal (RTL-aware), the radiogroup/radio roles
+ * and the hidden input a native form submit needs. This file adds the antd geometry and nothing
+ * else — the focus mark comes from `ui-focus-ring`, the ONE source in styles/focus-ring.css.
+ */
+export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/segmented.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../lib/utils.js";
+const Segmented = React.forwardRef(function Segmented2({ options, value, defaultValue, onValueChange, disabled, name, id, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      ref,
+      id,
+      "data-slot": "segmented",
+      className: cn("ui-segmented", className),
+      orientation: "horizontal",
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      name,
+      ...props,
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        RadioGroupPrimitive.Item,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          "data-slot": "segmented-item",
+          className: "ui-segmented-item ui-focus-ring",
+          children: [
+            option.icon == null ? null : /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "segmented-item-icon",
+                className: "ui-segmented-item-icon",
+                "aria-hidden": "true",
+                children: option.icon
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label })
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+});
+export {
+  Segmented
+};

package/dist/email/tokens.generated.d.ts

@@ -29,7 +29,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly mutedForeground: {
         readonly cssVar: "--muted-foreground";
-        readonly hsl: "44 5% 42%";
+        readonly hsl: "44 5% 39%";
     };
     readonly border: {
         readonly cssVar: "--border";
@@ -44,8 +44,8 @@ export declare const EMAIL_COLOR_SOURCE: {
         readonly hsl: "60 33% 99%";
     };
     readonly focus: {
-        readonly cssVar: "--ring";
-        readonly hsl: "204 100% 39%";
+        readonly cssVar: "--primary";
+        readonly hsl: "204 100% 37%";
     };
     readonly brand: {
         readonly cssVar: "--brand";
@@ -103,7 +103,7 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
         readonly hsl: "48 9% 9%";
     };
     readonly focus: {
-        readonly cssVar: "--ring";
+        readonly cssVar: "--primary";
         readonly hsl: "204 90% 60%";
     };
     readonly brand: {

package/dist/email/tokens.generated.js

@@ -21,7 +21,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "mutedForeground": {
     "cssVar": "--muted-foreground",
-    "hsl": "44 5% 42%"
+    "hsl": "44 5% 39%"
   },
   "border": {
     "cssVar": "--border",
@@ -36,8 +36,8 @@ const EMAIL_COLOR_SOURCE = {
     "hsl": "60 33% 99%"
   },
   "focus": {
-    "cssVar": "--ring",
-    "hsl": "204 100% 39%"
+    "cssVar": "--primary",
+    "hsl": "204 100% 37%"
   },
   "brand": {
     "cssVar": "--brand",
@@ -94,7 +94,7 @@ const EMAIL_COLOR_SOURCE_DARK = {
     "hsl": "48 9% 9%"
   },
   "focus": {
-    "cssVar": "--ring",
+    "cssVar": "--primary",
     "hsl": "204 90% 60%"
   },
   "brand": {

package/dist/i18n/messages/en.json

@@ -336,7 +336,8 @@
     "themePicker": {
       "ariaLabel": "Theme",
       "light": "Light",
-      "dark": "Dark"
+      "dark": "Dark",
+      "system": "System"
     },
     "densityPicker": {
       "ariaLabel": "Density",

package/dist/i18n/messages/ja.json

@@ -324,7 +324,8 @@
     "themePicker": {
       "ariaLabel": "テーマ",
       "light": "ライト",
-      "dark": "ダーク"
+      "dark": "ダーク",
+      "system": "システム"
     },
     "densityPicker": {
       "ariaLabel": "密度",

package/dist/i18n/messages/vi.json

@@ -324,7 +324,8 @@
     "themePicker": {
       "ariaLabel": "Giao diện",
       "light": "Sáng",
-      "dark": "Tối"
+      "dark": "Tối",
+      "system": "Hệ thống"
     },
     "densityPicker": {
       "ariaLabel": "Mật độ",

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

@@ -28,7 +28,11 @@ export type AppProviderProp = {
     storageKey?: string;
     /** Persist user choices. Default: true. */
     persist?: boolean;
-    /** Initial light/dark theme — written to `<html data-theme>`. Default: `"light"`. */
+    /**
+     * Initial theme choice. `"light"` / `"dark"` are written straight to `<html data-theme>`;
+     * `"system"` defers to `prefers-color-scheme` and is re-resolved whenever the OS changes.
+     * Default: `"light"`.
+     */
     theme?: AppTheme;
     /**
      * Initial brand palette preset — written to `<html data-brand>`. OPT-IN: omit
@@ -101,7 +105,10 @@ export type AppContextValue = {
     requestHeaders: AppRequestHeaders;
     /** Configured timezone list; `undefined` → full IANA in the timezone-picker recipe. */
     timezoneOptions?: readonly AppTimezone[];
-    /** Current theme axes (mirror `<html data-*>` / inline `--scaling`). */
+    /**
+     * Current theme axes (mirror `<html data-*>` / inline `--scaling`). `theme` is the user's
+     * CHOICE — it can be `"system"`, which `<html data-theme>` never is.
+     */
     theme: AppTheme;
     brand: AppBrand | null;
     density: AppDensity;

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

@@ -8,7 +8,7 @@ import type { DateRange } from "react-day-picker";
 import type * as React from "react";
 import type { UploadFileItem } from "../../components/data-entry/upload-types.js";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
-import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp } from "../vocabulary/index.js";
+import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
 /** One-outline-per-group appearance for the compound InputOTP control. */
 export type InputOTPGroupAppearanceProp = "slots" | "grouped";
@@ -214,12 +214,17 @@ export type FormErrorsProviderProp = {
 export type SearchInputProp = FieldA11yProps & {
     id?: IdProp;
     label?: LabelProp;
+    ariaLabel?: string;
     placeholder?: PlaceholderProp;
-    value?: ValueProp;
-    onChange?: OnChangeProp;
-    onSearchChange?: OnSearchChangeProp;
-    debounceMs?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (query: string) => void;
+    /** Emits changed, debounced queries; does not run for the initial value. */
+    onSearch?: (query: string) => void;
+    debounce?: number;
+    disabled?: DisabledProp;
     className?: ClassNameProp;
+    inputClassName?: ClassNameProp;
 };
 /** @see Checkbox — extends Radix checkbox root props. */
 export type CheckboxProp = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;

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

@@ -43,6 +43,10 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Corner shape — `default` (control radius) · `pill` (fully rounded) · `sharp` (square). */
     shape?: ShapeProp;
     fullWidth?: boolean;
+    /** Allow a text button to grow vertically for multi-line labels. */
+    wrap?: boolean;
+    /** Logical content alignment, especially for full-width collection actions. */
+    align?: TextAlignProp;
     asChild?: AsChildProp;
     onClick?: OnClickProp;
     disabled?: DisabledProp;

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

@@ -127,7 +127,9 @@ export type FlexProp = React.HTMLAttributes<HTMLDivElement> & {
      */
     hideFrom?: BreakpointProp;
 };
+/** Container column counts; omitted steps inherit from the previous step. Base defaults to 1. */
 export type ResponsiveGridColumnsProp = number | {
+    base?: number;
     sm?: number;
     md?: number;
     lg?: number;
@@ -147,6 +149,10 @@ export type MasterDetailRailProp = "master" | "detail";
 export type MasterDetailMasterViewportProp = "auto" | "compact" | "standard";
 /** @see MasterDetail */
 export type MasterDetailProp = {
+    /** Opt into one-pane navigation on mobile (below the token-owned collapse threshold); desktop retains both panes. */
+    mobilePane?: "master" | "detail";
+    /** Back link shown above detail only in mobile navigation mode. */
+    detailBack?: ReactNode;
     /** Selectable collection; always first in DOM order, so the stacked order stays list-then-detail. */
     master: ReactNode;
     /** Detail surface for the current selection. */
@@ -625,6 +631,25 @@ export type SidebarItemProp = {
     /** Nested rows — renders a collapsible submenu group (the parent reads active when any child is). */
     children?: SidebarItemProp[];
 };
+/**
+ * A vertical route navigation that lives INSIDE a page, not in the shell (gh#374).
+ *
+ * Reuses `SidebarItemProp` and `SidebarLinkComponentProp` verbatim rather than minting a parallel
+ * vocabulary: the row is the same row, so a service that learnt the rail's item shape does not
+ * learn a second one, and a fix to the row reaches both.
+ */
+export type NavListProp = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
+    /** Rows, in reading order. `icon` is required by `SidebarItemProp` — the label aligns to it. */
+    items: SidebarItemProp[];
+    /** `SidebarItemProp.id` of the current route; that row gets `aria-current="page"`. */
+    activeId?: string;
+    /** Accessible name for the `<nav>` landmark. Required: a page may hold more than one. */
+    label: string;
+    /** Router link component — same contract as `Sidebar.linkComponent`. */
+    linkComponent?: SidebarLinkComponentProp;
+    /** Reports the activated row's id, for consumers driving navigation themselves. */
+    onSelect?: (id: string) => void;
+};
 /** @see Sidebar */
 export type SidebarItemData = SidebarItemProp;
 /**
@@ -648,8 +673,15 @@ export type SidebarLinkProp = {
     "aria-label"?: string;
     /** `"menuitem"` inside the collapsed rail's portaled flyout menu; absent for ordinary rows. */
     role?: "menuitem";
-    /** Reports selection to `Sidebar.onSelect` after the router link runs its own handler. */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Reports selection to `Sidebar.onSelect` after the router link runs its own handler.
+     *
+     * Typed on `Element`, NOT `HTMLElement`. Handler parameters are contravariant, so a link
+     * component that accepts the wider `MouseEvent<Element>` — Inertia's `<Link>`, react-router's,
+     * TanStack's — cannot receive a prop narrowed to `HTMLElement`, and the anchor-safe contract
+     * this type promises would only hold behind a cast at every call site.
+     */
+    onClick?: React.MouseEventHandler<Element>;
 };
 /**
  * A framework router link component driven by {@link SidebarLinkProp} — Inertia's `<Link href>`,
@@ -803,6 +835,26 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     /** Escape hatch — render fully custom bar content instead of the three slots. */
     children?: ReactNode;
 };
+/**
+ * @see TopbarItem — ONE interactive cell of a {@link TopbarProp} slot: the account button, a
+ * settings trigger, a notifications bell.
+ *
+ * It exists because the alternative is a `Button`, and a Button in a bar is a control that landed
+ * in the bar rather than a part of it — a pill of its own height floating in a taller strip, with
+ * its own hover surface and its own focus ring drawn around that pill. Fluent, SLDS, Atlassian and
+ * antd's ProLayout all draw a top-bar trigger the other way: the cell is as tall as the bar, its
+ * hover is the bar's own surface, and the focus mark is hosted INSIDE the cell because a
+ * full-bleed cell has nothing outside itself to ring.
+ */
+export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /**
+     * Render the bar-cell shape ONTO the child instead of emitting a `<button>` — for a router link,
+     * or for a menu/popover trigger that needs to own the element itself.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    className?: ClassNameProp;
+};
 /**
  * @see LegalDocumentShell — one entry of the table of contents + the matching document section.
  * `id` is the REAL anchor target (`href="#{id}"`, `<section id>`), so it must be unique on the page

package/dist/props/registry.d.ts

@@ -927,10 +927,24 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp"];
     };
+    readonly TopbarItemProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", {
+            readonly field: "asChild";
+            readonly local: true;
+            readonly reason: "Radix Slot passthrough — merges onto the child";
+        }];
+    };
+    readonly NavListProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "ClassNameProp"];
+    };
     readonly ButtonProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
-        readonly vocabulary: readonly ["ButtonVariantProp", "SizeProp", "ShapeProp", "AsChildProp", "DisabledProp", "OnClickProp", "PendingProp"];
+        readonly vocabulary: readonly ["TextAlignProp", "ButtonVariantProp", "SizeProp", "ShapeProp", "AsChildProp", "DisabledProp", "OnClickProp", "PendingProp"];
     };
     readonly RevealProp: {
         readonly group: "general";
@@ -998,7 +1012,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly SearchInputProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "PlaceholderProp", "OnSearchChangeProp"];
+        readonly vocabulary: readonly ["LabelProp", "PlaceholderProp", "DisabledProp", "ClassNameProp", "IdProp"];
     };
     readonly CheckboxProp: {
         readonly group: "data-entry";
@@ -1734,6 +1748,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/ui/rating.tsx";
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp"];
     };
+    readonly SegmentedProp: {
+        readonly group: "data-entry";
+        readonly file: "components/ui/segmented.tsx";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp"];
+    };
     readonly TagInputProp: {
         readonly group: "data-entry";
         readonly file: "components/ui/tag-input.tsx";

package/dist/props/registry.js

@@ -1020,10 +1020,25 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["ChildrenProp"]
   },
+  TopbarItemProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" }
+    ]
+  },
+  NavListProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["IdProp", "ClassNameProp"]
+  },
   ButtonProp: {
     group: "general",
     file: "components/general.prop.ts",
     vocabulary: [
+      "TextAlignProp",
       "ButtonVariantProp",
       "SizeProp",
       "ShapeProp",
@@ -1147,7 +1162,7 @@ const COMPONENT_PROP_REGISTRY = {
   SearchInputProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
-    vocabulary: ["LabelProp", "PlaceholderProp", "OnSearchChangeProp"]
+    vocabulary: ["LabelProp", "PlaceholderProp", "DisabledProp", "ClassNameProp", "IdProp"]
   },
   CheckboxProp: {
     group: "data-entry",
@@ -1937,6 +1952,19 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/ui/rating.tsx",
     vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp"]
   },
+  SegmentedProp: {
+    group: "data-entry",
+    file: "components/ui/segmented.tsx",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "NameProp",
+      "IdProp",
+      "ClassNameProp"
+    ]
+  },
   TagInputProp: {
     group: "data-entry",
     file: "components/ui/tag-input.tsx",

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

@@ -62,5 +62,14 @@ export type FlushProp = boolean;
  * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).
  */
 export type WidthProp = number | string;
-/** How a control sizes on the inline axis: fill its column, or hug its label. */
-export type ControlWidthProp = "full" | "auto";
+/**
+ * How a control sizes on the inline axis: fill its column, hug its label, or sit at a bounded
+ * width the theme owns.
+ *
+ * `bounded` exists because neither of the other two is right for a control whose VALUE varies in
+ * length — an organization switcher in a shell top bar is the canonical case. `full` swallows the
+ * bar; `auto` makes the bar reflow every time the selected value changes length. `bounded` reads
+ * `--control-bounded-width`, so the width is a knob rather than geometry hand-written at the call
+ * site (gh#375).
+ */
+export type ControlWidthProp = "full" | "auto" | "bounded";

package/dist/styles/alert-layout.css

@@ -191,6 +191,10 @@
     block-size: var(--toast-icon-size);
   }
 
+  [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * {
+    visibility: hidden;
+  }
+
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius);
     background: var(--skeleton-background, hsl(var(--muted)));

package/dist/styles/base.css

@@ -1,6 +1,8 @@
 
 @import "tailwindcss";
 
+@import "tw-animate-css";
+
 @layer godxjp-ui-responsive;
 
 [lang="ja"] {