prime-ui-kit 0.9.1 → 0.9.2

package/src/components/page-toolbar/examples/overview.tsx

@@ -0,0 +1,113 @@
+/** The panel of an orders page: sections with counts, filter and search, the period and the primary action in one row; active filters in a row under it — `PageToolbar.Sections`, `PageToolbar.Tools`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. */
+import {
+  Button,
+  Icon,
+  PageToolbar,
+  SegmentedControl,
+  Select,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+} from "prime-ui-kit";
+import * as React from "react";
+
+const SECTIONS = [
+  { value: "all", label: "Все", count: 128 },
+  { value: "active", label: "В работе", count: 12 },
+  { value: "done", label: "Доставлены", count: 96 },
+  { value: "cancelled", label: "Отменены", count: 20 },
+];
+
+const PERIODS = [
+  { value: "7d", label: "7 дней" },
+  { value: "30d", label: "30 дней" },
+  { value: "quarter", label: "Квартал" },
+];
+
+const FIELDS: SmartFilterField[] = [
+  {
+    key: "city",
+    label: "Город",
+    options: [
+      { value: "msk", label: "Москва" },
+      { value: "spb", label: "Санкт-Петербург" },
+      { value: "kzn", label: "Казань" },
+    ],
+  },
+  {
+    key: "payment",
+    label: "Оплата",
+    options: [
+      { value: "card", label: "Картой" },
+      { value: "invoice", label: "По счёту" },
+    ],
+  },
+];
+
+export default function PageToolbarOverviewExample() {
+  const [section, setSection] = React.useState("all");
+  const [period, setPeriod] = React.useState("30d");
+  const [filter, setFilter] = React.useState<SmartFilterValue>({
+    city: { include: ["msk"], exclude: [] },
+  });
+  const [search, setSearch] = React.useState("");
+
+  return (
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <PageToolbar.Root aria-label="Заказы">
+        <PageToolbar.Sections>
+          <SegmentedControl.Root
+            fullWidth
+            value={section}
+            onValueChange={setSection}
+            aria-label="Раздел"
+          >
+            {SECTIONS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+                <SegmentedControl.Count>{item.count}</SegmentedControl.Count>
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </PageToolbar.Sections>
+        <PageToolbar.Tools>
+          <SmartFilter.Toolbar />
+        </PageToolbar.Tools>
+        <PageToolbar.View>
+          <Select.Root value={period} onValueChange={setPeriod}>
+            <Select.Trigger aria-label="Период">
+              <Select.TriggerIcon>
+                <Icon name="field.calendar" />
+              </Select.TriggerIcon>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              {PERIODS.map((item) => (
+                <Select.Item key={item.value} value={item.value}>
+                  {item.label}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Root>
+        </PageToolbar.View>
+        <PageToolbar.Actions>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.add" />
+            </Button.Icon>
+            Новый заказ
+          </Button.Root>
+        </PageToolbar.Actions>
+        <PageToolbar.Chips>
+          <SmartFilter.Chips />
+        </PageToolbar.Chips>
+      </PageToolbar.Root>
+    </SmartFilter.Root>
+  );
+}

package/src/components/page-toolbar/examples/save-changes.tsx

@@ -0,0 +1,40 @@
+/** A settings page: sections of the form on the left, the save action with the number of changes at the end of the top row — never a sticky bar at the bottom of a phone screen — `PageToolbar.Actions`. */
+import { Button, PageToolbar, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+const SECTIONS = [
+  { value: "profile", label: "Профиль" },
+  { value: "billing", label: "Оплата" },
+  { value: "team", label: "Команда" },
+];
+
+const CHANGES = 3;
+
+export default function PageToolbarSaveChangesExample() {
+  const [section, setSection] = React.useState("profile");
+
+  return (
+    <PageToolbar.Root aria-label="Настройки">
+      <PageToolbar.Sections>
+        <SegmentedControl.Root
+          fullWidth
+          value={section}
+          onValueChange={setSection}
+          aria-label="Раздел настроек"
+        >
+          {SECTIONS.map((item) => (
+            <SegmentedControl.Item key={item.value} value={item.value}>
+              {item.label}
+            </SegmentedControl.Item>
+          ))}
+        </SegmentedControl.Root>
+      </PageToolbar.Sections>
+      <PageToolbar.Actions>
+        <Button.Root variant="ghost" tone="neutral">
+          Отменить
+        </Button.Root>
+        <Button.Root>Сохранить {CHANGES} изменения</Button.Root>
+      </PageToolbar.Actions>
+    </PageToolbar.Root>
+  );
+}

package/src/components/page-toolbar/examples/without-search.tsx

@@ -0,0 +1,60 @@
+/** A dashboard panel without search on a tablet-width column: the sections fill the top row, the period selector alone in the bottom row stretches to the full width — `PageToolbar.Sections`, `PageToolbar.View`. */
+import { Icon, PageToolbar, SegmentedControl, Select } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const SECTIONS = [
+  { value: "overview", label: "Обзор" },
+  { value: "activity", label: "Активность" },
+  { value: "resources", label: "Ресурсы" },
+];
+
+const PERIODS = [
+  { value: "1h", label: "1 час" },
+  { value: "24h", label: "24 часа" },
+  { value: "7d", label: "7 дней" },
+];
+
+export default function PageToolbarWithoutSearchExample() {
+  const [section, setSection] = React.useState("overview");
+  const [period, setPeriod] = React.useState("24h");
+
+  return (
+    <div className={styles.tablet}>
+      <PageToolbar.Root aria-label="Панель мониторинга">
+        <PageToolbar.Sections>
+          <SegmentedControl.Root
+            fullWidth
+            value={section}
+            onValueChange={setSection}
+            aria-label="Раздел"
+          >
+            {SECTIONS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </PageToolbar.Sections>
+        <PageToolbar.View>
+          <Select.Root value={period} onValueChange={setPeriod}>
+            <Select.Trigger aria-label="Период">
+              <Select.TriggerIcon>
+                <Icon name="field.calendar" />
+              </Select.TriggerIcon>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              {PERIODS.map((item) => (
+                <Select.Item key={item.value} value={item.value}>
+                  {item.label}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Root>
+        </PageToolbar.View>
+      </PageToolbar.Root>
+    </div>
+  );
+}

package/src/components/popover/COMPONENT.md

@@ -61,7 +61,7 @@ No DOM: clone the single child and merge `ref` and `onClick`. Trigger toggles th
 | `children` | `ReactElement` | — (required) | One element, usually a Button (Anchor: any element, e.g. a toolbar). |
 
 ### Popover.Content
-`ref` → `HTMLDivElement`. Portal + `role="dialog"` on the floating surface (a ScrollContainer); renders while open and during its exit animation. Named by `Popover.Title`, else by the trigger. Opened from a Trigger, focus moves into the panel (`[data-autofocus]`, else the first tab stop, else the panel).
+`ref` → `HTMLDivElement`. Portal + `role="dialog"` on the floating surface (a ScrollContainer); renders while open and during its exit animation. Named by `Popover.Title`, else by the trigger. Opened from a Trigger, focus moves into the panel (`[data-autofocus]`, else the first tab stop, else the panel). Below 640px of viewport a panel opened from a Trigger (not an Anchor) is a bottom sheet: a scrim, a grab handle, swipe down to close (with `closeOnOutsideClick`), page scroll locked.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -74,7 +74,7 @@ No DOM: clone the single child and merge `ref` and `onClick`. Trigger toggles th
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "role">` | — | `className` and the other attributes of the panel. |
 
 ### Popover.Header · Popover.Title · Popover.Description · Popover.Actions
-`ref` → the element. `<div>` (title + description with a 4 px step) / `<h2>` (names the dialog) / `<p>` (describes it) / `<div>` (buttons at the end, stacked full width below 480 px). + native props.
+`ref` → the element. `<div>` (title + description with a 4 px step) / `<h2>` (names the dialog) / `<p>` (describes it) / `<div>` (buttons at the end, stacked full width on phones, below 640 px). + native props.
 
 ## Variants
 The panel has one look: `bg-raised` fill, `--prime-panel-radius`, `shadow-overlay`, no border. Fields inside get the surface field fill; cards inside become sunken tiles.
@@ -121,6 +121,7 @@ Title uses the tier text size with title weight; Description uses the tier label
 | size | `size` on Content | `data-size` |
 | width | `matchTriggerWidth` | `data-match-trigger-width="true"` |
 | flush | `flush` | `data-flush="true"` |
+| sheet | viewport below 640px, opened from a Trigger (an Anchor keeps the panel next to its field) | a scrim and a full-width bottom sheet with an `aria-hidden` grab handle around the panel; the sheet carries `data-state`, the panel keeps its role and ref; page scroll locked; a swipe down from the handle closes it (with `closeOnOutsideClick`) |
 
 There is no `disabled` on Popover: a disabled trigger never opens it.
 
@@ -128,7 +129,7 @@ There is no `disabled` on Popover: a disabled trigger never opens it.
 - Width is `max-content` between `--prime-panel-min-width` and twice that, never wider than the viewport; give forms an explicit width with `className`.
 - Max height follows the free space on the resolved side; the panel scrolls inside.
 - Kept `--prime-space-2` from viewport edges; follows the trigger on scroll and resize.
-- Actions: at the end, `--prime-space-2` gap; below 480px they stack full width.
+- Actions: at the end, `--prime-space-2` gap; on phones (below 640px) they stack full width.
 
 ## Accessibility
 

package/src/components/progress-bar/COMPONENT.md

@@ -1,6 +1,6 @@
 # ProgressBar
 
-**Category:** feedback
+**Category:** status
 **Kind:** primitive
 
 > Linear progress: one value on a native `<progress>`, or `segments` that split a whole (storage by type, task statuses), with a label, a percentage and status colors.

package/src/components/progress-circle/COMPONENT.md

@@ -1,6 +1,6 @@
 # ProgressCircle
 
-**Category:** feedback
+**Category:** status
 **Kind:** primitive
 
 > Circular progress — the ring version of ProgressBar: one value or `segments` that split a whole, with status colors and optional content in the center.

package/src/components/scroll-container/COMPONENT.md

@@ -1,6 +1,6 @@
 # ScrollContainer
 
-**Category:** layout
+**Category:** page
 **Kind:** layout
 
 > A scroll region with the kit's thin scrollbar that shrinks correctly inside flex and grid parents.

package/src/components/segmented-control/COMPONENT.md

@@ -27,7 +27,7 @@ import { SegmentedControl } from "prime-ui-kit";
 SegmentedControl.Root                 role="radiogroup"; track + sliding thumb, scrolling row, keyboard
 └─ SegmentedControl.Item              role="radio" button, one option
    ├─ SegmentedControl.Icon           icon slot (optional; icon-only → square segment)
-   ├─ SegmentedControl.Label          title, truncates (optional; plain text is wrapped automatically)
+   ├─ SegmentedControl.Label          title, one line (optional; plain text is wrapped automatically)
    ├─ SegmentedControl.Count          counter Badge after the label (optional)
    └─ SegmentedControl.Description    second line; makes the segment two-line (optional)
 ```
@@ -46,12 +46,12 @@ SegmentedControl.Root                 role="radiogroup"; track + sliding thumb,
 | `onValueChange` | `(value: string) => void` | — | Called with the new value on click or arrow keys. |
 | `disabled` | `boolean` | `false` | Disables the whole group. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Control tier; the outer height equals the control height 28 · 32 · 36 · 40 · 48. Without it the tier of its host (a toolbar, a panel with a size), else `m`. |
-| `fullWidth` | `boolean` | `false` | Fills the container; single-line segments share the width equally and truncate. |
+| `fullWidth` | `boolean` | `false` | Fills the container; single-line segments tend to equal widths but never get narrower than their label — when they do not fit, the row scrolls. |
 | `children` | `ReactNode` | — | `SegmentedControl.Item`s (may be wrapped, e.g. in `Tooltip.Trigger`). |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" \| "onChange">` | — | `aria-label` / `aria-labelledby` (name the group), `className` and the other div attributes. |
 
 ### SegmentedControl.Item
-`ref` → `HTMLButtonElement`. One option, a `<button role="radio">` with roving `tabIndex`; plain text is wrapped to truncate.
+`ref` → `HTMLButtonElement`. One option, a `<button role="radio">` with roving `tabIndex`; plain text is wrapped in a `SegmentedControl.Label`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -70,7 +70,7 @@ SegmentedControl.Root                 role="radiogroup"; track + sliding thumb,
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### SegmentedControl.Label
-`ref` → `HTMLSpanElement`. Segment title; truncates with an ellipsis. Plain text is wrapped automatically.
+`ref` → `HTMLSpanElement`. Segment title on one line; never truncated. Plain text is wrapped automatically.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -123,7 +123,7 @@ Track is `fill-muted` with a faint 1px ring; the selected segment is a floating
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `fullWidth` | fills the container; single-line segments are equal and truncate, two-line segments grow from their content | modals, mobile panels, overview strips | off |
+| `fullWidth` | fills the container; single-line segments tend to equal widths, a long label keeps its own width and the row scrolls when they do not fit; two-line segments grow from their content | modals, mobile panels, overview strips | off |
 | `disabled` | every segment disabled, thumb `fill-muted-hover` without shadow | the choice is temporarily unavailable | off |
 | icon-only (only `SegmentedControl.Icon`) | square segment (`data-icon-only`) | toolbar view toggles; needs `aria-label` | — |
 
@@ -140,13 +140,13 @@ Colour all items or none; do not give an item and its Count the same hue; prefer
 | focus-visible | keyboard | focus ring inside the segment |
 | overflow | row wider than the container | root `data-overflow-start` / `data-overflow-end`: edge fades in the track color |
 
-Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `data-value`, `data-color`. The thumb glides (`emphasized` + `base`, `data-animate`) only into a user's choice (click, arrows); a value set from outside and layout changes snap it; it stays still under `prefers-reduced-motion`. It sits inside the segment track, which clips it, so moving the selection never changes the row's scroll area; when the row scrolls, the chosen segment is scrolled into view.
+Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `data-value`, `data-color`. The thumb glides (`emphasized` + `base`, `data-animate`) only into a user's choice (click, arrows); a value set from outside and layout changes snap it; it stays still under `prefers-reduced-motion`. It sits inside the segment track, which clips it, so moving the selection never changes the row's scroll area. When the row scrolls, the selected segment is kept in view on mount and on every value change: only the row scrolls, never the page, and the scroll glides only after a user's choice.
 
 ## Layout & spacing
 - Width is content-based by default; segments never wrap. In a narrow container the row scrolls horizontally with fading edges.
 - In a toolbar: gap `--prime-space-3` between controls; keep every control at one size.
 - Caption under a group: gap `--prime-space-2`.
-- `fullWidth` inside modals and mobile sheets.
+- `fullWidth` inside modals and mobile sheets. Single-line segments are `flex: 1 1 0` with `min-width: max-content`: short labels share the spare width equally, a long label keeps its own width, nothing truncates; when the labels do not fit, the row scrolls.
 
 ## Accessibility
 
@@ -177,7 +177,7 @@ No `labels`.
 | [states.tsx](examples/states.tsx) | No selection yet, a disabled segment and a disabled group next to the default — `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | An icon before the label and square icon-only segments named for screen readers — `SegmentedControl.Icon`, `aria-label`. |
 | [colors.tsx](examples/colors.tsx) | A status per option: a dot of its hue before the label and a tinted thumb when chosen — `color`. |
-| [full-width.tsx](examples/full-width.tsx) | The group fills its column; segments share the width equally and truncate long labels — `fullWidth`. |
+| [full-width.tsx](examples/full-width.tsx) | The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. |
 | [scroll.tsx](examples/scroll.tsx) | Segments never wrap: in a column narrower than the row it scrolls with edge fades and brings the chosen segment into view. |
 | [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a metric on the second — `SegmentedControl.Label`, `SegmentedControl.Count`, `SegmentedControl.Description`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the choice and updates other content from it — `value`, `onValueChange`. |

package/src/components/segmented-control/examples/full-width.tsx

@@ -1,4 +1,4 @@
-/** The group fills its column; segments share the width equally and truncate long labels — `fullWidth`. */
+/** The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. */
 import { SegmentedControl } from "prime-ui-kit";
 
 export default function SegmentedControlFullWidthExample() {

package/src/components/select/COMPONENT.md

@@ -95,7 +95,7 @@ Select.Root                       field frame: label · control · hint/error; v
 `ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` with a leading glyph at the tier icon size: before the value / before the option label. + native `<span>` props.
 
 ### Select.Content
-`ref` → `HTMLDivElement` (the panel). Portal + the floating list panel, mounted while open and during its exit animation (closed, the items render hidden in place so the trigger knows their labels), shown with the overlay motion. Holds the search row, the `role="listbox"` and the empty state.
+`ref` → `HTMLDivElement` (the panel). Portal + the floating list panel, mounted while open and during its exit animation (closed, the items render hidden in place so the trigger knows their labels), shown with the overlay motion. Holds the search row, the `role="listbox"` and the empty state. Below 640px of viewport the panel is a bottom sheet: a scrim, a grab handle, swipe down to close, page scroll locked.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -163,6 +163,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | disabled | `disabled` | native `disabled`, `data-disabled="true"` |
 | loading | `loading` | `data-loading="true"`, `aria-busy`; status row in the list |
 | searching | typing in the search | panel `data-searching="true"`; groups without matches and separators hide; the match in an option's title, description and plain text is a `<mark>` in `accent-text` (not in the trigger) |
+| sheet | viewport below 640px | a scrim and a full-width bottom sheet with an `aria-hidden` grab handle around the panel; the sheet carries `data-state`, the panel keeps its role and ref; page scroll locked; a swipe down from the handle closes it |
 | option highlighted / selected / disabled | keyboard and pointer / value / `disabled` | `data-highlighted`, `data-selected` + `aria-selected`, `data-disabled` + `aria-disabled`; highlight is a fill only |
 
 ## Layout & spacing

package/src/components/skeleton/COMPONENT.md

@@ -1,6 +1,6 @@
 # Skeleton
 
-**Category:** feedback
+**Category:** status
 **Kind:** primitive
 
 > A placeholder in the shape of the content that is loading — text lines, a control, an avatar, a block — so the layout is in place before the data arrives.

package/src/components/smart-filter/COMPONENT.md

@@ -117,6 +117,8 @@ same height and type.
 
 ## Layout & spacing
 - The panel is a flush Popover as wide as the toolbar; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is `--prime-space-24`.
+- The toolbar is one row of controls (`--prime-space-2` gap): the filter button keeps its width, the search grows from 9rem (`--prime-space-24` × 1.5). When less than 9rem is left beside the button, the search moves under it at full width; every row stays one control high.
+- Chips are Badges of the toolbar tier on the badge scale (`xs` → `s`), so a tag sits lower than the controls above it; «Добавить фильтр» is a tag of the same tier and «Сбросить все» a LinkButton with the tag's text size.
 - Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end.
 - The root is a flex column (`--prime-space-3`): Toolbar, then Chips.
 

package/src/components/spinner/COMPONENT.md

@@ -1,6 +1,6 @@
 # Spinner
 
-**Category:** feedback
+**Category:** status
 **Kind:** primitive
 
 > An indeterminate loading indicator: a ring with a gap that turns while a request runs.

package/src/components/tabs/COMPONENT.md

@@ -51,16 +51,16 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 | `onValueChange` | `(value: string) => void` | — | Called with the new active value. |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | List direction and arrow keys. A vertical list stacks above the panel when the container is narrower than 600px. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Control tier: text, icon, spacing, folder radius and panel padding. A horizontal tab is the control height plus the folder rise on both sides; a vertical one is the control height. |
-| `fullWidth` | `boolean` | `true` | Horizontal tabs share the list width equally, within `minItemWidth` … `maxItemWidth`; `false` sizes each tab to its content within the same bounds. |
+| `fullWidth` | `boolean` | `true` | Horizontal tabs fill the list and tend to equal widths within `minItemWidth` … `maxItemWidth`, never narrower than their content: a long label keeps its width, short ones share the rest; when they do not fit, the list collapses, then scrolls. `false` sizes each tab to its content within the same bounds. |
 | `tone` | `"neutral" \| "accent"` | `"neutral"` | Colour of the active tab: `neutral` is primary text with an accent icon, `accent` puts text and icon in accent. |
-| `minItemWidth` | `number \| string` | `2.5 × control height` | Narrowest a horizontal tab with a label gets, px or a CSS length; past it the list scrolls. Icon-only tabs are square. |
+| `minItemWidth` | `number \| string` | `2.5 × control height` | Narrowest a horizontal tab with a label gets, px or a CSS length; a tab is also never narrower than its content (up to `maxItemWidth`). When tabs do not fit, the list collapses, then scrolls. Icon-only tabs are square. |
 | `maxItemWidth` | `number \| string` | `7 × control height` | Widest a horizontal tab gets, px or a CSS length (`"none"` lifts the cap); a longer label ends with an ellipsis. |
 | `labels` | `Partial<TabsLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | `Tabs.List` and `Tabs.Panel`s. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">` | — | `className` and the other div attributes. |
 
 ### Tabs.List
-`ref` → `HTMLDivElement`. `role="tablist"` on a `ScrollContainer` (horizontal, edge fade, hidden scrollbar) with the sliding folder (vertical: pill). When tabs do not fit or a label would be cut, it hides icons and descriptions, then labels (icons with tooltips stay; only when every tab has an icon); tabs then shrink to `minItemWidth` and the list scrolls.
+`ref` → `HTMLDivElement`. `role="tablist"` on a `ScrollContainer` (horizontal, edge fade, hidden scrollbar) with the sliding folder (vertical: pill), which glides only into a choice by click or keys and is placed without motion on mount, resize and collapse. When tabs do not fit or a label would be cut, it hides icons and descriptions, then labels (icons with tooltips stay; only when every tab has an icon); then the list scrolls; a label is never cut to make room. The active tab is kept in view: only the list scrolls, never the page.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -156,13 +156,13 @@ A horizontal tab is the control height of the tier plus the rise above and below
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `fullWidth` | horizontal tabs share the list width equally (up to `maxItemWidth`), content centred; `false` sizes each tab to its content, the strip still spans the frame | `false` for tabs of very different label lengths | `true` |
+| `fullWidth` | horizontal tabs fill the list and tend to equal widths (`flex: 1 1 0`, up to `maxItemWidth`), content centred; a tab is never narrower than its content or `minItemWidth`, so a long label keeps its width and the short ones share the rest; `false` sizes each tab to its content, the strip still spans the frame | `false` for tabs of very different label lengths | `true` |
 
 ### minItemWidth · maxItemWidth
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | defaults | a horizontal tab is 2.5 to 7 control heights wide (90 … 252 at `m`); tabs never stretch into wide bars | most screens | yes |
-| lengths (`128`, `"16rem"`) | browser tabs: grow up to `maxItemWidth` with the label cut by an ellipsis past it, shrink to `minItemWidth` in a crowded list, then the list scrolls | open documents, records, chats — many tabs with long titles | |
+| lengths (`128`, `"16rem"`) | browser tabs: grow up to `maxItemWidth` with the label cut by an ellipsis past it, never narrower than `minItemWidth` or their title up to the cap; in a crowded list the list scrolls | open documents, records, chats — many tabs with long titles | |
 | `maxItemWidth="none"` | tabs share the whole strip | a few sections that must fill a wide frame | |
 
 ### Item content
@@ -187,14 +187,17 @@ Avoid icons or descriptions on only some tabs (uneven rows; without an icon on e
 | removable | `onRemove` on Item | item wrapper `data-removable="true"`, close button, tab `aria-keyshortcuts="Delete"` |
 | two-line | `Tabs.Description` child | `data-two-line="true"` |
 | collapsed | tabs wider than the list, or a label that would be cut (horizontal) | list `data-collapse="full" \| "compact" \| "icon"`: `compact` hides icons and descriptions; `icon` hides labels (sr-only, shown in a `Tooltip`), counts and close buttons, only when every tab has an icon |
-| overflow | tabs at `minItemWidth` (or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (ScrollContainer), faded edges; the active tab scrolls into view |
+| overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (ScrollContainer), faded edges; the active tab is kept in view on mount and on every value change — only the list scrolls, never the page |
+
+The indicator glides (`emphasized` + `base`, `data-animate="true"`) only into a choice by click, arrow keys or closing the active tab; on mount, a value set from outside, a resize, font loading, tabs added or removed and collapse it is placed without motion, and it stays still under `prefers-reduced-motion`. The list scrolls smoothly to the active tab only after such a choice too.
 
 Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-width`, inline `--tabs-item-min` / `--tabs-item-max` when set; List `data-indicator="folder" | "pill"`; Item `data-value` on the tab, `data-state` / `data-disabled` on its wrapper too; Label `data-text`. Inactive panels are unmounted; a panel's content enters each time it opens.
 
 ## Layout & spacing
 - Horizontal: the root is the frame (`radius-xl`, `bg-sunken`), the list sits flush on the panel and runs edge to edge; the panel pads its content by tier (`--prime-space-4` … `--prime-space-8`). Do not wrap Tabs in a Card — it already is one.
 - Vertical list → panel: `var(--prime-space-6)`.
-- The list never wraps: it collapses, then scrolls horizontally with faded edges. Give the list's container a width (`min-width: 0` on flex children).
+- The list never wraps: it collapses, then scrolls horizontally with faded edges (hidden scrollbar, `overscroll-behavior: contain`). Give the list's container a width (`min-width: 0` on flex children).
+- A horizontal tab is never narrower than its content (`min-width: max-content`; the tab bounds that content between `minItemWidth` and `maxItemWidth`), so a label is never cut to make room. Full width, tabs tend to equal widths, not widths in proportion to their labels (`flex: 1 1 0`): a long label keeps its width, the short ones share the rest.
 - A vertical Tabs.Root is a size container: give it a width (it measures itself to switch to a row).
 - In a vertical layout align the panel heading with the first tab by making the heading row one control tall (`min-height: var(--prime-control-m-height)`).
 
@@ -234,7 +237,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 | [with-icon.tsx](examples/with-icon.tsx) | A muted icon before the label and a hairline before the service section — `Tabs.Icon`, `Tabs.Label`, `Tabs.Separator`. |
 | [orientation.tsx](examples/orientation.tsx) | Tabs over the panel and a side list of sections that stacks on top below 600px — `orientation`. |
 | [overflow.tsx](examples/overflow.tsx) | Drag the frame narrower: icons go first, then labels, and icons with tooltips stay; then the list scrolls — `Tabs.Icon`. |
-| [closable.tsx](examples/closable.tsx) | Open order cards as browser tabs: each closes by its button, Delete or a middle click; tabs stay between two widths and scroll past the narrower one — `onRemove`, `minItemWidth`, `maxItemWidth`. |
+| [closable.tsx](examples/closable.tsx) | Open order cards as browser tabs: each closes by its button, Delete or a middle click; tabs stay between two widths, and the list scrolls when they do not fit — `onRemove`, `minItemWidth`, `maxItemWidth`. |
 | [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a summary on the second — `Tabs.Count`, `Tabs.Description`. |
 | [controlled.tsx](examples/controlled.tsx) | The active tab lives in parent state, e.g. synced with the URL — `value`, `onValueChange`. |
 

package/src/components/tabs/examples/closable.tsx

@@ -1,4 +1,4 @@
-/** Open order cards as browser tabs: each closes by its button, Delete or a middle click; tabs stay between two widths and scroll past the narrower one — `onRemove`, `minItemWidth`, `maxItemWidth`. */
+/** Open order cards as browser tabs: each closes by its button, Delete or a middle click; tabs stay between two widths, and the list scrolls when they do not fit — `onRemove`, `minItemWidth`, `maxItemWidth`. */
 import { Button, Tabs, Typography } from "prime-ui-kit";
 import * as React from "react";