@godxjp/ui 19.4.0 → 19.4.2

package/dist/components/data-display/badge.d.ts

@@ -19,7 +19,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all render a
      * `<button>`, whose content model is phrasing content only), inside a `<label>` or a `<p>`.
      * It swaps the TAG only — the chip's own `inline-flex` box, icon and label are unchanged, and
-     * both the icon `<svg>` and the label `<span>` are already phrasing content (gh#354).
+     * both the icon `<svg>` and the label `<span>` are already phrasing content.
      */
     as?: "div" | "span";
     /** Corner shape — `default` (badge radius) · `pill` (fully rounded) · `sharp` (square). */

package/dist/components/data-display/list-row.d.ts

@@ -15,6 +15,8 @@ export type ListRowDensity = ListRowDensityProp;
 export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
     as?: "div" | "li";
+    /** Use the supplied link as the entire row. Do not nest interactive trailing controls. */
+    asChild?: boolean;
     /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
     leading?: React.ReactNode;
     /** Primary line — rendered in medium weight. */

package/dist/components/data-display/list-row.js

@@ -1,12 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";
 const ListRow = React.forwardRef(
   ({
     as = "div",
+    asChild = false,
+    children,
     leading,
     title,
     description,
@@ -19,9 +22,18 @@ const ListRow = React.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation();
-    const Comp = as;
+    const Comp = asChild ? Slot : as;
     const truncate = overflow !== "wrap";
-    return /* @__PURE__ */ jsxs(
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
+      leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
+      /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
+        /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
+        description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
+      ] }),
+      trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
+    ] });
+    return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
@@ -32,15 +44,7 @@ const ListRow = React.forwardRef(
         "data-unread": unread === true ? "" : void 0,
         className: cn("ui-list-row", className),
         ...props,
-        children: [
-          unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
-          leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
-          /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
-            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
-            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
-          ] }),
-          trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
-        ]
+        children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, content) : content
       }
     );
   }

package/dist/components/data-display/popover.d.ts

@@ -9,7 +9,7 @@ export declare function PopoverAnchor(props: React.ComponentProps<typeof Popover
  * edge and draw its own separators across the full width. The popover drops its own padding by
  * zeroing `--popover-space-inset` ON THE PANEL, so the inset stays one token (a service that
  * retunes `--popover-space-inset` still owns every padded popover) and no consumer has to reach
- * for a zero-padding utility, which no service theme can reach (gh#354).
+ * for a zero-padding utility, which no service theme can reach.
  */
 type PopoverContentFlush = {
     flush?: FlushProp;

package/dist/components/data-display/table.d.ts

@@ -65,7 +65,7 @@ export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttr
 /**
  * The cell's CONTENT owns its inset — an expanded detail panel, a nested table, a full-bleed media
  * strip. The cell drops its own padding so the child reaches the cell edges; without it the only
- * route was a zero-padding utility at the call site, which no service theme can reach (gh#354).
+ * route was a zero-padding utility at the call site, which no service theme can reach.
  */
 type TableCellFlush = {
     flush?: FlushProp;

package/dist/components/data-display/timeline-grid.js

@@ -25,7 +25,9 @@ function resolveEvent(event) {
   if (startMin === null || endMin === null) return null;
   return { event, startMin, endMin: endMin > startMin ? endMin : endMin + MINUTES_PER_DAY };
 }
+const EVENT_MIN_MINUTES = 36;
 function placeColumn(events) {
+  const drawnEnd = (e) => Math.max(e.endMin, e.startMin + EVENT_MIN_MINUTES);
   const sorted = [...events].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
   const placed = [];
   let cluster = [];
@@ -42,8 +44,8 @@ function placeColumn(events) {
     if (entry.startMin >= clusterEnd) closeCluster();
     let lane = laneEnds.findIndex((end) => end <= entry.startMin);
     if (lane === -1) lane = laneEnds.length;
-    laneEnds[lane] = entry.endMin;
-    clusterEnd = Math.max(clusterEnd, entry.endMin);
+    laneEnds[lane] = drawnEnd(entry);
+    clusterEnd = Math.max(clusterEnd, drawnEnd(entry));
     cluster.push({ ...entry, lane, lanes: 1 });
   }
   closeCluster();
@@ -93,7 +95,7 @@ const TimelineGrid = React.forwardRef(
     const axis = React.useMemo(() => resolveWindow(start, end, resolved), [start, end, resolved]);
     const span = axis.endMin - axis.startMin;
     const hours = span / 60;
-    const step = Number.isFinite(interval) && interval > 0 ? interval : 1;
+    const step = Number.isFinite(interval) && interval > 0 ? Math.max(interval, 1 / 60) : 1;
     const byColumn = React.useMemo(() => {
       const buckets = columns.map(() => []);
       for (const entry of resolved) {

package/dist/components/data-entry/checkbox.js

@@ -26,7 +26,7 @@ const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
         // service overriding --checkbox-checked-background got no fill change at all. Radix sets
         // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
         // both knobs default to exactly the values these utilities hard-coded.
-        "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
+        "peer ui-checkbox aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
         className
       ),
       ...props,

package/dist/components/data-entry/form-field.js

@@ -114,7 +114,7 @@ function FormField({
               asChild: true,
               id: labelId,
               className: "ui-inline-xs text-[length:var(--form-label-font-size)]",
-              children: /* @__PURE__ */ jsxs(
+              children: /* @__PURE__ */ jsx(
                 "span",
                 {
                   onClick: () => {
@@ -123,10 +123,10 @@ function FormField({
                     const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
                     (focusable ?? el).focus();
                   },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: label }),
-                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
-                  ]
+                  children: /* @__PURE__ */ jsxs("span", { children: [
+                    label,
+                    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-form-field-required", children: "*" })
+                  ] })
                 }
               )
             }

package/dist/components/data-entry/input.js

@@ -9,7 +9,7 @@ const inputBaseClass = [
   "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
-  "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
+  "aria-invalid:border-destructive"
 ];
 const Input = React.forwardRef(
   ({

package/dist/components/data-entry/radio.js

@@ -27,7 +27,7 @@ const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
       // and reads --disabled-opacity. The utility was layered after components, so it silently
       // outranked that token — a service theme's --disabled-opacity never reached a radio.
       // Byte-identical: --disabled-opacity defaults to 0.5.
-      "ui-radio aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none",
+      "ui-radio aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow outline-none",
       className
     ),
     ...props,

package/dist/components/data-entry/search-input.d.ts

@@ -1,20 +1,4 @@
 import * as React from "react";
-import { type FieldA11yProps } from "../../lib/field-a11y.js";
-interface SearchInputProps extends FieldA11yProps {
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    debounce?: number;
-    /** Fires on EVERY keystroke (immediate) — required to keep a controlled `value` responsive. */
-    onValueChange?: (q: string) => void;
-    /** Fires with the DEBOUNCED term. Optional — omit it when you drive filtering off `onValueChange`. */
-    onSearch?: (q: string) => void;
-    label?: React.ReactNode;
-    ariaLabel?: string;
-    className?: string;
-    inputClassName?: string;
-    id?: string;
-    disabled?: boolean;
-}
+import type { SearchInputProp } from "../../props/components/data-entry.prop.js";
+export type SearchInputProps = SearchInputProp;
 export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, ...ariaProps }: SearchInputProps): React.JSX.Element;
-export {};

package/dist/components/data-entry/search-input.js

@@ -37,7 +37,10 @@ function SearchInput({
   React.useEffect(() => {
     onSearchRef.current = onSearch;
   });
+  const lastSearch = React.useRef(debounced);
   React.useEffect(() => {
+    if (lastSearch.current === debounced) return;
+    lastSearch.current = debounced;
     onSearchRef.current?.(debounced);
   }, [debounced]);
   const setValue = (v) => {

package/dist/components/data-entry/select.js

@@ -99,7 +99,7 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", widt
       className: cn(
         controlTriggerClass,
         width === "auto" ? "w-auto" : "w-full",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
+        "aria-invalid:border-destructive data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
         className
       ),
       ...props,

package/dist/components/general/button.d.ts

@@ -10,6 +10,8 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     size?: import("../../props/index.js").ButtonSizeProp;
     shape?: import("../../props/index.js").ShapeProp;
     fullWidth?: boolean;
+    wrap?: boolean;
+    align?: import("../../props/index.js").TextAlignProp;
     asChild?: import("../../props/index.js").AsChildProp;
     onClick?: import("../../props/index.js").OnClickProp;
     disabled?: import("../../props/index.js").DisabledProp;

package/dist/components/general/button.js

@@ -47,6 +47,8 @@ const Button = React.forwardRef(
     size,
     shape,
     fullWidth = false,
+    wrap = false,
+    align = "center",
     asChild = false,
     loading = false,
     loadingText,
@@ -76,13 +78,15 @@ const Button = React.forwardRef(
         "data-size": size ?? "default",
         "data-shape": shape ?? "default",
         "data-full-width": fullWidth ? "" : void 0,
+        "data-wrap": wrap ? "" : void 0,
+        "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,
         "aria-busy": isLoading || void 0,
         disabled: isLoading || disabled,
         type: asChild ? void 0 : type ?? "button",
         className: cn(
           fullWidth && "w-full",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "aria-invalid:border-destructive",
           "[&_svg]:pointer-events-none [&_svg]:shrink-0",
           buttonVariants({ variant, size, shape, className })
         ),

package/dist/components/general/inert-background.js

@@ -7,7 +7,8 @@ let mounted = 0;
 function sync() {
   for (const el of document.querySelectorAll("[data-aria-hidden]")) {
     if (owned.has(el) || el.hasAttribute("inert")) continue;
-    if (el.querySelector(TABBABLE)) {
+    if (el.matches("[data-radix-focus-guard]")) continue;
+    if (el.matches(TABBABLE) || el.querySelector(TABBABLE)) {
       el.setAttribute("inert", "");
       owned.add(el);
     }

package/dist/components/layout/app-shell.js

@@ -51,7 +51,7 @@ function AppShell({
           type: "button",
           variant: "ghost",
           size: "sm",
-          className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
+          className: "app-mobile-nav-trigger",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
           children: /* @__PURE__ */ jsx(Menu, { className: "size-[var(--app-shell-mobile-nav-icon-size)]", "aria-hidden": "true" })

package/dist/components/layout/master-detail.d.ts

@@ -5,4 +5,4 @@ export type MasterDetailProps = MasterDetailProp;
  * drives. Either way `master` comes first in DOM order, so below the threshold the regions stack
  * list-then-detail.
  */
-export declare function MasterDetail({ master, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;
+export declare function MasterDetail({ master, mobilePane, detailBack, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;

package/dist/components/layout/master-detail.js

@@ -1,6 +1,10 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 function MasterDetail({
   master,
+  mobilePane,
+  detailBack,
   children,
   rail = "detail",
   railWidth = "standard",
@@ -10,11 +14,45 @@ function MasterDetail({
   detailLabel,
   detailId
 }) {
+  const rootRef = useRef(null);
+  const thresholdRef = useRef(null);
+  const [compact, setCompact] = useState(false);
+  const navigable = mobilePane !== void 0;
+  useLayoutEffect(() => {
+    if (!navigable || !rootRef.current || !thresholdRef.current) return;
+    const root = rootRef.current;
+    const threshold = thresholdRef.current;
+    const measure = () => setCompact(root.getBoundingClientRect().width < threshold.getBoundingClientRect().width);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    observer.observe(threshold);
+    return () => observer.disconnect();
+  }, [navigable, collapseBelow]);
+  const masterRef = useRef(null);
+  const detailRef = useRef(null);
+  useEffect(() => {
+    if (!mobilePane) return;
+    if (mobilePane === "detail" && masterRef.current?.getClientRects().length === 0) {
+      const heading = detailRef.current?.querySelector("h1, h2, h3");
+      if (heading) {
+        heading.tabIndex = -1;
+        heading.focus();
+      } else {
+        detailRef.current?.focus();
+      }
+    } else if (mobilePane === "master" && detailRef.current?.getClientRects().length === 0) {
+      masterRef.current?.querySelector("a[aria-current], a[href]")?.focus({ preventScroll: true });
+    }
+  }, [mobilePane, detailLabel, compact]);
   const bounded = masterViewport !== "auto";
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: "ui-master-detail",
+      "data-mobile-compact": navigable && compact ? "" : void 0,
+      "data-mobile-pane": mobilePane,
       "data-rail": rail,
       "data-rail-width": railWidth,
       "data-master-viewport": masterViewport,
@@ -23,22 +61,28 @@ function MasterDetail({
         /* @__PURE__ */ jsx(
           "section",
           {
+            ref: masterRef,
             className: "ui-master-detail-master",
             "aria-label": masterLabel,
             tabIndex: bounded ? 0 : void 0,
             children: master
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "section",
           {
+            ref: detailRef,
             className: "ui-master-detail-detail",
             id: detailId,
             "aria-label": detailLabel,
             tabIndex: -1,
-            children
+            children: [
+              mobilePane && detailBack ? /* @__PURE__ */ jsx("div", { className: "ui-master-detail-back", children: detailBack }) : null,
+              children
+            ]
           }
-        )
+        ),
+        navigable ? /* @__PURE__ */ jsx("span", { className: "ui-master-detail-measure", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { ref: thresholdRef }) }) : null
       ]
     }
   );

package/dist/components/layout/mobile-shell.d.ts

@@ -1,7 +1,7 @@
 import type { MobileShellProp } from "../../props/components/layout.prop.js";
 export type { MobileShellProp, MobileShellProp as MobileShellProps, } from "../../props/components/layout.prop.js";
 /**
- * MobileShell — the HANDHELD app shell (gh#354 §6): a status band, an app bar, ONE scroll region,
+ * MobileShell — the HANDHELD app shell: a status band, an app bar, ONE scroll region,
  * a sticky action bar and a bottom tab bar, in that fixed order.
  *
  * The fourth root shell. The other three cannot express a phone app: `AppShell` REQUIRES a sidebar

package/dist/components/layout/responsive-grid.js

@@ -1,24 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
-  "pricing-plans": { sm: 3, md: 3, lg: 3 }
+  "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
 };
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
+      base: 1,
       sm: Math.min(columns, 2),
       md: Math.min(columns, 3),
       lg: columns
     };
   }
   return {
-    sm: columns.sm ?? 1,
-    md: columns.md ?? columns.sm ?? 1,
-    lg: columns.lg ?? columns.md ?? columns.sm ?? 1
+    base: columns.base ?? 1,
+    sm: columns.sm ?? columns.base ?? 1,
+    md: columns.md ?? columns.sm ?? columns.base ?? 1,
+    lg: columns.lg ?? columns.md ?? columns.sm ?? columns.base ?? 1
   };
 }
 function toStyle(resolved) {
   return {
+    "--responsive-grid-base": resolved.base,
     "--responsive-grid-sm": resolved.sm,
     "--responsive-grid-md": resolved.md,
     "--responsive-grid-lg": resolved.lg

package/dist/components/navigation/app-setting-picker.js

@@ -139,7 +139,16 @@ const AppSettingPicker = React.forwardRef(
                   // (`data-[state=open]:border-ring`, from controlTriggerClass) and the
                   // focus-visible ring are untouched, so keyboard and "is this open" affordance
                   // still hold.
-                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground"
+                  // Bề ngang phải là UTILITY, không phải luật class. SelectTrigger phát `w-full`,
+                  // mà utility nằm sau components trong thứ tự layer nên `inline-size` khai trong
+                  // .ui-app-setting-picker-icon luôn thua. Trong một khe co theo nội dung của
+                  // topbar, `width: 100%` co lại bằng chính nội dung, tức 18px thay vì ô vuông
+                  // --control-height. Nhánh có nhãn ngay dưới đã phải tự vệ đúng như vậy bằng
+                  // `w-auto`. Giá trị vẫn đọc token chứ không phải một con số.
+                  cn(
+                    "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground",
+                    "w-[length:var(--control-height)]"
+                  )
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
                   // A form field that wants a full-width control passes

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";

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",

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

@@ -140,7 +140,7 @@ export type BadgeProp = {
     /**
      * Render element — `div` (default) or `span` when the chip sits in a phrasing context where a
      * `<div>` is invalid HTML (inside a `<button>` rendered by TabsTrigger/PopoverTrigger/Button,
-     * a `<label>`, a `<p>`). Swaps the tag only (gh#354).
+     * a `<label>`, a `<p>`). Swaps the tag only.
      */
     as?: "div" | "span";
     variant?: "default" | "secondary" | "outline";

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

@@ -107,7 +107,7 @@ export type FlexProp = React.HTMLAttributes<HTMLDivElement> & {
      * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all of which
      * render a `<button>`, whose content model is phrasing content only), inside a `<label>`, or
      * inside a `<p>`. Same closed shape as `ListRow`'s `as` — it swaps the TAG, nothing else: the
-     * `.ui-flex` rules carry `display: flex`, so the box is identical either way (gh#354).
+     * `.ui-flex` rules carry `display: flex`, so the box is identical either way.
      */
     as?: "div" | "span";
     direction?: FlexDirectionProp;
@@ -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. */
@@ -282,7 +288,7 @@ export type AuthShellProp = {
  * `AppShell` REQUIRES a sidebar (its bar is a grid area beside the nav rail), `AuthShell` is the
  * UNAUTHENTICATED root and centres a ~24rem card, and `CenteredShell` is a scrolling DOCUMENT —
  * its `main` scrolls the page, which is exactly what a handheld app must not do. Composing one out
- * of `Card` + `ui-card-inset*` (what docs/showcase/case6 did before gh#354) reproduces the look
+ * of `Card` + `ui-card-inset*` (what docs/showcase/case6 once did) reproduces the look
  * and none of the two behaviours that matter on a real device:
  *
  *  1. The shell is the only scroll container. The root is exactly one screen tall, so the DOCUMENT

package/dist/props/registry.d.ts

@@ -930,7 +930,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     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 +998,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";

package/dist/props/registry.js

@@ -1024,6 +1024,7 @@ const COMPONENT_PROP_REGISTRY = {
     group: "general",
     file: "components/general.prop.ts",
     vocabulary: [
+      "TextAlignProp",
       "ButtonVariantProp",
       "SizeProp",
       "ShapeProp",
@@ -1147,7 +1148,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",

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

@@ -57,7 +57,7 @@ export type AuthShellPresetProp = "default" | "login" | "registration" | "device
  * `"none"` is a DELIBERATE zero, not the absence of a value: two lines that read as ONE block —
  * a name over its role, a weekday over its date, a tab bar with no seam between its triggers.
  * Without it those stacks had to carry `gap="xs"`, which is a visual change forced by a missing
- * step rather than by design (gh#354).
+ * step rather than by design.
  */
 export type GapProp = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */