@godxjp/ui 19.4.1 → 19.4.2

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/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/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-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. */

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/styles/control.css

@@ -2063,3 +2063,32 @@
     color: var(--button-count-secondary-color, hsl(var(--secondary)));
   }
 }
+
+@layer components {
+  .ui-button[data-wrap] {
+    --button-wrap-min-height: var(--control-height);
+    height: auto;
+    min-height: var(--button-wrap-min-height);
+    max-inline-size: 100%;
+    padding-block: var(--space-1);
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .ui-button[data-wrap][data-size="xs"] {
+    --button-wrap-min-height: var(--control-height-xs);
+  }
+  .ui-button[data-wrap][data-size="sm"] {
+    --button-wrap-min-height: var(--control-height-sm);
+  }
+  .ui-button[data-wrap][data-size="lg"] {
+    --button-wrap-min-height: var(--control-height-lg);
+  }
+  .ui-button[data-align="start"] {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .ui-button[data-align="end"] {
+    justify-content: flex-end;
+    text-align: end;
+  }
+}

package/dist/styles/data-display-layout.css

@@ -983,7 +983,9 @@
     box-sizing: border-box;
     inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
     block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
-    min-block-size: var(--timeline-grid-event-min-height);
+    min-block-size: calc(
+      var(--timeline-grid-hour-height) * var(--timeline-grid-event-min-height-minutes) / 60
+    );
     padding-inline-end: var(--timeline-grid-event-gap);
     padding-block-end: var(--timeline-grid-event-gap);
   }
@@ -1064,3 +1066,22 @@
     pointer-events: none;
   }
 }
+
+@layer components {
+  a.ui-list-row {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  a.ui-list-row:hover {
+    background: hsl(var(--muted));
+  }
+  a.ui-list-row[aria-current="page"] {
+
+    background: hsl(var(--accent));
+    box-shadow: inset var(--space-1) 0 0 hsl(var(--primary));
+  }
+  [dir="rtl"] a.ui-list-row[aria-current="page"] {
+    box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
+  }
+}

package/dist/styles/focus-ring.css

@@ -34,6 +34,7 @@
 
   :is(
     .ui-focus-ring-outline,
+    a.ui-list-row,
     .ui-accordion-trigger,
     .ui-carousel-dot,
     .ui-rating-star,
@@ -57,6 +58,10 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
+  a.ui-list-row {
+    --focus-ring-offset: calc(-1 * var(--focus-ring-width));
+  }
+
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }
@@ -78,4 +83,8 @@
     outline: none;
     box-shadow: none;
   }
+
+  [aria-invalid="true"] {
+    --focus-ring-color: var(--destructive);
+  }
 }

package/dist/styles/form-layout.css

@@ -1,6 +1,12 @@
 
 
 @layer components {
+
+  .ui-form-field-required {
+    margin-inline-start: var(--space-inline-xs);
+    color: hsl(var(--destructive));
+  }
+
   .ui-form {
     display: flex;
     flex-direction: column;

package/dist/styles/layout.css

@@ -239,7 +239,7 @@
   .ui-responsive-grid {
     display: grid;
     gap: var(--space-stack-md);
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
   }
 
   .ui-responsive-grid[data-gap="none"] {
@@ -1348,3 +1348,38 @@
     }
   }
 }
+
+@layer components {
+  .ui-master-detail-back {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-pane] {
+    position: relative;
+  }
+  .ui-master-detail-measure {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .ui-master-detail-measure > span {
+    display: block;
+    inline-size: var(--master-detail-collapse-below);
+    block-size: 0;
+  }
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="master"] > .ui-master-detail-detail,
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="detail"] > .ui-master-detail-master {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-compact] > .ui-master-detail-master {
+    max-block-size: none;
+    overflow: visible;
+  }
+  .ui-master-detail[data-mobile-compact] .ui-master-detail-back {
+    display: block;
+    margin-block-end: var(--space-3);
+  }
+}

package/dist/styles/navigation-layout.css

@@ -82,7 +82,8 @@
     }
   }
 
-  .ui-pagination .ui-button svg {
+  .ui-pagination .ui-button svg,
+  .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }

package/dist/tokens/components/data-display.css

@@ -86,7 +86,8 @@
   --timeline-grid-hour-height: 2.5rem;
   --timeline-grid-axis-width: 3.25rem;
   --timeline-grid-column-min-width: 6rem;
-  --timeline-grid-event-min-height: 1.5rem;
+
+  --timeline-grid-event-min-height-minutes: 36;
   --timeline-grid-axis-font-size: var(--font-size-2xs);
   --timeline-grid-head-font-size: var(--font-size-xs);
   --timeline-grid-event-font-size: var(--font-size-2xs);

package/dist/tokens/foundation.css

@@ -14,7 +14,8 @@
   --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
   --muted: 45 15% 95%;
-  --muted-foreground: 44 5% 42%;
+
+  --muted-foreground: 44 5% 39%;
   --accent: 40 13% 91%;
   --accent-foreground: 48 8% 13%;
   --destructive: 357 64% 44%;

package/docs/data-display/list-row.tsx

@@ -26,6 +26,27 @@ export default function Demo() {
       subtitle="leading · title/description · trailing action · short entity lists inside a Card"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Navigation rows</CardTitle>
+            <CardDescription>
+              The whole row is one link, including its metadata. Current location uses aria-current.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              asChild
+              title="Roles and permissions"
+              description="Inspect organization access"
+              overflow="wrap"
+            >
+              <a href="?section=roles" aria-current="page" />
+            </ListRow>
+            <ListRow asChild title="Members" description="Assign roles to organization members">
+              <a href="?section=members" />
+            </ListRow>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>アクティブなセッション Active sessions</CardTitle>

package/docs/data-entry/search-input.tsx

@@ -7,6 +7,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
  * SearchInput — debounced search box with a built-in clear button.
+ * onSearch runs after a changed query settles, never on mount.
  * Always listen to onSearch (NOT onChange). Uncontrolled for local filters,
  * controlled when search state lives in a URL param. Never a raw <input>.
  * Composed only from real @godxjp/ui components.

package/docs/general/button/index.md

@@ -10,3 +10,7 @@ For filter tabs / segmented toggles that show a per-option total, pass the `coun
 (`<Button variant="outline" count={18}>Chờ bay</Button>`) instead of nesting a `Badge` —
 it renders a borderless counter pill, formatted in the active locale and toned to the
 button variant, so an outline button never ends up with a doubled border.
+
+For long collection labels, use `wrap` with `align="start"` and `fullWidth`. The button
+grows vertically while retaining the size preset's minimum target height. Keep badges
+and other row metadata outside the button. `align="end"` follows the document direction.

package/docs/layout/master-detail.tsx

@@ -15,6 +15,9 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Flex, MasterDetail, PageContainer } from "@godxjp/ui/layout";
 
 /**
+ * Pass mobilePane="master" or "detail" for one-pane navigation below the token-owned collapse threshold.
+ * Supply detailBack with a native back link; own selection in URL/router history.
+ * Omit mobilePane to retain the original stacked composition.
  * MasterDetail · チーム画面 (SCR-110) の正準構成 — 流動的な一覧 + 固定幅の詳細レール。
  *
  * Shows: rail="detail" (既定 · 1fr / 320px) と rail="master" (先頭ナビゲーションレール)、

package/docs/layout/responsive-grid.tsx

@@ -16,7 +16,7 @@ import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layou
  * with no external container-type declaration. Direct children are typically
  * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
  * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
- * object { sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
+ * object { base?, sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
  * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
  * real @godxjp/ui components.
  */
@@ -27,6 +27,23 @@ export default function Demo() {
       subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Compact mobile metrics</CardTitle>
+            <CardDescription>
+              columns=&#123;&#123; base: 2, sm: 4 &#125;&#125; keeps two columns below the first
+              container breakpoint and four above it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 2, sm: 4 }}>
+              <StatCard label="Services" value="3" />
+              <StatCard label="Members" value="14" />
+              <StatCard label="Invitations" value="0" />
+              <StatCard label="Invoices" value="2" />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>コンテナクエリで折り返し（自己所有のクエリコンテナ）</CardTitle>
@@ -36,7 +53,7 @@ export default function Demo() {
               折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
               （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
               折り返す。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は var(--space-stack-md)
-              に固定で、prop では変更できない。
+              が既定で、gap prop で変更できます。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.4.1",
-  "godxUiMcp": "19.4.1",
+  "version": "19.4.2",
+  "godxUiMcp": "19.4.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",