@godxjp/ui 33.8.0 → 33.9.1

package/dist/components/navigation/tabs.js

@@ -19,6 +19,7 @@ import {
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
 import {
+  syncActiveTabIntoView,
   useKeepActiveTabVisible,
   useTabsOverflowValues,
   useTabsScrollReporter
@@ -41,6 +42,8 @@ function TabCount({
   const { pill } = useCounterPill({ count, overflowCount, showZero, countLabel, slot: "tabs" });
   return pill;
 }
+const TABS_LIST_BASE_CLASS_NAME = "group/tabs-list text-muted-foreground inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden";
+const TABS_TRIGGER_BASE_CLASS_NAME = "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring 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-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all data-[overflow-hidden]:transition-none data-[overflow-hidden]:opacity-0 data-[overflow-hidden]:pointer-events-none 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";
 const NO_LIST_LABEL = {};
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
@@ -126,6 +129,7 @@ function Tabs({
   moreIcon,
   onTabScroll,
   controls,
+  linkComponent,
   listClassName,
   contentClassName,
   children,
@@ -173,7 +177,8 @@ function Tabs({
     [resolvedOrientation, selectionSuppressed, size, panels, controls, listLabel]
   );
   const editable = variant === "editable-card";
-  const collapsible = items != null && overflow === "menu";
+  const routeStrip = items != null && items.some((item) => item.href !== void 0);
+  const collapsible = items != null && overflow === "menu" && !routeStrip;
   const listRef = React.useRef(null);
   const [hiddenValues, setHiddenValues] = React.useState([]);
   const itemValues = React.useMemo(
@@ -214,53 +219,99 @@ function Tabs({
     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 itemsListClassName = cn(
+    // The inset override is an arbitrary value reading the knob (never `p-0`): it must
+    // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
+    //
+    // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
+    // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
+    // inset is 0px, so a focused trigger had NO block headroom at all — measured in
+    // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
+    // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
+    // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
+    // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
+    // the ring's outer reach and an equal negative block margin hands it straight back —
+    // the ring paints inside the scrollport and the strip's OUTER box is unchanged
+    // (measured: 38px before and after). Both values read the same token the ring is
+    // sized from, so the two can never drift apart.
+    //
+    // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
+    // border box) now sits the ring's reach below the triggers instead of flush. That is
+    // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
+    // the same block inset — so the two construction paths now agree. A service that
+    // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
+    // which exists for exactly that.
+    // `w-full` is scoped to the HORIZONTAL axis. Unscoped it also applied when the root is
+    // vertical, where the strip is a COLUMN beside the panel: `width: 100%` made the strip
+    // claim the whole row and the panel collapsed to its own min-content floor. Measured at a
+    // 1232px root: strip 1133.72px (92%) / panel 90.28px (7%). And it is not a layer problem —
+    // tailwind-merge drops the base `w-fit` as a same-group conflict, so `w-fit` never reached
+    // the DOM at all. Scoping puts it back on the axis it was written for.
+    variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] data-[orientation=horizontal]:w-full",
+    // CARD strip. The list keeps `data-variant="default"` on purpose (a hand-composed
+    // <TabsList> must be unaffected), so the card face is selected from the ROOT — but the
+    // three properties the base list already claims as utilities (`bg-muted`, `p-1`,
+    // `rounded-lg`) have to be replaced with utilities too, or the components layer loses.
+    card && "items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[orientation=horizontal]:w-full data-[variant=default]:bg-transparent",
+    // CENTERED. Two independent moves, because the strip has two shapes: the pill/card strip
+    // is `w-fit` (auto inline margins centre the BOX) and the line strip is `w-full`
+    // (`justify-content` centres its CONTENT). `safe` keeps the overflow rule the strip
+    // already depends on — plain `center` strands the leading tab outside the scrollport.
+    centered && "mx-auto justify-center-safe",
+    listClassName
+  );
+  const itemTriggerClassName = cn(
+    // Geometry only — the active underline is the token-owned `::after` bar the
+    // line variant already owns (never a second, hand-rolled border-b indicator).
+    // They are arbitrary-value utilities so tailwind-merge keeps dropping the pill
+    // trigger's own radius / padding steps from the base class list.
+    variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]",
+    sizeTriggerClassName,
+    // A centred strip must let its triggers SHRINK to their labels first. The base
+    // trigger is `flex-1`, so on a full-width (`line`) strip they already fill every
+    // 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.
+    // CARD face: a real boundary on every side, opened toward the panel by
+    // `CARD_FACE`. `flex-none` is antd's geometry, not a preference — its
+    // `nav-list` is a plain `display: flex` with no `flex-grow` on the tab, so a
+    // card tab is CONTENT-WIDTH. The base trigger is `flex-1`, which made every
+    // card tab stretch to an equal share of the strip: measured, three tabs in a
+    // 942px strip came out 311px each for labels needing ~70px, and with
+    // `justify-center` the label and its × floated in the middle of that box —
+    // 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.
+    //
+    // 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]
+  );
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
       ref: listRef,
       "data-slot": "tabs-list",
       variant: variant === "line" ? "line" : "default",
-      className: cn(
-        // The inset override is an arbitrary value reading the knob (never `p-0`): it must
-        // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
-        //
-        // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
-        // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
-        // inset is 0px, so a focused trigger had NO block headroom at all — measured in
-        // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
-        // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
-        // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
-        // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
-        // the ring's outer reach and an equal negative block margin hands it straight back —
-        // the ring paints inside the scrollport and the strip's OUTER box is unchanged
-        // (measured: 38px before and after). Both values read the same token the ring is
-        // sized from, so the two can never drift apart.
-        //
-        // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
-        // border box) now sits the ring's reach below the triggers instead of flush. That is
-        // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
-        // the same block inset — so the two construction paths now agree. A service that
-        // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
-        // which exists for exactly that.
-        // `w-full` is scoped to the HORIZONTAL axis. Unscoped it also applied when the root is
-        // vertical, where the strip is a COLUMN beside the panel: `width: 100%` made the strip
-        // claim the whole row and the panel collapsed to its own min-content floor. Measured at a
-        // 1232px root: strip 1133.72px (92%) / panel 90.28px (7%). And it is not a layer problem —
-        // tailwind-merge drops the base `w-fit` as a same-group conflict, so `w-fit` never reached
-        // the DOM at all. Scoping puts it back on the axis it was written for.
-        variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] data-[orientation=horizontal]:w-full",
-        // CARD strip. The list keeps `data-variant="default"` on purpose (a hand-composed
-        // <TabsList> must be unaffected), so the card face is selected from the ROOT — but the
-        // three properties the base list already claims as utilities (`bg-muted`, `p-1`,
-        // `rounded-lg`) have to be replaced with utilities too, or the components layer loses.
-        card && "items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[orientation=horizontal]:w-full data-[variant=default]:bg-transparent",
-        // CENTERED. Two independent moves, because the strip has two shapes: the pill/card strip
-        // is `w-fit` (auto inline margins centre the BOX) and the line strip is `w-full`
-        // (`justify-content` centres its CONTENT). `safe` keeps the overflow rule the strip
-        // already depends on — plain `center` strands the leading tab outside the scrollport.
-        centered && "mx-auto justify-center-safe",
-        listClassName
-      ),
+      className: itemsListClassName,
       children: items.map((item) => {
         const removable = editable && Boolean(onEdit) && item.closable !== false && !item.disabled;
         return /* @__PURE__ */ jsxs(
@@ -275,51 +326,7 @@ function Tabs({
               event.preventDefault();
               onEdit?.(item.value, "remove");
             } : void 0,
-            className: cn(
-              // Geometry only — the active underline is the token-owned `::after` bar the
-              // line variant already owns (never a second, hand-rolled border-b indicator).
-              // They are arbitrary-value utilities so tailwind-merge keeps dropping the pill
-              // trigger's own radius / padding steps from the base class list.
-              variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]",
-              sizeTriggerClassName,
-              // A centred strip must let its triggers SHRINK to their labels first. The base
-              // trigger is `flex-1`, so on a full-width (`line`) strip they already fill every
-              // 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.
-              // CARD face: a real boundary on every side, opened toward the panel by
-              // `CARD_FACE`. `flex-none` is antd's geometry, not a preference — its
-              // `nav-list` is a plain `display: flex` with no `flex-grow` on the tab, so a
-              // card tab is CONTENT-WIDTH. The base trigger is `flex-1`, which made every
-              // card tab stretch to an equal share of the strip: measured, three tabs in a
-              // 942px strip came out 311px each for labels needing ~70px, and with
-              // `justify-center` the label and its × floated in the middle of that box —
-              // 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.
-              //
-              // 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]
-            ),
+            className: itemTriggerClassName,
             children: [
               item.icon ? /* @__PURE__ */ jsx(
                 "span",
@@ -380,6 +387,41 @@ function Tabs({
       })
     }
   ) : null;
+  if (routeStrip) {
+    return /* @__PURE__ */ jsx(
+      TabsRouteStrip,
+      {
+        items,
+        activeValue,
+        overflow,
+        orientation: resolvedOrientation,
+        linkComponent,
+        onTabClick,
+        onTabScroll,
+        listLabel,
+        listClassName: itemsListClassName,
+        listVariant: variant === "line" ? "line" : "default",
+        triggerClassName: itemTriggerClassName,
+        extraStart,
+        extraEnd,
+        className: cn("group/tabs flex data-[orientation=horizontal]:flex-col", className),
+        rootProps: {
+          ...props,
+          dir,
+          "data-slot": "tabs",
+          "data-orientation": resolvedOrientation,
+          "data-variant": variant,
+          "data-placement": placement,
+          "data-size": size,
+          "data-centered": centered ? "true" : void 0,
+          "data-animated-ink-bar": motion.inkBar ? "true" : "false",
+          "data-animated-tab-pane": motion.tabPane ? "true" : "false",
+          "data-indicator-size": indicatorSize,
+          "data-indicator-align": indicatorAlign
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(TabsPanelRegistryContext.Provider, { value: registerPanel, children: /* @__PURE__ */ jsx(
     AriaTabs,
     {
@@ -480,6 +522,139 @@ function Tabs({
     }
   ) }) });
 }
+function TabsRouteStrip({
+  overflow,
+  items,
+  activeValue,
+  orientation,
+  linkComponent,
+  onTabClick,
+  onTabScroll,
+  listLabel,
+  listClassName,
+  listVariant,
+  triggerClassName,
+  extraStart,
+  extraEnd,
+  className,
+  rootProps
+}) {
+  const { t } = useTranslation();
+  const navRef = React.useRef(null);
+  useKeepActiveTabVisible(navRef);
+  useTabsScrollReporter(navRef, orientation === "vertical", onTabScroll);
+  const [hiddenValues, setHiddenValues] = React.useState([]);
+  useTabsOverflowValues(
+    navRef,
+    overflow === "menu" ? items.map((item) => item.value) : void 0,
+    setHiddenValues
+  );
+  const hiddenItems = overflow === "menu" ? items.filter((item) => hiddenValues.includes(item.value)) : [];
+  const MenuLink = linkComponent ?? "a";
+  const Link = linkComponent ?? "a";
+  const named = listLabel["aria-label"] !== void 0 || listLabel["aria-labelledby"] !== void 0;
+  const nav = /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: navRef,
+      "data-slot": "tabs-list",
+      "data-variant": listVariant,
+      "data-orientation": orientation,
+      "aria-label": named ? listLabel["aria-label"] : t("navigation.tabs.routeNav"),
+      "aria-labelledby": listLabel["aria-labelledby"],
+      onFocus: () => syncActiveTabIntoView(navRef.current),
+      className: cn(
+        TABS_LIST_BASE_CLASS_NAME,
+        listClassName,
+        // Keep the first/last link's focus ring inside the clipped inline scrollport too.
+        listVariant === "line" && "scroll-px-[var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width)))] px-[max(var(--tabs-list-line-space-inset),var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]"
+      ),
+      children: items.map((item) => {
+        const active = item.value === activeValue;
+        const inert = item.disabled === true || item.href === void 0;
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: inert ? void 0 : item.href,
+            role: inert && linkComponent === void 0 ? "link" : void 0,
+            "aria-current": active ? "page" : void 0,
+            "aria-disabled": inert ? true : void 0,
+            "data-active": active ? "true" : void 0,
+            "data-slot": "tabs-trigger",
+            "data-state": active ? "active" : "inactive",
+            "data-orientation": orientation,
+            "data-value": item.value,
+            className: cn(
+              TABS_TRIGGER_BASE_CLASS_NAME,
+              // `disabled:` never matches an anchor; an inert route reads `aria-disabled` instead.
+              "aria-disabled:pointer-events-none aria-disabled:opacity-[var(--disabled-opacity)]",
+              triggerClassName
+            ),
+            onClick: onTabClick ? (event) => (
+              // The published event type names the tablist's <button>; here currentTarget
+              // is the <a>. Never `preventDefault()` — the browser owns the link.
+              onTabClick(item.value, event)
+            ) : void 0,
+            children: [
+              item.icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "tabs-trigger-icon",
+                  className: "ui-tabs-trigger-icon",
+                  "aria-hidden": "true",
+                  children: item.icon
+                }
+              ) : null,
+              item.label,
+              /* @__PURE__ */ jsx(
+                TabCount,
+                {
+                  count: item.count,
+                  overflowCount: item.overflowCount,
+                  showZero: item.showZero,
+                  countLabel: item.countLabel
+                }
+              )
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, className, children: extraStart || extraEnd || overflow === "menu" ? /* @__PURE__ */ jsxs("div", { "data-slot": "tabs-bar", className: "ui-tabs-bar", children: [
+    extraStart ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "start", className: "ui-tabs-extra", children: extraStart }) : null,
+    nav,
+    hiddenItems.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          className: "ui-tabs-overflow",
+          "aria-label": t("navigation.tabs.moreTabs"),
+          children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomEnd", children: hiddenItems.map((item) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          asChild: true,
+          disabled: item.disabled || item.href === void 0,
+          children: /* @__PURE__ */ jsx(
+            MenuLink,
+            {
+              className: "",
+              href: item.disabled ? void 0 : item.href,
+              "aria-current": item.value === activeValue ? "page" : void 0,
+              children: item.label
+            }
+          )
+        },
+        item.value
+      )) })
+    ] }) : null,
+    extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
+  ] }) : nav });
+}
 const TabsList = React.forwardRef(
   ({ className, variant = "default", loop: _loop, children, ...props }, ref) => {
     const { listLabel } = React.useContext(TabsFrameContext);
@@ -523,7 +698,7 @@ const TabsList = React.forwardRef(
           // stayed opaque `--muted`. Nothing about the card/line strips changes: both clear the
           // track with utilities of their own (`data-[variant=default]:bg-transparent`,
           // `data-[variant=line]:bg-transparent`), and a utility still outranks the new rule.
-          "group/tabs-list text-muted-foreground inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
+          TABS_LIST_BASE_CLASS_NAME,
           className
         ),
         render: (domProps) => withDomProps("div", "tabs-list", props, domProps, { "data-variant": variant }),
@@ -588,7 +763,7 @@ const TabsTrigger = React.forwardRef(
           // — Segmented — has been `--segmented-item-selected-background` since gh#848, and these
           // two are documented as the same pair. The card face and the line strip both restate the
           // fill as utilities, which still outrank the new rule, so neither moves.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring 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-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",
+          TABS_TRIGGER_BASE_CLASS_NAME,
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

package/dist/components/navigation/toolbar.js

@@ -182,7 +182,7 @@ function ToolbarGroup({ label, controlId, className, children }) {
       className: cn("ui-stack-xs ui-toolbar-group", className),
       children: [
         label ? controlId ? /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: controlId, className: "ui-toolbar-label", children: label }) : /* @__PURE__ */ jsx("div", { id: labelId, className: "ui-toolbar-label", children: label }) : null,
-        children
+        /* @__PURE__ */ jsx("div", { className: "ui-toolbar-control", children })
       ]
     }
   );

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": "33.8.0",
+  "version": "33.9.1",
   "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

@@ -558,7 +558,8 @@
     "tabs": {
       "addTab": "Add tab",
       "removeTab": "Close tab",
-      "moreTabs": "More tabs"
+      "moreTabs": "More tabs",
+      "routeNav": "Section navigation"
     },
     "steps": {
       "ariaLabel": "Progress",

package/dist/i18n/messages/ja.json

@@ -547,7 +547,8 @@
     "tabs": {
       "addTab": "タブを追加",
       "removeTab": "タブを閉じる",
-      "moreTabs": "他のタブ"
+      "moreTabs": "他のタブ",
+      "routeNav": "セクションナビゲーション"
     },
     "steps": {
       "ariaLabel": "進行状況",

package/dist/i18n/messages/vi.json

@@ -548,7 +548,8 @@
     "tabs": {
       "addTab": "Thêm tab",
       "removeTab": "Đóng tab",
-      "moreTabs": "Tab khác"
+      "moreTabs": "Tab khác",
+      "routeNav": "Điều hướng mục"
     },
     "steps": {
       "ariaLabel": "Tiến trình",

package/dist/props/components/data-entry.prop.d.ts

@@ -235,8 +235,12 @@ export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  * Spatie translatable, Rails Mobility) already sends.
  */
 export type TranslatableValue = Partial<Record<string, string>>;
-/** The locale + value contract shared by {@link TranslatableInputProp} and {@link TranslatableTextareaProp}. */
-type TranslatableFieldProp = {
+/**
+ * The locale + value contract shared by every translatable control: {@link TranslatableInputProp},
+ * {@link TranslatableTextareaProp}, {@link TranslatableFieldProp} and `@godxjp/block-editor`'s
+ * `TranslatableRichText`.
+ */
+export type TranslatableLocaleProp = {
     /** Controlled per-locale values. */
     value?: ValueProp<TranslatableValue>;
     /** Uncontrolled initial per-locale values. */
@@ -266,10 +270,51 @@ type TranslatableFieldProp = {
      */
     errors?: Partial<Record<string, ErrorProp>>;
 };
+/**
+ * What {@link TranslatableFieldProp}'s `renderControl` hands the ONE control in the panel: the
+ * active locale's text and setter, its `lang`, the resolved placeholder, and the field-a11y contract
+ * with the active locale's error folded in. Every prop the field does not own (`id`, `disabled`,
+ * `aria-describedby`, `rows`, …) is passed through as well.
+ */
+export type TranslatableFieldControlProp = FieldA11yProps & Record<string, unknown> & {
+    /** The active locale's BCP-47 tag — the control's `lang`. */
+    lang: string;
+    /** The active locale's text (`""` when empty). */
+    value: string;
+    /** Writes the active locale's text; the field reports the whole map. */
+    onValueChange: (text: string) => void;
+    /** The fallback locale's text while the active locale is empty, else the field's `placeholder`. */
+    placeholder?: string;
+    /** `"error"` while the active locale has an error. */
+    status?: ControlStatusProp;
+};
+/**
+ * @see TranslatableField — the locale-tab engine behind every translatable control (gh#1336,
+ * gh#1365): the tab strip, the per-locale error marks, the fallback placeholder and the FormField
+ * error report, around ONE control the caller renders. `TranslatableInput`, `TranslatableTextarea`
+ * and `@godxjp/block-editor`'s `TranslatableRichText` are this field around an `Input`, a
+ * `Textarea` and a `RichTextEditor`.
+ */
+export type TranslatableFieldProp = TranslatableLocaleProp & FieldA11yProps & {
+    /** Renders the one control in the panel from the active locale's props. */
+    renderControl: (control: TranslatableFieldControlProp) => React.ReactNode;
+    /**
+     * Turns the fallback locale's stored text into the plain text an EMPTY locale shows as its
+     * placeholder — HTML to its text, for a rich-text control. Default: the text as stored.
+     */
+    toPlaceholder?: (fallbackText: string) => string;
+    /** The control's tier; the tab strip uses the Tabs `sm` tier (`md` for an `lg` field). */
+    size?: SizeProp;
+    /** Shown while the active locale is empty and there is no fallback text to show. */
+    placeholder?: PlaceholderProp;
+    status?: ControlStatusProp;
+    id?: IdProp;
+    className?: ClassNameProp;
+};
 /** @see TranslatableInput — one `Input` holding a value per locale, switched by locale tabs. */
-export type TranslatableInputProp = Omit<InputProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
+export type TranslatableInputProp = Omit<InputProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableLocaleProp;
 /** @see TranslatableTextarea — the `Textarea` counterpart of {@link TranslatableInputProp}. */
-export type TranslatableTextareaProp = Omit<TextareaProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
+export type TranslatableTextareaProp = Omit<TextareaProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableLocaleProp;
 /**
  * @see NumberInput — localized numeric spinbutton (composes `Input` + step `Button`s).
  * `value`/`defaultValue`/`onValueChange` carry a `number | null` (null = empty). `step` drives both
@@ -2524,4 +2569,3 @@ export type EmojiPickerProp = {
     id?: IdProp;
     className?: ClassNameProp;
 };
-export {};

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

@@ -1,7 +1,7 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
 import type { ReactNode } from "react";
-import type { AffixProp, AffixTargetProp, ResponsiveGridColumnsProp } from "./layout.prop.js";
+import type { AffixProp, AffixTargetProp, ResponsiveGridColumnsProp, SidebarLinkComponentProp } from "./layout.prop.js";
 import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, OnOpenChangeProp, OpenProp, DefaultOpenProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
 import type { FormProp, SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
@@ -321,6 +321,17 @@ export type TabItemProp = {
      */
     content?: React.ReactNode;
     disabled?: boolean;
+    /**
+     * ROUTE TAB (gh#1364). The tab's destination. When ANY item carries an `href` the strip is a
+     * route strip: it renders a `<nav>` landmark of real links instead of a tablist — the current
+     * route (`value`) gets `aria-current="page"`, no `tabpanel` is rendered (`content` is ignored;
+     * the route renders its own page), and a plain, modified or middle click is never intercepted,
+     * so "open in new tab" works. An item without `href` (or a `disabled` one) is an inert anchor.
+     * A route strip always scrolls its overflow. `overflow="menu"` also exposes hidden routes
+     * as native links in a menu, preserving browser link actions.
+     * Links go through `TabsProp.linkComponent` when set.
+     */
+    href?: string;
     /** Leading glyph inside the trigger (Ant Design `Tab.icon`). */
     icon?: React.ReactNode;
     /**
@@ -592,6 +603,14 @@ export type TabsProp = {
      * (`radiogroup`), not a strip-only `Tabs`.
      */
     controls?: IdProp;
+    /**
+     * Router link component for a ROUTE strip (items with `href`, gh#1364) — the SAME contract and
+     * the same value as `Sidebar.linkComponent` / `NavList.linkComponent`: Inertia's `<Link>`, or a
+     * React Router / TanStack link wrapped by `createSidebarLink(Link, "to")`. It must forward every
+     * prop to its `<a>` — the strip's `data-slot` / `data-state` styling hooks travel with them.
+     * Without it each route is a plain `<a href>`.
+     */
+    linkComponent?: SidebarLinkComponentProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;