@godxjp/ui 27.12.1 → 28.1.0

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

@@ -97,6 +97,11 @@ const Card = React.forwardRef(
                 value: item.key,
                 label: item.tab,
                 disabled: item.disabled,
+                // antd's per-tab remove control. Forwarded rather than dropped: `items` is built
+                // AFTER `...tabProps` above, so a consumer cannot supply these from outside —
+                // this mapping is the only place they can arrive (gh#757).
+                closable: item.closable,
+                closeIcon: item.closeIcon,
                 // The body belongs to the SELECTED tab and to no other: the card has exactly one
                 // set of children, so handing them to every panel would render them N times the
                 // moment `destroyOnHidden={false}` kept the hidden panels mounted.

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, 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, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**

package/dist/components/navigation/tabs.js

@@ -8,6 +8,7 @@ import {
   Tabs as AriaTabs
 } from "react-aria-components";
 import { MoreHorizontal, Plus, X } from "lucide-react";
+import { useCounterPill } from "../ui/toggle.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";
@@ -31,6 +32,15 @@ function triggerSizeClassName(size) {
     size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
   );
 }
+function TabCount({
+  count,
+  overflowCount,
+  showZero,
+  countLabel
+}) {
+  const { pill } = useCounterPill({ count, overflowCount, showZero, countLabel, slot: "tabs" });
+  return pill;
+}
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
   selectionSuppressed: false,
@@ -99,6 +109,7 @@ function Tabs({
   tabPlacement,
   size = "md",
   centered,
+  bodied,
   extra,
   destroyOnHidden = true,
   onEdit,
@@ -178,12 +189,13 @@ function Tabs({
   const showAdd = editable && !hideAdd && Boolean(onEdit);
   const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
+  const bodiedCard = card && Boolean(bodied);
   const sizeTriggerClassName = triggerSizeClassName(size);
   const CARD_FACE = {
-    top: "rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] data-[state=active]:border-b-background",
-    bottom: "rounded-[0_0_var(--tabs-card-radius)_var(--tabs-card-radius)] data-[state=active]:border-t-background",
-    start: "rounded-s-[var(--tabs-card-radius)] rounded-e-none data-[state=active]:border-e-background",
-    end: "rounded-e-[var(--tabs-card-radius)] rounded-s-none data-[state=active]:border-s-background"
+    top: "rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] data-[state=active]:border-b-[hsl(var(--tabs-panel-background,var(--background)))]",
+    bottom: "rounded-[0_0_var(--tabs-card-radius)_var(--tabs-card-radius)] data-[state=active]:border-t-[hsl(var(--tabs-panel-background,var(--background)))]",
+    start: "rounded-s-[var(--tabs-card-radius)] rounded-e-none data-[state=active]:border-e-[hsl(var(--tabs-panel-background,var(--background)))]",
+    end: "rounded-e-[var(--tabs-card-radius)] rounded-s-none data-[state=active]:border-s-[hsl(var(--tabs-panel-background,var(--background)))]"
   };
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
@@ -258,6 +270,16 @@ function Tabs({
               // pixel and `justify-content` has nothing left to centre — measured, the leading and
               // trailing gaps were both 0px with `centered` on and off.
               centered && "flex-none",
+              // LINE face: same argument as the card face below, and from the same source — antd
+              // puts no `flex-grow` on a tab of ANY `type`, so a line tab is content-width too.
+              // `card` was fixed on that reasoning (gh#736); `line` was left on the base `flex-1`
+              // and kept stretching. Measured by a consumer on a 1200px strip: three tabs at
+              // 321px each for labels needing 83 / 84 / 56px, so the active underline ran 321px
+              // under a 56px label.
+              //
+              // `centered` is NOT the escape hatch for this: it centres, which trades one wrong
+              // geometry for another, and it is antd's prop for centring rather than for width.
+              variant === "line" && "flex-none",
               // The merged edge is the SURFACE colour, never `transparent`: the rail is an inset
               // shadow at the strip's padding-box edge, so a see-through border would let that 1px
               // of rail run straight across the tab it is joined to.
@@ -271,7 +293,14 @@ function Tabs({
               // the × ended up 90px from the tab's own trailing edge (179px on a two-tab
               // strip). antd's is 8px away. This is also why the face read as a free-standing
               // bordered box rather than a tab.
-              card && "flex-none border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]",
+              //
+              // THE ACTIVE FACE IS THE BODY'S SURFACE, from the same knob the body reads
+              // (gh#762). The base trigger's `data-[state=active]:bg-background` was right only
+              // while the two could not disagree; once a service can retint the body, an active
+              // tab still painting `--background` reads as a DIFFERENT box sitting on the panel
+              // — which is the "two stacked boxes" complaint in one property. Same utilities
+              // group, so tailwind-merge drops the base step instead of stacking two fills.
+              card && "flex-none border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))] data-[state=active]:bg-[hsl(var(--tabs-panel-background,var(--background)))]",
               card && CARD_FACE[placement]
             ),
             children: [
@@ -285,6 +314,15 @@ function Tabs({
                 }
               ) : null,
               item.label,
+              /* @__PURE__ */ jsx(
+                TabCount,
+                {
+                  count: item.count,
+                  overflowCount: item.overflowCount,
+                  showZero: item.showZero,
+                  countLabel: item.countLabel
+                }
+              ),
               removable ? (
                 // A POINTER SHORTCUT, not a control — and that is measured, not stylistic. antd's own
                 // TabNode puts a real <button> beside the role="tab" element; rendered through
@@ -334,6 +372,7 @@ function Tabs({
       "data-placement": placement,
       "data-size": size,
       "data-centered": centered ? "true" : void 0,
+      "data-bodied": bodiedCard ? "true" : void 0,
       "data-animated-ink-bar": motion.inkBar ? "true" : "false",
       "data-animated-tab-pane": motion.tabPane ? "true" : "false",
       "data-indicator-size": indicatorSize,
@@ -363,6 +402,7 @@ function Tabs({
         "data-placement": placement,
         "data-size": size,
         "data-centered": centered ? "true" : void 0,
+        "data-bodied": bodiedCard ? "true" : void 0,
         "data-animated-ink-bar": motion.inkBar ? "true" : "false",
         "data-animated-tab-pane": motion.tabPane ? "true" : "false",
         "data-indicator-size": indicatorSize,
@@ -493,7 +533,15 @@ const TabsTrigger = React.forwardRef(
           // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
-          "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:group-data-[variant=default]/tabs-list:data-[state=active]:border-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:flex-none 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 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          // `group-data-[variant=line]/tabs-list:flex-none` is the COMPOUND half of gh#757's
+          // width fix (gh#762). That fix landed on the `items` renderer only, which is the path
+          // the reporter measured; a hand-composed `<TabsList variant="line" className="w-full">`
+          // — what a saved-view strip that has to reach its own triggers writes — still ran on
+          // the base `flex-1`. Measured on a 1200px strip: three triggers at 394.66px each for
+          // labels needing 107 / 95 / 53px, i.e. the SAME defect one API away. antd puts no
+          // `flex-grow` on a tab of any `type`, so the rule belongs to the line STRIP rather than
+          // to one construction path; the pill strip keeps `flex-1`, which is what fills its box.
+          "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:group-data-[variant=default]/tabs-list:data-[state=active]:border-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:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

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

@@ -11,6 +11,28 @@ type ToggleGroupBaseProp = Omit<React.ComponentPropsWithoutRef<"div">, "defaultV
     disabled?: boolean;
     /** Which way the arrow keys walk the group. */
     orientation?: "horizontal" | "vertical";
+    /**
+     * May the group end up with NOTHING selected? Omitted (`false`) it may, which is what a tag
+     * filter wants — pressing the selected chip again clears it and reports `""`. Set it and the
+     * selected item stays selected when it is pressed again.
+     *
+     * **It also decides the ARIA role of a `type="single"` group (gh#744)**, because emptiness is
+     * exactly what the two roles disagree about. ARIA has no "press again to deselect" for a radio:
+     * a radiogroup that has a selection always has exactly one checked item, so a radiogroup that
+     * the user just emptied is a state a screen reader cannot read out. Therefore:
+     *
+     * - omitted → `role="group"` + `aria-pressed` per item (a row of toggle buttons, which MAY be
+     *   all-off) — this is the default, so no existing single group changes behaviour;
+     * - set → `role="radiogroup"` + `role="radio"` / `aria-checked` per item, and the arrow keys
+     *   move the SELECTION as APG's radio-group pattern requires, not just the focus.
+     *
+     * The name is React Aria's own (`useToggleGroupState`, which this component is built on) —
+     * neither antd nor Radix names the capability. See `docs/DESIGN-AUTHORITY.md`.
+     *
+     * On `type="multiple"` it only keeps the last remaining item selected; the roles do not move
+     * (a row of `aria-pressed` buttons is already the right reading there).
+     */
+    disallowEmptySelection?: boolean;
     /**
      * Let the row break onto further lines instead of running past its rail (gh#741). Same name,
      * same boolean shape and same `data-wrap` attribute as `Flex` — one spelling answers "what does

package/dist/components/ui/toggle-group.js

@@ -13,6 +13,7 @@ import {
   useCounterPill
 } from "./toggle.js";
 const ToggleGroupContext = React.createContext({});
+const ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
 function toSelectedKeys(value) {
   if (value == null) {
     return void 0;
@@ -39,10 +40,21 @@ const ToggleGroup = React.forwardRef(
     defaultValue,
     onValueChange,
     disabled,
+    disallowEmptySelection,
     loop: _loop,
     ...props
   }, ref) => {
-    const context = React.useMemo(() => ({ variant, size, shape }), [variant, size, shape]);
+    const radioSemantics = type === "single" && disallowEmptySelection === true;
+    const arrowNav = React.useRef(false);
+    const groupElement = React.useRef(null);
+    const [inToolbar, setInToolbar] = React.useState(false);
+    React.useLayoutEffect(() => {
+      setInToolbar(!!groupElement.current?.parentElement?.closest('[role="toolbar"]'));
+    }, []);
+    const context = React.useMemo(
+      () => ({ variant, size, shape, radioSemantics, arrowNav, inToolbar }),
+      [variant, size, shape, radioSemantics, inToolbar]
+    );
     const selectedKeys = React.useMemo(() => toSelectedKeys(value), [value]);
     const defaultSelectedKeys = React.useMemo(() => toSelectedKeys(defaultValue), [defaultValue]);
     const handleSelectionChange = (keys) => {
@@ -69,7 +81,33 @@ const ToggleGroup = React.forwardRef(
         defaultSelectedKeys,
         onSelectionChange: handleSelectionChange,
         isDisabled: disabled,
-        render: (domProps) => /* @__PURE__ */ jsx("div", { ...props, ...domProps, tabIndex: props.tabIndex ?? domProps.tabIndex }),
+        disallowEmptySelection,
+        render: (domProps) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...domProps,
+            ref: (node) => {
+              groupElement.current = node;
+              const aria = domProps.ref;
+              if (typeof aria === "function") aria(node);
+              else if (aria) aria.current = node;
+            },
+            ...type === "single" && !radioSemantics ? { role: "group", "aria-orientation": void 0 } : null,
+            onKeyDownCapture: (event) => {
+              if (radioSemantics) {
+                arrowNav.current = ARROW_KEYS.has(event.key);
+                if (arrowNav.current) {
+                  queueMicrotask(() => {
+                    arrowNav.current = false;
+                  });
+                }
+              }
+              domProps.onKeyDownCapture?.(event);
+            },
+            tabIndex: props.tabIndex ?? domProps.tabIndex
+          }
+        ),
         children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
       }
     );
@@ -105,6 +143,9 @@ const ToggleGroupItem = React.forwardRef(
     });
     const groupState = React.useContext(ToggleGroupStateContext);
     const isPressed = groupState?.selectedKeys.has(value) ?? false;
+    const isSingle = groupState?.selectionMode === "single";
+    const radioSemantics = context.radioSemantics === true;
+    const rovingTabIndex = radioSemantics && !context.inToolbar && groupState && groupState.selectedKeys.size > 0 ? isPressed ? 0 : -1 : void 0;
     return /* @__PURE__ */ jsxs(
       ToggleButton,
       {
@@ -122,7 +163,22 @@ const ToggleGroupItem = React.forwardRef(
         ...props,
         id: value,
         isDisabled: disabled,
-        render: (domProps) => restoreDomProps(props, domProps),
+        render: (domProps) => restoreDomProps(props, {
+          ...domProps,
+          ...isSingle && !radioSemantics ? { role: void 0, "aria-checked": void 0, "aria-pressed": isPressed } : null,
+          ...rovingTabIndex == null ? null : { tabIndex: rovingTabIndex },
+          // Selection follows focus, as APG requires of a radio group — but only when an arrow
+          // key is what moved it. Measured otherwise: RAC's toolbar Tab handler focuses the
+          // LAST item on the way out, which silently moved the selection to it.
+          ...radioSemantics ? {
+            onFocus: (event) => {
+              if (context.arrowNav?.current && groupState && groupState.selectedKeys.size > 0 && !isPressed) {
+                groupState.setSelected(value, true);
+              }
+              domProps.onFocus?.(event);
+            }
+          } : null
+        }),
         children: [
           children,
           pill

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

@@ -42,9 +42,18 @@ type TogglePressedFields = {
     /** Fired with the NEW pressed state — RAC `onChange`. */
     onPressedChange?: (pressed: boolean) => void;
 };
-/** Counter pill shared by `Toggle` and `ToggleGroupItem`. ACCESSIBLE NAME. */
-declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, }: ToggleCountFields & {
+/**
+ * Counter pill shared by `Toggle`, `ToggleGroupItem` and `Tabs` items. ACCESSIBLE NAME.
+ *
+ * `slot` names the hooks the pill emits (`data-slot="<slot>-count"` / `.ui-<slot>-count`) so a
+ * third component can reuse the whole construction — the Intl formatting, the `overflowCount`
+ * cap, and above all the `aria-hidden` + `sr-only` split that keeps «未対応12» out of the
+ * accessible name (gh#734) — without a second counting API growing beside this one (gh#762).
+ * It defaults to `toggle`, so every existing call emits the identical markup it always has.
+ */
+declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, }: ToggleCountFields & {
     ariaLabel?: string;
+    slot?: string;
 }): {
     pill: null;
     resolvedAriaLabel: string | undefined;

package/dist/components/ui/toggle.js

@@ -50,7 +50,8 @@ function useCounterPill({
   overflowCount = 99,
   showZero = true,
   countLabel,
-  ariaLabel
+  ariaLabel,
+  slot = "toggle"
 }) {
   const { locale } = useTranslation();
   const visible = count != null && (count !== 0 || showZero);
@@ -65,7 +66,7 @@ function useCounterPill({
   const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
   return {
     pill: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "data-slot": "toggle-count", className: "ui-toggle-count", "aria-hidden": "true", children: formatted }),
+      /* @__PURE__ */ jsx("span", { "data-slot": `${slot}-count`, className: `ui-${slot}-count`, "aria-hidden": "true", children: formatted }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
     ] }),
     resolvedAriaLabel: ariaLabel == null ? ariaLabel : `${ariaLabel}, ${spoken}`

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.12.1",
+  "version": "28.1.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/data-display.prop.d.ts

@@ -972,4 +972,19 @@ export type CardTabItemProp = {
     tab: React.ReactNode;
     /** Ant Design `disabled` — the tab stays in the strip and in the roving focus, unselectable. */
     disabled?: boolean;
+    /**
+     * Ant Design `closable` — honoured by `tabProps={{ variant: "editable-card" }}`, where it
+     * decides whether THIS tab gets a remove button (gh#757).
+     *
+     * Without it the strip is all-or-nothing: `editable-card` puts a × on every tab, including the
+     * one that is not deletable — a consumer measured 3 of 3 removable where 2 was right. It could
+     * not be patched from outside either, because `Card` builds `items` AFTER spreading
+     * `...tabProps`, so a hand-written `items` never survived.
+     *
+     * Default (undefined) stays removable, which is antd's own default and `Tabs`' (`closable !==
+     * false`) — this only adds the way to say no.
+     */
+    closable?: boolean;
+    /** Ant Design `closeIcon` — replaces the default × on this tab's remove button. */
+    closeIcon?: React.ReactNode;
 };

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

@@ -264,6 +264,32 @@ export type TabItemProp = {
     closable?: boolean;
     /** Ant Design `Tab.closeIcon` — replaces the default × on this item's remove button. */
     closeIcon?: React.ReactNode;
+    /**
+     * The count beside the label — 「未対応 **12**」, the list-screen pattern (gh#762).
+     *
+     * It is the SAME counter vocabulary `Button` (gh#312) and `Toggle`/`ToggleGroupItem` (gh#734)
+     * already publish, drawn by the same helper, so a counted tab and the counted chip under it
+     * are one thing at one size and one accessible shape. Formatted with `Intl.NumberFormat` in
+     * the active locale — never `String(n)`, never a hand-rolled thousands separator.
+     *
+     * WHY IT IS A SLOT AND NOT `label: <span>未対応 <Badge count={12} /></span>` (antd's answer):
+     * with the number inside the label the PACKAGE owns none of it — not the size, not the gap,
+     * not the tone as the tab moves between selected / unselected / disabled — so every consumer
+     * lands somewhere different. The slot is what lets the tab state drive the pill.
+     */
+    count?: number;
+    /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). Default `99`. */
+    overflowCount?: number;
+    /** Render the pill when `count` is 0. Default `true`, matching Button and Toggle. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count MEANS, folded into the tab's accessible name so it
+     * never announces as label-then-bare-digits. The digits concatenate straight onto the label in
+     * the accessibility tree («未対応12», gh#734's defect), so the pill is `aria-hidden` and the
+     * spoken clause is an `sr-only` sibling: `countLabel="未対応の課題"` reads
+     * 「未対応, 12 未対応の課題」. Already localized when it arrives — pass a `t()` string.
+     */
+    countLabel?: string;
     /**
      * Ant Design `Tab.forceRender`. Mounts THIS panel up front and keeps it mounted while another
      * tab is selected, without turning that on for the whole strip the way `destroyOnHidden={false}`
@@ -404,6 +430,30 @@ export type TabsProp = {
     size?: "sm" | "md" | "lg";
     /** Ant Design `centered` — centre the trigger strip on its own inline axis. */
     centered?: boolean;
+    /**
+     * Draw the PANEL BODY the card strip opens into, so the strip and the panel are ONE object
+     * (gh#762): a surface, a border continuous with the rail, and the radius on the two corners
+     * away from the strip. The active tab's block-end edge is repainted in that body's own colour,
+     * which is what makes it read as opened into the body rather than closed off above it.
+     *
+     * WHY IT EXISTS. `variant="card"` already repaints the active face's merged edge — antd's
+     * `genCardStyle` — but the package shipped no body for it to merge INTO, so the consumer had to
+     * supply one and every choice was wrong. Measured on 28.0.0 against a `variant="card"` strip at
+     * 1440px: `<Card>` left an 8px gap AND added a second 1px border at a 9.708px radius (two
+     * stacked boxes), `<Card variant="borderless">` left the same 8px gap with no line at all, and
+     * no box at all left the 8px gap over a transparent panel. The gap is `--tabs-root-gap`, which
+     * is correct for every OTHER variant — a body is not a gap tweak, it is the missing half of the
+     * card face.
+     *
+     * HONOURED ONLY BY `card` / `editable-card`, and that is a statement, not a limitation. The
+     * pill strip is a free-floating control and the `line` strip's own body is the CARD around it —
+     * `<Card tabList>` is that pairing, already built and already joined. Passing `bodied` to any
+     * other variant emits no attribute and changes no pixel.
+     *
+     * OPT-IN, so no strip on 28.0.0 moves. A service that wants every card strip bodied has the
+     * `card`-variant defaults as a theme decision, not a prop it must repeat.
+     */
+    bodied?: boolean;
     /** Ant Design `tabBarExtraContent`, renamed and made logical. @see TabsExtraProp */
     extra?: TabsExtraProp;
     /**

package/dist/props/registry.d.ts

@@ -2350,7 +2350,11 @@ 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", {
+            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.";
+        }];
     };
     readonly TabsVariantProp: {
         readonly group: "navigation";
@@ -2414,7 +2418,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TabItemProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "LabelProp", "ChildrenProp", "DisabledProp", "IconProp"];
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "ChildrenProp", "DisabledProp", "IconProp", {
+            readonly field: "count";
+            readonly local: true;
+            readonly reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp and ToggleProp (count/overflowCount/showZero) and drawn by the same `useCounterPill`, so a counted tab, a counted chip and a counted button are one thing — gh#312 / gh#734 / gh#762.";
+        }, {
+            readonly field: "countLabel";
+            readonly local: true;
+            readonly reason: "Localized unit folded into the tab's accessible name («未対応, 12 件の課題»), so the digits never concatenate onto the label — gh#734's measured defect, same field name as Button/Toggle.";
+        }];
     };
     readonly FormFieldArrayProp: {
         readonly group: "form";
@@ -2471,6 +2483,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "wrap";
             readonly local: true;
             readonly reason: "The SAME boolean shorthand for flex-wrap that FlexProp carries, on the row that owns a chip set — one spelling for 'what does this row do when it does not fit' (gh#741). Opt-in, and the same default for every variant: paint must not decide geometry.";
+        }, {
+            readonly field: "disallowEmptySelection";
+            readonly local: true;
+            readonly reason: "React Aria's own name for the capability (useToggleGroupState), which this component is built on; neither antd nor Radix names it (docs/DESIGN-AUTHORITY.md). It is not just a state guard: on type=single it DECIDES the ARIA role, because emptiness is the one thing role=group + aria-pressed and role=radiogroup + aria-checked disagree about (gh#744).";
         }];
     };
     readonly ToggleGroupItemProp: {

package/dist/props/registry.js

@@ -2735,7 +2735,12 @@ const COMPONENT_PROP_REGISTRY = {
       "OnValueChangeProp",
       "ClassNameProp",
       "SizeProp",
-      "ExtraProp"
+      "ExtraProp",
+      {
+        field: "bodied",
+        local: true,
+        reason: "A positive boolean for the card strip's PANEL BODY (gh#762) \u2014 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."
+      }
     ]
   },
   TabsVariantProp: {
@@ -2803,7 +2808,23 @@ const COMPONENT_PROP_REGISTRY = {
   TabItemProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["ValueProp", "LabelProp", "ChildrenProp", "DisabledProp", "IconProp"]
+    vocabulary: [
+      "ValueProp",
+      "LabelProp",
+      "ChildrenProp",
+      "DisabledProp",
+      "IconProp",
+      {
+        field: "count",
+        local: true,
+        reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp and ToggleProp (count/overflowCount/showZero) and drawn by the same `useCounterPill`, so a counted tab, a counted chip and a counted button are one thing \u2014 gh#312 / gh#734 / gh#762."
+      },
+      {
+        field: "countLabel",
+        local: true,
+        reason: "Localized unit folded into the tab's accessible name (\xAB\u672A\u5BFE\u5FDC, 12 \u4EF6\u306E\u8AB2\u984C\xBB), so the digits never concatenate onto the label \u2014 gh#734's measured defect, same field name as Button/Toggle."
+      }
+    ]
   },
   FormFieldArrayProp: {
     group: "form",
@@ -2878,6 +2899,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "wrap",
         local: true,
         reason: "The SAME boolean shorthand for flex-wrap that FlexProp carries, on the row that owns a chip set \u2014 one spelling for 'what does this row do when it does not fit' (gh#741). Opt-in, and the same default for every variant: paint must not decide geometry."
+      },
+      {
+        field: "disallowEmptySelection",
+        local: true,
+        reason: "React Aria's own name for the capability (useToggleGroupState), which this component is built on; neither antd nor Radix names it (docs/DESIGN-AUTHORITY.md). It is not just a state guard: on type=single it DECIDES the ARIA role, because emptiness is the one thing role=group + aria-pressed and role=radiogroup + aria-checked disagree about (gh#744)."
       }
     ]
   },

package/dist/styles/card-layout.css

@@ -85,15 +85,14 @@
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
+  [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
+    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
+  }
 
   [data-slot="card"] > [data-slot="card-footer"] {
     margin-block-start: auto;
   }
 
-  [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
-    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
-  }
-
   [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
     border-width: var(--card-accent-perimeter-width);
     border-color: var(--card-accent-color);