@godxjp/ui 28.0.0 → 28.2.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/feedback/alert.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import type { ToneProp } from "../../props/vocabulary/index.js";
+import type { AlertVariantProp, ToneProp } from "../../props/vocabulary/index.js";
 import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
 export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    variant?: import("../../props/index.js").AlertVariantProp;
+    variant?: AlertVariantProp;
     tone?: ToneProp;
     icon?: import("../../props/index.js").IconProp | false;
     onDismiss?: import("../../props/index.js").HandlerProp;
@@ -38,7 +38,7 @@ export declare const AlertActions: React.ForwardRefExoticComponent<React.HTMLAtt
  */
 export declare function AlertQueryError({ error, category, onRetry, onAuthAction, className, }: AlertQueryErrorProp): React.JSX.Element;
 export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    variant?: import("../../props/index.js").AlertVariantProp;
+    variant?: AlertVariantProp;
     tone?: ToneProp;
     icon?: import("../../props/index.js").IconProp | false;
     onDismiss?: import("../../props/index.js").HandlerProp;

package/dist/components/feedback/alert.js

@@ -16,6 +16,10 @@ import { Flex } from "../layout/flex.js";
 import { Button } from "../general/button.js";
 const AlertContext = React.createContext("default");
 const ASSERTIVE_TONES = /* @__PURE__ */ new Set(["destructive", "warning"]);
+const roleFor = (variant, tone) => {
+  if (variant === "callout") return "note";
+  return ASSERTIVE_TONES.has(tone) ? "alert" : "status";
+};
 const DEFAULT_ICONS = {
   default: Info,
   destructive: AlertCircle,
@@ -33,7 +37,7 @@ const AlertBase = React.forwardRef(
       "div",
       {
         ref,
-        role: ASSERTIVE_TONES.has(tone) ? "alert" : "status",
+        role: roleFor(variant, tone),
         "data-slot": "alert",
         "data-variant": variant,
         "data-tone": tone,

package/dist/components/feedback/callout.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { CalloutKindProp } from "../../props/vocabulary/index.js";
+export type { CalloutProp, CalloutProp as CalloutProps, } from "../../props/components/feedback.prop.js";
+export declare const Callout: React.ForwardRefExoticComponent<Omit<import("./alert.js").AlertProp, "onDismiss" | "variant"> & {
+    kind?: CalloutKindProp;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/feedback/callout.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Info, Lightbulb, MessageSquareWarning, OctagonAlert, TriangleAlert } from "lucide-react";
+import { AlertActions, AlertBase, AlertContent, AlertDescription, AlertTitle } from "./alert.js";
+const KINDS = {
+  note: { tone: "info", icon: Info },
+  tip: { tone: "success", icon: Lightbulb },
+  important: { tone: "neutral", icon: MessageSquareWarning },
+  warning: { tone: "warning", icon: TriangleAlert },
+  caution: { tone: "destructive", icon: OctagonAlert }
+};
+const CalloutBase = React.forwardRef(
+  ({ kind = "note", tone, icon, ...props }, ref) => {
+    const preset = KINDS[kind];
+    return (
+      // `variant` sits AFTER the spread, as on Banner: the type already excludes it, and the
+      // runtime half of the same guarantee means a spread of leftover Alert props can never
+      // silently turn this aside back into a live region.
+      /* @__PURE__ */ jsx(
+        AlertBase,
+        {
+          ref,
+          tone: tone ?? preset.tone,
+          icon: icon ?? preset.icon,
+          ...props,
+          variant: "callout"
+        }
+      )
+    );
+  }
+);
+CalloutBase.displayName = "Callout";
+const Callout = Object.assign(CalloutBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
+export {
+  Callout
+};

package/dist/components/feedback/index.d.ts

@@ -10,6 +10,8 @@ export { Skeleton, SkeletonForm, SkeletonRows, SkeletonTable, SkeletonDetail, Sk
 export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonFormProp, SkeletonFormProps, SkeletonInputProp, SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProps, SkeletonImageProp, SkeletonImageProps, } from "./skeleton.js";
 export { Banner } from "./banner.js";
 export type { BannerProp, BannerProps } from "./banner.js";
+export { Callout } from "./callout.js";
+export type { CalloutProp, CalloutProps } from "./callout.js";
 export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
 export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -57,6 +57,7 @@ import {
   SkeletonImage
 } from "./skeleton.js";
 import { Banner } from "./banner.js";
+import { Callout } from "./callout.js";
 import {
   Alert,
   AlertTitle,
@@ -86,6 +87,7 @@ export {
   AlertQueryError,
   AlertTitle,
   Banner,
+  Callout,
   Dialog,
   DialogAction,
   DialogBody,

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.2.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/feedback.prop.d.ts

@@ -1,7 +1,7 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
 import type { QueryErrorCategory } from "../../lib/query-error.js";
-import type { AlertVariantProp, AvatarShapeProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
+import type { AlertVariantProp, AvatarShapeProp, CalloutKindProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /**
  * @see Dialog — the compound modal ROOT.
  *
@@ -87,6 +87,17 @@ export type AlertProp = React.HTMLAttributes<HTMLDivElement> & {
  * `icon`/`icon={false}` owns the leading glyph, `onDismiss` renders the built-in dismiss button.
  */
 export type BannerProp = Omit<AlertProp, "variant">;
+/**
+ * @see Callout — the in-prose aside (`<Alert variant="callout">` with the variant fixed).
+ *
+ * Same contract as {@link AlertProp} minus `variant` and `onDismiss`: a callout is part of the
+ * document the reader is reading, so it is never a live region and never dismissible. `kind` is
+ * the GitHub/Obsidian admonition preset and resolves `tone` + the leading glyph; pass `tone` or
+ * `icon` to override either per instance (gh#765).
+ */
+export type CalloutProp = Omit<AlertProp, "variant" | "onDismiss"> & {
+    kind?: CalloutKindProp;
+};
 /** @see AlertTitle */
 export type AlertTitleProp = React.HTMLAttributes<HTMLParagraphElement> & {
     className?: ClassNameProp;

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

@@ -537,7 +537,12 @@ export declare const VOCABULARY_REGISTRY: {
     readonly AlertVariantProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
-        readonly description: "Alert structural axis: default inline card | banner full-bleed strip";
+        readonly description: "Alert structural axis: default inline card | banner full-bleed strip | callout in-prose aside";
+    };
+    readonly CalloutKindProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Callout admonition preset: note | tip | important | warning | caution";
     };
     readonly SortDirectionProp: {
         readonly file: "vocabulary/interaction.prop.ts";
@@ -2168,6 +2173,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/feedback.prop.ts";
         readonly vocabulary: readonly ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly CalloutProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["CalloutKindProp", "ToneProp", "IconProp", "ClassNameProp", "ChildrenProp"];
+    };
     readonly AlertTitleProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";
@@ -2350,7 +2360,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 +2428,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

@@ -536,7 +536,12 @@ const VOCABULARY_REGISTRY = {
   AlertVariantProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "Alert structural axis: default inline card | banner full-bleed strip"
+    description: "Alert structural axis: default inline card | banner full-bleed strip | callout in-prose aside"
+  },
+  CalloutKindProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Callout admonition preset: note | tip | important | warning | caution"
   },
   SortDirectionProp: {
     file: "vocabulary/interaction.prop.ts",
@@ -2545,6 +2550,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/feedback.prop.ts",
     vocabulary: ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"]
   },
+  CalloutProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["CalloutKindProp", "ToneProp", "IconProp", "ClassNameProp", "ChildrenProp"]
+  },
   AlertTitleProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",
@@ -2735,7 +2745,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 +2818,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/props/vocabulary/index.d.ts

@@ -2,6 +2,6 @@
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, FlushProp, WidthProp, ControlWidthProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";