@godxjp/ui 31.3.0 → 31.4.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.3.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.4.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2075 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2080 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1761 `component` entries are per-part knobs; reach for one only when a role is
+   1765 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -144,8 +144,8 @@ has stopped following the brand.
 | `tier` | count | what it is | set it? |
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
-| `semantic` | 103 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1761 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
+| `component` | 1765 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/Tabs.json

@@ -24,6 +24,11 @@
       "name": "onValueChange",
       "type": "(value: string) => void"
     },
+    {
+      "description": "Strip-only mode (gh#1021): the tabs drive content OUTSIDE the strip. No tabpanel is rendered, and the selected tab's `aria-controls` points at this id, which is the consumer's own region (give it `role=\"region\"` and a name). Content there is never remounted on a tab switch, so a typed draft survives. With the compound form it applies to triggers without a declared `TabsContent` (a declared panel wins). A pure filter with NO region to point at is not a tab strip; use `Segmented`. The root's `aria-label`/`aria-labelledby` name the `role=\"tablist\"` (gh#1020), and a compound `TabsTrigger` takes `count`/`overflowCount`/`showZero`/`countLabel`, drawn exactly like `items[].count`.",
+      "name": "controls",
+      "type": "IdProp"
+    },
     {
       "defaultValue": "\"default\"",
       "description": "Trigger-strip appearance — this is Ant Design's `type` under the library's own `variant` vocabulary. `default` is the pill strip (antd has no equivalent). `line` is UNDERLINE-ONLY: the selected trigger gets no ring or card border at all — only the token-owned 2px primary bar (--tabs-indicator-{background,size,offset}) — so the `:focus-visible` keyboard ring stays visible and clearly distinct from selection. `card` gives each tab a boxed face on a rail (--tabs-card-*). `editable-card` is `card` plus the add button and per-tab remove shortcut, and needs `onEdit` to do anything. With `items`, the variant is forwarded to the list; when composing manually, pass the same value to `<TabsList variant=\"line\">`.",

package/agent/components.json

@@ -7880,6 +7880,11 @@
         "name": "onValueChange",
         "type": "(value: string) => void"
       },
+      {
+        "description": "Strip-only mode (gh#1021): the tabs drive content OUTSIDE the strip. No tabpanel is rendered, and the selected tab's `aria-controls` points at this id, which is the consumer's own region (give it `role=\"region\"` and a name). Content there is never remounted on a tab switch, so a typed draft survives. With the compound form it applies to triggers without a declared `TabsContent` (a declared panel wins). A pure filter with NO region to point at is not a tab strip; use `Segmented`. The root's `aria-label`/`aria-labelledby` name the `role=\"tablist\"` (gh#1020), and a compound `TabsTrigger` takes `count`/`overflowCount`/`showZero`/`countLabel`, drawn exactly like `items[].count`.",
+        "name": "controls",
+        "type": "IdProp"
+      },
       {
         "defaultValue": "\"default\"",
         "description": "Trigger-strip appearance — this is Ant Design's `type` under the library's own `variant` vocabulary. `default` is the pill strip (antd has no equivalent). `line` is UNDERLINE-ONLY: the selected trigger gets no ring or card border at all — only the token-owned 2px primary bar (--tabs-indicator-{background,size,offset}) — so the `:focus-visible` keyboard ring stays visible and clearly distinct from selection. `card` gives each tab a boxed face on a rail (--tabs-card-*). `editable-card` is `card` plus the add button and per-tab remove shortcut, and needs `onEdit` to do anything. With `items`, the variant is forwarded to the list; when composing manually, pass the same value to `<TabsList variant=\"line\">`.",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 176,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2075,
+    "tokens": 2080,
     "vocabulary": 14
   },
   "files": [
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.3.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.4.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1761,
+      "component": 1765,
       "foundation": 211,
-      "semantic": 103
+      "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.3.0"
+  "version": "31.4.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 176 components, 2075 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.3.0.
+> A Japanese-enterprise React design system: 176 components, 2080 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.4.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.3.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.4.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -18,7 +18,7 @@ that can only fetch URLs.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 176 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/<Name>.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–35 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 103 `semantic` roles, 1761 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1765 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.3.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.4.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -1625,6 +1625,12 @@
     "tier": "semantic",
     "value": "none"
   },
+  {
+    "description": "The widest share of the header row the actions (`extra`) keep on ONE row before they wrap (gh#1025); the title keeps the rest. `initial` — default 60% at the call site.",
+    "name": "--page-header-extra-max-measure",
+    "tier": "semantic",
+    "value": "initial"
+  },
   {
     "description": "PageContainer `toolbar` — the fixed chrome band between the header and the (scrolling) body. ALL THREE knobs are quiet by default (rule #44): background — `transparent`, i.e. the band shows the page ground exactly as it did before the knob existed. It is bound at `:root` and NOT `initial`, unlike the divider below, because the default is a plain CSS keyword rather than another role token: there is nothing for a scoped [data-tenant]/.dark override to re-resolve, so the `initial` + call-site-fallback dance would buy nothing and only hide the default from anyone reading this file. A service that wants the band to read as its own surface — the design that asked for this knob puts a chat channel's workflow rail on the card ground — sets `--page-toolbar-background: hsl(var(--card));` ONCE in its theme. Never `className=\"bg-card\"` at the call site: that is hand-laid page chrome, it paints only under `variant=\"flush\"` gutters correctly by accident, and it cannot be re-themed per tenant. pad-block 0 — the band's ONLY breathing room, and the only one it should ever have. The band is chrome, so it sits FLUSH against the header above and the body below (src/styles/layout.css cancels the container's --page-band-gap from the band itself); there is deliberately no outside space to tune, because a ruled, painted band floating in a void divides nothing. A service that opts into the background or the divider gives the band its inset HERE (`--page-toolbar-pad-block: var(--space-2)`) instead of padding the strip at the call site. Still 0 by default: a transparent band is not a surface and has no inside to breathe, and under `fill` every pixel of it comes straight off the scroll viewport the slot exists to protect. divider — declared `initial` so the CALL SITE can fall back to --page-header-divider (`var(--page-toolbar-divider, var(--page-header-divider))`). One theme declaration therefore rules the whole page chrome consistently, and a scoped [data-tenant]/.dark override of the header divider still reaches the band — a `:root` binding would freeze it at the :root value (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"). Set `--page-toolbar-divider: none` to silence just this band.",
     "name": "--page-toolbar-background",
@@ -9384,7 +9390,7 @@
     "value": "initial"
   },
   {
-    "description": "Counter pill beside the label (gh#602). Geometry matches Button/Toggle count pills; colour does not. A Badge `secondary` fill is `--muted`, which is byte-identical to `--segmented-track-background`, so a consumer-nested Badge is 1.00:1 on unselected items. The pill therefore wears an opaque `--primary` / `--primary-foreground` pair that clears WCAG 2.2 SC 1.4.11 against both the recessed track (`--muted`) and the lifted slab (`--background`) in light and dark — measured in segmented-count-contrast.test.ts. antd has no `count` on SegmentedItemType; this knob exists because every faceted filter in the wild needs one and nesting Badge in `label` was the only API until now.",
+    "description": "Counter pill beside the label (gh#602). Geometry matches Button/Toggle count pills; COLOUR follows `Tabs` (gh#1019): resting = `--background` / `--muted-foreground`, byte-identical to a resting `.ui-tabs-count` on a CARD tab — the Tabs rule for a pill whose host surface is `--muted`, which the Segmented track is (a `--muted` pill there is 1.00:1, shape gone). The selected segment's pill = `--primary` / `--primary-foreground`, identical to the active tab's. gh#602 had painted EVERY pill primary — four identical blobs that dropped the one thing a count pill in a one-of-N control can say, \"this is the chosen one\". The resting number is held to SC 1.4.3 (≥ 4.5:1 in both themes, measured in segmented-count-tabs-convention-1019.test.ts); it is not the selection indicator, so its fill only has to stand off the track, not reach 3:1. antd has no `count` on SegmentedItemType; this knob exists because every faceted filter in the wild needs one and nesting Badge in `label` was the only API until now.",
     "name": "--segmented-count-min-width",
     "tier": "component",
     "value": "var(--button-count-min-width)"
@@ -9414,17 +9420,41 @@
     "value": "var(--space-1)"
   },
   {
-    "description": "Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width → 2px track background: the page's recessed neutral item colour: the label ink · hover / selected colour: the body ink item hover fill: the lighter neutral · item active fill: the heavier neutral item selected fill: the elevated surface label height = control height − track padding × 2 → 32 − 4 = 28 label padding-inline = control padding-x − border width → 12 − 1 = 11 icon gap = the small margin step / 2 → 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` — the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` — the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise.",
+    "description": "default = hsl(var(--background)) at the call site",
     "name": "--segmented-count-background",
     "tier": "component",
     "value": "initial"
   },
   {
-    "description": "Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width → 2px track background: the page's recessed neutral item colour: the label ink · hover / selected colour: the body ink item hover fill: the lighter neutral · item active fill: the heavier neutral item selected fill: the elevated surface label height = control height − track padding × 2 → 32 − 4 = 28 label padding-inline = control padding-x − border width → 12 − 1 = 11 icon gap = the small margin step / 2 → 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` — the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` — the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise.",
+    "description": "default = hsl(var(--muted-foreground)) at the call site",
     "name": "--segmented-count-color",
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "default = hsl(var(--primary)) at the call site",
+    "name": "--segmented-count-selected-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = 100% at the call site",
+    "name": "--segmented-count-selected-background-alpha",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--primary-foreground)) at the call site",
+    "name": "--segmented-count-selected-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = var(--stroke-hairline) at the call site",
+    "name": "--segmented-count-forced-outline-width",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Rule weight, both orientations and both halves of a labelled rule. default = var(--stroke-hairline), resolved at the call site (gh#906)",
     "name": "--separator-rule-size",

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

@@ -497,6 +497,7 @@ function Upload({
           disabled,
           onClick: openPicker,
           "aria-label": triggerAriaLabel,
+          className: "ui-upload-trigger",
           children: [
             /* @__PURE__ */ jsx(
               TriggerIcon,
@@ -553,7 +554,17 @@ function Upload({
       hiddenInput,
       liveRegion,
       rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
-      /* @__PURE__ */ jsx(Button, { type: "button", disabled, variant: triggerVariant, onClick: openPicker, children: children ?? t("dataEntry.upload.addImage") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          disabled,
+          variant: triggerVariant,
+          onClick: openPicker,
+          className: "ui-upload-trigger",
+          children: children ?? t("dataEntry.upload.addImage")
+        }
+      ),
       list
     ] });
   }

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

@@ -8,7 +8,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValu
     dir?: "ltr" | "rtl";
     activationMode?: "manual" | "automatic";
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, controls, listClassName, contentClassName, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**
@@ -24,7 +24,7 @@ export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<Reac
     value: string;
     /** RAC `isDisabled`; ALSO written to the button so `disabled:` utilities keep matching. */
     disabled?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & Pick<TabItemProp, "count" | "countLabel" | "overflowCount" | "showZero"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "value"> & {
     /** The panel's key — must match a `TabsTrigger value`. RAC `id`. */
     value: string;

package/dist/components/navigation/tabs.js

@@ -41,11 +41,14 @@ function TabCount({
   const { pill } = useCounterPill({ count, overflowCount, showZero, countLabel, slot: "tabs" });
   return pill;
 }
+const NO_LIST_LABEL = {};
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
   selectionSuppressed: false,
   size: "md",
-  panels: null
+  panels: null,
+  controls: void 0,
+  listLabel: NO_LIST_LABEL
 });
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
@@ -122,9 +125,12 @@ function Tabs({
   indicator,
   moreIcon,
   onTabScroll,
+  controls,
   listClassName,
   contentClassName,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...props
 }) {
   const { t } = useTranslation();
@@ -151,9 +157,20 @@ function Tabs({
       return next;
     });
   }, []);
+  const listLabel = React.useMemo(
+    () => ariaLabel === void 0 && ariaLabelledby === void 0 ? NO_LIST_LABEL : { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby },
+    [ariaLabel, ariaLabelledby]
+  );
   const frame = React.useMemo(
-    () => ({ orientation: resolvedOrientation, selectionSuppressed, size, panels }),
-    [resolvedOrientation, selectionSuppressed, size, panels]
+    () => ({
+      orientation: resolvedOrientation,
+      selectionSuppressed,
+      size,
+      panels,
+      controls,
+      listLabel
+    }),
+    [resolvedOrientation, selectionSuppressed, size, panels, controls, listLabel]
   );
   const editable = variant === "editable-card";
   const collapsible = items != null && overflow === "menu";
@@ -444,7 +461,7 @@ function Tabs({
           ] }) : null,
           extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
         ] }) : list,
-        items.map((item) => {
+        controls !== void 0 ? null : items.map((item) => {
           const keepMounted = !destroyOnHidden || item.forceRender === true;
           return /* @__PURE__ */ jsx(
             TabsContent,
@@ -465,6 +482,9 @@ function Tabs({
 }
 const TabsList = React.forwardRef(
   ({ className, variant = "default", loop: _loop, children, ...props }, ref) => {
+    const { listLabel } = React.useContext(TabsFrameContext);
+    const ownName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+    const name = ownName ? { "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] } : listLabel;
     const listRef = React.useRef(null);
     const setListRef = React.useCallback(
       (node) => {
@@ -479,6 +499,8 @@ const TabsList = React.forwardRef(
       AriaTabList,
       {
         ref: setListRef,
+        "aria-label": name["aria-label"],
+        "aria-labelledby": name["aria-labelledby"],
         className: cn(
           // `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
@@ -512,10 +534,22 @@ const TabsList = React.forwardRef(
 );
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
-  ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
-    const { orientation, selectionSuppressed, size, panels } = React.useContext(TabsFrameContext);
+  ({
+    className,
+    value,
+    disabled,
+    count,
+    overflowCount,
+    showZero,
+    countLabel,
+    children,
+    onKeyDown,
+    onClick,
+    ...props
+  }, ref) => {
+    const { orientation, selectionSuppressed, size, panels, controls } = React.useContext(TabsFrameContext);
     const controlsAPanel = panels === null || panels.has(value);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       AriaTab,
       {
         ref,
@@ -565,8 +599,10 @@ const TabsTrigger = React.forwardRef(
           // here for BOTH states, exactly as Radix did.
           "data-state": renderProps.isSelected && !selectionSuppressed ? "active" : "inactive",
           "aria-selected": renderProps.isSelected && !selectionSuppressed,
-          // RAC writes this unconditionally; see `TabsFrame.panels` (gh#643).
-          "aria-controls": controlsAPanel ? domProps["aria-controls"] : void 0,
+          // RAC writes this unconditionally; see `TabsFrame.panels` (gh#643). With no panel
+          // declared, a strip-only root's `controls` region takes its place — on the SELECTED
+          // tab only, the same rule RAC applies to a real panel (gh#1021).
+          "aria-controls": controlsAPanel ? domProps["aria-controls"] : renderProps.isSelected && !selectionSuppressed ? controls : void 0,
           "data-orientation": orientation,
           disabled,
           // CHAINED, not spread — the same reason `onKeyDown` below is. `withDomProps` lays the
@@ -591,7 +627,18 @@ const TabsTrigger = React.forwardRef(
           },
           tabIndex: props.tabIndex ?? domProps.tabIndex
         }),
-        children
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            TabCount,
+            {
+              count,
+              overflowCount,
+              showZero,
+              countLabel
+            }
+          )
+        ]
       }
     );
   }

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": "31.3.0",
+  "version": "31.4.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

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

@@ -255,7 +255,11 @@ export type StepsSeparatorProp = "chevron" | "arrow";
 export type TabItemProp = {
     value: string;
     label: React.ReactNode;
-    content: React.ReactNode;
+    /**
+     * The panel body. Optional because a strip-only `Tabs` (`controls`, gh#1021) renders no panel
+     * at all — its content lives in the consumer's own region.
+     */
+    content?: React.ReactNode;
     disabled?: boolean;
     /** Leading glyph inside the trigger (Ant Design `Tab.icon`). */
     icon?: React.ReactNode;
@@ -514,6 +518,20 @@ export type TabsProp = {
     moreIcon?: React.ReactNode;
     /** Ant Design `onTabScroll`, on the logical axis. @see TabsOnScrollProp */
     onTabScroll?: TabsOnScrollProp;
+    /**
+     * STRIP-ONLY MODE (gh#1021) — the `id` of the element OUTSIDE this `Tabs` that the strip
+     * drives: a status strip (未対応 / 対応中 / 完了) over a MasterDetail, a saved-view ribbon over a
+     * grid. With it set the `items` API renders the tablist ONLY — no `tabpanel`, empty or
+     * otherwise — and the selected tab's `aria-controls` points at this id, so the WAI-ARIA APG
+     * tab → controlled-region relationship stays real. The consumer's region is never mounted by
+     * the strip, so switching tabs cannot remount it (an unsent reply draft survives).
+     *
+     * Give the region an accessible name (`aria-label`/`aria-labelledby`, e.g. a `<section>`). In
+     * the compound form it applies to every trigger with no `TabsContent` declared for its value; a
+     * declared panel always wins. A pure FILTER with no region to point at is a `Segmented`
+     * (`radiogroup`), not a strip-only `Tabs`.
+     */
+    controls?: IdProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -2626,7 +2626,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TabsProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", {
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", "IdProp", {
             readonly field: "bodied";
             readonly local: true;
             readonly reason: "A positive boolean for the card strip's PANEL BODY (gh#762) — an axis on Tabs rather than a `CardTabs` export, because the thing missing was a surface the existing card face already repaints its edge into, not a second component. No vocabulary type: no other component draws a body for its own panel.";

package/dist/props/registry.js

@@ -3063,6 +3063,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp",
       "SizeProp",
       "ExtraProp",
+      "IdProp",
       {
         field: "bodied",
         local: true,

package/dist/styles/alert-layout.css

@@ -289,6 +289,18 @@
     background: var(--skeleton-background, hsl(var(--muted)));
   }
 
+  .ui-skeleton-line {
+    block-size: var(--skeleton-block-height);
+  }
+
+  .ui-skeleton-caption {
+    block-size: var(--skeleton-caption-height);
+  }
+
+  .ui-skeleton-title {
+    block-size: var(--skeleton-title-height);
+  }
+
   .ui-skeleton-table {
     overflow: hidden;
     border: var(--stroke-hairline) solid hsl(var(--border));
@@ -327,18 +339,6 @@
     border-radius: var(--skeleton-radius, var(--radius));
     padding: var(--skeleton-card-inset);
 
-    .ui-skeleton-line {
-      block-size: var(--skeleton-block-height);
-    }
-
-    .ui-skeleton-caption {
-      block-size: var(--skeleton-caption-height);
-    }
-
-    .ui-skeleton-title {
-      block-size: var(--skeleton-title-height);
-    }
-
     .ui-skeleton-detail-label {
       block-size: var(--skeleton-caption-height);
       inline-size: var(--skeleton-label-width);

package/dist/styles/control.css

@@ -1282,13 +1282,29 @@
     margin-inline-start: var(--segmented-count-gap);
     border-radius: var(--segmented-count-radius);
     padding-inline: var(--segmented-count-space-inline);
-    background: var(--segmented-count-background, hsl(var(--primary)));
-    color: var(--segmented-count-color, hsl(var(--primary-foreground)));
+
+    background: var(--segmented-count-background, hsl(var(--background)));
+    color: var(--segmented-count-color, hsl(var(--muted-foreground)));
     font-size: var(--segmented-count-font-size);
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
 
+  .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+    background: var(
+      --segmented-count-selected-background,
+      hsl(var(--primary) / var(--segmented-count-selected-background-alpha, 100%))
+    );
+    color: var(--segmented-count-selected-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+      outline: var(--segmented-count-forced-outline-width, var(--stroke-hairline)) solid
+        currentColor;
+    }
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;

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

@@ -361,6 +361,10 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-upload-trigger {
+    align-self: start;
+  }
+
   .ui-upload-grid {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/form-layout.css

@@ -60,6 +60,9 @@
     inline-size: 100%;
 
     align-self: start;
+
+    --form-field-control-band: initial;
+    --form-field-first-line: initial;
   }
 
   .ui-form-field[data-layout="inline"] {
@@ -84,6 +87,40 @@
 
     min-height: var(--control-height);
     align-content: center;
+
+    grid-template-rows: minmax(var(--form-field-control-band, auto), auto);
+    align-items: center;
+  }
+
+  .ui-form-field-control:has(> .ui-form-field-note:first-child) {
+    grid-template-rows: none;
+  }
+
+  .ui-form-field-control
+    > fieldset
+    > :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field) {
+    align-self: start;
+    margin-block-start: max(
+      0px,
+      calc(
+        (
+            var(--form-field-control-band, 0px) - var(--font-size-base) *
+              var(--control-label-line-height)
+          ) /
+          2
+      )
+    );
+  }
+
+  .ui-form-field:has(
+    > .ui-form-field-control
+      > fieldset
+      > :is(.ui-control-multiline, [data-slot="textarea-affix-wrapper"])
+  ) {
+    --form-field-first-line: calc(
+      var(--control-border-width, var(--stroke-hairline)) + var(--control-multiline-padding-block) +
+        0.5lh
+    );
   }
 
   .ui-form-field-control > * {
@@ -96,13 +133,14 @@
     ) {
     grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
     align-items: start;
+    --form-field-control-band: var(--control-height);
     column-gap: var(--form-label-gap);
     row-gap: var(--space-stack-xs);
   }
 
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
     > .ui-form-field-label {
-    min-block-size: var(--control-height);
+    min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
     flex-wrap: wrap;
   }
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -131,12 +169,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -165,12 +204,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -199,12 +239,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -233,12 +274,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.3.0",
+  "version": "31.4.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -918,7 +918,8 @@
 
     .ui-page-header-extra {
       width: auto;
-      flex-shrink: 1;
+      flex-shrink: 0;
+      max-inline-size: var(--page-header-extra-max-measure, 60%);
       min-inline-size: auto;
       justify-content: flex-end;
     }

package/dist/tokens/components/segmented.css

@@ -46,4 +46,8 @@
   --segmented-count-gap: var(--space-1);
   --segmented-count-background: initial;
   --segmented-count-color: initial;
+  --segmented-count-selected-background: initial;
+  --segmented-count-selected-background-alpha: initial;
+  --segmented-count-selected-color: initial;
+  --segmented-count-forced-outline-width: initial;
 }

package/dist/tokens/semantic/layout.css

@@ -51,6 +51,8 @@
   --page-footer-pad-block-end: var(--space-stack-md);
   --page-header-divider: none;
 
+  --page-header-extra-max-measure: initial;
+
   --page-toolbar-background: transparent;
   --page-toolbar-pad-block: 0px;
   --page-toolbar-divider: initial;

package/docs/data-entry/segmented.tsx

@@ -90,6 +90,8 @@ export default function Demo() {
             <CardDescription>
               一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
               ます。ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+              件数は Tabs と同じ扱いで、選択中の項目だけ強調し、ほかは控えめな色です。0 件を隠す
+              ときは `showZero: false`。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/navigation/tabs.tsx

@@ -146,6 +146,7 @@ export default function Demo() {
     },
   ]);
   const [editableTab, setEditableTab] = useState("je-0042");
+  const [inboxStatus, setInboxStatus] = useState("open");
 
   return (
     <PageContainer
@@ -646,6 +647,48 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* STRIP-ONLY (gh#1021). The strip drives a region OUTSIDE the Tabs, so no tabpanel is
+            rendered and the view below is never remounted by a tab switch. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>controls · タブ列だけ(外部の領域を切り替える)</CardTitle>
+            <CardDescription>
+              controls に外部領域の id を渡すと tabpanel を描かず、選択中のタブの aria-controls
+              がその領域を指す。領域は Tabs の外にあるのでタブを切り替えても再マウントされない。
+              compound の TabsTrigger も items と同じ count を描く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Tabs
+                aria-label="対応状況"
+                controls="tabs-inbox-view"
+                variant="line"
+                value={inboxStatus}
+                onValueChange={setInboxStatus}
+                items={[
+                  { value: "open", label: "未対応", count: 12, countLabel: "件" },
+                  { value: "doing", label: "対応中", count: 3, countLabel: "件" },
+                  { value: "done", label: "完了", count: 128, countLabel: "件" },
+                ]}
+              />
+              <section id="tabs-inbox-view" aria-label="スレッド一覧">
+                <Text as="p">表示中: {inboxStatus}</Text>
+              </section>
+              <Tabs aria-label="保存ビュー" controls="tabs-inbox-view" defaultValue="mine">
+                <TabsList variant="line">
+                  <TabsTrigger value="mine" count={4} countLabel="件">
+                    自分の担当
+                  </TabsTrigger>
+                  <TabsTrigger value="all" count={143} countLabel="件">
+                    すべて
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>indicator · animated</CardTitle>

package/docs/query/data-state.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import {
   Badge,
@@ -13,7 +13,7 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import { SkeletonTable } from "@godxjp/ui/feedback";
-import { Text } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { AuthExpiryProvider, DataState } from "@godxjp/ui/query";
 
@@ -51,15 +51,36 @@ function SuccessBlock() {
   );
 }
 
+/** Loads for 2s and comes back empty — the whole lifecycle: skeleton → EmptyState. */
+const LOAD_MS = 2000;
+
 function LoadingBlock() {
+  const client = useQueryClient();
   const query = useQuery({
     queryKey: ["ds-loading"],
-    queryFn: () => new Promise<Invoice[]>(() => {}),
+    queryFn: () => new Promise<Invoice[]>((resolve) => setTimeout(() => resolve([]), LOAD_MS)),
   });
   return (
-    <DataState query={query} skeleton={<SkeletonTable />}>
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
+    <Flex direction="col" gap="sm">
+      <DataState
+        query={query}
+        skeleton={<SkeletonTable rows={4} columns={3} />}
+        isEmpty={(d) => d.length === 0}
+        empty={
+          <EmptyState title="データがありません" description="条件に合う請求書はありません。" />
+        }
+      >
+        {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+      </DataState>
+      {/* resetQueries puts the query back to pending, so the skeleton plays again. */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
+      >
+        もう一度読み込む
+      </Button>
+    </Flex>
   );
 }
 
@@ -174,8 +195,11 @@ export default function Demo() {
 
           <Card>
             <CardHeader>
-              <CardTitle level={2}>Loading (skeleton)</CardTitle>
-              <CardDescription>The skeleton prop renders during the pending phase.</CardDescription>
+              <CardTitle level={2}>Loading → empty</CardTitle>
+              <CardDescription>
+                The skeleton (animated) renders while pending; when the data arrives empty the
+                skeleton goes away and the `empty` slot renders.
+              </CardDescription>
             </CardHeader>
             <CardContent flush>
               <LoadingBlock />

package/docs/showcase/table-view-tabs.tsx

@@ -367,19 +367,14 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
   neutral: "bg-muted-foreground",
 };
 
-// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
-// the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
-// raw `<span className="flex …">`, i.e. utility layout.
-function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
+// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row takes
+// `as="span"`. The count is the trigger's own `count` slot (gh#1021), drawn exactly as the `items`
+// API draws it, rather than a hand-placed Badge.
+function ViewTrigger({ view }: { view: SavedView }) {
   return (
     <Flex as="span" align="center" gap="sm">
       <span aria-hidden="true" className={`size-2 rounded-full ${DOT_CLASS[view.dot]}`} />
       <span>{view.label}</span>
-      <Badge as="span" tone="neutral" shape="pill">
-        <Text as="span" size="2xs" weight="medium" tabular>
-          {count}
-        </Text>
-      </Badge>
     </Flex>
   );
 }
@@ -432,23 +427,30 @@ export default function Demo() {
       }
     >
       <Flex direction="col" gap="md">
-        {/* Saved-view ribbon — controlled Tabs; switching swaps the preset below. */}
-        <Tabs value={view} onValueChange={(v) => setView(v as ViewId)}>
+        {/* Saved-view ribbon — controlled, strip-only Tabs (gh#1021): `controls` points the
+            selected tab at the grid below, which lives outside the Tabs and is never remounted. */}
+        <Tabs
+          aria-label="保存ビュー"
+          controls="attendance-grid"
+          value={view}
+          onValueChange={(v) => setView(v as ViewId)}
+        >
           <TabsList variant="line" className="h-auto w-full flex-wrap justify-start border-b">
             {VIEWS.map((v) => (
               <TabsTrigger
                 key={v.id}
                 value={v.id}
+                count={counts[v.id]}
                 className="rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
               >
-                <ViewTrigger view={v} count={counts[v.id]} />
+                <ViewTrigger view={v} />
               </TabsTrigger>
             ))}
           </TabsList>
         </Tabs>
 
         {/* The grid — columns + data both come from the active saved view. */}
-        <Card>
+        <Card id="attendance-grid" role="region" aria-label={active.label}>
           <CardContent flush>
             <DataTable
               data={rows}

package/docs/themes/flat.css

@@ -235,7 +235,9 @@
   --conversations-item-active-background: hsl(220 20% 90%);
   --conversations-item-active-color: hsl(220 26% 12%);
   --tabs-count-active-background: hsl(220 20% 86%);
+  --segmented-count-selected-background: hsl(220 20% 86%);
   --tabs-count-active-color: hsl(220 26% 12%);
+  --segmented-count-selected-color: hsl(220 26% 12%);
   --toggle-soft-hover-background: hsl(220 16% 90%);
   --toggle-pressed-count-background: hsl(220 20% 84%);
   --toggle-pressed-count-color: hsl(220 26% 12%);
@@ -419,7 +421,9 @@
   --conversations-item-active-background: hsl(220 16% 22%);
   --conversations-item-active-color: hsl(220 20% 94%);
   --tabs-count-active-background: hsl(220 16% 26%);
+  --segmented-count-selected-background: hsl(220 16% 26%);
   --tabs-count-active-color: hsl(220 20% 94%);
+  --segmented-count-selected-color: hsl(220 20% 94%);
   --toggle-soft-hover-background: hsl(220 14% 22%);
   --toggle-pressed-count-background: hsl(220 16% 26%);
   --toggle-pressed-count-color: hsl(220 20% 94%);

package/docs/themes/glassmorphism.css

@@ -613,7 +613,9 @@
   --conversations-item-active-background-alpha: 18%;
   --conversations-item-active-color: hsl(var(--glass-ink));
   --tabs-count-active-background-alpha: 24%;
+  --segmented-count-selected-background-alpha: 24%;
   --tabs-count-active-color: hsl(var(--glass-ink));
+  --segmented-count-selected-color: hsl(var(--glass-ink));
   --toggle-pressed-count-background-alpha: 26%;
   --toggle-pressed-count-color: hsl(var(--glass-ink));
   --toggle-pressed-border-color-alpha: 45%;

package/docs/themes/neubrutalism.css

@@ -279,7 +279,9 @@
   --conversations-item-active-background: hsl(48 90% 78%);
   --conversations-item-active-color: hsl(0 0% 0%);
   --tabs-count-active-background: hsl(48 90% 74%);
+  --segmented-count-selected-background: hsl(48 90% 74%);
   --tabs-count-active-color: hsl(0 0% 0%);
+  --segmented-count-selected-color: hsl(0 0% 0%);
   --toggle-soft-hover-background: hsl(48 90% 84%);
   --toggle-pressed-count-background: hsl(48 90% 74%);
   --toggle-pressed-count-color: hsl(0 0% 0%);
@@ -331,6 +333,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 78%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 74%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 74%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 84%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 74%);
   }
@@ -423,7 +426,9 @@
   --conversations-item-active-background: hsl(48 90% 26%);
   --conversations-item-active-color: hsl(0 0% 100%);
   --tabs-count-active-background: hsl(48 90% 26%);
+  --segmented-count-selected-background: hsl(48 90% 26%);
   --tabs-count-active-color: hsl(0 0% 100%);
+  --segmented-count-selected-color: hsl(0 0% 100%);
   --toggle-soft-hover-background: hsl(48 90% 24%);
   --toggle-pressed-count-background: hsl(48 90% 26%);
   --toggle-pressed-count-color: hsl(0 0% 100%);
@@ -469,6 +474,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 24%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 26%);
   }

package/package.json

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