@godxjp/ui 27.6.0 → 27.8.0

package/dist/components/data-display/range-timeline.d.ts

@@ -6,6 +6,12 @@ export type RangeTimelineRow = {
     end: number;
     startLabel: string;
     endLabel: string;
+    /**
+     * Nesting level, 0 for a top-level row. Rows arrive flat and depth-first (a parent, then its
+     * descendants); a row is a parent when the row after it is deeper. The component draws the
+     * indent (`--range-timeline-indent-width` per level) and the disclosure.
+     */
+    depth?: number;
 };
 export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     label: string;
@@ -28,6 +34,15 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
+     * parent hides every descendant row — label and bar.
+     */
+    expandedValues?: readonly string[];
+    /** Uncontrolled initial expanded parents. Omitted: every parent starts expanded. */
+    defaultExpandedValues?: readonly string[];
+    /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
+    onExpandedValuesChange?: (values: string[]) => void;
 };
 /** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
 export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -51,4 +66,13 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
+     * parent hides every descendant row — label and bar.
+     */
+    expandedValues?: readonly string[];
+    /** Uncontrolled initial expanded parents. Omitted: every parent starts expanded. */
+    defaultExpandedValues?: readonly string[];
+    /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
+    onExpandedValuesChange?: (values: string[]) => void;
 } & React.RefAttributes<HTMLElement>>;

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

@@ -2,13 +2,67 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
 import { Button } from "../general/button.js";
 import { Text } from "../general/typography.js";
 import { cn } from "../../lib/utils.js";
 const RangeTimeline = React.forwardRef(
-  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, bordered = true, className, ...props }, ref) {
+  function RangeTimeline2({
+    label,
+    columns,
+    bands,
+    rows,
+    today,
+    onRangeChange,
+    bordered = true,
+    expandedValues,
+    defaultExpandedValues,
+    onExpandedValuesChange,
+    className,
+    ...props
+  }, ref) {
     const { t } = useTranslation();
+    const reactId = React.useId();
+    const depthOf = (row) => Math.max(0, Math.floor(row.depth ?? 0));
+    const nested = rows.some((row) => depthOf(row) > 0);
+    const parents = rows.filter((row, index) => index + 1 < rows.length && depthOf(rows[index + 1]) > depthOf(row)).map((row) => row.id);
+    const [collapsed, setCollapsed] = React.useState(
+      () => new Set(
+        defaultExpandedValues ? parents.filter((id) => !defaultExpandedValues.includes(id)) : []
+      )
+    );
+    const isExpanded = (id) => expandedValues ? expandedValues.includes(id) : !collapsed.has(id);
+    const toggleRow = (id) => {
+      const open = !isExpanded(id);
+      if (!expandedValues) {
+        const next = new Set(collapsed);
+        if (open) next.delete(id);
+        else next.add(id);
+        setCollapsed(next);
+      }
+      onExpandedValuesChange?.(
+        parents.filter((parent) => parent === id ? open : isExpanded(parent))
+      );
+    };
+    let foldedAt = null;
+    const visibleRows = rows.filter((row) => {
+      const depth = depthOf(row);
+      if (foldedAt !== null && depth > foldedAt) return false;
+      foldedAt = parents.includes(row.id) && !isExpanded(row.id) ? depth : null;
+      return true;
+    });
+    const siblingsOf = (index) => {
+      const depth = depthOf(visibleRows[index]);
+      let first = index;
+      while (first > 0 && depthOf(visibleRows[first - 1]) >= depth) first -= 1;
+      let size = 0, position = 0;
+      for (let i = first; i < visibleRows.length && depthOf(visibleRows[i]) >= depth; i += 1) {
+        if (depthOf(visibleRows[i]) !== depth) continue;
+        size += 1;
+        if (i === index) position = size;
+      }
+      return { size, position };
+    };
     const units = Math.max(
       1,
       columns.reduce((sum, column) => sum + column.units, 0)
@@ -73,7 +127,7 @@ const RangeTimeline = React.forwardRef(
                   index
                 )) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
                 (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
                 // each vertical rule runs the full body height exactly under its header column.
                 /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
@@ -88,103 +142,148 @@ const RangeTimeline = React.forwardRef(
                     index
                   )) })
                 ] }),
-                rows.map((row) => {
+                visibleRows.map((row, index) => {
+                  const idBase = `${reactId}-row-${rows.indexOf(row)}`;
                   const delta = preview?.id === row.id ? preview.delta : 0;
                   const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
                   const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
                   const left = Math.max(0, start), right = Math.min(units, end + 1);
-                  return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
-                    /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
-                    /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
-                      today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: "ui-range-timeline-today",
-                          style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
-                        }
-                      ),
-                      right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
-                        /* @__PURE__ */ jsx(
-                          ChevronLeft,
-                          {
-                            "aria-hidden": "true",
-                            className: "ui-range-timeline-outside-icon"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
-                      ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
-                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
-                        /* @__PURE__ */ jsx(
-                          ChevronRight,
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "ui-range-timeline-row",
+                      ...nested && {
+                        role: "listitem",
+                        "aria-level": depthOf(row) + 1,
+                        "aria-setsize": siblingsOf(index).size,
+                        "aria-posinset": siblingsOf(index).position
+                      },
+                      children: [
+                        nested ? /* @__PURE__ */ jsxs(
+                          "div",
                           {
-                            "aria-hidden": "true",
-                            className: "ui-range-timeline-outside-icon"
+                            className: "ui-range-timeline-label",
+                            "data-nested": "true",
+                            style: { "--range-timeline-depth": depthOf(row) },
+                            children: [
+                              parents.includes(row.id) ? /* @__PURE__ */ jsxs(
+                                Button,
+                                {
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  className: "ui-range-timeline-disclosure",
+                                  "aria-expanded": isExpanded(row.id),
+                                  "aria-labelledby": `${idBase}-toggle ${idBase}-label`,
+                                  onClick: () => toggleRow(row.id),
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { id: `${idBase}-toggle`, hidden: true, children: t("rangeTimeline.childRows") }),
+                                    isExpanded(row.id) ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                                      ChevronRight,
+                                      {
+                                        "aria-hidden": "true",
+                                        className: "ui-range-timeline-disclosure-collapsed"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-range-timeline-disclosure-spacer" }),
+                              /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
+                            ]
                           }
-                        )
-                      ] })),
-                      right > left && /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "ui-range-timeline-bar",
-                          style: {
-                            insetInlineStart: `${left / units * 100}%`,
-                            inlineSize: `${(right - left) / units * 100}%`
-                          },
-                          children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                            (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                          ).map((edge) => /* @__PURE__ */ jsx(
-                            Button,
+                        ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+                        /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                          today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                            "span",
                             {
-                              variant: "ghost",
-                              size: "icon-xs",
-                              className: "ui-range-timeline-handle",
-                              "data-edge": edge,
-                              "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                              onPointerDown: (event) => {
-                                const width = track.current?.getBoundingClientRect().width ?? 0;
-                                if (!width || event.button !== 0) return;
-                                event.currentTarget.setPointerCapture(event.pointerId);
-                                drag.current = {
-                                  id: row.id,
-                                  edge,
-                                  x: event.clientX,
-                                  width,
-                                  direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                                };
-                              },
-                              onPointerMove: (event) => {
-                                if (drag.current)
-                                  setPreview({
-                                    id: drag.current.id,
-                                    edge: drag.current.edge,
-                                    delta: deltaAt(event.clientX)
-                                  });
-                              },
-                              onPointerUp: complete,
-                              onPointerCancel: cancel,
-                              onLostPointerCapture: cancel,
-                              onKeyDown: (event) => {
-                                if (event.key === "Escape") {
-                                  cancel();
-                                  return;
-                                }
-                                const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                                if (!step) return;
-                                event.preventDefault();
-                                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                                const delta2 = step * direction;
-                                if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                                  onRangeChange(row.id, edge, delta2);
+                              "aria-hidden": "true",
+                              className: "ui-range-timeline-today",
+                              style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                            }
+                          ),
+                          right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                            /* @__PURE__ */ jsx(
+                              ChevronLeft,
+                              {
+                                "aria-hidden": "true",
+                                className: "ui-range-timeline-outside-icon"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
+                          ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
+                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
+                            /* @__PURE__ */ jsx(
+                              ChevronRight,
+                              {
+                                "aria-hidden": "true",
+                                className: "ui-range-timeline-outside-icon"
+                              }
+                            )
+                          ] })),
+                          right > left && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "ui-range-timeline-bar",
+                              style: {
+                                insetInlineStart: `${left / units * 100}%`,
+                                inlineSize: `${(right - left) / units * 100}%`
                               },
-                              children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                            },
-                            edge
-                          ))
-                        }
-                      )
-                    ] })
-                  ] }, row.id);
+                              children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                                (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                              ).map((edge) => /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  className: "ui-range-timeline-handle",
+                                  "data-edge": edge,
+                                  "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                                  onPointerDown: (event) => {
+                                    const width = track.current?.getBoundingClientRect().width ?? 0;
+                                    if (!width || event.button !== 0) return;
+                                    event.currentTarget.setPointerCapture(event.pointerId);
+                                    drag.current = {
+                                      id: row.id,
+                                      edge,
+                                      x: event.clientX,
+                                      width,
+                                      direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                                    };
+                                  },
+                                  onPointerMove: (event) => {
+                                    if (drag.current)
+                                      setPreview({
+                                        id: drag.current.id,
+                                        edge: drag.current.edge,
+                                        delta: deltaAt(event.clientX)
+                                      });
+                                  },
+                                  onPointerUp: complete,
+                                  onPointerCancel: cancel,
+                                  onLostPointerCapture: cancel,
+                                  onKeyDown: (event) => {
+                                    if (event.key === "Escape") {
+                                      cancel();
+                                      return;
+                                    }
+                                    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                                    if (!step) return;
+                                    event.preventDefault();
+                                    const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                                    const delta2 = step * direction;
+                                    if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                                      onRangeChange(row.id, edge, delta2);
+                                  },
+                                  children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                                },
+                                edge
+                              ))
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    row.id
+                  );
                 })
               ] })
             ]

package/dist/components/layout/topbar-item.d.ts

@@ -13,6 +13,8 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     hideBelow?: import("../../props/index.js").BreakpointProp;
     icon?: React.ReactNode;
+    iconHideFrom?: import("../../props/index.js").BreakpointProp;
+    labelHideBelow?: import("../../props/index.js").BreakpointProp;
     badge?: React.ReactNode;
     badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;

package/dist/components/layout/topbar-item.js

@@ -2,10 +2,40 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, icon, badge, badgeTone, children, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({
+  asChild = false,
+  className,
+  type,
+  hideBelow,
+  icon,
+  iconHideFrom,
+  labelHideBelow,
+  badge,
+  badgeTone,
+  children,
+  ...props
+}, ref) {
   const Comp = asChild ? Slot : "button";
   const showBadge = !asChild && badge !== void 0 && badge !== "";
-  const iconNode = !asChild && icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx("span", { "data-slot": "topbar-item-icon", className: "ui-topbar-item-icon", children: icon }) : null;
+  const iconNode = icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-icon",
+      className: "ui-topbar-item-icon",
+      "data-hide-from": iconHideFrom,
+      children: icon
+    }
+  ) : null;
+  const labelOf = (label) => labelHideBelow === void 0 || label === void 0 || label === null || label === false ? label : /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-label",
+      className: "ui-topbar-item-label",
+      "data-hide-below": labelHideBelow,
+      children: label
+    }
+  );
+  const slotted = asChild && (iconNode !== null || labelHideBelow !== void 0) && React.isValidElement(children) ? React.cloneElement(children, void 0, iconNode, labelOf(children.props.children)) : children;
   const badgeNode = showBadge ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -24,9 +54,9 @@ const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, clas
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: asChild ? slotted : /* @__PURE__ */ jsxs(Fragment, { children: [
         iconNode,
-        children,
+        labelOf(children),
         badgeNode
       ] })
     }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.6.0",
+  "version": "27.8.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -607,6 +607,7 @@
     "trendCurrent": "current"
   },
   "rangeTimeline": {
+    "childRows": "Child rows",
     "outsideAfter": "After the visible range",
     "outsideBefore": "Before the visible range",
     "schedule": "Schedule"

package/dist/i18n/messages/ja.json

@@ -594,6 +594,7 @@
     "trendCurrent": "現在"
   },
   "rangeTimeline": {
+    "childRows": "子の行",
     "outsideAfter": "表示範囲より後",
     "outsideBefore": "表示範囲より前",
     "schedule": "スケジュール"

package/dist/i18n/messages/vi.json

@@ -595,6 +595,7 @@
     "trendCurrent": "hiện tại"
   },
   "rangeTimeline": {
+    "childRows": "Hàng con",
     "outsideAfter": "Sau khoảng đang xem",
     "outsideBefore": "Trước khoảng đang xem",
     "schedule": "Lịch công việc"

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

@@ -1354,8 +1354,24 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * visible label, not from the glyph. For a glyph that must carry a name, or one that needs a
      * step other than the bar's, pass `<Icon as={…} size=… label=… />` — as this prop's value or as
      * a child — and it keeps its own metric and its own semantics.
+     *
+     * Rendered under `asChild` too: the slot is inserted ahead of the child element's own children,
+     * and the child element stays the cell (gh#726).
      */
     icon?: ReactNode;
+    /**
+     * Drop the `icon` slot FROM a breakpoint step upwards — `Flex hideFrom`'s contract, scoped to
+     * the cell's glyph, so a cell reads label-only on a wide bar without the consumer wrapping the
+     * glyph (gh#726). Purely decorative: the accessible name is unaffected.
+     */
+    iconHideFrom?: BreakpointProp;
+    /**
+     * Visually hide the cell's label BELOW a breakpoint step — `Flex hideBelow`'s contract, scoped to
+     * the label — so the cell collapses to icon-only on a narrow bar (gh#726). The label stays in the
+     * accessibility tree (visually hidden, not `display: none`), so the collapsed cell keeps its
+     * accessible name. Under `asChild` the child element's own children are the label.
+     */
+    labelHideBelow?: BreakpointProp;
     /**
      * Unread count OVERLAID on the cell's glyph — the notification-bell affordance the cell's own use
      * cases name (gh#398). Pass the CONTENT ONLY, exactly like `SidebarItemProp.badge`: a number, a

package/dist/props/registry.d.ts

@@ -1187,6 +1187,14 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "asChild";
             readonly local: true;
             readonly reason: "Radix Slot passthrough — merges onto the child";
+        }, "BreakpointProp", {
+            readonly field: "iconHideFrom";
+            readonly local: true;
+            readonly reason: "Flex `hideFrom` scoped to the cell's icon slot — label-only from a breakpoint up without hand-wrapping the glyph (gh#726).";
+        }, {
+            readonly field: "labelHideBelow";
+            readonly local: true;
+            readonly reason: "Flex `hideBelow` scoped to the cell's label — icon-only below a breakpoint; visually hidden so the accessible name survives (gh#726).";
         }];
     };
     readonly NavListProp: {
@@ -2950,7 +2958,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
         }, {
             readonly field: "rows";
             readonly local: true;
-            readonly reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping.";
+            readonly reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping; optional `depth` nests them (flat, depth-first; a row is a parent when the next row is deeper).";
         }, {
             readonly field: "today";
             readonly local: true;
@@ -2959,6 +2967,18 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onRangeChange";
             readonly local: true;
             readonly reason: "An endpoint movement command, not an internally owned value; the consumer commits its row data.";
+        }, {
+            readonly field: "expandedValues";
+            readonly local: true;
+            readonly reason: "Controlled expanded parent row ids (gh#724) — the same spelling as `Tree expandedValues` (antd `expandedKeys` / Table `expandedRowKeys`), per docs/DESIGN-AUTHORITY.md.";
+        }, {
+            readonly field: "defaultExpandedValues";
+            readonly local: true;
+            readonly reason: "Uncontrolled initial expanded parents, same spelling as `Tree`; omitted, every parent starts expanded so adding `depth` never hides a row.";
+        }, {
+            readonly field: "onExpandedValuesChange";
+            readonly local: true;
+            readonly reason: "Next expanded parent ids, fired for controlled and uncontrolled timelines alike — the `Tree onExpandedValuesChange` callback.";
         }];
     };
     readonly ResponsiveGridProp: {

package/dist/props/registry.js

@@ -1284,7 +1284,18 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: [
       "ChildrenProp",
       "ClassNameProp",
-      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" }
+      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" },
+      "BreakpointProp",
+      {
+        field: "iconHideFrom",
+        local: true,
+        reason: "Flex `hideFrom` scoped to the cell's icon slot \u2014 label-only from a breakpoint up without hand-wrapping the glyph (gh#726)."
+      },
+      {
+        field: "labelHideBelow",
+        local: true,
+        reason: "Flex `hideBelow` scoped to the cell's label \u2014 icon-only below a breakpoint; visually hidden so the accessible name survives (gh#726)."
+      }
     ]
   },
   NavListProp: {
@@ -3460,7 +3471,7 @@ const COMPONENT_PROP_REGISTRY = {
       {
         field: "rows",
         local: true,
-        reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping."
+        reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping; optional `depth` nests them (flat, depth-first; a row is a parent when the next row is deeper)."
       },
       {
         field: "today",
@@ -3471,6 +3482,21 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onRangeChange",
         local: true,
         reason: "An endpoint movement command, not an internally owned value; the consumer commits its row data."
+      },
+      {
+        field: "expandedValues",
+        local: true,
+        reason: "Controlled expanded parent row ids (gh#724) \u2014 the same spelling as `Tree expandedValues` (antd `expandedKeys` / Table `expandedRowKeys`), per docs/DESIGN-AUTHORITY.md."
+      },
+      {
+        field: "defaultExpandedValues",
+        local: true,
+        reason: "Uncontrolled initial expanded parents, same spelling as `Tree`; omitted, every parent starts expanded so adding `depth` never hides a row."
+      },
+      {
+        field: "onExpandedValuesChange",
+        local: true,
+        reason: "Next expanded parent ids, fired for controlled and uncontrolled timelines alike \u2014 the `Tree onExpandedValuesChange` callback."
       }
     ]
   },

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

@@ -1454,6 +1454,36 @@
     inset-block: 0;
     border-inline-start: 1px solid hsl(var(--primary));
   }
+
+  .ui-range-timeline-label[data-nested="true"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline-start: calc(
+      var(--space-2) + var(--range-timeline-depth, 0) * var(--range-timeline-indent-width)
+    );
+  }
+  .ui-range-timeline-label-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .ui-range-timeline-disclosure,
+  .ui-range-timeline-disclosure-spacer {
+    flex-shrink: 0;
+  }
+  .ui-range-timeline-disclosure-spacer {
+    inline-size: var(--control-height-xs);
+  }
+
+  @media (pointer: coarse) {
+    .ui-range-timeline-disclosure-spacer {
+      inline-size: var(--control-height-default);
+    }
+  }
+
+  [dir="rtl"] .ui-range-timeline-disclosure-collapsed {
+    transform: scaleX(-1);
+  }
 }
 
 @layer components {

package/dist/styles/layout.css

@@ -1485,28 +1485,84 @@
   }
 
   @media (width >= 40rem) {
-    .ui-flex[data-hide-from="sm"] {
+    .ui-flex[data-hide-from="sm"],
+    .ui-topbar-item-icon[data-hide-from="sm"] {
       display: none;
     }
   }
 
   @media (width >= 48rem) {
-    .ui-flex[data-hide-from="md"] {
+    .ui-flex[data-hide-from="md"],
+    .ui-topbar-item-icon[data-hide-from="md"] {
       display: none;
     }
   }
 
   @media (width >= 64rem) {
-    .ui-flex[data-hide-from="lg"] {
+    .ui-flex[data-hide-from="lg"],
+    .ui-topbar-item-icon[data-hide-from="lg"] {
       display: none;
     }
   }
 
   @media (width >= 80rem) {
-    .ui-flex[data-hide-from="xl"] {
+    .ui-flex[data-hide-from="xl"],
+    .ui-topbar-item-icon[data-hide-from="xl"] {
       display: none;
     }
   }
+
+  @media (width < 40rem) {
+    .ui-topbar-item-label[data-hide-below="sm"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 48rem) {
+    .ui-topbar-item-label[data-hide-below="md"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 64rem) {
+    .ui-topbar-item-label[data-hide-below="lg"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 80rem) {
+    .ui-topbar-item-label[data-hide-below="xl"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
 }
 
 @layer components {

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

@@ -183,4 +183,6 @@
   --range-timeline-grid-width: var(--stroke-hairline);
 
   --range-timeline-muted-column-background: initial;
+
+  --range-timeline-indent-width: var(--space-4);
 }

package/docs/DESIGN-AUTHORITY.md

@@ -298,6 +298,23 @@ bottomEnd | none` (`TablePaginationPositionProp`, default `['bottomEnd']`), the
   purpose: omitted, `flow="columns"` keeps `start` and `flow="rows"` keeps the grid's stretch, so
   no existing grid moves; antd's `Row` default is `top` in every case.
 
+- **`RangeTimeline` nested rows take `Tree`'s spelling, not antd's (gh#724).** antd has no Gantt;
+  the nearest names are `Tree expandedKeys` / `defaultExpandedKeys` / `onExpand` and `Table
+expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mapped the Tree ones
+  onto its controlled vocabulary as `expandedValues` / `defaultExpandedValues` /
+  `onExpandedValuesChange`, and a second spelling of the same axis is what
+  `check:prop-vocabulary` exists to prevent — so `RangeTimeline` reuses those three names exactly
+  (the values are row `id`s). The shape is also `Tree`'s: flat rows plus `depth`, the component
+  owns the indent (`--range-timeline-indent-width`) and the disclosure. Two deliberate differences
+  from `Tree`: (1) a row is a parent when the NEXT row is deeper — derived from the depth-first list,
+  never from a `hasChildren` flag, so a disclosure can never promise children that are not there;
+  (2) omitted `defaultExpandedValues` starts every parent EXPANDED (a `Tree` starts closed), so
+  adding `depth` to an existing schedule never hides a row. The disclosure is a real `Button`
+  (the row is not a focusable tree item, so APG's one-tab-stop rule does not apply), and the rows
+  are a `list` of `listitem`s with `aria-level` / `aria-setsize` / `aria-posinset` — the lightest
+  role that carries a level without promising the `tree` / `treegrid` arrow-key model. A timeline
+  with no `depth > 0` keeps its pre-#724 markup byte for byte.
+
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/data-display/timeline.tsx

@@ -293,6 +293,47 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>親子のある作業（depth と折りたたみ）</CardTitle>
+            <CardDescription>
+              行を深さ優先の順に並べ、depth
+              を渡すと、ラベルの列の中で段ごとに字下げされます。次の行が
+              より深い行は親になり、開閉ボタンが付きます。「実装」は defaultExpandedValues
+              に含まれていないため折りたたまれており、子の行もそのバーも表示されません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              today={4}
+              columns={Array.from({ length: 14 }, (_, index) => {
+                const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
+                return {
+                  label: new Intl.NumberFormat(locale).format(index + 1),
+                  units: 1,
+                  muted: weekday === 0 || weekday === 6,
+                };
+              })}
+              defaultExpandedValues={["design", "api"]}
+              rows={[
+                { id: "design", label: "設計", depth: 0, start: 0, end: 5 },
+                { id: "screens", label: "画面設計", depth: 1, start: 0, end: 2 },
+                { id: "api", label: "API設計", depth: 1, start: 2, end: 5 },
+                { id: "endpoints", label: "エンドポイント定義", depth: 2, start: 2, end: 3 },
+                { id: "build", label: "実装", depth: 0, start: 6, end: 12 },
+                { id: "frontend", label: "フロントエンド", depth: 1, start: 6, end: 10 },
+                { id: "backend", label: "バックエンド", depth: 1, start: 6, end: 12 },
+                { id: "release", label: "リリース", depth: 0, start: 13, end: 13 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/topbar-item.tsx

@@ -29,6 +29,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   Settings,
+  Target,
   Users,
 } from "lucide-react";
 
@@ -178,6 +179,42 @@ export default function Demo() {
               />
             </CardContent>
           </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>リンクのセルと、幅で畳むセル</CardTitle>
+              <CardDescription>
+                `asChild` でもセルは `icon`
+                スロットを子要素の中に差し込み、リンクそのものがセルです。 `labelHideBelow`
+                はその幅未満でラベルを視覚的にだけ隠すので、アイコンだけになっても
+                ラベルがアクセシブルネームとして残ります。`iconHideFrom`
+                はその幅以上でアイコンを外します。 ビューポートを 640px
+                の前後に動かして確認してください。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <>
+                    <TopbarItem asChild icon={<Target aria-hidden="true" />}>
+                      <a href="#topbar-item-goals">目標</a>
+                    </TopbarItem>
+                    <TopbarItem
+                      asChild
+                      icon={<Target aria-hidden="true" />}
+                      labelHideBelow="sm"
+                      iconHideFrom="sm"
+                    >
+                      <a href="#topbar-item-goals-responsive">今期の目標</a>
+                    </TopbarItem>
+                    <TopbarItem icon={<Building2 aria-hidden="true" />} labelHideBelow="md">
+                      東京本社
+                    </TopbarItem>
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
         </Flex>
       </PageContainer>
     </AppShell>

package/package.json

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