@godxjp/ui 28.0.0 → 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.js

@@ -46,9 +46,14 @@ const ToggleGroup = React.forwardRef(
   }, ref) => {
     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 }),
-      [variant, size, shape, radioSemantics]
+      () => ({ 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]);
@@ -82,6 +87,12 @@ const ToggleGroup = React.forwardRef(
           {
             ...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) {
@@ -134,7 +145,7 @@ const ToggleGroupItem = React.forwardRef(
     const isPressed = groupState?.selectedKeys.has(value) ?? false;
     const isSingle = groupState?.selectionMode === "single";
     const radioSemantics = context.radioSemantics === true;
-    const rovingTabIndex = radioSemantics && groupState && groupState.selectedKeys.size > 0 ? isPressed ? 0 : -1 : void 0;
+    const rovingTabIndex = radioSemantics && !context.inToolbar && groupState && groupState.selectedKeys.size > 0 ? isPressed ? 0 : -1 : void 0;
     return /* @__PURE__ */ jsxs(
       ToggleButton,
       {

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": "28.0.0",
+  "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";

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",

package/dist/styles/navigation-layout.css

@@ -245,6 +245,115 @@
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-bodied="true"] {
+    --tabs-root-gap: 0px;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"] [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"]
+    [data-slot="tabs-list"] {
+    box-shadow: none;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-bar {
+    align-items: flex-end;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] .ui-tabs-bar {
+    align-items: flex-start;
+  }
+
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+    border: var(--tabs-panel-border-width) solid hsl(var(--border));
+    border-radius: var(--tabs-panel-radius);
+    background: hsl(var(--tabs-panel-background, var(--background)));
+    padding: var(--tabs-panel-space-inset);
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-content"] {
+    margin-block-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-content"] {
+    margin-block-end: calc(-1 * var(--tabs-panel-border-width));
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-content"] {
+    margin-inline-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-content"] {
+    margin-inline-end: calc(-1 * var(--tabs-panel-border-width));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+      border-color: CanvasText;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="top"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-end-style: none;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="bottom"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-start-style: none;
+    }
+  }
+
+  .ui-tabs-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--tabs-count-min-width);
+    margin-inline-start: var(--tabs-count-gap);
+    border-radius: var(--tabs-count-radius);
+    padding-inline: var(--tabs-count-space-inline);
+    background: var(--tabs-count-background, hsl(var(--muted)));
+    color: var(--tabs-count-color, hsl(var(--muted-foreground)));
+    font-size: var(--tabs-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-slot="tabs"][data-variant="card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count,
+  [data-slot="tabs"][data-variant="editable-card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count {
+    background: var(--tabs-count-card-background, hsl(var(--background)));
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+    background: var(--tabs-count-active-background, hsl(var(--primary)));
+    color: var(--tabs-count-active-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+      outline: var(--tabs-count-forced-outline-width) solid currentColor;
+    }
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;

package/dist/tokens/components/navigation.css

@@ -78,6 +78,24 @@
   --tabs-card-rail-border-width: var(--stroke-hairline);
   --tabs-card-background: initial;
 
+  --tabs-panel-background: initial;
+  --tabs-panel-border-width: var(--tabs-card-rail-border-width);
+  --tabs-panel-radius: var(--tabs-card-radius);
+  --tabs-panel-space-inset: var(--space-4);
+
+  --tabs-count-min-width: var(--space-4);
+  --tabs-count-space-inline: var(--space-1);
+  --tabs-count-gap: var(--space-1);
+  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-radius: var(--radius-pill);
+  --tabs-count-background: initial;
+
+  --tabs-count-card-background: initial;
+  --tabs-count-color: initial;
+  --tabs-count-active-background: initial;
+  --tabs-count-active-color: initial;
+  --tabs-count-forced-outline-width: var(--stroke-hairline);
+
   --tabs-bar-gap: var(--space-2);
   --tabs-extra-gap: var(--space-2);
 

package/docs/navigation/card-tabs.tsx

@@ -0,0 +1,344 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Tabs } from "@godxjp/ui/navigation";
+
+/**
+ * CARD TABS — the strip and its panel as ONE object (gh#762).
+ *
+ * The screen this page is built from is the one the issue draws in ASCII: a saved-view strip over
+ * a list, antd `type="editable-card"` shaped — closable views, a `+`, an action parked on the
+ * trailing edge of the bar, and a body that the open tab opens INTO rather than sits above.
+ *
+ * Everything here is `Tabs` with documented props. There is no page-local CSS and no wrapper box
+ * around the panel: the point of `bodied` is that the consumer no longer has to guess which box
+ * to put underneath, because all three guesses were wrong (`<Card>` added a second 1px border at
+ * a 9.708px radius over an 8px gap; `<Card variant="borderless">` and no box at all left the same
+ * 8px gap). Measured after: 0px of gap, one continuous 1px line, and no line at all across the
+ * active tab.
+ */
+
+type SavedView = {
+  value: string;
+  label: string;
+  count: number;
+  /** antd `Tab.closable` — 「すべての課題」 is the system view and cannot be deleted. */
+  closable?: boolean;
+  rows: string[];
+};
+
+const INITIAL_VIEWS: SavedView[] = [
+  {
+    value: "all",
+    label: "すべての課題",
+    count: 340,
+    closable: false,
+    rows: [
+      "TASK-1042 · 請求書の様式を更新",
+      "TASK-1041 · 監査ログの保存期間",
+      "TASK-1038 · 権限表の棚卸",
+    ],
+  },
+  {
+    value: "mine",
+    label: "自分の担当",
+    count: 12,
+    rows: ["TASK-1042 · 請求書の様式を更新", "TASK-1029 · 締め処理の手順書"],
+  },
+  {
+    value: "review",
+    label: "レビュー待ち",
+    count: 0,
+    rows: [],
+  },
+];
+
+/** The list body a saved view opens into — a real panel, not a placeholder paragraph. */
+function ViewBody({ view }: { view: SavedView }) {
+  if (view.rows.length === 0) {
+    return (
+      <Text as="p" tone="muted">
+        この条件に一致する課題はありません。
+      </Text>
+    );
+  }
+  return (
+    <Flex direction="col" gap="sm">
+      {view.rows.map((row) => (
+        <Text key={row} as="p">
+          {row}
+        </Text>
+      ))}
+    </Flex>
+  );
+}
+
+const PLACEMENT_ITEMS = [
+  { value: "summary", label: "サマリ", content: <Text as="p">当月の売上合計 ¥4,820,000</Text> },
+  { value: "detail", label: "明細", content: <Text as="p">明細 24 件 · 未承認 2 件</Text> },
+  { value: "audit", label: "監査", content: <Text as="p">監査ログ 96 件</Text> },
+];
+
+const COUNT_ITEMS = [
+  {
+    value: "open",
+    label: "未対応",
+    count: 12,
+    countLabel: "件の課題",
+    content: <Text as="p">未対応 12 件</Text>,
+  },
+  {
+    value: "doing",
+    label: "対応中",
+    count: 340,
+    overflowCount: 999,
+    countLabel: "件の課題",
+    content: <Text as="p">対応中 340 件</Text>,
+  },
+  {
+    value: "capped",
+    label: "全期間",
+    count: 1280,
+    countLabel: "件の課題",
+    content: <Text as="p">全期間 1,280 件 · 既定の overflowCount は 99</Text>,
+  },
+  {
+    value: "empty",
+    label: "保留",
+    count: 0,
+    countLabel: "件の課題",
+    content: <Text as="p">保留 0 件</Text>,
+  },
+  {
+    value: "hidden-zero",
+    label: "却下",
+    count: 0,
+    showZero: false,
+    countLabel: "件の課題",
+    content: <Text as="p">showZero={"{false}"} なので 0 のピルは描かれない</Text>,
+  },
+  {
+    value: "off",
+    label: "アーカイブ",
+    disabled: true,
+    count: 7,
+    countLabel: "件の課題",
+    content: <Text as="p">アーカイブ</Text>,
+  },
+];
+
+export default function Demo() {
+  const [views, setViews] = useState(INITIAL_VIEWS);
+  const [activeView, setActiveView] = useState("all");
+  const [nextView, setNextView] = useState(1);
+
+  return (
+    <PageContainer
+      title="カードタブ"
+      subtitle="ストリップとパネルをひとつの箱にする bodied と、タブの件数バッジ。"
+    >
+      <Flex direction="col" gap="lg">
+        {/* THE SCREEN THE ISSUE DRAWS — saved views over a list. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>保存したビュー · editable-card + bodied</CardTitle>
+            <CardDescription>
+              antd の <code>type=&quot;editable-card&quot;</code> と同じ形。
+              <code>bodied</code> がパネルの枠・角丸・背景を描くので、ストリップとパネルが
+              ひとつの箱として読める。「すべての課題」は <code>closable: false</code>
+              なので × が出ない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              id="saved-views"
+              variant="editable-card"
+              bodied
+              value={activeView}
+              onValueChange={setActiveView}
+              extra={
+                <Button size="sm" variant="outline">
+                  フィルタを保存
+                </Button>
+              }
+              onEdit={(target, action) => {
+                if (action === "add") {
+                  const value = `view-${nextView}`;
+                  setViews((prev) => [
+                    ...prev,
+                    { value, label: `新しいビュー ${nextView}`, count: 0, rows: [] },
+                  ]);
+                  setNextView((n) => n + 1);
+                  setActiveView(value);
+                  return;
+                }
+                const key = String(target);
+                setViews((prev) => prev.filter((view) => view.value !== key));
+                setActiveView((current) =>
+                  current === key ? (views.find((v) => v.value !== key)?.value ?? "all") : current,
+                );
+              }}
+              items={views.map((view) => ({
+                value: view.value,
+                label: view.label,
+                closable: view.closable,
+                count: view.count,
+                overflowCount: 999,
+                countLabel: "件の課題",
+                content: <ViewBody view={view} />,
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        {/* THE DEFECT, SIDE BY SIDE. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied なし / あり</CardTitle>
+            <CardDescription>
+              <code>bodied</code> なしの card ストリップは 8px 離れた透明なパネルの上に浮く —「card
+              と tab が 1 つに融合していない」と報告された形。あり側は隙間 0px、 線は 1
+              本、アクティブなタブの下辺だけが開いている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied なし（28.0.0 まで）
+                </Text>
+                <Tabs
+                  id="card-unbodied"
+                  defaultValue="summary"
+                  variant="card"
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied
+                </Text>
+                <Tabs
+                  id="card-bodied"
+                  defaultValue="summary"
+                  variant="card"
+                  bodied
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* EVERY PLACEMENT — the joined edge follows the strip. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied × tabPlacement</CardTitle>
+            <CardDescription>
+              角丸が落ちる辺・枠が重なる辺は、ストリップの位置に従う。
+              <code>start</code> / <code>end</code> は論理値なので RTL でも反転する （48rem 以下では
+              top / bottom に折り返す）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              {(["top", "bottom", "start", "end"] as const).map((placement) => (
+                <Flex key={placement} direction="col" gap="sm">
+                  <Text as="p" size="sm" tone="muted">
+                    tabPlacement=&quot;{placement}&quot;
+                  </Text>
+                  <Tabs
+                    id={`card-bodied-${placement}`}
+                    defaultValue="summary"
+                    variant="card"
+                    bodied
+                    tabPlacement={placement}
+                    items={PLACEMENT_ITEMS}
+                  />
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* THE COUNT. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>タブの件数バッジ · count / countLabel</CardTitle>
+            <CardDescription>
+              <code>count</code> は Button・Toggle と同じカウンタ語彙で、
+              <code>Intl.NumberFormat</code> でロケール整形される。読み上げ名は 「未対応, 12
+              件の課題」 — 数字が直接ラベルに連結しないよう、ピルは <code>aria-hidden</code>、
+              読み上げ用の文だけが <code>sr-only</code> で隣に置かれる。 既定の上限は 99（
+              <code>overflowCount</code> で変更）、 0 を隠すには <code>showZero={"{false}"}</code>。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;line&quot;
+                </Text>
+                <Tabs id="count-line" defaultValue="open" variant="line" items={COUNT_ITEMS} />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;card&quot; + bodied
+                </Text>
+                <Tabs
+                  id="count-card"
+                  defaultValue="open"
+                  variant="card"
+                  bodied
+                  items={COUNT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;sm&quot; / &quot;md&quot; / &quot;lg&quot;
+                </Text>
+                {(["sm", "md", "lg"] as const).map((size) => (
+                  <Tabs
+                    key={size}
+                    id={`count-${size}`}
+                    defaultValue="open"
+                    variant="line"
+                    size={size}
+                    items={COUNT_ITEMS.slice(0, 3)}
+                  />
+                ))}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* The other joined pair the package already ships. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>もうひとつの「ひとつの箱」· Card tabList</CardTitle>
+            <CardDescription>
+              ストリップがカードの見出しの下に入る形は <code>Card tabList</code> が担当する （antd
+              `Card` の <code>tabList</code>）。枠はカードのもので、
+              <code>bodied</code> は要らない。card 系のストリップを単体で置くときだけ
+              <code>bodied</code> を使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card
+              tabList={[
+                { key: "all", tab: "すべての課題", closable: false },
+                { key: "mine", tab: "自分の担当" },
+              ]}
+            >
+              <CardContent>
+                <Text as="p">カードの枠がそのままパネルの枠になる。</Text>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/package.json

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

package/scripts/ui-audit.mjs

@@ -159,7 +159,25 @@ const ATTRS = String.raw`(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|=>|[^>"'])*`;
 const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
 
 /**
- * Is the raw tag at `index` the SLOT CHILD of an `asChild` primitive?
+ * Primitives whose `asChild` hands over THE VISUAL BOX, so the borrowed element cannot be a
+ * `<Button>` — wrapping it would paint a button where a card belongs.
+ *
+ * This set is deliberately tiny and deliberately NOT "anything with asChild". The first cut of
+ * this exemption was the broad version, and measuring it against a real consumer showed what that
+ * costs: of 39 `no-raw-button` findings across its three SPAs, it silenced 11 — and
+ * every single one was a BEHAVIOUR trigger, not a box:
+ *
+ *     DropdownMenuTrigger · SheetTrigger · CollapsibleTrigger · PopoverTrigger · TooltipTrigger
+ *
+ * A Radix trigger supplies behaviour and no styling, so `<DropdownMenuTrigger asChild><Button>`
+ * is not only legal, it is the better answer — the package's button, correctly styled, keyboard
+ * and screen-reader shaped. Exempting those threw away 11 legitimate nudges to fix 0 real
+ * findings. Adding a name here means asserting that primitive paints the box itself.
+ */
+const ASCHILD_BOX_PRIMITIVES = new Set(["Card"]);
+
+/**
+ * Is the raw tag at `index` the slot child of a primitive that hands over its BOX?
  *
  * `<Card asChild hoverable><button onClick={…}>` is not a violation — it is the shape this
  * package PRESCRIBES. `Card.asChild`'s own docblock says so in as many words:
@@ -175,10 +193,11 @@ const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
  * (godx-jp/shoots-gemba#8). A package that forbids its own prescription leaves the consumer no
  * legal move at all, which is exactly what #740 was opened about.
  *
- * Walks BACKWARDS to the nearest preceding `>` and asks whether the tag it closes is a
- * capitalised component carrying `asChild`. That covers both spellings prettier produces —
+ * Walks BACKWARDS to the nearest preceding `>` and asks whether the tag it closes is one of
+ * ASCHILD_BOX_PRIMITIVES carrying `asChild`. That covers both spellings prettier produces —
  * `<Card asChild><button` on one line, and the attribute wrapped onto its own line — while
- * `</Card>` or `<div>` before the tag exempts nothing, because neither starts a component.
+ * `</Card>` or `<div>` before the tag exempts nothing, because neither starts a component, and
+ * `<DropdownMenuTrigger asChild>` exempts nothing either, because a trigger paints no box.
  */
 const isAsChildSlot = (content, index) => {
   const before = content.slice(0, index).replace(/\s+$/, "");
@@ -186,8 +205,10 @@ const isAsChildSlot = (content, index) => {
   const openStart = before.lastIndexOf("<", before.length - 1);
   if (openStart === -1) return false;
   const openTag = before.slice(openStart);
-  // A component, not `</Card>` and not a lowercase host element.
-  return /^<[A-Z][\w.]*\b/.test(openTag) && /\basChild\b/.test(openTag);
+  // A component, not `</Card>` and not a lowercase host element…
+  const name = /^<([A-Z][\w.]*)\b/.exec(openTag)?.[1];
+  // …and one that hands over its BOX, not merely its behaviour. See ASCHILD_BOX_PRIMITIVES.
+  return name !== undefined && ASCHILD_BOX_PRIMITIVES.has(name) && /\basChild\b/.test(openTag);
 };
 
 /** `rawTag`, minus the matches that are an `asChild` primitive's borrowed element. */
@@ -644,10 +665,19 @@ const RULES = [
     /*
      * A lucide element rendered where NOTHING will size it.
      *
-     * A lucide component ships `width="24" height="24"`, and exactly four rules in this library
-     * override that: `.ui-button svg`, `.ui-dropdown-menu-item > svg`, `.ui-topbar-item svg` and
-     * `[data-slot="list-row-leading"] > svg`. Outside them — in a `Text`, a table cell, an `<a>`,
-     * a `Flex` — the glyph draws at 24px beside 14px type. It is the one defect class that is
+     * A lucide component ships `width="24" height="24"`, and this library overrides that in
+     * **31** selectors (counted 2026-09-19 across `src/styles/*.css`; this comment used to say
+     * "exactly four" and name them, which had drifted far enough to cause gh#755). Most are
+     * component-internal — a consumer cannot put a glyph inside `.ui-rating-star` — so the number
+     * is not the exemption list and never was.
+     *
+     * What a consumer CAN reach is a SLOT, and that is what `iconSizingRanges` keys on: the slot's
+     * NAME at the call site, not the selector that ends up sizing it. That is why the list there
+     * is prop names rather than CSS, and why it must cover both spellings a slot takes —
+     * `icon={<Users />}` and `icon: <Users />` inside an items array (gh#755).
+     *
+     * Outside a slot — in a `Text`, a table cell, an `<a>`, a `Flex` — the glyph draws at 24px
+     * beside 14px type. It is the one defect class that is
      * INVISIBLE in review: the JSX is correct, the import is correct, and only the screen is
      * wrong. A consumer swept one app and found 38 (gh#712).
      *
@@ -1094,9 +1124,52 @@ function iconSizingRanges(source) {
     const close = matchBracket(source, open);
     ranges.push([open, close < 0 ? source.length : close + 1]);
   }
+  /*
+   * The SAME slots, written as an object property instead of a JSX prop (gh#755).
+   *
+   *     <Tabs items={saved.map((s) => ({ icon: s.shared ? <Users /> : undefined }))} />
+   *
+   * `Tabs` wraps `items[].icon` in `<span class="ui-tabs-trigger-icon">`, and
+   * `navigation-layout.css` sizes `.ui-tabs-trigger-icon svg` — so the glyph IS measured, by the
+   * same component that owns the slot. But the prop form above requires `=`, so `icon:` matched
+   * nothing and the call site was told to size a box the design system owns — the opposite of
+   * what CONSUMER-RULES asks for.
+   *
+   * A property value is not bracketed like `={...}`, so the range runs to the `,` or `}` that
+   * closes it at depth zero. Strings and nested brackets are skipped so a comma inside
+   * `style={{a: 1, b: 2}}` or inside a string does not end it early.
+   */
+  for (const m of source.matchAll(
+    /\b(?:icon|leading|trailing|mark|indicator|avatar|prefix|suffix|addonBefore|addonAfter)\s*:/g,
+  )) {
+    const from = m.index + m[0].length;
+    ranges.push([from, objectPropertyValueEnd(source, from)]);
+  }
   return ranges;
 }
 
+/** Where an object property's value ends: the `,` or `}` closing it at depth zero. */
+function objectPropertyValueEnd(source, from) {
+  let depth = 0;
+  for (let i = from; i < source.length; i += 1) {
+    const c = source[i];
+    if (c === '"' || c === "'" || c === "`") {
+      // Skip to the closing quote of the same kind, honouring backslash escapes.
+      const quote = c;
+      i += 1;
+      while (i < source.length && source[i] !== quote) i += source[i] === "\\" ? 2 : 1;
+      continue;
+    }
+    if (c === "(" || c === "[" || c === "{") depth += 1;
+    else if (c === ")" || c === "]") depth -= 1;
+    else if (c === "}") {
+      if (depth === 0) return i;
+      depth -= 1;
+    } else if (c === "," && depth === 0) return i;
+  }
+  return source.length;
+}
+
 /** A lucide element that no rule, no slot and no author-supplied size will ever measure. */
 function* lucideGlyphMatches(source) {
   const names = lucideLocalNames(source);