@godxjp/ui 31.28.4 → 31.30.0

package/agent/tokens.json

@@ -1746,10 +1746,10 @@
     "value": "var(--heading-h3, var(--font-size-base))"
   },
   {
-    "description": "PageContainer `headerScale=\"display\"` (gh#1160) — an ARTICLE's headline (a Notion / note.com page). The 4xl display step, which already scales with the viewport through `--font-size-display`'s clamp (≈25px on a phone → 42px wide), so one knob covers phone and desktop and the compact step below does not apply. CJK titles need more leading than Latin ones at this size: 1.4, not the tight 1.25 a short Latin headline gets.",
+    "description": "PageContainer `headerScale=\"display\"` (gh#1160) — an ARTICLE's headline (a Notion / note.com page). The 4xl display step, which already scales with the viewport through `--font-size-display`'s clamp (≈25px on a phone → 42px wide), so one knob covers phone and desktop and the compact step below does not apply. CJK titles need more leading than Latin ones at this size: 1.4, not the tight 1.25 a short Latin headline gets. `initial` with the formula at the call site: it reads `--font-size-display`, a seed a consumer may re-scope, and a :root formula would compute once on <html> (docs/TOKENS.md · \"Role-mirror knobs MUST be initial\"). = the 4xl display step, resolved at the call site",
     "name": "--page-title-font-size-display",
     "tier": "semantic",
-    "value": "var( --font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)) )"
+    "value": "initial"
   },
   {
     "description": "Layout primitive tokens: page, section, stack, inline.",
@@ -4913,6 +4913,30 @@
     "tier": "component",
     "value": "16rem"
   },
+  {
+    "description": "SortableList (gh#1173): the space between items, an item's inset, its corner, and the narrowest a grid tile may get before the grid drops a column.",
+    "name": "--sortable-list-gap",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--sortable-list-item-padding",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--sortable-list-item-radius",
+    "tier": "component",
+    "value": "var(--control-radius)"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--sortable-list-grid-item-min-inline-size",
+    "tier": "component",
+    "value": "12rem"
+  },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--control-height-compact",
@@ -6023,6 +6047,30 @@
     "tier": "component",
     "value": "var(--app-shell-sidebar-width)"
   },
+  {
+    "description": "Label-column resize divider (gh#1189): the hit area straddles the column border and meets WCAG 2.5.8's 24px; the visible rule is the border itself, thickened on hover/focus.",
+    "name": "--range-timeline-resizer-inline-size",
+    "tier": "component",
+    "value": "var(--space-6)"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--range-timeline-resizer-active-width",
+    "tier": "component",
+    "value": "var(--stroke-md, 2px)"
+  },
+  {
+    "description": "`busy` (gh#1189): how far the body dims while a new range loads, and the progress line.",
+    "name": "--range-timeline-busy-body-alpha",
+    "tier": "component",
+    "value": "0.55"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--range-timeline-busy-line-block-size",
+    "tier": "component",
+    "value": "var(--stroke-md, 2px)"
+  },
   {
     "description": "Floor for ONE axis unit, so a day column never collapses; the live knob the canvas reads. `density` re-points it per instance at the three steps below — set THIS one in a theme to move every step's baseline, set a step to retune one density.",
     "name": "--range-timeline-unit-width",
@@ -6059,6 +6107,30 @@
     "tier": "component",
     "value": "var(--control-height-sm)"
   },
+  {
+    "description": "Per-row bar state (gh#1189 follow-up): a done row recedes, an overdue row gets a danger edge that keeps its status colour. `--range-timeline-bar-color` / `-ink` are set per row from data.",
+    "name": "--range-timeline-bar-muted-alpha",
+    "tier": "component",
+    "value": "0.45"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--range-timeline-bar-overdue-width",
+    "tier": "component",
+    "value": "var(--stroke-md)"
+  },
+  {
+    "description": "Planned vs actual (予定 / 実績): the ghost outline of the plan, the overrun segment past it, and the early marker where the actual ends before it.",
+    "name": "--range-timeline-plan-border-width",
+    "tier": "component",
+    "value": "var(--stroke-hairline)"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--range-timeline-early-marker-inline-size",
+    "tier": "component",
+    "value": "var(--stroke-md)"
+  },
   {
     "description": "The OUTER FRAME of the timeline and its label-column divider — the --border tier, the same rule weight a Card edge and a DataTable row use. The grid INSIDE it now reads the same tier (see --range-timeline-grid-color), which is the point of gh#730: the day grid may never be heavier than the frame around it, and at one tier it cannot become so under any theme.",
     "name": "--range-timeline-border-color",
@@ -6749,6 +6821,30 @@
     "tier": "component",
     "value": "32rem"
   },
+  {
+    "description": "Per-instance width, set by DialogContent `width` (gh#1174) — `initial`, so the default above resolves at the call site; the viewport cap (minus --dialog-viewport-inset) always wins.",
+    "name": "--dialog-width",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "ENTER / EXIT TIMING (gh#1178). `initial`, default `var(--duration-fast)` (150ms) at the call site, so a scoped motion retune reaches them. A full-screen overlay that takes half a second to arrive reads as lag; `prefers-reduced-motion: reduce` stops the animation outright (styles/dialog-layout.css, unlayered block).",
+    "name": "--dialog-motion-duration",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Feedback primitive tokens: dialog, alert, empty state.",
+    "name": "--sheet-enter-duration",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Feedback primitive tokens: dialog, alert, empty state.",
+    "name": "--sheet-exit-duration",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Feedback primitive tokens: dialog, alert, empty state.",
     "name": "--dialog-viewport-inset",
@@ -10415,6 +10511,12 @@
     "tier": "component",
     "value": "var(--space-3) var(--space-2)"
   },
+  {
+    "description": "Sidebar `action` (gh#1185): the inline inset matches the nav's, so the button's edges line up with the rows; the block end is 0 because the nav's own top padding supplies the gap below.",
+    "name": "--sidebar-action-padding",
+    "tier": "component",
+    "value": "var(--space-3) var(--space-2) 0"
+  },
   {
     "description": "Shell (sidebar / topbar / kbd) component tokens — small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale.",
     "name": "--sidebar-section-gap",
@@ -10823,6 +10925,24 @@
     "tier": "component",
     "value": "8rem"
   },
+  {
+    "description": "The secondary-link row under the grid (gh#1172): hairline above, small type, inline gap.",
+    "name": "--app-launcher-footer-space-block",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
+  {
+    "description": "Shell (sidebar / topbar / kbd) component tokens — small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale.",
+    "name": "--app-launcher-footer-gap",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "Shell (sidebar / topbar / kbd) component tokens — small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale.",
+    "name": "--app-launcher-footer-font-size",
+    "tier": "component",
+    "value": "var(--font-size-sm, var(--font-size-base))"
+  },
   {
     "description": "Role-mirror knob: `initial` so a scoped theme's --background re-resolves at the call site (docs/TOKENS.md). Default = a veil of the theme's OWN background at the alpha below.",
     "name": "--app-launcher-launchpad-backdrop-background",

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

@@ -1,5 +1,6 @@
+import type * as React from "react";
 import type { LegendProp } from "../../props/components/data-display.prop.js";
-export type { LegendItemProp, LegendProp, LegendProp as LegendProps } from "../../props/components/data-display.prop.js";
+export type { LegendItemProp, LegendProp, LegendProp as LegendProps, } from "../../props/components/data-display.prop.js";
 /**
  * Legend — the KEY for a set of tones: which colour means what.
  *
@@ -12,4 +13,4 @@ export type { LegendItemProp, LegendProp, LegendProp as LegendProps } from "../.
  * reader announcing "square, overdue" twice per key is noise. What reaches assistive tech is a
  * plain list of the labels, which is exactly what the key says.
  */
-export declare function Legend({ items, className, ...props }: LegendProp): import("react").JSX.Element;
+export declare function Legend({ items, className, ...props }: LegendProp): React.JSX.Element;

package/dist/components/data-display/legend.js

@@ -2,7 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 function Legend({ items, className, ...props }) {
   return /* @__PURE__ */ jsx("ul", { className: cn("ui-legend", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "ui-legend-item", children: [
-    /* @__PURE__ */ jsx("span", { className: "ui-legend-swatch", "data-tone": item.tone, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ui-legend-swatch",
+        "data-tone": item.color ? void 0 : item.tone,
+        "data-color": item.color ? "true" : void 0,
+        style: item.color ? { "--legend-swatch-color": item.color } : void 0,
+        "aria-hidden": "true"
+      }
+    ),
     item.label
   ] }, index)) });
 }

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

@@ -3,8 +3,12 @@ import type { DensityProp } from "../../props/vocabulary/index.js";
 export type RangeTimelineRow = {
     id: string;
     label: React.ReactNode;
-    start: number;
-    end: number;
+    /**
+     * First and last unit of the bar. `null` (either) means the row has no dates yet: no bar, a
+     * muted "no dates" hint in its track, and no resize handles (gh#1189).
+     */
+    start: number | null;
+    end: number | null;
     startLabel: string;
     endLabel: string;
     /**
@@ -13,6 +17,51 @@ export type RangeTimelineRow = {
      * indent (`--range-timeline-indent-width` per level) and the disclosure.
      */
     depth?: number;
+    /**
+     * The bar's fill, a hex colour from data (the same contract as `Badge color`), e.g. the issue
+     * status colour. The grips' ink flips black or white from the colour's luminance, the same pivot
+     * `tenantTheme` uses for `--primary-foreground`; a value that is not a hex keeps the default ink.
+     */
+    color?: string;
+    /** De-emphasise a closed / done row's bar (`--range-timeline-bar-muted-alpha`), nothing else. */
+    muted?: boolean;
+    /**
+     * Mark the bar overdue: a destructive edge on its inline end that keeps `color`, plus a localized
+     * screen-reader "overdue" so the colour is never the only carrier.
+     */
+    overdue?: boolean;
+    /**
+     * Shown on hover and on keyboard focus of the bar (key, title, status, assignee, start → due).
+     * The bar gains a focusable layer named by the row label; the grips stay separate buttons.
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * The PLANNED range (予定), drawn as a dashed ghost bar; `start` / `end` are then the ACTUAL range
+     * (実績), drawn solid. Past the planned end the actual bar carries a destructive overrun segment;
+     * ending before it, a small early marker. Both are also spoken.
+     */
+    plan?: {
+        start: number | null;
+        end: number | null;
+    } | null;
+    /**
+     * Text after an overrun segment. Default: the overrun in axis units, localized as days
+     * ("+3日" / "+3d" / "+3 ngày"), since a Gantt's unit is the day. `false` shows none.
+     */
+    varianceLabel?: React.ReactNode | false;
+    /**
+     * A muted note shown after the bar when the row has no `plan`, e.g. "baseline後に追加". Nothing
+     * is drawn for a row without a plan unless this is set.
+     */
+    planNote?: React.ReactNode;
+    /**
+     * Which grips this row offers when `onRangeChange` is set. Default `true` (both). A started-but-open
+     * issue whose end is "today" passes `{ end: false }`, keeping the start grip. `false` removes both.
+     */
+    editable?: boolean | {
+        start?: boolean;
+        end?: boolean;
+    };
 };
 export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     label: string;
@@ -63,6 +112,27 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     sticky?: boolean | {
         offsetHeader?: number;
     };
+    /**
+     * Let the user resize the label column by dragging a divider in the header (gh#1189): a
+     * `role="separator"` with aria-valuenow/min/max, ArrowLeft/Right (Shift = a bigger step),
+     * Home/End, RTL-aware. `true` uses min 160 / max 640 px. The width lands on
+     * `--range-timeline-label-width`, so the token stays the default until the user drags.
+     */
+    resizableLabel?: boolean | {
+        min?: number;
+        max?: number;
+    };
+    /** Controlled label-column width in px. Persist it per user from `onLabelWidthChange`. */
+    labelWidth?: number;
+    /** Uncontrolled initial label-column width in px. Omitted: the token's width. */
+    defaultLabelWidth?: number;
+    /** Fires with the next label-column width (px) while dragging and on every key step. */
+    onLabelWidthChange?: (width: number) => void;
+    /**
+     * A new range is loading while the previous rows stay on screen: dims the body, draws an
+     * indeterminate line under the header and sets `aria-busy` (gh#1189).
+     */
+    busy?: boolean;
 };
 /** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
 export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -114,4 +184,25 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
     sticky?: boolean | {
         offsetHeader?: number;
     };
+    /**
+     * Let the user resize the label column by dragging a divider in the header (gh#1189): a
+     * `role="separator"` with aria-valuenow/min/max, ArrowLeft/Right (Shift = a bigger step),
+     * Home/End, RTL-aware. `true` uses min 160 / max 640 px. The width lands on
+     * `--range-timeline-label-width`, so the token stays the default until the user drags.
+     */
+    resizableLabel?: boolean | {
+        min?: number;
+        max?: number;
+    };
+    /** Controlled label-column width in px. Persist it per user from `onLabelWidthChange`. */
+    labelWidth?: number;
+    /** Uncontrolled initial label-column width in px. Omitted: the token's width. */
+    defaultLabelWidth?: number;
+    /** Fires with the next label-column width (px) while dragging and on every key step. */
+    onLabelWidthChange?: (width: number) => void;
+    /**
+     * A new range is loading while the previous rows stay on screen: dims the body, draws an
+     * indeterminate line under the header and sets `aria-busy` (gh#1189).
+     */
+    busy?: boolean;
 } & React.RefAttributes<HTMLElement>>;