altum 0.0.7 → 0.0.9

package/docs/COMPONENTS.md

@@ -2,7 +2,7 @@
 
 Краткий справочник публичного API. Установка и точки входа — [README](../README.md). Токены — [THEMING.md](./THEMING.md). Раскладка — [LAYOUT.md](./LAYOUT.md). Иконки — [ICONS.md](./ICONS.md).
 
-**Link:** единственный элемент-потомок получает стили через Slot (роутерный `Link`). Смена HTML-тега у кнопок — `as` (`button` | `a`). **`Dropdown`** / **`Popover`**: якорь — `renderTrigger(props, ref)`; **`Tooltip`**: элемент-child или render-prop. Без пропа `asChild`.
+**Link:** единственный элемент-потомок получает стили через Slot (роутерный `Link`). Смена HTML-тега у кнопок — `as` (`button` | `a`). **`Dropdown`**: якорь — `trigger` (элемент или render-prop, через `renderChildren`). **`Popover`**: якорь — `trigger` (элемент или render-prop, через `renderChildren`). **`Tooltip`**: элемент-child или render-prop. Без пропа `asChild`.
 
 Оверлеи: кнопки — в `Modal.Footer` / `Sheet.Footer`, sibling к `Body`, не внутри скролла. Статус и кнопки в одном ряду — `ControlRow` внутри футера.
 
@@ -12,13 +12,13 @@
 
 | Компонент | Описание |
 |-----------|----------|
-| **Button** | Кнопка: `variant` (`primary` / `tinted` / `secondary` / `danger` / `danger_tinted` / `ghost` / `link`), `prefix` / `postfix`, `loading`, `fullWidth`. |
-| **ButtonIcon** | Иконка-кнопка на базе **Button**; `circle` / `square`; по умолчанию `variant="ghost"`. |
-| **ButtonGroup** | Составная группа (`ButtonGroup` + `ButtonGroup.Item`): `mode` `button` (независимые, выбранность через `active` на Item) / `toggle` (один выбранный, слайдер) / `multi_toggle` (несколько); `itemFit` `equal` \| `content`; `width` `auto` \| `full`; `variant` / `status` / `size` / `borderless` на Root. |
-| **SegmentedControl** | Обёртка над `ButtonGroup` (`mode="toggle"`, `width="full"`): `options` + `value` / `onChange`; `itemFit` `equal` \| `content`; варианты `primary` / `tinted` / `secondary` (по умолчанию) / `ghost` / `plain`. |
-| **Overflow** | Лишние пункты за ⋯ в `Dropdown`. `Overflow.Item` — панель действий; прочие дети — измерение ширины. `longPress` открывает меню долгим нажатием (хост — **`ActionSheetTrigger`**). |
-| **ActionList** | Список действий: `items` / `groups` (`groupId`), `filterable`, `onAction`. |
-| **ActionSheetTrigger** | Хост long-press → `Overflow` на тач-экранах; опциональная кнопка ⋯ на десктопе (`showOverflowTrigger`). |
+| **Button** | Кнопка: `variant` (`primary` / `tinted` / `secondary` / `danger` / `danger_tinted` / `ghost` / `link`), `prefix` / `postfix`, `loading`, `fullWidth`. Icon-only: `data-icon-only` (+ `data-shape="circle"`); закрытие overlay: `overlayClose.close` + `data-appearance="diskClose"`. |
+| **ButtonGroup** | Коробка для независимых **`Button`**: `orientation` `horizontal` / `vertical`, `itemFit` `equal` \| `content`, `width` `auto` \| `full`, `size`. `variant` как у **Button**, кроме `link`: `primary` / `tinted` / `secondary` / `danger` / `danger_tinted` / `ghost`. Группа снимает chrome кнопки и не рисует выбранный пункт. Выбор — **SelectionGroup**. |
+| **SegmentedControl** | Один сегмент: **`SelectionGroup`** `radio`. Выбранный пункт — заливка кнопки, без бегунка. `options` + `value` / `onChange`; `orientation` `horizontal` / `vertical`; `itemFit` `equal` \| `content`; варианты `primary` / `tinted` / `secondary` (по умолчанию) / `ghost` / `plain`. |
+| **Overflow** | Лишние пункты за ⋯. `Overflow.Item` открывает **`Menu`**; прочие дети измеряются по ширине и уходят в **`Dropdown`**. `longPress` открывает меню долгим нажатием (хост — **`ActionSheetTrigger`**). |
+| **ActionList** | Список действий: `items` / `groups` (`groupId`), `filterable`, `onAction`. Подпись пункта — **`ActionItem`**. |
+| **ActionItem** | Подпись пункта: иконка, текст, описание, шорткат. Её рисует **`ActionList`**. |
+| **ActionSheetTrigger** | Long-press host. С `items` — внутренний **`Menu`** + `Button[data-overflow-trigger]`; без `items` — дети с `[data-overflow-trigger]` (`Overflow`). `showOverflowTrigger` показывает ⋯ на touch. Хост — `rootRef`. |
 
 ---
 
@@ -26,7 +26,7 @@
 
 | Компонент | Описание |
 |-----------|----------|
-| **TextField** | Примитив поля: chrome + `as` (`input` / `textarea` / `button` / `div`). `label` — floating-лейбл; без `label` — поле без подписи (`aria-label` / `placeholder`). `description` — подсказка или слот под chrome. `keepPlaceholder` — не скрывать placeholder при фокусе пустого поля. |
+| **TextField** | Примитив поля: chrome + `as` (`input` / `textarea` / `button` / `div`). `label` — floating-лейбл внутри chrome (центр → вверх при фокусе/значении); без `label` — поле без подписи (`aria-label` / `placeholder`). `description` — подсказка или слот под chrome. `keepPlaceholder` — не скрывать placeholder при фокусе пустого поля. |
 | **PasswordField** | Пароль на базе TextField: показать/скрыть, опциональный индикатор сложности. |
 | **SearchField** | Обёртка над `TextField` с иконкой поиска (`onClear` от TextField). Без `label` — тулбарный вид. |
 | **TextareaField** | Многострочное поле на **TextField** `as="textarea"`; авто-рост высоты. |
@@ -36,12 +36,12 @@
 | **Rating** | Оценка звёздами. |
 | **FormMessage** | Подсказка / ошибка / успех под полем; `variant` `hint` / `error` / `success`. |
 | **Select** | Поле выбора: `options`, `value` / `onChange`, `label`, `filterable`; `selectionMode="multiple"` рисует chips. Свой триггер — `customTrigger`. |
-| **SuggestField** | Автодополнение: `TextField` в `customTrigger` у **`Select`**. Chrome от **`FieldBaseProps`** (`label`, `onClear`, `prefix`, …). |
+| **SuggestField** | Автодополнение: `TextField` в `customTrigger` у **`Select`**. Chrome от **`FieldBaseProps`** (`label`, `onClear`, `prefix`, …). Узел поля — `inputRef`. |
 | **Checkbox** | `size`, `labelSide`, `indeterminate`, `mode` (`default` \| `task`), `align`, `labelVisibility`, `onCheckedChange(checked)` (native `onChange` сохраняется). |
 | **Switch** | `size`, `labelSide`; `onChange(checked)` и алиас `onCheckedChange`. |
 | **CheckboxGroup** | Группа чекбоксов с управляемым `value: string[]`. |
 | **Radio** / **RadioGroup** | Радиокнопка и группа; `labelSide`, `onCheckedChange` на `Radio`. |
-| **SelectionGroup** | Без собственного chrome: составной `Root` / `List` / `Item` / `Panel` (roving focus). На нём собраны **Tabs** и **ColorSwatchGroup**. Внешний вид — через `className`. |
+| **SelectionGroup** | Выбор на **`ButtonGroup`** и **`Button`**: `options` (`value`, `label`), `value`, `onChange`, `disabled`. `type` `radio` (одно значение) / `checkbox` (несколько). Выбранный пункт — заливка кнопки. `children` — узел перед пунктами. `customRenderOption` рисует пункт сам и раскладывает `optionProps`, без трека **`ButtonGroup`**. |
 | **Slider** | Ползунок: `value: number` или диапазон `value: [from, to]` (два thumb). |
 | **DateField** | Выбор даты: MaskedField + календарь; по умолчанию prefix — `FieldBaseIcon` + календарь; chrome от **`FieldBaseProps`**. |
 | **DateRangeField** | Диапазон дат (`value`/`onChange` как `{ start?, end? }`); chrome от **`FieldBaseProps`**; `layout` `single` / `split`. |
@@ -49,9 +49,9 @@
 | **WheelTimePicker** | Два барабана часов и минут (`TimeValue`); выбор кликом или прокруткой применяется сразу. |
 | **Calendar** | Составной: `Provider` / `Root` / `Header` / `Title` / `Nav` / `Body`. `selectionMode` `single` \| `range` на Provider. `value` — `Date` или `DateRangeValue`. |
 | **DayStripCalendar** | Горизонтальная полоса дней: `daysCount`, prev/next выбирают соседний день, `value` / `onChange`, `renderDay`. |
-| **ColorSwatchGroup** | Выбор цвета из набора цветных точек. |
+| **ColorSwatchGroup** | Выбор цвета из набора цветных точек. Это **`SelectionGroup`** с `customRenderOption`. |
 | **UploadZone** | Зона перетаскивания файлов для загрузки. |
-| **FieldGroup** | Ряд без своего визуала: поля и `Button` / `ButtonIcon` / `ButtonGroup` / `PopupSwitch` стыкуются одной рамкой, скругление снимается со стороны касания. `width="full"` растягивает поля. |
+| **FieldGroup** | Ряд без своего визуала: поля и `Button` / `ButtonGroup` / `PopupSwitch` стыкуются одной рамкой, скругление снимается со стороны касания. `width="full"` растягивает поля. |
 | **Fieldset** | Группа полей: `legend` / `description` / `hint` / `footer` / `gap`; содержимое — `children`. Варианты `default` / `card` / `plain`. |
 
 ---
@@ -63,12 +63,12 @@
 | **DialogLayout** | Поверхность `Box` с крестиком в правом верхнем углу поверх контента. `onClose`, `showClose`. |
 | **Modal** | Составной диалог: корень — **`DialogLayout`**, шапка / тело / футер — **`Layout`**. `Header` / `Body` / `Footer`. Заголовок — **`Title`**. Ряд действий — **`ControlRow`** внутри `Footer`. `open` / `onOpenChange`, `showClose` на корне. |
 | **ConfirmDialog** | Готовый диалог на **`Modal`**: отмена + подтверждение, `confirmLabel`, `secondaryAction`, `status="danger"`, `onOpenChange`. |
-| **Sheet** | Панель: поверхность **`Box`**, шапка / тело / футер — **`Layout`**. `Header` / `Body` / `Footer`. Заголовок — **`Title`**. Крестик — `showClose` на `Header`. `mode` / `direction` / `backdrop` / `showHandle`. |
+| **Sheet** | Панель: поверхность **`Box`**, шапка / тело / футер — **`Layout`**. `Header` / `Body` / `Footer`. Заголовок — **`Title`**. Крестик — `showClose` на `Header`. `mode` / `direction` / `showHandle`. Слой — нативный `<dialog>`. |
 | **ImageLightbox** | Полноэкранный просмотр; `open` / `onOpenChange`. |
-| **Dropdown** | Список или меню у кнопки, на базе **`Popover`**. Стрелки по пунктам, выбор пункта закрывает панель, клик снаружи тоже. `align`, `widthMode`, `triggerMode` `toggle` \| `combobox`. На мобильных — нижний Sheet. Форма и календарь — **`Popover`**. |
-| **Menu** | Меню действий: клик по `trigger` (Dropdown + ActionList) или `trigger="context"` (ПКМ / Shift+F10 у курсора). |
-| **Tooltip** | Подсказка при наведении / фокусе; триггер — элемент-child или render-prop; `side`, `openDelay` / `closeDelay`, wrap. |
-| **Popover** | Немодальная панель для произвольного контента: текст, форма, фильтры, календарь. Клик внутри не закрывает, `Tab` ходит по полям. Якорь — `renderTrigger`, без корневой обёртки. `trigger` click/hover/manual, `variant` panel/plain, `side` / `align` / `widthMode`. Подсказки — **Tooltip**. |
+| **Dropdown** | Список или меню у кнопки, на базе **`Popover`** (`popover="auto"`). Якорь — `trigger`. Выбор пункта закрывает панель, клик снаружи и Escape — браузер. Стрелки — у списка внутри. `align`, `widthMode`, `triggerMode` `toggle` \| `combobox`. На узком экране та же панель — нижняя шторка на CSS. Узел — `rootRef`. Форма и календарь — **`Popover`**. |
+| **Menu** | Меню действий: клик по `trigger` (**`Dropdown`** + **`ActionList`**) или `trigger="context"` (ПКМ / Shift+F10 у курсора). Пункты — **`ActionListItem`** (`id`). Программный показ — `popupRef`. |
+| **Tooltip** | Текстовая подсказка. Ховер и фокус — CSS (`:hover`, `:focus-within`), позиция — CSS Anchor. `side`, `openDelay` / `closeDelay` как задержки CSS, без JS-таймера. |
+| **Popover** | Немодальная панель: текст, форма, фильтры, календарь. Открытие — `popovertarget`, закрытие по клику снаружи и Escape — `popover="auto"`. Клик внутри не закрывает, фокус не запирается. Якорь — `trigger`. Позиция — CSS Anchor (`side` / `align`, `positionArea()`). Подсказки — **Tooltip**. |
 | **CommandPalette** | Палитра Cmd+K: поверхность **`Box`**, подпись **`Text`**. `items` / `groups`, фильтр — **`ActionList`** с `filterable`. |
 
 ---
@@ -79,8 +79,8 @@
 |-----------|----------|
 | **Pagination** | Постраничная навигация. Без `children` — `Controls`; опционально `totalItems` / `pageSize` / `onPageSizeChange`. Составной: `Summary`, `Controls`, `PageSize`. |
 | **Sidebar** | Составной: `Root`, `Header`, `Title`, `Content`, `Group`, `GroupLabel`, `Item`, `Footer`, `MobileTrigger`. Шапка, меню и футер — `Layout`. Кнопка сворачивания — на корне, по центру правой границы. `value` / `onChange`; десктопный rail + мобильный Sheet. |
-| **Steps** | Мастер: горизонтальный/вертикальный, статус шага, `onStepClick`. |
-| **Tabs** | Составные вкладки: `Tabs.List` / `Tabs.Trigger` / `Tabs.Panel`; `value` / `defaultValue` / `onChange` (без `defaultValue` вкладка не выбирается сама); `line` / `pill`, горизонтальные/вертикальные и бейдж на Trigger. |
+| **Steps** | Мастер: горизонтальный/вертикальный, статус шага. `onStepClick` слушает список. Узел — `rootRef`. Ориентация, размер, соединители и статус — `data-*`. |
+| **Tabs** | Список — **`SegmentedControl`** (`itemRole="tab"`): `Tabs.List` принимает `items` (`value`, `label`, `badge`, `badgeDot`, `disabled`), панели — `Tabs.Panel`; `value` / `defaultValue` / `onChange`. `pill` — заливка выбранной вкладки, `line` — черта у выбранной. |
 
 ---
 
@@ -91,11 +91,11 @@
 | **Table** | Один компонент: `columns` / `data` / `rowKey`, плюс `toolbar`, `loading`, `empty` (`title` / `description` / `action`) и `footer` (пагинация). Сортировка (клиент/сервер), выбор строк, раскрытие, липкие колонки, `density`, resize и `rowActions` (`ActionListItem[]`). |
 | **Timeline** | Вертикальный/горизонтальный, сворачиваемые подробности (`<details>`), `currentId`. |
 | **Card** | `variant` outlined/elevated/ghost; радиус по умолчанию `lg`; `header` / `media` / `actions` (ReactNode), `children` — body; `loading`. |
-| **Accordion** | `Accordion.Item` с `title` и содержимым в `children`; `flush` (по умолчанию) / `bordered`; `multiple`, отключённый пункт. |
+| **Accordion** | `Accordion.Item` с `title` и содержимым в `children`; секция — `<details>`. `flush` (по умолчанию) / `bordered`; `multiple`, отключённый пункт. Начальное открытие — `defaultOpenIds`. |
 | **Badge** | `size` sm/md, `position` overlay/standalone, `variant` включая `error`; overlay — `--altum-badge-overhang`. Числовой `label` ограничивается через `max`; `children` — якорь overlay. |
 | **Avatar** / **AvatarGroup** | Размеры `xs`…`xl`, кольцо статуса, запасная иконка; группа с наложением. |
 | **Chip** | Тег / фильтр: `mode` `chip` \| `tag` \| `toggle`, `size`, `onRemove` / `onClick`. **`ChipGroup`**: `mode` `chip` \| `tag`, `gap`. |
-| **StatBadge** | Компактный блок статистики: число + подпись; `variant` `default` / `success` / `warning` / `error`; `size` `md` / `sm`. |
+| **StatBadge** | Компактный блок статистики: число + подпись; `variant` `default` / `success` / `warning` / `error`; `size` `md` / `sm`. Узел — `rootRef`. Размер и статус — `data-size` и `data-variant`. |
 | **EmptyState** | Пустое состояние: иконка (`--altum-color-empty-icon`), заголовок, описание, действие; `size` для вложенных панелей. |
 | **DescriptionList** | Список «ключ — значение» (`stacked` / `inline`, колонки). |
 | **RelativeTime** | Относительное время («2 ч назад»). |
@@ -122,12 +122,13 @@
 |-----------|----------|
 | **Layout** | Панель: скролл на корне; `Header` / `Footer` sticky; алиасы `Inline` / `Split` / `ControlRow` / `Item`. |
 | **Stack** / **Inline** / **Split** / **ControlRow** / **LayoutItem** | Flex-примитивы (вертикаль / чипы / края / ряд контролов / `grow`). |
-| **Grid** / **GridItem** | CSS Grid; `GRID_BREAKPOINTS`. |
+| **Grid** / **GridItem** | CSS Grid; скалярные `columns` / `span`, `mode` autoFit/autoFill. |
 | **Container** / **Page** | Колонка с max-width (`sm`…`xl` / `full`) и оболочка страницы. |
 | **Box** | Поверхность (`outlined` / `elevated` / `floating` / `tinted` / `secondary` / `muted` / `glass` / `overlay` / `ghost` / `plain`). Красит только себя; потомки остаются на глобальных токенах. |
 | **Collapse** | Плавное сворачивание по высоте (CSS `grid-template-rows`). |
 | **Separator** | Разделитель: `orientation` horizontal \| vertical, текст (`children`), отступы `start` / `end`. |
-| **Item** | Строка: `media` / `mediaVariant`, `title`, `description`, `actions`; поверхность — `Box`. |
+| **Gap** | Пустой зазор: `size` (токен spacing), `orientation` horizontal \| vertical. Ритм группы — `gap` у Stack / Inline. |
+| **Item** | Строка: `media` / `mediaVariant`, `title`, `description`, `actions`; `wrap` переносит длинный текст вместо ellipsis; поверхность — `Box`. |
 | **AspectRatio** | Обёртка с `aspect-ratio` (16:9 / 1:1). |
 | **Media** | img/video-превью с `aspect-ratio`. |
 | **ScrollArea** | Стилизованный скролл (`orientation` y/x/both); `maxHeight` / `maxWidth` без дефолта. |
@@ -139,9 +140,9 @@
 | Компонент | Описание |
 |-----------|----------|
 | **ImageGallery** | Галерея: `images`, chrome `default` \| `none`, `showNav` / `showThumbnails` / `showCounter`. |
-| **ImageCrop** | Обрезка изображения. Корень — **`DialogLayout`**, шапка, сцена и кнопки — **`Layout`**, заголовок — **`Title`**. |
+| **ImageCrop** | Обрезка изображения. Корень — **`DialogLayout`**, шапка и кнопки — разметка компонента, заголовок — **`Title`**. |
 | **FileList** | Список загрузок на **`Item`**: progress / retry / remove через `FileList.Item`. |
-| **Attachment** | Карточка файла: `Item` + статус загрузки (`idle` / `uploading` / `error` / `done`). Действия в слоте — **`ButtonIcon`**. |
+| **Attachment** | Карточка файла: `Item` + статус загрузки (`idle` / `uploading` / `error` / `done`). Действия в слоте — icon-only **`Button`**. |
 
 ---
 
@@ -170,7 +171,7 @@
 |-----------|----------|
 | **SafeArea** | Отступы под notch / home-indicator (`env(safe-area-inset-*)`). |
 | **PullToRefresh** | Жест «потянуть, чтобы обновить» для контейнера с прокруткой. |
-| **SwipeToAction** | Сенсорная обёртка: свайп раскрывает действия (iOS). |
+| **SwipeToAction** | Сенсорная обёртка: свайп раскрывает действия (iOS). Узел — `rootRef`. Жест пишется в DOM, полный свайп — `data-full-swipe-active`. |
 
 ---
 

package/docs/ICONS.md

@@ -9,7 +9,9 @@ import {IconSearch} from 'altum/icons';
 <ButtonIcon aria-label="Поиск" icon={<IconSearch />} />
 ```
 
-Набор **не** входит в главный barrel — только `altum/icons`. Просмотр: Storybook → **Icons**. Каталог собран через `createIcon` (`IconProps` тот же: `size`, `color`).
+Набор **не** входит в главный barrel — только `altum/icons`. Просмотр: Storybook → **Icons**.
+Каталог: `ICON_PATHS` + `<IconBase d={…} />` (тонкие `Icon*` обёртки). `IconProps`: `size`, `color`.
+Кастомный path: `<IconBase d="M…" />` (или несколько `d` массивом).
 
 ### Контракт для кастомных SVG
 

package/docs/LAYOUT.md

@@ -1,6 +1,6 @@
 # Layout-компоненты altum
 
-Гайд: **что выбрать** и **зачем**, для панели `Layout` и flex-примитивов (`Stack`, `Inline`, `Split`, `ControlRow`, `LayoutItem`).
+Гайд: **что выбрать** и **зачем**, для панели `Layout`, flex-примитивов (`Stack`, `Inline`, `Split`, `ControlRow`, `LayoutItem`) и точечного зазора `Gap`.
 
 Стили — CSS Modules + токены `--altum-g-space-*` (8pt).
 
@@ -16,6 +16,7 @@ import {
   Grid,
   Container,
   Page,
+  Gap,
 } from 'altum';
 ```
 
@@ -34,6 +35,7 @@ import {
 | Поля + Chip + Button в одной строке фильтров | **ControlRow** |
 | Одному ребёнку — `flex: 1` или «не сжимать» | **LayoutItem** (`ControlRow.Item`) |
 | Колонки сетки | **Grid** |
+| Один дополнительный шаг между двумя соседями | **Gap** |
 | Оболочка input (label / prefix / clear) | **TextField** |
 
 ---
@@ -83,7 +85,7 @@ import {
   <Layout.Header sticky>
     <Split>
       <h2>Настройки</h2>
-      <ButtonIcon aria-label="Закрыть" />
+      <Button variant="ghost" data-icon-only aria-label="Закрыть" prefix={<IconCross />} />
     </Split>
   </Layout.Header>
   <Layout.Content>
@@ -247,6 +249,38 @@ Flex-ячейка внутри Stack / Inline / Split / ControlRow.
 
 ---
 
+## Gap
+
+Пустой зазор фиксированного размера. Общий ритм группы по-прежнему задаёт `gap` у **Stack** / **Inline**. **Gap** — один дополнительный шаг между двумя соседями или зазор вне flex-примитива. Линия — **Separator**.
+
+| Проп | По умолчанию | Смысл |
+|------|--------------|--------|
+| `size` | `md` | Токен `none`…`xl` (как `gap` у Stack), число (px) или CSS-строка |
+| `orientation` | `horizontal` | `horizontal` — высота между блоками; `vertical` — ширина в ряду |
+
+**Использовать:** отделить подвал формы от полей сильнее, чем общий `gap`; вставить шаг в разметке, которая не обёрнута в Stack / Inline.
+
+**Не использовать:** одинаковый ритм у всех детей → `gap` у **Stack** / **Inline**; линия между секциями → **Separator**.
+
+```tsx
+<Stack gap="md">
+  <TextField label="Имя" width="full" />
+  <TextField label="Эл. почта" width="full" />
+  <Gap size="lg" />
+  <Button variant="primary">Сохранить</Button>
+</Stack>
+```
+
+```tsx
+<Inline gap="none">
+  <Text>Профиль</Text>
+  <Gap orientation="vertical" size="md" />
+  <Text>Настройки</Text>
+</Inline>
+```
+
+---
+
 ## Типичные композиции
 
 ### Тулбар страницы

package/docs/THEMING.md

@@ -118,7 +118,7 @@ return (
 | `--altum-toggle-align-nudge` | `0.15em` | Оптическое выравнивание бокса тоггла относительно лейбла |
 | `--altum-rating-size-sm` / `md` / `lg` | 16 / 22 / 28 | Размер звезды Rating |
 | `--altum-command-palette-max-width` / `height` | 560 / 520 | Ограничение панели CommandPalette |
-| `--altum-button-group-item-min-sm` / `md` / `lg` | space-6 / 7 / 8 | Мин. ширина ButtonGroup.Item |
+| `--altum-button-group-item-min-sm` / `md` / `lg` | space-6 / 7 / 8 | Мин. ширина кнопки внутри ButtonGroup |
 | `--altum-focus-ring-width` | 2px | Толщина outline-фокуса (навигация / тогглы / выбор) |
 | `--altum-focus-ring-offset` | light 1px / dark 2px | Смещение outline-фокуса (согласовано с зазором кольца кнопки) |
 | `--altum-focus-ring-color` | light → `--altum-color-input-border-focus`; dark `rgba(248,250,252,0.55)` | Общий цвет outline-фокуса (в dark — светлая hairline, не заливка CTA) |
@@ -132,7 +132,7 @@ return (
 | `--altum-switch-track-off` | смесь ink на ctrl-bg | Заливка трека выключенного Switch |
 | `--altum-overlay-close-size` | 28px | Хит-зона закрытия Overlay / Alert / Notification |
 | `--altum-overlay-close-icon-size` | 16px | Кегль × в overlay-close |
-| `--altum-overlay-close-fg` / `--altum-overlay-close-fg-hover` / `--altum-overlay-close-bg` / `--altum-overlay-close-bg-hover` | тема | Голый крестик overlay (Modal / Sheet, `ButtonIcon` `diskClose`); chrome только на hover |
+| `--altum-overlay-close-fg` / `--altum-overlay-close-fg-hover` / `--altum-overlay-close-bg` / `--altum-overlay-close-bg-hover` | тема | Голый крестик overlay (Modal / Sheet, `Button` `data-appearance="diskClose"`); chrome только на hover |
 | `--altum-badge-overhang` | `space-1` + `control-inset` (6px) | Запас раскладки + смещение overlay-бейджа |
 | `--altum-badge-digit-nudge` | `0.5px` | Сдвиг цифры в круглом **Badge** вниз (оптический центр) |
 | `--altum-slider-track-height` | `3px` | Высота трека **Slider** |
@@ -168,31 +168,15 @@ return (
 | Переменная | По умолчанию | Кто использует |
 |------------|--------------|----------------|
 | `--altum-g-z-below` | `-1` | Линия-коннектор Steps |
-| `--altum-g-z-raised` | `1` | Слайдер ButtonGroup / SegmentedControl |
+| `--altum-g-z-raised` | `1` | Бегунок SegmentedControl |
 | `--altum-g-z-raised-above` | `2` | Контент кнопки, контролы NumberField |
 | `--altum-g-z-control` | `5` | Бегунок Slider |
 | `--altum-g-z-local` | `10` | Badge, липкий заголовок таблицы, маска TextField |
 | `--altum-g-z-upload` | `50` | Drag-оверлей UploadZone |
-| `--altum-g-z-overlay` | `1000` | **Sheet** (по умолчанию), портальные панели между chrome и Modal |
-| `--altum-g-z-modal` | `1100` | Modal |
-| `--altum-g-z-tooltip` | `1150` | Tooltip (выше модалки, чтобы подсказки работали в диалогах) |
-| `--altum-g-z-dropdown` | `1200` | Dropdown (выше Modal) |
-| `--altum-g-z-lightbox` | `1250` | ImageLightbox |
-| `--altum-g-z-notification` | `1300` | Тосты Notification; Sheet с `zIndexTier="notification"` |
-
-`Overlay` использует **`purpose`** вместо сырых `zIndex` / `sideOffset`:
-
-| purpose | z-index | sideOffset |
-|---------|---------|------------|
-| `tooltip` | `--altum-g-z-tooltip` | `--altum-overlay-offset-tooltip` (8px) |
-| `popover` | `--altum-g-z-dropdown` | `--altum-overlay-offset-popover` (8px) |
-| `dropdown` | `--altum-g-z-dropdown` | `--altum-overlay-offset-dropdown` (8px) |
-| `modal` | `--altum-g-z-modal` | — |
-| `sheet` | `--altum-g-z-overlay` | — |
-| `lightbox` | `--altum-g-z-lightbox` | — |
-| `notification` | `--altum-g-z-notification` | — |
-
-Переопределение `Sheet`: `zIndexTier` (`overlay` \| `modal` \| `dropdown` \| `lightbox` \| `notification`) или сырой `zIndex`. Меню, открытые внутри приподнятого Sheet, стекаются выше него (`max(--altum-g-z-dropdown, parent + 1)`).
+| `--altum-g-z-dropdown` | `1200` | PopupSwitch, Tooltip |
+| `--altum-g-z-notification` | `1300` | Тосты Notification |
+
+Modal, Sheet и ImageLightbox не задают z-index: их держит нативный `<dialog>`. Зазор до якоря есть только у **`Popover`** (`--altum-overlay-offset-popover`, 8px): **`Tooltip`** и **`Dropdown`** стоят на нём и отдельного offset не имеют.
 
 ### Акцент (`--altum-color-brand-*`)
 
@@ -283,7 +267,7 @@ Primary- и danger-кнопки остаются на `--altum-color-brand-*` /
 | `--altum-color-dropdown-bg` | Modal / Sheet / выпадающие панели (dark: elevated, не overlay полей) |
 | `--altum-color-option-hover` | Фоны при наведении |
 | `--altum-color-selection-fill` / `--altum-color-selection-fill-fg` / `--altum-color-selection-fill-emphasis` | Акцентный выбранный chrome (Segmented primary, Chip primary/tinted active) |
-| `--altum-color-selection-neutral-fill` / `--altum-color-selection-neutral-border` / `--altum-color-selection-neutral-slider` | Мягкий выбранный chrome: Chip secondary active; slider — приподнятый thumb Segmented / ButtonGroup |
+| `--altum-color-selection-neutral-fill` / `--altum-color-selection-neutral-border` / `--altum-color-selection-neutral-slider` | Мягкий выбранный chrome: Chip secondary active; slider — приподнятый thumb SegmentedControl |
 | `--altum-color-empty-icon` | Чернила иллюстрации EmptyState (`--altum-color-text-secondary`) |
 
 ## Тёмная тема

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "altum",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"description": "Библиотека React + TypeScript UI-компонентов: CSS Modules, токены ThemeProvider, адаптация overlay/sheet.",
 	"license": "MIT",
 	"author": "Alexander <azeeson@gmail.com>",

package/types/entries/hooks.d.ts

@@ -1,11 +1,5 @@
 import * as react from 'react';
-import { RefObject, PointerEvent, MouseEvent as MouseEvent$1, Dispatch, SetStateAction, ReactNode } from 'react';
-
-interface UseOutsideClickOptions {
-    enabled?: boolean;
-}
-type OutsideClickTarget = RefObject<HTMLElement | null>;
-declare function useOutsideClick(refs: OutsideClickTarget | OutsideClickTarget[], callback: (event: MouseEvent | TouchEvent) => void, options?: UseOutsideClickOptions): void;
+import { PointerEvent, MouseEvent, Dispatch, SetStateAction, ReactNode } from 'react';
 
 type DocumentKeyDownTarget = 'document' | 'window';
 interface UseDocumentKeyDownOptions {
@@ -14,53 +8,11 @@ interface UseDocumentKeyDownOptions {
 }
 declare function useDocumentKeyDown(handler: (event: KeyboardEvent) => void, options?: UseDocumentKeyDownOptions): void;
 
-interface UseEscapeKeyOptions {
-    enabled?: boolean;
-    target?: DocumentKeyDownTarget;
-    layered?: boolean;
-}
-declare function useEscapeKey(onEscape: () => void, options?: UseEscapeKeyOptions): void;
-
-declare function useBodyScrollLock(locked: boolean): void;
-
 declare function useControlledState<T>(controlled: T | undefined, defaultValue: T): [T, (next: T) => void, boolean];
 declare function useControlledStateWithCallback<T>(controlled: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void, boolean];
 
 declare function useNow(intervalMs: number): Date;
 
-interface UseOverlayOptions {
-    open: boolean;
-    closeOnEscape?: boolean;
-    lockScroll?: boolean;
-    rootRef?: RefObject<HTMLElement | null>;
-    restoreFocus?: boolean;
-}
-declare function useOverlay(onClose: () => void, { open, closeOnEscape, lockScroll, rootRef: rootRefProp, restoreFocus, }: UseOverlayOptions): void;
-
-declare function useFocusRestore(active: boolean): void;
-
-declare function useInertSiblings(active: boolean, rootRef: RefObject<HTMLElement | null>): void;
-
-interface UseOverlayPanelOptions {
-    active: boolean;
-    rootRef: RefObject<HTMLElement | null>;
-    restoreFocus?: boolean;
-}
-declare function useOverlayPanel({ active, rootRef, restoreFocus, }: UseOverlayPanelOptions): void;
-
-interface UseFocusTrapOptions {
-    active: boolean;
-    containerRef: RefObject<HTMLElement | null>;
-    initialFocusRef?: RefObject<HTMLElement | null>;
-    returnFocusRef?: RefObject<HTMLElement | null>;
-    restoreFocus?: boolean;
-    onEscape?: () => void;
-}
-declare function useFocusTrap({ active, containerRef, initialFocusRef, returnFocusRef, restoreFocus, onEscape, }: UseFocusTrapOptions): void;
-
-declare const MOBILE_MEDIA_QUERY = "(max-width: 768px)";
-declare function useMediaQuery(query: string): boolean;
-
 interface UseLongPressOptions {
     delay?: number;
     disabled?: boolean;
@@ -70,20 +22,12 @@ interface UseLongPressHandlers {
     onPointerDown: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;
     onPointerCancel: (event: PointerEvent) => void;
-    onContextMenu: (event: MouseEvent$1) => void;
-    onClick: (event: MouseEvent$1) => void;
+    onContextMenu: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
     cancel: () => void;
 }
 declare function useLongPress(onLongPress: () => void, options?: UseLongPressOptions): UseLongPressHandlers;
 
-declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-declare function usePrefersReducedMotion(): boolean;
-
-declare function usePresence(open: boolean, durationMs: number): {
-    shouldRender: boolean;
-    presented: boolean;
-};
-
 type FormErrors<T extends Record<string, unknown>> = Partial<Record<keyof T, string>>;
 type FieldValidate<T extends Record<string, unknown>, K extends keyof T> = (value: T[K], values: T) => string | undefined;
 interface RegisterOptions<T extends Record<string, unknown>, K extends keyof T> {
@@ -112,12 +56,9 @@ type UseFormReturn<T extends Record<string, unknown>> = ReturnType<typeof useFor
 
 declare function useFormContext<T extends Record<string, unknown>>(): UseFormReturn<T>;
 declare function useFormProvider<T extends Record<string, unknown>>(initialValues: T): {
-    FormProvider: {
-        ({ children }: {
-            children?: ReactNode;
-        }): react.FunctionComponentElement<react.ProviderProps<UseFormReturn<Record<string, unknown>> | null>>;
-        displayName: string;
-    };
+    FormProvider: ({ children }: {
+        children?: ReactNode;
+    }) => react.FunctionComponentElement<react.ProviderProps<UseFormReturn<Record<string, unknown>> | null>>;
     values: T;
     errors: Partial<Record<keyof T, string>>;
     isDirty: boolean;
@@ -151,5 +92,5 @@ interface ValidationRules {
 declare function fieldRules(rules: ValidationRules): FormRule;
 declare function checkedValue(payload: unknown): boolean;
 
-export { MOBILE_MEDIA_QUERY, REDUCED_MOTION_QUERY, checkedValue, compose, fieldRules, pattern, required, useBodyScrollLock, useControlledState, useControlledStateWithCallback, useDocumentKeyDown, useEscapeKey, useFocusRestore, useFocusTrap, useForm, useFormContext, useFormProvider, useInertSiblings, useLongPress, useMediaQuery, useNow, useOutsideClick, useOverlay, useOverlayPanel, usePrefersReducedMotion, usePresence };
-export type { DocumentKeyDownTarget, FieldValidate, FormErrors, FormRule, RegisterOptions, UseDocumentKeyDownOptions, UseEscapeKeyOptions, UseFocusTrapOptions, UseFormReturn, UseLongPressHandlers, UseLongPressOptions, UseOutsideClickOptions, UseOverlayOptions, UseOverlayPanelOptions, ValidationRules };
+export { checkedValue, compose, fieldRules, pattern, required, useControlledState, useControlledStateWithCallback, useDocumentKeyDown, useForm, useFormContext, useFormProvider, useLongPress, useNow };
+export type { DocumentKeyDownTarget, FieldValidate, FormErrors, FormRule, RegisterOptions, UseDocumentKeyDownOptions, UseFormReturn, UseLongPressHandlers, UseLongPressOptions, ValidationRules };