@godxjp/ui 19.0.0 → 19.2.0

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

@@ -2,23 +2,7 @@ import type { MasterDetailProp } from "../../props/components/layout.prop.js";
 export type MasterDetailProps = MasterDetailProp;
 /**
  * Token-owned master-detail composition: a selectable collection beside the detail surface it
- * drives. Geometry is the component's only responsibility — the tracks (`--master-detail-rail-*`),
- * the gap (`--master-detail-gap`) and the stacking threshold (`--master-detail-collapse-below`)
- * are all tokens, so a consumer never authors grid tracks or per-screen spacing (gh#223).
- *
- * `rail` chooses which region keeps the fixed track: `detail` (default) is the canonical fluid
- * list + fixed detail rail; `master` is the leading navigator rail. Either way `master` comes
- * first in DOM order, so below the threshold the regions stack list-then-detail.
- *
- * `masterViewport` bounds the collection (gh#231): `auto` (default) lets it grow with its content
- * exactly as before, while `compact`/`standard` cap its block size with a token and scroll it
- * INSIDE the region — the only thing that stops a long real collection from pushing the detail
- * thousands of pixels below the fold once the layout stacks.
- *
- * SELECTION AND KEYBOARD STAY WITH THE CALLER — deliberately. The controls inside `master` may be
- * a listbox, a tablist, a link list or toggle buttons, and only the caller knows which APG pattern
- * applies; a layout that imposed one would fight it. What the layout DOES own is the wiring those
- * patterns need: two named landmark regions, a stable `detailId` for `aria-controls`, and a
- * `tabIndex={-1}` detail region so the app can move focus to the new detail after a selection.
+ * 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;

package/dist/components/layout/page-container.js

@@ -95,7 +95,6 @@ function PageContainerRoot({
                   children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
                     return (
-                      // The package's own breadcrumb item hook (gh#319): same
                       // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
                       // `.ui-breadcrumb-item svg { 0.75rem }` with it, so the separator glyph no
                       // longer carries a `size-3` literal. It also drops `.ui-inline-xs`'s

package/dist/components/layout/responsive-grid.d.ts

@@ -1,6 +1,11 @@
 import type { ReactNode } from "react";
 import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { GapProp } from "../../props/vocabulary/layout.prop.js";
 export type ResponsiveGridProps = {
+    /** Gap between cells, the same steps as Flex. Default `md`. */
+    gap?: GapProp;
+    /** Optional structural class override. */
+    className?: string;
     columns?: ResponsiveGridColumnsProp;
     /**
      * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
@@ -10,4 +15,4 @@ export type ResponsiveGridProps = {
     preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, preset, children }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, gap, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;

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

@@ -1,4 +1,5 @@
 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 }
 };
@@ -23,9 +24,15 @@ function toStyle(resolved) {
     "--responsive-grid-lg": resolved.lg
   };
 }
-function ResponsiveGrid({ columns = 4, preset, children }) {
+function ResponsiveGrid({
+  columns = 4,
+  gap,
+  preset,
+  className,
+  children
+}) {
   const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: toStyle(resolved), children }) });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid", className), "data-gap": gap, style: toStyle(resolved), children }) });
 }
 export {
   ResponsiveGrid

package/dist/components/layout/service-role-panel.d.ts

@@ -2,24 +2,12 @@ import * as React from "react";
 import type { ServiceRolePanelProp } from "../../props/components/layout.prop.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProp as ServiceRolePanelProps, } from "../../props/components/layout.prop.js";
 /**
- * ServiceRolePanel — the canonical role-collection ⇄ role-detail surface (gh#257 / DXS
- * platform#311).
- *
- * A THIN formalized composition over `MasterDetail` (which owns ALL geometry: rail tracks, gap,
- * stacking below the threshold — 1440/1024 two-track, 390 stacked list-then-detail) plus real
- * primitives, exported because a consumer cannot import a docs page (the gh#251 lesson). What the
- * panel adds is exactly the contract every service-role screen kept re-deriving:
- *
- * - **Selection** as the controlled triad (`value`/`defaultValue`/`onValueChange`, defaulting to
- *   the first role). Each role row is a real `Button` carrying `aria-current`, and selecting moves
- *   focus-target wiring through `MasterDetail`'s `detailId`/`tabIndex={-1}` detail region.
- * - **Destructive confirmation built in**: `onDeleteRole`'s presence arms a per-role delete
- *   affordance behind the package `AlertDialog` (variant `destructive`); the handler fires only
- *   after the user confirms. Roles marked `locked` (system roles) never offer deletion and show a
- *   localized lock badge; `readOnly` hides every mutating affordance.
- * - **Lifecycle states** mirror the DataTable #216 vocabulary and precedence:
- *   `loading` → `denied` → `error` → `empty` → content.
- * - **Domain-neutral**: the roles and the detail surface (`children`, node or render-function) are
- *   consumer-supplied; no platform role or permission is encoded.
+ * What the panel adds is exactly the contract every service-role screen kept re-deriving: -
+ * **Selection** as the controlled triad (`value`/`defaultValue`/`onValueChange`, defaulting to the
+ * first role). Each role row is a real `Button` carrying `aria-current`, and selecting moves
+ * focus-target wiring through `MasterDetail`'s `detailId`/`tabIndex={-1}` detail region. -
+ * **Destructive confirmation built in**: `onDeleteRole`'s presence arms a per-role delete
+ * affordance behind the package `AlertDialog` (variant `destructive`); the handler fires only
+ * after the user confirms.
  */
 export declare const ServiceRolePanel: React.ForwardRefExoticComponent<ServiceRolePanelProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/sidebar.d.ts

@@ -14,14 +14,12 @@ type SidebarItemProps = {
     sub?: boolean;
     onActivate?: (id: string) => void;
     /**
-     * Framework-router link element TYPE (gh#213). The row content stays library-composed — see
-     * {@link SidebarLinkProp}. Applied only when `item.href` is set.
+     * The row content stays library-composed — see {@link SidebarLinkProp}. Applied only when
+     * `item.href` is set.
      */
     linkComponent?: SidebarLinkComponentProp;
     /**
-     * Radix-style element swap: the single child element (a router `<Link>`) BECOMES the row and the
-     * library injects its composed icon + label + badge as that element's children (gh#213). Use it
-     * when you compose `SidebarItem` by hand instead of passing `sections` + `linkComponent`.
+     * Use it when you compose `SidebarItem` by hand instead of passing `sections` + `linkComponent`.
      */
     asChild?: boolean;
     /** @deprecated Use `linkComponent` / `asChild` — see {@link SidebarProp.renderItem}. */
@@ -32,27 +30,7 @@ export declare function SidebarSection({ label, collapsed, children, className,
 export declare function SidebarItem({ item, active, sub, onActivate, linkComponent: LinkComponent, asChild, renderItem, children, ...props }: SidebarItemProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">): React.JSX.Element;
 export { createSidebarLink } from "./sidebar-link.js";
 /**
- * Sidebar — data-driven vertical nav rail.
- *
- * ROUTER LINKS (gh#213): pass `linkComponent` and the LIBRARY keeps composing every row (icon slot,
- * label, badge, active state, the icon-only collapsed rail and its tooltip name) — the consumer
- * supplies only the link ELEMENT. Use {@link createSidebarLink} to adapt a router `Link`, or
- * `SidebarItem asChild` when composing rows by hand. `renderItem` is DEPRECATED: it left row content
- * to the consumer, so a `<Link>{item.label}</Link>` dropped every icon and badge.
- *
- * THEMING (gh#228): the row/label and the nav ICON read SEPARATE component tokens, so a service can
- * match a canonical shell's darker 16px icons without page-local CSS and without re-tinting every
- * muted text globally:
- *
- * - `--sidebar-nav-item-foreground` (row + label, incl. sub rows) · default `hsl(var(--muted-foreground))`
- * - `--sidebar-nav-item-hover-foreground` · default `hsl(var(--foreground))`
- * - `--sidebar-nav-item-disabled-foreground` · default = the resting row colour
- * - `--sidebar-nav-icon-foreground` (`.sb-icon`, incl. the collapsed rail + group triggers) ·
- *   default `currentColor` = the row colour
- * - `--sidebar-nav-icon-{hover,active,disabled}-foreground` · each defaults to the base icon knob
- *
- * The active row keeps `--sidebar-item-active-background` / `--sidebar-item-active-foreground`.
- * These are COLOUR knobs only — icon size stays `--sidebar-nav-icon-size` (16px) and row geometry
- * stays `--sidebar-nav-item-height` / `-gap` / `-padding-x`.
+ * Sidebar — data-driven vertical nav rail. Use {@link createSidebarLink} to adapt a router `Link`,
+ * or `SidebarItem asChild` when composing rows by hand.
  */
 export declare function Sidebar({ ariaLabel: ariaLabelCamel, activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, linkComponent, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): React.JSX.Element;

package/dist/components/layout/sidebar.js

@@ -37,7 +37,6 @@ function SidebarRowContent({
     !sub ? /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon }) : null,
     /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
     showBadge ? (
-      // `data-tone` is emitted ONLY for the emphasis tone (rule #44: present-when-on,
       // absent-when-off), so a rail that never sets `badgeTone` renders the exact same node it
       // always did and no consumer selector has to out-specify a marker meaning "unchanged".
       /* @__PURE__ */ jsx(

package/dist/components/layout/split-pane.d.ts

@@ -4,13 +4,6 @@ export type SplitPaneProps = {
     /**
      * Aside (trailing) panel content. Pass `null` to CLOSE the rail: no `<aside>` element is
      * rendered, the grid drops to one full-width column and the gap goes with it.
-     *
-     * Closing this way — rather than dropping the whole `SplitPane` at the call site — is what
-     * keeps `children` MOUNTED. The three wrappers below are rendered unconditionally, so the
-     * main column sits at the same depth and the same slot in the React tree in both states and
-     * React reuses its DOM node instead of remounting it. A collapsible thread/detail panel that
-     * swapped `<SplitPane>{page}</SplitPane>` for a bare `{page}` changed the tree depth, which
-     * remounted the page and threw the reader to the bottom of a scrolled list.
      */
     aside: ReactNode | null;
     /**

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

@@ -2,19 +2,6 @@ import type { TopbarProp } from "../../props/components/layout.prop.js";
 export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/components/layout.prop.js";
 /**
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
- * bar's flex layout; it does NOT bake any chrome. There is no built-in product switcher, search
- * box, notification bell, or language picker — the CONSUMER composes those from real primitives
- * (a brand mark `Avatar`, a `Button` search trigger, `AppSettingPicker` for locale/theme, a
- * `DropdownMenu` user menu) and drops them into a slot. Whether a control is icon-only, labelled,
- * bordered, etc. is that control's OWN configuration — never the shell's to dictate.
- *
- *   <Topbar
- *     start={<><SidebarToggle /><Avatar className="rounded-md"><AvatarFallback>C</AvatarFallback></Avatar></>}
- *     center={<Button variant="outline" onClick={openSearch}><Search />検索</Button>}
- *     end={<><AppSettingPicker kind="locale" /><UserMenu /></>}
- *   />
- *
- * Use it as `AppShell`'s `topbar` slot, or place it directly. For full custom content, pass
- * `children` instead of the three slots.
+ * bar's flex layout; it does NOT bake any chrome.
  */
 export declare function Topbar({ start, center, end, className, children, ...props }: TopbarProp): import("react").JSX.Element;

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

@@ -142,9 +142,7 @@ const AppSettingPicker = React.forwardRef(
                   "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground"
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
-                  // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL
-                  // `w-full` — so a labeled picker dropped into a narrow topbar no longer stretches to
-                  // fill the bar (gh#165). A form field that wants a full-width control passes
+                  // A form field that wants a full-width control passes
                   // `className="w-full"`, which wins over `w-auto`.
                   // `compact` drops the per-kind width entirely so the trigger hugs its value.
                   cn("w-auto max-w-full", !isCompact && "ui-app-setting-picker-trigger")

package/dist/components/navigation/filter-bar.d.ts

@@ -2,12 +2,7 @@ import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navig
 export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProp as FilterBarFilterProps, FilterBarOverflowProp, FilterBarSearchProp, FilterBarSearchProp as FilterBarSearchProps, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
 export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, filters, chips, onChipRemove, actions, resultCount, loading, disabled, error, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
-/**
- * Canonical list-page filter strip.
- *
- * `Toolbar` remains available for backwards compatibility. `FilterBar` is the
- * public domain-neutral name used by application design specifications.
- */
+/** Canonical list-page filter strip. `Toolbar` remains available for backwards compatibility. */
 export declare const FilterBar: typeof Toolbar;
 /** Labelled control group for {@link FilterBar}. */
 export declare const FilterBarGroup: typeof ToolbarGroup;

package/dist/components/navigation/pagination-utils.d.ts

@@ -1,15 +1,5 @@
 /**
- * Build visible page numbers with ellipsis — Ant Design / MUI pagination style.
- *
- * The item count is CONSTANT wherever the current page sits. The earlier version
- * derived the window straight from `current ± siblingCount` and let it collapse
- * against the edges, so a 1,060-page list opened as `1 2 … 1060` — four controls
- * with a wide empty gap, and both a bad target size and a bad sense of scale
- * (reported 2026-08-24). Ant Design and MUI both solve this by CLAMPING the
- * window instead of shrinking it: near an edge the window slides inward so the
- * strip keeps its full width. Same list now opens as `1 2 3 4 5 … 1060`.
- *
- * Slots = `boundaryCount * 2` edges + `siblingCount * 2 + 1` around current + 2
- * ellipsis positions. With the defaults that is 7 controls.
+ * Build visible page numbers with ellipsis — Ant Design / MUI pagination style. The item count is
+ * CONSTANT wherever the current page sits.
  */
 export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number, boundaryCount?: number): (number | "ellipsis")[];

package/dist/components/navigation/tabs-scroll.d.ts

@@ -1,30 +1,7 @@
 import * as React from "react";
 /**
- * Keep-the-active-tab-visible logic for the horizontal `TabsList` scroll strip (gh#204).
- *
- * `TabsList` scrolls its own overflow (gh#175) so long localized labels never clip. That fixed
- * clipping but not the SCROLL POSITION: after a responsive resize / route re-render the strip kept
- * (or shifted) its internal `scrollLeft`, so the ACTIVE trigger — typically the FIRST one — could
- * end up completely outside the scrollport while still carrying `data-state="active"` /
- * `aria-selected="true"`. A tab you cannot see is a tab you cannot use.
- *
- * The fix observes the strip (size changes) and its triggers (`data-state` changes) and scrolls the
- * element that must stay reachable back into view. Deliberate constraints:
- *
- *  - **Never fights the user.** The scroll only runs when the target is NOT already fully inside the
- *    scrollport, so an intentional manual/touch scroll that leaves the active tab visible is left
- *    alone, and a click (target is under the pointer) or arrow-key move (the browser already
- *    scrolled focus into view) is a no-op.
- *  - **Focus wins over selection.** With `activationMode="manual"` the roving focus can sit on a
- *    trigger that is not the selected one; yanking the strip to the selected tab would strand the
- *    keyboard user. The focused trigger inside the list is therefore the preferred target.
- *  - **Reduced motion.** `prefers-reduced-motion: reduce` downgrades every correction to an instant
- *    jump; resize corrections are instant regardless (a smooth animation mid-resize reads as jank).
- *  - **RTL / vertical safe.** All geometry is physical viewport rects and the scroll uses
- *    `scrollIntoView({ block: "nearest", inline: "nearest" })`, which resolves direction natively —
- *    so a first trigger in `dir="rtl"` (visually on the right) and a vertical rail both work
- *    without direction branches. `nearest` also means no ancestor/page scroll when the strip is
- *    already where it should be.
+ * A tab you cannot see is a tab you cannot use. The fix observes the strip (size changes) and its
+ * triggers (`data-state` changes) and scrolls the element that must stay reachable back into view.
  */
 /** Minimal rect shape — only the edges the visibility test needs. */
 export type TabsScrollBox = {
@@ -36,10 +13,6 @@ export type TabsScrollBox = {
 /**
  * True when `trigger` sits entirely inside the `scrollport` box. Pure geometry — physical viewport
  * coordinates, so it is direction- and orientation-agnostic (LTR, RTL, vertical rail alike).
- *
- * A zero-area scrollport (unmounted, `display:none`, or an environment without layout such as
- * jsdom) reports `true`: there is no measurable overflow to correct, and scrolling a hidden strip
- * would be meaningless.
  */
 export declare function isTabFullyVisible(scrollport: TabsScrollBox, trigger: TabsScrollBox): boolean;
 /**
@@ -56,13 +29,6 @@ export declare function prefersReducedMotion(): boolean;
  */
 export declare function syncActiveTabIntoView(list: HTMLElement | null, behavior?: ScrollBehavior): HTMLElement | null;
 /**
- * Wires the two signals that can strand the active tab off-screen:
- *
- *  - a `ResizeObserver` on the strip — a responsive width change (1440 → 1024 → 390) keeps/shifts
- *    the old `scrollLeft`; the observer's initial delivery also covers first mount at a new width;
- *  - a `MutationObserver` on descendant `data-state` — the selected tab changing from outside the
- *    strip (router/URL state, a controlled parent) must bring the newly-selected trigger into view.
- *
  * Resize corrections are instant; a selection change animates unless reduced motion is requested.
  * Both observers are optional: without them (SSR, ancient runtimes) the component degrades to the
  * pre-fix behaviour instead of throwing.

package/dist/components/navigation/tabs.js

@@ -34,9 +34,8 @@ function Tabs({
       value,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
       className: cn(
-        // Structure only. The shrink floor (`min-inline-size: 0`, gh#175) and the strip↔panel gap
+        // Structure only.
         // live in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
-        // can retune the tab rhythm without forking this file (#319).
         "group/tabs flex data-[orientation=horizontal]:flex-col",
         className
       ),
@@ -50,7 +49,6 @@ function Tabs({
             className: cn(
               // The padding override is an arbitrary value reading the knob (never `p-0`): it must
               // stay a UTILITY so tailwind-merge still drops the strip's own padding step, and a
-              // components-layer rule could not beat that utility anyway (#319).
               variant === "line" && "h-auto w-full justify-start border-b p-[var(--tabs-list-line-space-inset)]",
               variant === "card" && "w-full justify-start",
               listClassName
@@ -63,7 +61,6 @@ function Tabs({
                 className: cn(
                   // Geometry only — the active underline is the token-owned `::after` bar the
                   // line variant already owns (never a second, hand-rolled border-b indicator).
-                  // Token-reading arbitrary values, not Tailwind steps (#319): they have to stay
                   // utilities so tailwind-merge keeps dropping the pill trigger's own radius /
                   // padding steps from the base class list.
                   // `card` adds NOTHING here — its list is forwarded as data-variant="default", so
@@ -112,10 +109,10 @@ const TabsList = React.forwardRef(({ className, variant = "default", ...props },
         // `min-w-0 max-w-full` let the list shrink to (and never exceed) whatever width its
         // ancestors actually give it instead of forcing them wider; horizontal orientation then
         // scrolls its own overflow rather than clipping/hiding long localized labels in a narrow
-        // container (gh#175). Hidden scrollbar keeps the strip visually clean while staying
+        // Hidden scrollbar keeps the strip visually clean while staying
         // swipeable on touch and reachable via keyboard (arrow-key roving focus still scrolls the
         // newly-focused trigger into view natively); `useKeepActiveTabVisible` above re-pins the
-        // active trigger when a resize would otherwise strand it off-strip (gh#204). Vertical
+        // Vertical
         // orientation is untouched — it already stacks in a column and is sized by its own
         // `h-*`/`w-*` overrides.
         // justify-center-SAFE: the strip is a centred flex box that also scrolls. Plain `center`
@@ -138,12 +135,11 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     "data-slot": "tabs-trigger",
     className: cn(
       // The SELECTED-state ring (`ring-1 ring-primary/25`) is scoped to the default/card lists —
-      // the `line` variant is underline-only (gh#248) and must NEVER paint a surrounding ring, or
       // it competes with (and at equal specificity overrides) the `:focus-visible` ring. The
       // focus-visible ring/outline below is deliberately left unscoped: every variant keeps a
       // visible keyboard focus indicator (WCAG 2.4.7). The line indicator itself lives in
       // src/styles/navigation-layout.css so it reads the --tabs-indicator-* tokens.
-      "text-muted-foreground ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:ring-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=default]/tabs-list:data-[state=active]:ring-1 group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+      "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:ring-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=default]/tabs-list:data-[state=active]:ring-1 group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
       className
     ),
     ...props

package/dist/components/query/data-state.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { DataStateProp } from "../../props/components/query.prop.js";
 export type { DataStateProp, DataStateProp as DataStateProps, } from "../../props/components/query.prop.js";
 /**
- * Query lifecycle widget — orchestrates skeleton / error / empty / success for one `useQuery` block.
- * Not a visual component; prefer `@godxjp/ui/query`. Apps may also import via `@godxjp/ui/admin`.
+ * Query lifecycle widget — orchestrates skeleton / error / empty / success for one `useQuery`
+ * block. Not a visual component; prefer `@godxjp/ui/query`.
  */
 export declare function DataState<T>({ query, skeleton, prerequisite, empty, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, children, }: DataStateProp<T>): React.JSX.Element;

package/dist/components/ui/credential-reveal.d.ts

@@ -4,9 +4,6 @@ export type { CredentialRevealProp, CredentialRevealProp as CredentialRevealProp
 /**
  * CredentialReveal — one-time secret surface (device credential / API key / service-account
  * secret). Masked by default with a show/hide toggle, a copy button that confirms the copy, an
- * optional download, and an optional acknowledge action to pair with a Dialog. Composed only from
- * real @godxjp/ui primitives (Alert · Button · Text). Reveal is a controlled boolean triad
- * (`revealed` / `defaultRevealed` / `onRevealedChange`); everything user-facing is routed through
- * `t()`, and the copy confirmation is announced via an `aria-live` region.
+ * optional download, and an optional acknowledge action to pair with a Dialog.
  */
 export declare const CredentialReveal: React.ForwardRefExoticComponent<CredentialRevealProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/hover-card.d.ts

@@ -2,8 +2,7 @@ import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 /**
  * HoverCard root. Defaults to a SNAPPY 200ms open / 100ms close (Radix's raw 700/300 default felt
- * laggy); consumers can still pass `openDelay`/`closeDelay`. A small open delay (not 0) is
- * intentional — it prevents accidental triggering as the pointer passes over the trigger.
+ * laggy); consumers can still pass `openDelay`/`closeDelay`.
  */
 export declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
 export declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,22 +1,9 @@
 import * as React from "react";
 export type { SeparatorProp, SeparatorProp as SeparatorProps, } from "../../props/components/layout.prop.js";
 /**
- * Separator — a tokenized horizontal/vertical rule, optionally INTERRUPTED by a localized label
- * (gh#308): a message stream's day divider, a "new messages" unread watermark, an auth
- * conjunction. Before #308 the only labelled rule in the library was the auth-scoped
- * `AuthDivider`, so a chat stream had to either misuse it (inheriting the `--auth-shell-divider-*`
- * type ramp) or hand-roll a `<div>` grid; `AuthDivider` is now a thin preset over this.
- *
  * ACCESSIBILITY — the whole point of the labelled form is that the label is ANNOUNCED, exactly
- * ONCE. Without a label the rule stays `decorative` (Radix emits `role="none"`), which is right:
- * a section rule carries no information. With a label the default flips to `decorative={false}`,
- * so Radix emits a real `role="separator"` (plus `aria-orientation` when vertical, which is what
- * the ARIA default already implies for horizontal), the label string becomes the separator's
- * accessible NAME via `aria-label`, and the visible label node is `aria-hidden` — otherwise the
- * same string would be announced twice, once as the name and again as the content. A consumer who
- * explicitly passes `decorative` still wins; when they force `decorative` on a labelled rule the
- * name is dropped (a `role="none"` element may not carry one) and the visible text is left in the
- * tree instead, so it is still read once and never as a nameless blank rule.
+ * ONCE. Without a label the rule stays `decorative` (Radix emits `role="none"`), which is right: a
+ * section rule carries no information.
  */
 export declare const Separator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     orientation?: import("../../props/index.js").OrientationProp;

package/dist/components/ui/toggle-group.d.ts

@@ -7,11 +7,7 @@ export declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleG
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
 }) & React.RefAttributes<HTMLDivElement>>;
-/**
- * `variant`/`size` come from the group through context; the COUNT stays per item, because the
- * number is per-item data (gh#312). Same vocabulary as `Toggle` and `Button` — one counter pill
- * for the whole library.
- */
+/** Same vocabulary as `Toggle` and `Button` — one counter pill for the whole library. */
 export type ToggleGroupItemProp = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & ToggleCountFields & {
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;

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

@@ -6,23 +6,18 @@ declare const toggleVariants: (props?: ({
     size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * The counter-pill vocabulary, lifted VERBATIM from `Button` (`count` / `overflowCount` /
- * `showZero`) so a counted filter tab and a counted, pressed filter chip are one vocabulary rather
- * than two that drift (gh#312). Not exported on its own — it is folded into `ToggleProp` and
- * `ToggleGroupItemProp` so there is one public name per component.
+ * Not exported on its own — it is folded into `ToggleProp` and `ToggleGroupItemProp` so there is
+ * one public name per component.
  */
 type ToggleCountFields = {
     /**
      * Optional numeric count rendered as a borderless counter pill after the label — the SAME
      * vocabulary `Button` already defines, so a counted segmented toggle and a counted filter tab
      * read identically. Formatted with `Intl.NumberFormat` in the active locale (never `String(n)`,
-     * never a hand-rolled thousands separator). Never nest a `Badge` inside a Toggle for this: a
-     * Badge is a status chip with its own surface, so it double-borders the chip and puts two boxes
-     * where there is one control. The pill takes its colour from the toggle's OWN pressed state, so
-     * pressed and unpressed chips differ without reading the number.
+     * never a hand-rolled thousands separator).
      */
     count?: number;
-    /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). Default `99`. */
+    /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
     overflowCount?: number;
     /** Render the pill when `count` is 0. Default `true`, matching Button. */
     showZero?: boolean;
@@ -30,31 +25,11 @@ type ToggleCountFields = {
      * Localized description of what the count MEANS, folded into the accessible name so the control
      * never announces as a bare number ("👍 3" → "thumbs up, 3 reactions"). Supply it whenever the
      * visible label is an icon or an emoji; with a text label the label itself already carries the
-     * meaning. Pass a `t()`-resolved string — the library does not own this wording.
+     * meaning.
      */
     countLabel?: string;
 };
-/**
- * Counter pill shared by `Toggle` and `ToggleGroupItem`.
- *
- * ACCESSIBLE NAME. The digits live INSIDE the same `button[aria-pressed]` — one tab stop, one
- * focus ring, one name. The name always comes out as "<label>, <count> <unit>" ("Unread, 12",
- * "Thích, 3 lượt"), by one of two routes:
- *
- *   • Name from CONTENTS (the usual text chip). The visible digits are `aria-hidden`, and an
- *     `sr-only` sibling carries ", 12 unit". The separator is explicit on purpose: the accessible
- *     name is a CONCATENATION of descendant text, and whether a browser inserts a space between
- *     two inline boxes is a layout detail no test can rely on — without it the control can
- *     announce "Unread12".
- *   • Name from `aria-label` (an icon or emoji chip). Contents are ignored for the name, so the
- *     same ", 12 unit" tail is folded into the label instead.
- *
- * Either way the count is announced exactly ONCE — the visible digits are hidden from the a11y
- * tree precisely so they cannot be counted twice — and there is deliberately no `aria-live`: a
- * count that ticks up as other people react is not this control's status, and a live region here
- * would fire on every socket message. A product that wants the change announced owns its own
- * live region.
- */
+/** Counter pill shared by `Toggle` and `ToggleGroupItem`. ACCESSIBLE NAME. */
 declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, }: ToggleCountFields & {
     ariaLabel?: string;
 }): {

package/dist/email/brand-mark.d.ts

@@ -1,28 +1,8 @@
 /**
- * The canonical GoDX brand mark, as email-safe markup.
- *
- * The mark is an emerald CAPSULE with an internal light GLYPH bar — the same artwork the React
- * `<Logo mark="godx" />` paints, at the same 32×32 viewBox and the same coordinates (a test asserts
- * the capsule path is byte-identical to the component's, so the two can never diverge). A capsule
- * WITHOUT the internal glyph is the incomplete mark and must not ship. The ARTWORK matches the
- * canonical SCR-302 raster exactly; only the rendered BOX is email-specific — the canonical email
- * header sets it at 22px (`--email-mark-width`) beside the "GoDX" wordmark, where the web
- * `<Logo mark="godx" />` box is 32px.
- *
- * Nothing here references an external or relative asset: an email template has no base URL it can
- * trust, remote images are blocked by default in most clients, and a `cid:` attachment needs
- * transport support. So the mark is delivered three ways, in order of fidelity:
- *
- *  1. `svg` — inline `<svg>`. Apple Mail, iOS Mail, Thunderbird, Samsung Mail. Best fidelity.
- *  2. `dataUri` — the same SVG as a `data:` URL for `<img src>`. No network fetch.
- *  3. `tableHtml` — bulletproof `<table>`/`<div>` markup with background-color + border-radius.
- *     Renders everywhere; degrades to a square emerald block with a light bar in Outlook's Word
- *     renderer (which drops `border-radius`) — still recognisably the mark, never a broken image.
- *
- * Colours come from `EMAIL_COLORS` (derived from `--brand` / `--brand-foreground`, the roles
- * `--logo-godx-color` points at), so a re-themed identity role re-tints the mark. NOT `--success`:
- * that is the wakatake STATUS green, and binding identity to it rendered the mark ~ΔE76 17 away
- * from the canonical emerald until gh#250 introduced the dedicated `--brand` role.
+ * The canonical GoDX brand mark, as email-safe markup. The mark is an emerald CAPSULE with an
+ * internal light GLYPH bar — the same artwork the React `<Logo mark="godx" />` paints, at the same
+ * 32×32 viewBox and the same coordinates (a test asserts the capsule path is byte-identical to the
+ * component's, so the two can never diverge).
  */
 import { type EmailHex } from "./color.js";
 /** A rounded rectangle in the mark's 32×32 coordinate space. */
@@ -39,11 +19,6 @@ export declare const EMAIL_BRAND_MARK_VIEWBOX = "0 0 32 32";
 export declare const EMAIL_BRAND_MARK_CAPSULE: EmailBrandMarkRect;
 /** The internal light glyph bar inside the capsule. */
 export declare const EMAIL_BRAND_MARK_GLYPH: EmailBrandMarkRect;
-/**
- * Path data for a rounded rectangle, in the exact serialisation the canonical mark uses — so the
- * generated capsule string equals the artwork shipped by `<Logo mark="godx" />` character for
- * character.
- */
 export declare function roundedRectPath({ x, y, width, height, radius }: EmailBrandMarkRect): string;
 /** Options for rendering the mark. Every default comes from the token contract. */
 export interface EmailBrandMarkOptions {
@@ -68,13 +43,10 @@ export interface EmailBrandMarkOptions {
 export declare function emailBrandMarkSvg(o?: EmailBrandMarkOptions): string;
 /**
  * The mark as a `data:image/svg+xml` URL for `<img src>`. Percent-encoded (not base64) so it stays
- * readable in a template and needs no `Buffer`/`btoa`. Still zero network requests.
+ * readable in a template and needs no `Buffer`/`btoa`.
  */
 export declare function emailBrandMarkDataUri(o?: EmailBrandMarkOptions): string;
-/**
- * Bulletproof `<table>` markup for clients with no SVG support. Uses only `background-color`,
- * `border-radius`, fixed cell sizes and `font-size:0` — the intersection every client renders.
- */
+/** Bulletproof `<table>` markup for clients with no SVG support. */
 export declare function emailBrandMarkTableHtml(o?: EmailBrandMarkOptions): string;
 /** The canonical mark at its default size and colours, in all three delivery forms. */
 export interface EmailBrandMark {

package/dist/email/color.d.ts

@@ -1,13 +1,7 @@
 /**
- * Email colour contract — semantic web roles resolved to LITERAL hex.
- *
- * HTML email has no cascade worth trusting: Gmail strips <style>, Outlook ignores custom
- * properties, and every colour must appear inline as `#rrggbb` on the element that paints it. The
- * web tokens, meanwhile, are HSL channel triplets (`--primary: 204 100% 39%`) so they can be
- * alpha-composed. This module bridges the two — the triplets are GENERATED from
- * src/tokens/foundation.css (scripts/gen-email-tokens.mjs) and converted here, at module load, by
- * the same `hslToHex` a consumer can call on its own brand roles. There is no hex literal in this
- * directory, so an email palette that drifts from the web palette is structurally impossible.
+ * Email colour contract — semantic web roles resolved to LITERAL hex. HTML email has no cascade
+ * worth trusting: Gmail strips <style>, Outlook ignores custom properties, and every colour must
+ * appear inline as `#rrggbb` on the element that paints it.
  */
 import { EMAIL_COLOR_SOURCE } from "./tokens.generated.js";
 /**
@@ -19,14 +13,10 @@ export type EmailColorToken = keyof typeof EMAIL_COLOR_SOURCE;
 export type EmailHex = `#${string}`;
 /**
  * Convert a CSS HSL channel triplet (`"204 100% 39%"` — the shape every `@godxjp/ui` colour role
- * uses) into the `#rrggbb` literal an email client needs. Rounds each channel the way a browser
- * does, so the hex is exactly what `hsl(var(--role))` paints on the web.
- *
- * Consumers with a custom brand role can call this directly:
- * `hslToHex(getComputedStyle(el).getPropertyValue("--primary"))`.
- *
- * @throws if the input is not a bare `H S% L%` triplet (a hex or `hsl(...)` wrapper is rejected
- * rather than silently mis-parsed).
+ * uses) into the `#rrggbb` literal an email client needs. Consumers with a custom brand role can
+ * call this directly: `hslToHex(getComputedStyle(el).getPropertyValue("--primary"))`. @throws if
+ * the input is not a bare `H S% L%` triplet (a hex or `hsl(...)` wrapper is rejected rather than
+ * silently mis-parsed).
  */
 export declare function hslToHex(triplet: string): EmailHex;
 /**