@godxjp/ui 33.8.1 → 33.10.1

package/agent/tokens.json

@@ -132,10 +132,10 @@
     "value": "30 7% 93%"
   },
   {
-    "description": "CONTROL BOUNDARY role — deliberately NOT the same value as --border (gh#315). The two roles answer different questions and are held to different bars: · --border is DECORATIVE chrome — table rules, card edges, section dividers. WCAG 2.2 SC 1.4.11 does not reach it (nothing about a divider is \"required to identify a component or its state\"), and darkening it would make the JP-dense table grid roar. It stays exactly where it is. · --input is the boundary that IS the control — the 1px edge of Input, Textarea, Select, the outline Button, TagInput, the composite date field, the topbar search. `--input` also fills the Switch's unchecked track. A text field here has NO fill of its own (`background: hsl(var(--background))`) and NO shadow to speak of, so that edge is the only thing that says \"you may type here\". That is squarely SC 1.4.11's 3:1 minimum. They shipped sharing `30 7% 83%`, which measured 1.46:1 on --background/--card — the one live WCAG failure a full DXS Platform sweep turned up. 53% clears 3:1 with margin on every surface a control actually sits on, not just the plain page (the gh#299 lesson: a value that passes on a card and fails inside a filter bar is not a line anyone can defend): --background/--card/--popover 3.47:1 · --muted/--secondary 3.18:1 · zebra stripe 3.35:1 · row hover 3.32:1. It also lifts the Switch's unchecked track from 1.46:1 to 3.47:1 against both the page and its own white thumb, so \"off\" is finally a visible state. Guarded by src/tokens/__tests__/input-boundary-contrast.test.ts. #90877f — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11)",
+    "description": "CONTROL BOUNDARY role — deliberately NOT the same value as --border (gh#315). The two roles answer different questions and are held to different bars: · --border is DECORATIVE chrome — table rules, card edges, section dividers. WCAG 2.2 SC 1.4.11 does not reach it (nothing about a divider is \"required to identify a component or its state\"), and darkening it would make the JP-dense table grid roar. It stays exactly where it is. · --input is the boundary that IS the control — the 1px edge of Input, Textarea, Select, the outline Button, TagInput, the composite date field, the topbar search. `--input` also fills the Switch's unchecked track. A text field here has NO fill of its own (`background: hsl(var(--background))`) and NO shadow to speak of, so that edge is the only thing that says \"you may type here\". That is squarely SC 1.4.11's 3:1 minimum. They shipped sharing `30 7% 83%`, which measured 1.46:1 on --background/--card — the one live WCAG failure a full DXS Platform sweep turned up. The modern refresh uses 51% lightness: the previous 53% passed the translucent hovered row but fell below 3:1 on the full --accent ground. The boundary test now includes that ground in both themes. Guarded by src/tokens/__tests__/input-boundary-contrast.test.ts. #8b8279 — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11)",
     "name": "--input",
     "tier": "foundation",
-    "value": "30 7% 53%"
+    "value": "30 7% 51%"
   },
   {
     "description": "STATUS FILLS AND THE INK THAT RIDES ON THEM. The FILLS are the palette and they do not move: 若竹, 山吹, 群青, 朱 are named colours, every solid success/attention surface in every consumer is one of them, and a chip that changes hue on upgrade is a different design. What moved is the INK, and only where it failed to be readable (gh#643). Measured from these very tokens (src/tokens/__tests__/status-fill-contrast.test.ts, and confirmed in Chromium by `check:frame-axe` on /isolate/foundation-colors at 320/375/1440): role fill WAS near-white ink dark ink (48 8% 13%) success #68be8d 2.19:1 ✗ 7.08:1 ✓ attention #eb6101 3.32:1 ✗ 4.68:1 ✓ warning #f8b500 1.74:1 ✗ 8.91:1 ✓ (already dark — the precedent) primary #18181b 17.45:1 ✓ (the GoDX preset #008066: 4.86:1) destructive … 6.10:1 ✓ info #4c6cb3 5.00:1 ✓ Two of the eight light-theme fills carried an ink their own lightness cannot support, and the package already knew the answer twice over: --warning-foreground has always been this same near-black on the equally pale 山吹, and the DARK theme flips --success-foreground / --attention-foreground to 48 9% 9% for exactly this reason. The light block was the outlier. REJECTED — darkening 若竹 and 朱 so the near-white ink clears 4.5:1. A fill needs luminance ≤ 0.183 for that; 若竹 sits at 0.422, so \"keep the white text\" means a different green, not a darker one. That is the palette change this deliberately is not. 若竹 #68be8d",
@@ -525,13 +525,13 @@
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--shadow-md",
     "tier": "foundation",
-    "value": "0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1)"
+    "value": "0 6px 16px -4px rgb(var(--shadow-color) / 0.08), 0 1px 3px 0 rgb(var(--shadow-color) / 0.08)"
   },
   {
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--shadow-lg",
     "tier": "foundation",
-    "value": "0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1)"
+    "value": "0 12px 28px -6px rgb(var(--shadow-color) / 0.1), 0 2px 6px -2px rgb(var(--shadow-color) / 0.08)"
   },
   {
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
@@ -582,16 +582,16 @@
     "value": "initial"
   },
   {
-    "description": "── THE SWITCH ─────────────────────────────────────────────────────────────────────────── `--focus-outline` is ONE 0/1 flag, and every painted focus length below multiplies by it: --focus-ring-width: calc(var(--focus-ring-weight) * var(--focus-outline)) — so setting it to 0 zeroes the whole indicator at once. There is deliberately no parallel mechanism: one multiplier is the only shape in which a kill switch cannot be routed around by a per-component rebind. IT SHIPS ON, as of gh#544 — it used to ship off, and that reversal is the point of this note. The old default was a real product decision: the indicator had been reported as intrusive and the owner accepted the cost, which was that this library did not satisfy WCAG 2.2 SC 2.4.7 Focus Visible (AA) and so could carry no JIS X 8341-3:2016 AA statement. What changed is not the principle but two measurements. FIRST, what the default actually produced. Counting `data-focus-outline` across the four real consumers of this package: `ql` sets it (3 files); `godx-task`, `godx-chat` and the platform app set it NOWHERE. Three of four products shipped with no keyboard-focus indicator at all — not chosen, because the switch is only discoverable by reading this file. SECOND, what the ON state now costs. It is the HAIRLINE field indicator described below, not the 3px outline the original complaint was about. The thing being turned on is no longer the thing that was turned off. The escape hatch is the same shape it always was, one attribute, now pointing the other way: <html data-focus-outline=\"off\"> (or AppProvider's equivalent) `data-focus-outline=\"on\"` still works and still means on, so every consumer that already set it is untouched. Every painted length below multiplies by `--focus-outline`, so with the switch off the outline resolves to `0px`, the halo's spread resolves to `0px`, and `--focus-field-shadow` is `none`. The `:focus-visible` selectors themselves stay exactly where they are: only the paint goes. ── THE ON WEIGHT ──────────────────────────────────────────────────────────────────────── `--focus-outline-weight` is the ON state's thickness, and it is deliberately the HAIRLINE (1px) rather than the heavy outline weight (3px). The heavy mark is what the complaint was about: a 3px opaque outline stacked on an already-shaded selected nav row reads as two treatments on one element. WCAG's AA bar for an indicator is CONTRAST (SC 1.4.11, 3:1), not thickness, so the weight can come all the way down to the FIELD indicator — one hairline of `--ring`, which measures at worst 5.30:1 light and 6.87:1 dark across every surface a control sits on — while the criterion is still met. The 3px weight is one token away: set `--focus-outline-weight: var(--stroke-lg)`. The hue is the focus hue itself, NOT `--primary-border`. That is the one place the ON state departs from the OUTLINE form, and it is forced: `--primary-border` for this seed is #a66de3, which reaches 3.49:1 on the page and 2.92:1 light / 1.03:1 dark on an accent panel, so it cannot satisfy SC 1.4.11 on every surface at any thickness. A mark that fails the criterion is not an indicator. the switch — 1 = on (shipped default since gh#544), 0 = off",
+    "description": "── THE SWITCH ─────────────────────────────────────────────────────────────────────────── `--focus-outline` is ONE 0/1 flag, and every painted focus length below multiplies by it: --focus-ring-width: calc(var(--focus-ring-weight) * var(--focus-outline)) — so setting it to 0 zeroes the whole indicator at once. There is deliberately no parallel mechanism: one multiplier is the only shape in which a kill switch cannot be routed around by a per-component rebind. IT SHIPS ON, as of gh#544 — it used to ship off, and that reversal is the point of this note. The old default was a real product decision: the indicator had been reported as intrusive and the owner accepted the cost, which was that this library did not satisfy WCAG 2.2 SC 2.4.7 Focus Visible (AA) and so could carry no JIS X 8341-3:2016 AA statement. What changed is not the principle but two measurements. FIRST, what the default actually produced. Counting `data-focus-outline` across the four real consumers of this package: `ql` sets it (3 files); `godx-task`, `godx-chat` and the platform app set it NOWHERE. Three of four products shipped with no keyboard-focus indicator at all — not chosen, because the switch is only discoverable by reading this file. SECOND, what the ON state now costs. It is the HAIRLINE field indicator described below, not the 3px outline the original complaint was about. The thing being turned on is no longer the thing that was turned off. The escape hatch is the same shape it always was, one attribute, now pointing the other way: <html data-focus-outline=\"off\"> (or AppProvider's equivalent) `data-focus-outline=\"on\"` still works and still means on, so every consumer that already set it is untouched. Every painted length below multiplies by `--focus-outline`, so with the switch off the outline resolves to `0px`, the halo's spread resolves to `0px`, and `--focus-field-shadow` is `none`. The `:focus-visible` selectors themselves stay exactly where they are: only the paint goes. ── THE ON WEIGHT ────────────────────────────────────────────────────── The modern default is a 2px mark with 2px offset. Hue remains --ring for at least 3:1 contrast on supported surfaces; navigation keeps its inset. Consumers can retune the two thickness knobs or use the existing opt-out. 1 = on, 0 = off",
     "name": "--focus-outline",
     "tier": "foundation",
     "value": "1"
   },
   {
-    "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)",
+    "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--focus-outline-weight",
     "tier": "foundation",
-    "value": "initial"
+    "value": "var(--stroke-md)"
   },
   {
     "description": "default = var(--focus-ring-color, var(--ring)), resolved at the focused element — a `:root` binding froze on the root's --ring, so a nested tenant scope never re-tinted the outline (gh#687; docs/TOKENS.md, the freeze rule)",
@@ -609,7 +609,7 @@
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--focus-outline-offset",
     "tier": "foundation",
-    "value": "0px"
+    "value": "2px"
   },
   {
     "description": "FOCUS RING — the two global knobs for the keyboard-focus affordance (WCAG 2.4.7 / 2.4.11). `--focus-ring-color` is the themeable hue (HSL components, defaults to --ring) and `--focus-ring-width` the standard thickness; override either ONCE — even scoped under a `[data-tenant]` — to retint or resize EVERY focus ring. `--focus-ring-color` is declared `initial` (NOT `var(--ring)`): a :root binding to a role var would freeze at the :root --ring and a scoped [data-tenant] override of --ring alone would never reach it. Every :focus-visible rule reads it with the live-role fallback `hsl(var(--focus-ring-color, var(--ring)))`, so the default re-resolves at the element that paints the ring while an explicit override still wins. default = the live --ring role",
@@ -1203,19 +1203,19 @@
     "description": "Motion — the primitive tier for animation, so enter/transition timing reads a token instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2). the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift. Consumers honour prefers-reduced-motion at the call site.",
     "name": "--duration-fast",
     "tier": "foundation",
-    "value": "150ms"
+    "value": "120ms"
   },
   {
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--duration-base",
     "tier": "foundation",
-    "value": "250ms"
+    "value": "180ms"
   },
   {
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
     "name": "--duration-slow",
     "tier": "foundation",
-    "value": "500ms"
+    "value": "320ms"
   },
   {
     "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.",
@@ -1440,16 +1440,16 @@
     "value": "var(--primary)"
   },
   {
-    "description": "Semantic spacing — ONE coherent 4px grid (Tailwind/Material/Ant standard). All steps reference the linear `--space-*` scale (NOT the golden φ scale — golden ratio is for modular SIZE scales like type/radius, not the spacing grid; mixing the two left an incoherent density rhythm). The φ tokens remain available as an optional golden-layout utility, just not the spacing baseline. 24px — page gutter",
+    "description": "Semantic spacing — ONE coherent 4px grid (Tailwind/Material/Ant standard). All steps reference the linear `--space-*` scale (NOT the golden φ scale — golden ratio is for modular SIZE scales like type/radius, not the spacing grid; mixing the two left an incoherent density rhythm). The φ tokens remain available as an optional golden-layout utility, just not the spacing baseline. 32px — page gutter",
     "name": "--space-page-x",
     "tier": "semantic",
-    "value": "var(--space-6)"
+    "value": "var(--space-8)"
   },
   {
-    "description": "24px",
+    "description": "32px",
     "name": "--space-page-y",
     "tier": "semantic",
-    "value": "var(--space-6)"
+    "value": "var(--space-8)"
   },
   {
     "description": "16px",
@@ -1641,7 +1641,7 @@
     "description": "Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet, Drawer, AppShell mobile nav). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay. HOW IT REACHES AN OVERLAY (gh#215 — it previously reached NOTHING): each surface declares its own knob `initial` and resolves a SHARE of this colour at the call site, `var(--dialog-overlay-background, color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent))`. That keeps the calibrated per-surface depth — a slide-in Sheet washes the page more lightly (40%) than a modal Dialog (60%) — while ONE override here retints every backdrop. Per docs/TOKENS.md the knobs must stay `initial`: a `:root` binding would freeze and a scoped `[data-tenant]`/`.dark` override of this token would never reach the overlay. Overlays are portaled, so a tenant scope must also sit on the portal container (see docs/CUSTOMER-THEMING.md).",
     "name": "--overlay-background",
     "tier": "semantic",
-    "value": "rgb(0 0 0 / 0.5)"
+    "value": "rgb(0 0 0 / 0.4)"
   },
   {
     "description": "RECESSED SURFACE role (gh#399) — \"the ground a card sits on\", one step BEHIND `--card`. It is a ROLE, not a derivation: the two themes order their surfaces differently, so no single expression is correct on both. Light puts `--muted` (95%) behind `--card` (99%); dark puts it (18%) in FRONT of `--card` (12%), so the shipped `hsl(var(--muted) / 0.4)` composited to rgb(35,33,30) against a rgb(33,32,28) card — the page read 1.015:1 LIGHTER than the cards on it, i.e. the elevation inverted. No alpha fixes that: the mix runs from `--background` (correct) toward `--muted` (wrong), so anything above ~0.33 crosses the card. Each theme therefore states its own ground below. Light keeps the exact shipped composite (1.036:1 behind the card); dark takes the page `--background`, which measures 1.089:1 — matching the light theme's separation instead of inverting it.",
@@ -2415,7 +2415,7 @@
     "description": "Gap between the header and the body, and the body's own top padding — the breathing room under a title before content begins.",
     "name": "--card-space-body-y",
     "tier": "component",
-    "value": "var(--space-section-active)"
+    "value": "var(--space-6)"
   },
   {
     "description": "Symmetric block padding for a SOLO content slot, so a composed shell can tune block and inline spacing independently without targeting CardContent. Declared `initial` for the SAME reason as --card-space-shell-y above: written as `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying [data-density=\"tight\"|\"cozy\"] (which override --card-space-inset ON THE CARD) would keep the :root value. The default now resolves at the call site through the chain solo-y → shell-y → inset, so a solo body follows the general block knob when only that is set, and an explicit solo-y still wins. default = var(--card-space-shell-y, var(--card-space-inset))",
@@ -2445,7 +2445,7 @@
     "description": "Card component tokens: card chrome derives from semantic layout tokens.",
     "name": "--card-title-font-size",
     "tier": "component",
-    "value": "var(--font-size-base)"
+    "value": "calc(var(--font-size-base) * var(--font-size-ratio))"
   },
   {
     "description": "Card component tokens: card chrome derives from semantic layout tokens.",
@@ -2508,10 +2508,10 @@
     "value": "initial"
   },
   {
-    "description": "The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm elevation layer. Consumers can still flatten or lift cards through this knob. `initial`, NOT `var(--shadow-sm)` — a role-mirror knob written here binds at `<html>` and a scope below root that restates the elevation ramp can never reach it (docs/TOKEN-RESOLUTION.md §3). The default now resolves on `.ui-card`, so a `[data-tenant]`/`[data-theme]` region that sets `--shadow-sm` moves its own cards and nothing else. gh#880 item 7. default = var(--shadow-sm), resolved at the call site",
+    "description": "Flat resting cards: the hairline defines the surface; elevation is reserved for overlays. Set --card-shadow to a shadow value for opt-in elevation, or to initial to restore the live --shadow-sm fallback at the call site (including scoped shadow ramps).",
     "name": "--card-shadow",
     "tier": "component",
-    "value": "initial"
+    "value": "none"
   },
   {
     "description": "Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the surface box-shadow so a service can wash every card with the global glow, e.g. --card-glow: var(--shadow-glow), with no markup change.",
@@ -3147,7 +3147,7 @@
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--control-height-default",
     "tier": "component",
-    "value": "var(--band-height-md)"
+    "value": "var(--band-height-lg)"
   },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
@@ -3234,10 +3234,10 @@
     "value": "var(--radius)"
   },
   {
-    "description": "Button corner radius — defaults to the button's historical `rounded-md` so nothing changes by default, but is its OWN knob so a service theme can retune the button radius INDEPENDENTLY of input/control radius (issue #124). The `var(--radius-md, …)` fallback is gh#888, NOT the same fix as this token's own freeze: Button reads this value through `rounded-[var(--button-radius)]`, a Tailwind utility (`@layer utilities`) that this package cannot give a fallback to from CSS — so this knob is deliberately NOT flipped to `initial` (that would still be unreachable from a scoped theme, gh#824 measured `--control-radius: 37px` on `:root` moving 0 buttons). What DOES need the fallback is the read of `--radius-md` itself: gh#888 unfreezes the φ tier globally, so without this fallback `--radius-md` resolves to nothing and `--button-radius` — and therefore every Button's corner — would go to 0. The formula keeps this declaration byte-identical to before gh#888 (still frozen at :root against --radius, same historical limitation).",
+    "description": "Match the default 6px field corner while retaining an independent Button knob. The utility consumes a concrete value, so this remains a root alias; scoped services override --button-radius directly. Pill and sharp shapes keep their own tokens.",
     "name": "--button-radius",
     "tier": "component",
-    "value": "var(--radius-md, calc(var(--radius) / var(--radius-ratio)))"
+    "value": "var(--radius)"
   },
   {
     "description": "THE BUTTON'S OWN SURFACE — one knob per painted variant (gh#880, standard §1). Every variant painted a bare role (`hsl(var(--primary))`, `hsl(var(--background))`, `hsl(var(--secondary))`, `hsl(var(--destructive))`) with no knob of its own, so the only way to retint a button was to retint the ROLE — and `--primary` is also the link ink, the focus mark and a chart series. There was no way to say \"this button is translucent\" without saying it about eight other things. WHY BUTTONS AT ALL. namethatui's source draws the line this library needed: glassmorphism is a decorative skin for ANY surface including controls, while Apple's Liquid Glass reserves glass for the floating control layer above opaque content. A glass page with a solid primary button on it is the Liquid Glass split applied backwards. FOUR FILLS, NOT SIX. `ghost` and `link` paint no resting surface, so they have nothing to knob. The HOVER fills are deliberately not knobs either: they already resolve from roles at their own call sites (`--primary-hover`, `--accent`, `--secondary`), so a theme reaches them today — the documented consequence being that a glass RESTING fill with an untouched hover gives a button that turns opaque under the pointer, and a theme that wants glass on both moves the role too. ONE BLUR FOR THE WHOLE COMPONENT, because the material is one decision per component and the variants are one component. `initial`, so unset there is no blur and no backdrop root. default = hsl(var(--primary)) at the call site",
@@ -3309,7 +3309,7 @@
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--control-shadow",
     "tier": "component",
-    "value": "var(--shadow-xs)"
+    "value": "none"
   },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
@@ -3588,10 +3588,10 @@
     "value": "1"
   },
   {
-    "description": "Mark width for a BORDERED FIELD. This knob exists because a field is the one control that already owns a boundary, so it is the one place the mark could plausibly be dropped and the recoloured border left to carry the state — which is the established treatment for a bordered field: a primary border plus a translucent halo, nothing in between. It ships at the same step as `--focus-outline-weight`, the hairline stroke, so a field and a button carry the same weight. A gate asserts the two stay equal, because this token cannot literally READ the global one without freezing at :root (docs/TOKENS.md, the freeze rule). It feeds `--focus-ring-weight`, never `--focus-ring-width`. The width is `weight × --focus-outline`, so a field's mark is still switched off with everything else — a knob that bypassed the switch would be a hole in it. If a service sets this, note the unit: the halo's spread is summed with a length in `calc()`, and CSS refuses to add a unitless number to a length — a bare `0` makes the whole box-shadow invalid at computed-value time and it resolves to NONE. Write `0px`. default = var(--stroke-hairline), resolved at the call site (gh#906)",
+    "description": "Mark width for a BORDERED FIELD. This knob exists because a field is the one control that already owns a boundary, so it is the one place the mark could plausibly be dropped and the recoloured border left to carry the state — which is the established treatment for a bordered field: a primary border plus a translucent halo, nothing in between. It ships at the same step as `--focus-outline-weight`, the hairline stroke, so a field and a button carry the same weight. A gate asserts the two stay equal, because this token cannot literally READ the global one without freezing at :root (docs/TOKENS.md, the freeze rule). It feeds `--focus-ring-weight`, never `--focus-ring-width`. The width is `weight × --focus-outline`, so a field's mark is still switched off with everything else — a knob that bypassed the switch would be a hole in it. If a service sets this, note the unit: the halo's spread is summed with a length in `calc()`, and CSS refuses to add a unitless number to a length — a bare `0` makes the whole box-shadow invalid at computed-value time and it resolves to NONE. Write `0px`. modern 2px mark, matching global focus",
     "name": "--control-focus-ring-width",
     "tier": "component",
-    "value": "initial"
+    "value": "var(--stroke-md)"
   },
   {
     "description": "Outline-form gaps — marks where a radius-hugging ring would touch the glyph.",
@@ -7032,13 +7032,13 @@
     "value": "22.5rem"
   },
   {
-    "description": "Overlay scrims — `initial` so the shared semantic --overlay-background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather than a private literal, so a service retints every backdrop with one --overlay-background while the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a modal Dialog. Defaults resolve to rgb(0 0 0 / 0.2) (sheet) and rgb(0 0 0 / 0.3) (dialog).",
+    "description": "Overlay scrims — `initial` so the shared semantic --overlay-background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather than a private literal, so a service retints every backdrop with one --overlay-background while the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a modal Dialog. Defaults resolve to rgb(0 0 0 / 0.16) (sheet) and rgb(0 0 0 / 0.24) (dialog).",
     "name": "--sheet-overlay-background",
     "tier": "component",
     "value": "initial"
   },
   {
-    "description": "A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886). The base is a finished colour that already carries `/0.5`, so `40%` composites to **0.20**, and a theme author who sets `62%` gets 0.31. That is the library-wide convention for a `--*-alpha` knob in the `color-mix(in srgb, <base> <alpha>, transparent)` share form — 100% means \"the base as authored\", 0% means gone — and it is deliberate: the calibrated depth lives ONCE in `--overlay-background` so a service retints every scrim with one line. Want an absolute opacity instead? Set `--sheet-overlay-background` directly; it wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)",
+    "description": "A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886). The base is a finished colour that already carries `/0.4`, so `40%` composites to **0.16**, and a theme author who sets `62%` gets 0.248. That is the library-wide convention for a `--*-alpha` knob in the `color-mix(in srgb, <base> <alpha>, transparent)` share form — 100% means \"the base as authored\", 0% means gone — and it is deliberate: the calibrated depth lives ONCE in `--overlay-background` so a service retints every scrim with one line. Want an absolute opacity instead? Set `--sheet-overlay-background` directly; it wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 40% of rgb(0 0 0 / 0.4) = rgb(0 0 0 / 0.16)",
     "name": "--sheet-overlay-alpha",
     "tier": "component",
     "value": "40%"
@@ -7170,7 +7170,7 @@
     "value": "initial"
   },
   {
-    "description": "A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886) — the miss that was reported, because this knob carried no note of its own and `60%` reads as \"0.6\". The base is a finished colour with `/0.5` baked in, so the product is **0.30**, and `62%` gives 0.31 rather than the darker scrim that was asked for. See `--sheet-overlay-alpha` above for the convention and for the escape hatch: `--dialog-overlay-background` is an absolute colour and wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 60% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.30)",
+    "description": "A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886) — the miss that was reported, because this knob carried no note of its own and `60%` reads as \"0.6\". The base is a finished colour with `/0.4` baked in, so the product is **0.24**, and `62%` gives 0.248 rather than the darker scrim that was asked for. See `--sheet-overlay-alpha` above for the convention and for the escape hatch: `--dialog-overlay-background` is an absolute colour and wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 60% of rgb(0 0 0 / 0.4) = rgb(0 0 0 / 0.24)",
     "name": "--dialog-overlay-alpha",
     "tier": "component",
     "value": "60%"
@@ -7956,10 +7956,10 @@
     "value": "var(--control-label-font-size, var(--text-sm))"
   },
   {
-    "description": "Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN direct children (no Card framing). Unchanged from the historical value. 16px",
+    "description": "Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN direct children (no Card framing). Modern block spacing is 24px. 24px",
     "name": "--form-block-gap",
     "tier": "component",
-    "value": "var(--space-4)"
+    "value": "var(--space-6)"
   },
   {
     "description": "THE VALIDATION FEEDBACK GLYPH. It was `controlIconClass`, which is `size-[length:var(--control-height)]` — the height of a whole CONTROL, meant for something that fills a control-sized box like the ColorPicker swatch. On a `text-xs` feedback line that rendered a ~32px icon beside ~12px text, which is what a reader actually saw and reported. A glyph that sits inline with text belongs on the ICON scale, one step above the text it accompanies so it reads as a mark rather than a letter. 14px beside 12px text",
@@ -7968,7 +7968,7 @@
     "value": "var(--icon-size-sm)"
   },
   {
-    "description": "Field-to-field row rhythm (gh#295) — mirrors --descriptions-row-gap so a read-only value mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`, which only reaches DIRECT children — dead in the common `Form > CardContent > FormField*` composition every real Save-button form needs), so it holds at any DOM depth relative to Form. 12px",
+    "description": "Field-to-field row rhythm (gh#295) — mirrors --descriptions-row-gap so a read-only value mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`, which only reaches DIRECT children — dead in the common `Form > CardContent > FormField*` composition every real Save-button form needs), so it holds at any DOM depth relative to Form. 12px — shared with Descriptions",
     "name": "--form-field-row-gap",
     "tier": "component",
     "value": "var(--space-3)"
@@ -10722,13 +10722,13 @@
     "value": "22.5rem"
   },
   {
-    "description": "Mobile-drawer scrim — `initial` so the shared --overlay-background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default = var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box.",
+    "description": "Mobile-drawer scrim — `initial` so the shared --overlay-background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default = var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.16) out of the box.",
     "name": "--app-shell-mobile-nav-background",
     "tier": "component",
     "value": "initial"
   },
   {
-    "description": "Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole system with one --overlay-background and every overlay keeps its calibrated depth. A SHARE, not the resulting alpha (gh#886): the base already carries `/0.5`, so the product is 0.20. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)",
+    "description": "Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole system with one --overlay-background and every overlay keeps its calibrated depth. A SHARE, not the resulting alpha (gh#886): the base already carries `/0.4`, so the product is 0.16. 40% of rgb(0 0 0 / 0.4) = rgb(0 0 0 / 0.16)",
     "name": "--app-shell-mobile-nav-alpha",
     "tier": "component",
     "value": "40%"
@@ -12195,7 +12195,7 @@
     "description": "Table component tokens: row height, cell padding.",
     "name": "--table-row-height-default",
     "tier": "component",
-    "value": "var(--band-height-md)"
+    "value": "var(--band-height-lg)"
   },
   {
     "description": "Table component tokens: row height, cell padding.",

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

@@ -9,8 +9,8 @@ export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
-export { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
-export type { TranslatableValue, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
+export { TranslatableField, TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+export type { TranslatableValue, TranslatableLocaleProp, TranslatableFieldProp, TranslatableFieldProps, TranslatableFieldControlProp, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
 export type { FormProp, FormProps } from "./form.js";
 export { FormField } from "./form-field.js";

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

@@ -17,7 +17,7 @@ import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 import { Textarea } from "./textarea.js";
-import { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+import { TranslatableField, TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
 import { FormErrors, FormErrorsProvider } from "./form-errors.js";
@@ -126,6 +126,7 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   Transfer,
+  TranslatableField,
   TranslatableInput,
   TranslatableTextarea,
   TreeSelect,

package/dist/components/data-entry/translatable-input.d.ts

@@ -1,6 +1,26 @@
 import * as React from "react";
-import type { TranslatableValue } from "../../props/components/data-entry.prop.js";
-export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+import type { TranslatableFieldProp } from "../../props/components/data-entry.prop.js";
+export type { TranslatableValue, TranslatableLocaleProp, TranslatableFieldProp, TranslatableFieldProp as TranslatableFieldProps, TranslatableFieldControlProp, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * TranslatableField — the shared engine of {@link TranslatableInput}, {@link TranslatableTextarea}
+ * and `@godxjp/block-editor`'s `TranslatableRichText` (gh#1365): it owns the locale list, the active
+ * tab, the per-locale map, the fallback placeholder, the error marks and the FormField error report,
+ * and renders the ONE control in the panel through `renderControl`. Every prop it does not own is
+ * passed through to that control.
+ *
+ * WHY THE SWITCHER IS `Tabs`, NOT `Segmented`. The WAI-ARIA APG radio group is for CHOOSING A VALUE
+ * — a segmented control's choice is form state and is submitted with the form. The locale here is
+ * not form state: every locale's text is submitted together, and the switcher only decides which
+ * of them the one editing region shows. That is the APG tabs pattern — a tablist whose selected
+ * tab controls one tabpanel — so a screen reader announces "English, tab, 2 of 3" and the region
+ * that follows, instead of offering a "language" question the form never asks.
+ *
+ * ONE CONTROL, NOT ONE PER LOCALE. The panel holds a single control whose value, `lang` and
+ * placeholder follow the active tab (`Tabs.controls` points the tab at it, gh#1021). Swapping
+ * elements per tab would hand the forwarded `ref`, the FormField `id` and an IME composition to a
+ * new node on every switch.
+ */
+export declare function TranslatableField({ renderControl, toPlaceholder, value: valueProp, defaultValue, onValueChange, locales: localesProp, defaultLocale, fallbackLocale: fallbackLocaleProp, errors, size, placeholder, className, ...rest }: TranslatableFieldProp): React.JSX.Element;
 /**
  * TranslatableInput — ONE text field that holds a value per locale (`{ ja, en, vi }`), switched by
  * locale tabs above it (gh#1336). The locale list and the first tab come from `AppProvider`
@@ -8,22 +28,6 @@ export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as
  * its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to
  * the single control, and `ref` is that control's `<input>`.
  */
-export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
-    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
-    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
-    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
-    locales?: readonly string[];
-    defaultLocale?: string;
-    fallbackLocale?: string;
-    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
-} & React.RefAttributes<HTMLInputElement>>;
+export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & import("./translatable-input.js").TranslatableLocaleProp & React.RefAttributes<HTMLInputElement>>;
 /** TranslatableTextarea — {@link TranslatableInput} over a `Textarea`; `ref` is the `<textarea>`. */
-export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
-    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
-    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
-    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
-    locales?: readonly string[];
-    defaultLocale?: string;
-    fallbackLocale?: string;
-    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & import("./translatable-input.js").TranslatableLocaleProp & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/data-entry/translatable-input.js

@@ -21,7 +21,8 @@ function localeName(code, uiLocale) {
 }
 const idPart = (code) => code.replace(/[^A-Za-z0-9_-]/g, "_");
 function TranslatableField({
-  kind,
+  renderControl,
+  toPlaceholder,
   value: valueProp,
   defaultValue,
   onValueChange,
@@ -32,7 +33,6 @@ function TranslatableField({
   size,
   placeholder,
   className,
-  forwardedRef,
   ...rest
 }) {
   const { t, locale: uiLocale, fallbackLocale: appFallbackLocale } = useTranslation();
@@ -74,11 +74,11 @@ function TranslatableField({
   const showOwnError = hasActiveError && !insideFormField;
   const controlProps = {
     ...rest,
-    ref: forwardedRef,
+    size,
     lang: active,
     value: activeText,
     onValueChange: handleText,
-    placeholder: fallbackText ? fallbackText : placeholder,
+    placeholder: fallbackText ? toPlaceholder?.(fallbackText) ?? fallbackText : placeholder,
     // The control is named by the field AND the locale it holds: "商品名 English".
     "aria-labelledby": labelledBy ? `${labelledBy} ${localeNameId}` : void 0,
     "aria-invalid": hasActiveError ? true : rest["aria-invalid"],
@@ -139,19 +139,7 @@ function TranslatableField({
             id: panelId,
             "aria-labelledby": tabId(active),
             className: "ui-translatable-field-panel",
-            children: kind === "input" ? /* @__PURE__ */ jsx(
-              Input,
-              {
-                ...controlProps,
-                size
-              }
-            ) : /* @__PURE__ */ jsx(
-              Textarea,
-              {
-                ...controlProps,
-                size
-              }
-            )
+            children: renderControl(controlProps)
           }
         ),
         showOwnError ? /* @__PURE__ */ jsx("p", { id: ownErrorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: activeError }) : null
@@ -164,8 +152,7 @@ const TranslatableInput = React.forwardRef(
     TranslatableField,
     {
       ...props,
-      kind: "input",
-      forwardedRef: ref
+      renderControl: (control) => /* @__PURE__ */ jsx(Input, { ...control, ref })
     }
   )
 );
@@ -175,13 +162,13 @@ const TranslatableTextarea = React.forwardRef(
     TranslatableField,
     {
       ...props,
-      kind: "textarea",
-      forwardedRef: ref
+      renderControl: (control) => /* @__PURE__ */ jsx(Textarea, { ...control, ref })
     }
   )
 );
 TranslatableTextarea.displayName = "TranslatableTextarea";
 export {
+  TranslatableField,
   TranslatableInput,
   TranslatableTextarea
 };

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

@@ -15,10 +15,6 @@ export type TabsScrollBox = {
  * coordinates, so it is direction- and orientation-agnostic (LTR, RTL, vertical rail alike).
  */
 export declare function isTabFullyVisible(scrollport: TabsScrollBox, trigger: TabsScrollBox): boolean;
-/**
- * The trigger the strip must keep reachable: the focused trigger when the roving focus is inside
- * this list (manual activation can park focus off the selected tab), otherwise the active one.
- */
 export declare function resolveTabScrollTarget(list: HTMLElement): HTMLElement | null;
 /** `true` when the user has asked for reduced motion (falsy/unsupported environments say no). */
 export declare function prefersReducedMotion(): boolean;
@@ -80,7 +76,7 @@ export declare function useTabsScrollReporter(listRef: React.RefObject<HTMLEleme
  * removed) and the strip scrolling (the user swiping, or `useKeepActiveTabVisible` re-pinning a
  * trigger).
  *
- * `values` is joined into the effect key rather than passed as a dependency, so a consumer that
+ * `values` is serialized into the effect key rather than passed as a dependency, so a consumer that
  * rebuilds its `items` array on every render does not re-arm the observers on every render.
  *
  * The first measurement ALWAYS reports, even when nothing is hidden. Suppressing it looks harmless

package/dist/components/navigation/tabs-scroll.js

@@ -7,12 +7,15 @@ function isTabFullyVisible(scrollport, trigger) {
   if (width <= 0 && height <= 0) return true;
   return trigger.left >= scrollport.left - VISIBILITY_EPSILON && trigger.right <= scrollport.right + VISIBILITY_EPSILON && trigger.top >= scrollport.top - VISIBILITY_EPSILON && trigger.bottom <= scrollport.bottom + VISIBILITY_EPSILON;
 }
+const TAB_TRIGGER_SELECTOR = '[role="tab"], [data-slot="tabs-trigger"]';
 function resolveTabScrollTarget(list) {
   const focused = list.ownerDocument?.activeElement;
-  if (focused instanceof HTMLElement && focused !== list && list.contains(focused) && focused.getAttribute("role") === "tab") {
+  if (focused instanceof HTMLElement && focused !== list && list.contains(focused) && focused.matches(TAB_TRIGGER_SELECTOR)) {
     return focused;
   }
-  return list.querySelector('[role="tab"][data-state="active"]');
+  return list.querySelector(
+    '[role="tab"][data-state="active"], [data-slot="tabs-trigger"][data-state="active"]'
+  );
 }
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -69,7 +72,7 @@ function useKeepActiveTabVisible(listRef) {
 }
 function resolveHiddenTabValues(list, values) {
   const scrollport = list.getBoundingClientRect();
-  const triggers = [...list.querySelectorAll('[role="tab"]')];
+  const triggers = [...list.querySelectorAll(TAB_TRIGGER_SELECTOR)];
   const hidden = [];
   triggers.forEach((trigger, index) => {
     const value = values[index];
@@ -115,16 +118,30 @@ function useTabsOverflowValues(listRef, values, onChange) {
   React.useEffect(() => {
     onChangeRef.current = onChange;
   });
-  const key = values === void 0 ? null : values.join(" ");
-  React.useEffect(() => {
+  const key = values === void 0 ? null : JSON.stringify(values);
+  React.useLayoutEffect(() => {
     if (key === null) return void 0;
     const list = listRef.current;
     if (!list) return void 0;
-    const all = key === "" ? [] : key.split(" ");
+    const all = JSON.parse(key);
     let last = null;
     const measure = () => {
-      const hidden = resolveHiddenTabValues(list, all);
-      const next = hidden.join(" ");
+      const triggers = [...list.querySelectorAll(TAB_TRIGGER_SELECTOR)];
+      const menu = list.parentElement?.querySelector(".ui-tabs-overflow");
+      const vertical = list.dataset.orientation === "vertical";
+      const style = getComputedStyle(list);
+      const boxes = triggers.map((trigger) => trigger.getBoundingClientRect());
+      const extent = boxes.length ? Math.max(...boxes.map((box2) => vertical ? box2.bottom : box2.right)) - Math.min(...boxes.map((box2) => vertical ? box2.top : box2.left)) : 0;
+      const padding = vertical ? parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) : parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      const box = list.getBoundingClientRect();
+      const menuBox = menu?.getBoundingClientRect();
+      const gap = menu && list.parentElement ? parseFloat(getComputedStyle(list.parentElement).gap) || 0 : 0;
+      const fitsWithoutMenu = menuBox && extent + padding <= (vertical ? box.height + menuBox.height : box.width + menuBox.width) + gap;
+      const hidden = fitsWithoutMenu ? [] : resolveHiddenTabValues(list, all);
+      triggers.forEach((trigger, index) => {
+        trigger.toggleAttribute("data-overflow-hidden", hidden.includes(all[index]));
+      });
+      const next = JSON.stringify(hidden);
       if (next === last) return;
       last = next;
       onChangeRef.current(hidden);
@@ -139,12 +156,18 @@ function useTabsOverflowValues(listRef, values, onChange) {
     if (typeof ResizeObserver !== "undefined") {
       const resizeObserver = new ResizeObserver(measure);
       resizeObserver.observe(list);
+      list.querySelectorAll(TAB_TRIGGER_SELECTOR).forEach((trigger) => {
+        resizeObserver.observe(trigger);
+      });
       cleanups.push(() => {
         resizeObserver.disconnect();
       });
     }
     return () => {
       for (const cleanup of cleanups) cleanup();
+      list.querySelectorAll(TAB_TRIGGER_SELECTOR).forEach((trigger) => {
+        trigger.removeAttribute("data-overflow-hidden");
+      });
     };
   }, [key, listRef]);
 }

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, controls, listClassName, contentClassName, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...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, linkComponent, 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";
     /**