@godxjp/ui 31.3.0 → 31.5.0

package/dist/components/data-display/code-block.js

@@ -1,15 +1,96 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Check, Copy, LoaderCircle } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, style, ...rest }, ref) {
+import { Button } from "../general/button.js";
+import {
+  ActionTooltip,
+  COPIED_RESET_MS,
+  getNode,
+  toCopyConfigList,
+  useMergedConfig,
+  writeClipboard
+} from "../general/typography.js";
+function CodeBlockCopy({
+  config,
+  codeRef
+}) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = React.useState(false);
+  const [copyLoading, setCopyLoading] = React.useState(false);
+  const copyTimer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  const onCopyClick = async (event) => {
+    setCopyLoading(true);
+    try {
+      const configured = typeof config.text === "function" ? await config.text() : config.text;
+      await writeClipboard(configured || codeRef.current?.textContent || "", config.format);
+      setCopyLoading(false);
+      setCopied(true);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+      config.onCopy?.(event);
+    } catch {
+      setCopyLoading(false);
+    }
+  };
+  const copyLabels = toCopyConfigList(config.tooltips);
+  const copyIcons = toCopyConfigList(config.icon);
+  const systemCopyLabel = copied ? t("ui.codeBlock.copied") : t("ui.codeBlock.copy");
+  const copyTitle = getNode(copyLabels[copied ? 1 : 0], systemCopyLabel);
+  const copyAriaLabel = typeof copyTitle === "string" ? copyTitle : systemCopyLabel;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ActionTooltip, { title: copyTitle, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        "data-slot": "code-block-copy",
+        "data-state": copied ? "copied" : "idle",
+        "aria-label": copyAriaLabel,
+        tabIndex: config.tabIndex,
+        onClick: onCopyClick,
+        className: "ui-code-block-copy",
+        children: copied ? getNode(copyIcons[1], /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), true) : getNode(
+          copyIcons[0],
+          copyLoading ? /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+          true
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "code-block-status", children: copied ? t("ui.codeBlock.copiedAnnounce") : "" })
+  ] });
+}
+const CodeBlock = React.forwardRef(function CodeBlock2({
+  children,
+  wrap = true,
+  maxHeight = "none",
+  size = "sm",
+  language,
+  copyable,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const [enableCopy, copyConfig] = useMergedConfig(copyable);
+  const codeRef = React.useRef(null);
   const scrolls = maxHeight !== "none" || !wrap;
-  return /* @__PURE__ */ jsx(
+  const pre = /* @__PURE__ */ jsx(
     "pre",
     {
       ref,
       "data-slot": "code-block",
       "data-wrap": wrap ? void 0 : "false",
       "data-max-height": typeof maxHeight === "string" && maxHeight !== "none" ? maxHeight : void 0,
+      "data-copyable": enableCopy ? "" : void 0,
       style: {
         ...style,
         ...typeof maxHeight === "object" ? { maxBlockSize: maxHeight.value, overflow: "auto" } : void 0
@@ -19,9 +100,14 @@ const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true,
       tabIndex: scrolls ? 0 : void 0,
       className: cn("ui-code-block", className),
       ...rest,
-      children: /* @__PURE__ */ jsx("code", { children })
+      children: /* @__PURE__ */ jsx("code", { ref: codeRef, children })
     }
   );
+  if (!enableCopy) return pre;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "code-block-frame", className: "ui-code-block-frame", children: [
+    pre,
+    /* @__PURE__ */ jsx(CodeBlockCopy, { config: copyConfig, codeRef })
+  ] });
 });
 export {
   CodeBlock

package/dist/components/data-display/index.d.ts

@@ -53,6 +53,8 @@ export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
 export { Tree } from "./tree.js";
 export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";
+export { OrgChart } from "./org-chart.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProps, } from "./org-chart.js";
 export { Welcome } from "./welcome.js";
 export type { WelcomeProp, WelcomeProps, WelcomeVariantProp } from "./welcome.js";
 export { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";

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

@@ -60,6 +60,7 @@ import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
 import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 import { Tree } from "./tree.js";
+import { OrgChart } from "./org-chart.js";
 import { Welcome } from "./welcome.js";
 import { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";
 export {
@@ -103,6 +104,7 @@ export {
   Legend,
   ListRow,
   Marquee,
+  OrgChart,
   PermissionMatrix,
   Popover,
   PopoverAnchor,

package/dist/components/data-display/org-chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { OrgChartProp } from "../../props/components/data-display.prop.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProp as OrgChartProps, } from "../../props/components/data-display.prop.js";
+/** `ref` reaches the root `<div>` — the container the breakpoint is measured against. */
+export declare const OrgChart: React.ForwardRefExoticComponent<OrgChartProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/org-chart.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useScrollsHorizontally } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Tree } from "./tree.js";
+function flatten(nodes) {
+  const out = [];
+  const walk = (list, depth, parent) => {
+    for (const node of list) {
+      const index = out.length;
+      out.push({ node, depth, parent, firstChild: null });
+      if (node.children?.length) {
+        out[index].firstChild = out.length;
+        walk(node.children, depth + 1, index);
+      }
+    }
+  };
+  walk(nodes, 0, null);
+  return out;
+}
+function toTreeData(nodes) {
+  return nodes.map((node) => ({
+    value: node.key,
+    label: node.name,
+    children: node.children?.length ? toTreeData(node.children) : void 0
+  }));
+}
+function isRtl(element) {
+  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function OrgChartRoot({
+  data,
+  renderNode,
+  label,
+  className,
+  id,
+  forwardedRef,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const baseId = id ?? `${reactId}-org-chart`;
+  const treeLabel = label ?? t("dataDisplay.orgChart.label");
+  const flat = React.useMemo(() => flatten(data), [data]);
+  const indexByKey = React.useMemo(
+    () => new Map(flat.map((entry, index) => [entry.node.key, index])),
+    [flat]
+  );
+  const scrollRef = React.useRef(null);
+  const scrolls = useScrollsHorizontally(scrollRef, true);
+  const [activeKey, setActiveKey] = React.useState(null);
+  const rovingKey = (activeKey && indexByKey.has(activeKey) ? activeKey : null) ?? flat[0]?.node.key ?? null;
+  const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
+  const moveTo = (index) => {
+    if (index == null) return;
+    const entry = flat[index];
+    if (!entry) return;
+    setActiveKey(entry.node.key);
+    nodeRefs.current.get(entry.node.key)?.focus();
+  };
+  const onKeyDown = (event, index) => {
+    const entry = flat[index];
+    const rtl = isRtl(event.currentTarget);
+    const inward = rtl ? "ArrowLeft" : "ArrowRight";
+    const outward = rtl ? "ArrowRight" : "ArrowLeft";
+    let target;
+    if (event.key === "ArrowDown") target = index + 1 < flat.length ? index + 1 : null;
+    else if (event.key === "ArrowUp") target = index > 0 ? index - 1 : null;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = flat.length - 1;
+    else if (event.key === inward) target = entry.firstChild;
+    else if (event.key === outward) target = entry.parent;
+    else return;
+    event.preventDefault();
+    moveTo(target ?? null);
+  };
+  const renderBranch = (nodes) => nodes.map((node, position) => {
+    const index = indexByKey.get(node.key);
+    const { depth } = flat[index];
+    const nodeId = `${baseId}-n${index}`;
+    const groupId = `${nodeId}-group`;
+    const hasChildren = Boolean(node.children?.length);
+    const isAgent = node.variant === "agent";
+    const labelledBy = renderNode ? void 0 : [
+      `${nodeId}-name`,
+      node.title ? `${nodeId}-title` : null,
+      isAgent ? `${nodeId}-kind` : null
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("li", { role: "none", className: "ui-org-chart-branch", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            nodeRefs.current.set(node.key, element);
+          },
+          id: nodeId,
+          role: "treeitem",
+          "aria-level": depth + 1,
+          "aria-setsize": nodes.length,
+          "aria-posinset": position + 1,
+          "aria-labelledby": labelledBy,
+          "aria-describedby": !renderNode && node.extra ? `${nodeId}-extra` : void 0,
+          "aria-owns": hasChildren ? groupId : void 0,
+          tabIndex: rovingKey === node.key ? 0 : -1,
+          "data-key": node.key,
+          "data-variant": isAgent ? "agent" : "person",
+          className: "ui-org-chart-node ui-focus-ring",
+          onFocus: () => setActiveKey(node.key),
+          onKeyDown: (event) => onKeyDown(event, index),
+          children: [
+            renderNode ? renderNode(node) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+              /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-text", children: [
+                /* @__PURE__ */ jsx("span", { id: `${nodeId}-name`, className: "ui-org-chart-name", children: node.name }),
+                node.title ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-title`, className: "ui-org-chart-title", children: node.title }) : null,
+                node.extra ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-extra`, className: "ui-org-chart-extra", children: node.extra }) : null
+              ] })
+            ] }),
+            isAgent ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-kind`, className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null
+          ]
+        }
+      ),
+      hasChildren ? /* @__PURE__ */ jsx("ul", { id: groupId, role: "group", className: "ui-org-chart-children", children: renderBranch(node.children) }) : null
+    ] }, node.key);
+  });
+  const treeData = React.useMemo(() => toTreeData(data), [data]);
+  const nodeByKey = React.useMemo(
+    () => new Map(flat.map((entry) => [entry.node.key, entry.node])),
+    [flat]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, ref: forwardedRef, id, className: cn("ui-org-chart", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "ui-org-chart-scroll",
+        ...scrolls ? { role: "region", "aria-label": t("dataDisplay.orgChart.scrollRegion"), tabIndex: 0 } : {},
+        children: /* @__PURE__ */ jsx("ul", { role: "tree", "aria-label": treeLabel, className: "ui-org-chart-tree", children: renderBranch(data) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ui-org-chart-list", children: /* @__PURE__ */ jsx(
+      Tree,
+      {
+        "aria-label": treeLabel,
+        treeData,
+        defaultExpandAll: true,
+        titleRender: (treeNode) => {
+          const node = nodeByKey.get(treeNode.value);
+          if (!node) return treeNode.label;
+          if (renderNode) return renderNode(node);
+          return /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-list-row", children: [
+            node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+            /* @__PURE__ */ jsx("span", { className: "ui-org-chart-name", children: node.name }),
+            node.title ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-title", children: node.title }) : null,
+            node.variant === "agent" ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null,
+            node.extra ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-extra", children: node.extra }) : null
+          ] });
+        }
+      }
+    ) })
+  ] });
+}
+const OrgChart = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(OrgChartRoot, { ...props, forwardedRef: ref }));
+OrgChart.displayName = "OrgChart";
+export {
+  OrgChart
+};

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

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

package/dist/components/general/typography.d.ts

@@ -2,6 +2,38 @@ import * as React from "react";
 import type { TextProp, TypographyBlockProp } from "../../props/components/general.prop.js";
 import type { TypographyEllipsisConfigProp } from "../../props/vocabulary/index.js";
 export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as HeadingProps, TypographyProp, TypographyProp as TypographyProps, TypographyBlockProp, TypographyTitleProp, TypographyTitleProp as TitleProps, ParagraphProp, ParagraphProp as ParagraphProps, LinkProp, LinkProp as LinkProps, } from "../../props/components/general.prop.js";
+/** How long the copy button shows its confirmed state. antd's value (`useCopyClick`). */
+export declare const COPIED_RESET_MS = 3000;
+/** antd `getNode` — `true`/`undefined` take the default; `false` suppresses unless a DOM node is required. */
+export declare function getNode(node: React.ReactNode | boolean | undefined, fallback: React.ReactNode, needDom?: boolean): React.ReactNode;
+/** antd `toCopyConfigList` — `false` suppresses BOTH states, otherwise index 0 = idle, 1 = copied. */
+export declare function toCopyConfigList(value: React.ReactNode | false | undefined): (string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined)[] | readonly [false, false];
+/**
+ * antd `useMergedConfig` — `true` means "on, all defaults"; an object means "on, these overrides".
+ * The boolean is the SUPPORT flag, so `copyable={false}` and `copyable={undefined}` are both off.
+ */
+export declare function useMergedConfig<T extends object>(propConfig: boolean | T | undefined, template?: Partial<T>): [boolean, T];
+/**
+ * The clipboard write, antd's `_util/copy` reduced to the one path a modern browser takes.
+ *
+ * antd keeps a `document.execCommand("copy")` fallback for browsers without the async Clipboard
+ * API. It is NOT ported: `execCommand` is deprecated, every browser in this package's support
+ * matrix ships `navigator.clipboard`, and the fallback's failure mode is worse than none — it
+ * reports success from a synchronous flag that a permission prompt can leave stale, so the UI
+ * claims a copy that never happened. Here a refusal throws, `onCopy` never fires, and the button
+ * never shows its confirmed state.
+ */
+export declare function writeClipboard(text: string, format: "text/plain" | "text/html" | undefined): Promise<void>;
+/**
+ * A tooltip that disappears entirely when its title is suppressed.
+ *
+ * antd wraps every action in `<Tooltip>`; this library's Tooltip is the house primitive and is
+ * composed (`Tooltip > TooltipTrigger > TooltipContent`), so the wrapper lives here.
+ */
+export declare function ActionTooltip({ title, children, }: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+}): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
 /**
  * Text — the typographic primitive, and antd's `Typography.Text`.
  *

package/dist/components/general/typography.js

@@ -62,7 +62,10 @@ async function writeClipboard(text, format) {
 function childrenToText(children) {
   return React.Children.toArray(children).map((node) => typeof node === "string" || typeof node === "number" ? String(node) : "").join("");
 }
-function ActionTooltip({ title, children }) {
+function ActionTooltip({
+  title,
+  children
+}) {
   if (title === null || title === void 0 || title === false || title === "") return children;
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
@@ -654,10 +657,16 @@ const Typography = Object.assign(TypographyRoot, {
   Link
 });
 export {
+  ActionTooltip,
+  COPIED_RESET_MS,
   Heading,
   Link,
   Paragraph,
   Text,
   Title,
-  Typography
+  Typography,
+  getNode,
+  toCopyConfigList,
+  useMergedConfig,
+  writeClipboard
 };

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

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

package/dist/components/navigation/tabs.js

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

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.3.0",
+  "version": "31.5.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -371,6 +371,11 @@
         "abort": "stopped"
       }
     },
+    "orgChart": {
+      "label": "Organization chart",
+      "scrollRegion": "Scrollable organization chart",
+      "agent": "AI agent"
+    },
     "timeline": {
       "statusDone": "Completed: ",
       "statusCurrent": "Current: ",
@@ -419,6 +424,11 @@
       "edit": "Edit",
       "expand": "Expand",
       "collapse": "Collapse"
+    },
+    "codeBlock": {
+      "copy": "Copy code",
+      "copied": "Copied",
+      "copiedAnnounce": "Code copied to clipboard"
     }
   },
   "navigation": {

package/dist/i18n/messages/ja.json

@@ -364,6 +364,11 @@
         "abort": "中断"
       }
     },
+    "orgChart": {
+      "label": "組織図",
+      "scrollRegion": "スクロールできる組織図",
+      "agent": "AIエージェント"
+    },
     "timeline": {
       "statusDone": "完了: ",
       "statusCurrent": "現在: ",
@@ -412,6 +417,11 @@
       "edit": "編集",
       "expand": "展開",
       "collapse": "折りたたむ"
+    },
+    "codeBlock": {
+      "copy": "コードをコピー",
+      "copied": "コピーしました",
+      "copiedAnnounce": "コードをクリップボードにコピーしました"
     }
   },
   "navigation": {

package/dist/i18n/messages/vi.json

@@ -365,6 +365,11 @@
         "abort": "đã dừng"
       }
     },
+    "orgChart": {
+      "label": "Sơ đồ tổ chức",
+      "scrollRegion": "Sơ đồ tổ chức có thể cuộn",
+      "agent": "Tác tử AI"
+    },
     "timeline": {
       "statusDone": "Đã xong: ",
       "statusCurrent": "Hiện tại: ",
@@ -413,6 +418,11 @@
       "edit": "Sửa",
       "expand": "Mở rộng",
       "collapse": "Thu gọn"
+    },
+    "codeBlock": {
+      "copy": "Sao chép mã",
+      "copied": "Đã sao chép",
+      "copiedAnnounce": "Đã sao chép mã vào bộ nhớ tạm"
     }
   },
   "navigation": {