@olddevs/ui 4.0.3 → 4.1.1

package/docs/components/inputs/rich-text-editor.md

@@ -1123,7 +1123,7 @@ ARIA сетки — шаблон `grid` из APG: `role="grid"` → `row` → `g
 
 **Что видно.** HTML отформатирован: Блок верхнего уровня — на своей строке, дети контейнеров Блоков (пункты списков, строки и ячейки таблицы, колонки Раскладки, части `figure`, пункт чек-листа) — с отступом в два пробела, содержимое Блока — на строке его тега (пробелы текста не меняются), содержимое `pre` — как есть. Форматирование без потерь: неизменённый текст при применении даёт тот же Документ. Пустой Документ открывается пустым полем, а не `<p></p>`. Подсветки синтаксиса нет.
 
-**Вид.** Поле **всегда тёмное, цветом кита**, а не палитрой подсветки синтаксиса Блока кода: в `dark` и `dim` — самая глубокая подложка темы с её текстом и рамкой, в `light` и на Листе `paper` — те же значения тёмной темы (переменные `--rte-source-background`, `--rte-source-foreground`, `--rte-source-border`, их можно перекрыть). Скругление — как у кода, шрифт — моноширинный 13 px, как у `CodeView`; отступы — как у области Документа. Высота при входе — не меньше высоты Документа, дальше поле растёт по содержимому и растягивается по вертикали вручную. С `maxHeight` или `resizable` поле живёт в той же области прокрутки, что и Документ (раздел «Высота поля»). Выделение текста в поле — тоже тёмной темы текущего акцента (`--selection-dark`) со светлым текстом поля: светлое выделение светлой темы на тёмном поле не читалось.
+**Вид.** Поле **всегда тёмное, цветом кита**, а не палитрой подсветки синтаксиса Блока кода: в `dark` и `dim` — самая глубокая подложка темы с её текстом и рамкой, в `light` и на Листе `paper` — те же значения тёмной темы (переменные `--rte-source-background`, `--rte-source-foreground`, `--rte-source-border`, их можно перекрыть). На Листе `paper` светлый лист остаётся под тёмным полем: меняется содержимое листа, а не сам лист. Скругление — как у кода, шрифт — моноширинный 13 px, как у `CodeView`; отступы — как у области Документа. Высота при входе — не меньше высоты Документа, дальше поле растёт по содержимому и растягивается по вертикали вручную. С `maxHeight` или `resizable` поле живёт в той же области прокрутки, что и Документ (раздел «Высота поля»). Выделение текста в поле — тоже тёмной темы текущего акцента (`--selection-dark`) со светлым текстом поля: светлое выделение светлой темы на тёмном поле не читалось.
 
 **Применение — при выходе, уходе фокуса и чтении.** Текст поля проходит через Схему тем же разбором, что входящий `value` (всё, чего в Схеме нет, отбрасывается — `script`, обработчики `on*`, произвольные `style` и `class`, `javascript:`; разметка выключенных Инструментов снимается, текст остаётся), и заменяет Документ **одной правкой** — одна отмена `Ctrl/⌘+Z` в Документе возвращает его к состоянию до применения. Применение запускают:
 

package/docs/getting-started.en.md

@@ -1,5 +1,5 @@
 ---
-sourceHash: 19857ad0f54d
+sourceHash: 6f3e6f49e2eb
 ---
 
 # Setting up `@olddevs/ui`
@@ -132,10 +132,10 @@ peer dependencies are treated as external, and the metric is gzip:
 | `cn` and `tableStateToParams`                                                                            | 0.6 kB   |
 | one `Button`                                                                                             | 1.6 kB   |
 | `DataTable`                                                                                              | 9.0 kB   |
-| the whole kit (`import *`)                                                                               | 71.1 kB  |
+| the whole kit (`import *`)                                                                               | 71.4 kB  |
 | `RichTextEditor` from `@olddevs/ui/editor`, without the engine, "start"                                  | 70.4 kB  |
 | `RichTextEditor` with the Tiptap engine, "start" (static graph, `basic`)                                 | 295.1 kB |
-| `RichTextEditor` with the Tiptap engine, "full" (with all lazy chunks, `full`)                           | 338.9 kB |
+| `RichTextEditor` with the Tiptap engine, "full" (with all lazy chunks, `full`)                           | 339.1 kB |
 | `RichTextView` from `@olddevs/ui/editor`, Tiptap engine included in the measurement                      | 12.0 kB  |
 | `sanitizeRichText` and `richTextSanitizeConfig` from `@olddevs/ui/editor/schema`, Tiptap engine included | 3.6 kB   |
 | `highlightCodeBlocks` from `@olddevs/ui/editor/highlight`, with lowlight                                 | 22.6 kB  |

package/docs/getting-started.md

@@ -129,10 +129,10 @@ peer-зависимости внешние, метрика gzip:
 | `cn` и `tableStateToParams`                                                                                 | 0,6 кБ   |
 | одна `Button`                                                                                               | 1,6 кБ   |
 | `DataTable`                                                                                                 | 9,0 кБ   |
-| весь кит целиком (`import *`)                                                                               | 71,1 кБ  |
+| весь кит целиком (`import *`)                                                                               | 71,4 кБ  |
 | `RichTextEditor` из `@olddevs/ui/editor`, без движка, «старт»                                               | 70,4 кБ  |
 | `RichTextEditor` вместе с движком Tiptap, «старт» (статический граф, `basic`)                               | 295,1 кБ |
-| `RichTextEditor` вместе с движком Tiptap, «полный» (со всеми ленивыми чанками, `full`)                      | 338,9 кБ |
+| `RichTextEditor` вместе с движком Tiptap, «полный» (со всеми ленивыми чанками, `full`)                      | 339,1 кБ |
 | `RichTextView` из `@olddevs/ui/editor`, движок Tiptap в замер включён                                       | 12,0 кБ  |
 | `sanitizeRichText` и `richTextSanitizeConfig` из `@olddevs/ui/editor/schema`, движок Tiptap в замер включён | 3,6 кБ   |
 | `highlightCodeBlocks` из `@olddevs/ui/editor/highlight`, вместе с lowlight                                  | 22,6 кБ  |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olddevs/ui",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "description": "Olddevs UI — design system: tokens, themes and accessible UI primitives",
   "license": "MIT",
   "private": false,

package/src/components/actions/Toggle.tsx

@@ -194,10 +194,17 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle
     оно обёрнуто в свой `<label for>`.
   */
   return (
-    <div className={cn("flex items-center justify-between gap-4", className)}>
+    <div className={cn("group/toggle flex items-center justify-between gap-4", className)}>
       {/* Приглушается только текст: дорожка приглушает себя сама (`disabled:opacity-50`),
-          и общая прозрачность строки дала бы ей 25 % вместо 50 % — иначе, чем без подписи. */}
-      <div className={cn("flex min-w-0 flex-col", disabled && "opacity-50")}>
+          и общая прозрачность строки дала бы ей 25 % вместо 50 % — иначе, чем без подписи.
+          `group-has-[[role=switch]:disabled]/toggle:` — для кнопки, выключенной предком-`fieldset`:
+          свойство `disabled` у неё при этом ложно, и одно оно текст не погасило бы. */}
+      <div
+        className={cn(
+          "flex min-w-0 flex-col group-has-[[role=switch]:disabled]/toggle:opacity-50",
+          disabled && "opacity-50"
+        )}
+      >
         <label
           id={labelId}
           htmlFor={switchId}

package/src/components/actions/Truncate.tsx

@@ -68,10 +68,12 @@ export function Truncate({ children, lines = 1, side = "top", className, ...rest
       // клавиатурой не нужен и мешал бы.
       tabIndex={truncated ? 0 : undefined}
       className={cn(
-        "focus-visible:outline-accent-strong block min-w-0 focus-visible:outline-2 focus-visible:outline-offset-2",
+        "focus-visible:outline-accent-strong min-w-0 focus-visible:outline-2 focus-visible:outline-offset-2",
         lines === 1
-          ? "truncate"
-          : // Многострочная обрезка: `line-clamp` считает строки сам, и число
+          ? "block truncate"
+          : // `block` сюда нельзя: в CSS он стоит позже `[display:-webkit-box]`,
+            // перебивает его, и `line-clamp` молча не работает.
+            // Многострочная обрезка: `line-clamp` считает строки сам, и число
             // приходит переменной — иначе класс собирался бы конкатенацией, а
             // такого текста в исходниках нет и Tailwind его не увидит.
             "[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical]",

package/src/components/app-shell/MobileTabBar.tsx

@@ -263,7 +263,15 @@ export const MobileTabBarItem = forwardRef<HTMLAnchorElement, MobileTabBarItemPr
             {custom ? (
               <span className="absolute top-[-2px] -right-1.5 flex">{custom}</span>
             ) : shown ? (
-              <Badge overlay dot={dot} className="top-[-2px] -right-1.5">
+              // Значок держится ЛЕВОЙ кромкой у правого верхнего угла иконки и растёт
+              // вправо: привязка правой кромкой (`-right-1.5`) растила широкий «99+» или
+              // «Beta» влево, на иконку. Сдвиг `-ml-*` повторяет прежнее положение точки
+              // (8px) и короткого числа (16px): они выглядят как раньше.
+              <Badge
+                overlay
+                dot={dot}
+                className={cn("top-[-2px] right-auto left-full", dot ? "-ml-0.5" : "-ml-2.5")}
+              >
                 {count ?? text}
               </Badge>
             ) : null}

package/src/components/app-shell/NavItem.tsx

@@ -68,7 +68,12 @@ export interface NavItemProps extends Omit<ComponentPropsWithoutRef<"a">, "child
 const BASE =
   "focus-visible:outline-accent-strong flex items-center gap-3 rounded-control border " +
   "px-3 py-[9px] text-[13px] leading-5 no-underline transition-colors " +
-  "focus-visible:outline-2 focus-visible:outline-offset-2";
+  "focus-visible:outline-2 focus-visible:outline-offset-2 " +
+  // Недоступный пункт красится по `aria-disabled`, как у `Button`: у ссылки нет
+  // родного `disabled`, и без этого правила пункт, выключенный атрибутом ARIA,
+  // выглядел бы рабочим — с тем же цветом и курсором-указателем.
+  "aria-disabled:opacity-50 aria-disabled:cursor-default " +
+  "aria-disabled:hover:bg-transparent aria-disabled:hover:text-fg-1";
 
 const STATE = {
   active: "border-line bg-bg-3 text-fg-0 font-semibold",

package/src/components/app-shell/SideNav.tsx

@@ -74,6 +74,24 @@ export const NavGroup = forwardRef<HTMLDivElement, NavGroupProps>(function NavGr
   );
 });
 
+/**
+ * Схлопнута ли навигация — для содержимого слотов `header` и `footer`.
+ *
+ * Пункты и разделы кита подстраиваются под иконочный режим сами, а слоты
+ * принадлежат потребителю, и кит не знает, что в них лежит. Блоку пользователя
+ * в подвале нужно знать ширину колонки: в иконочном режиме место есть только
+ * для аватара, а имя и роль, оставленные как есть, переносятся по словам и
+ * вылезают за край.
+ *
+ * Хук, а не render-проп у слота: слот остаётся обычным `ReactNode`, и тот же
+ * компонент пользователя работает и вне `SideNav`. Там хук возвращает `false`
+ * — развёрнутое состояние по умолчанию, как у `NavItem`. В ящике мобильного
+ * режима навигация всегда развёрнута, и хук это повторяет.
+ *
+ * Для подстройки чистым CSS у `<nav>` есть атрибут `data-collapsed`.
+ */
+export const useNavCollapsed = (): boolean => useContext(NavCollapsedContext);
+
 export interface SideNavProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
   /** Содержимое колонки между шапкой и подвалом: `NavGroup` и `NavItem`; прокручивается, если не помещается. */
   children: ReactNode;
@@ -181,12 +199,19 @@ export const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(
         )}
         {...rest}
       >
-        {header != null ? <div className="shrink-0">{header}</div> : null}
+        {/*
+         * Шапка и подвал обрезают лишнее по ширине: слот потребителя может не
+         * знать про иконочный режим, и без обрезки его текст лёг бы поверх
+         * содержимого страницы. Обрезка только по горизонтали (`clip`, а не
+         * `hidden`): по вертикали слот растёт сам, а `hidden` по одной оси
+         * сделал бы другую прокручиваемой.
+         */}
+        {header != null ? <div className="shrink-0 overflow-x-clip">{header}</div> : null}
 
         <div className="flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 py-1">{children}</div>
 
         {footer != null || showToggle ? (
-          <div className="border-line-soft shrink-0 border-t p-2.5">
+          <div className="border-line-soft shrink-0 overflow-x-clip border-t p-2.5">
             {footer}
             {showToggle ? (
               <div className={cn("flex", isCollapsed ? "justify-center" : "justify-end")}>

package/src/components/content/AvatarGroup.tsx

@@ -56,6 +56,9 @@ export function AvatarGroup({
   const members = names.map((entry) => (typeof entry === "string" ? { name: entry } : entry));
   const shown = members.slice(0, max);
   const rest = members.length - shown.length;
+  // Перекрытие по размеру круга: на 28px прежние 8px плюс кольцо срезали
+  // инициалы слева и плюс у «+N»; на 64px они не мешают.
+  const overlap = size === "lg" ? "-ml-2" : "-ml-1";
 
   return (
     <span
@@ -67,7 +70,7 @@ export function AvatarGroup({
         <span
           key={`${name}-${index}`}
           aria-hidden
-          className={cn("ring-bg-1 relative rounded-full ring-2", index > 0 && "-ml-2")}
+          className={cn("ring-bg-1 relative rounded-full ring-2", index > 0 && overlap)}
           style={{ zIndex: shown.length - index }}
         >
           {/* `alt=""`: круг скрыт, имя объявляет группа — подпись у фото была бы вторым чтением. */}
@@ -80,7 +83,8 @@ export function AvatarGroup({
           className={cn(
             // `text-fg-1`, а не `fg-2`: на подложке `bg-3` вторая ступень не держит 4.5 —
             // поймал аудит axe. Остаток «+N» это содержимое, а не подсказка.
-            "bg-bg-3 text-fg-1 ring-bg-1 relative -ml-2 flex items-center justify-center rounded-full font-semibold ring-2",
+            "bg-bg-3 text-fg-1 ring-bg-1 relative flex items-center justify-center rounded-full font-semibold ring-2",
+            overlap,
             size === "lg" ? "text-md h-16 w-16" : "text-caption h-7 w-7"
           )}
         >

package/src/components/content/Table.tsx

@@ -298,6 +298,13 @@ export function Table<T extends { id: Key }>({
   /** Сколько ячеек в строке — столько же обязана занять детальная. */
   const span = columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0);
 
+  /*
+    Ширина служебных колонок (выбор, раскрытие) идёт тем же путём, что и
+    `column.width`: `width` действует только внутри `ResizableTableContainer`,
+    вне его колонка растягивается наравне с данными, поэтому нужен CSS-стиль.
+  */
+  const serviceWidth = resizable ? { width: 40 } : { style: { width: 40 } };
+
   const table = (
     <AriaTable
       {...rest}
@@ -339,7 +346,7 @@ export function Table<T extends { id: Key }>({
         {selectable ? (
           <Column
             className="border-line-soft bg-bg-1 text-fg-2 border-b px-3 py-2 text-left font-semibold"
-            width={40}
+            {...serviceWidth}
           >
             {/*
               Флажок «выделить всё» — родной RAC (`slot="selection"`), а не наш
@@ -354,7 +361,7 @@ export function Table<T extends { id: Key }>({
         {expandable ? (
           <Column
             id={`${COLUMN_KEY}od-expander`}
-            width={40}
+            {...serviceWidth}
             className="border-line-soft bg-bg-1 border-b px-3 py-2"
           >
             {/*
@@ -401,7 +408,12 @@ export function Table<T extends { id: Key }>({
                   />
                 ) : null}
                 {resizable ? (
-                  <ColumnResizer className="bg-line-soft hover:bg-accent-strong ml-auto w-px cursor-col-resize" />
+                  <ColumnResizer
+                    className={cn(
+                      "bg-line-soft hover:bg-accent-strong w-px cursor-col-resize",
+                      column.align !== "end" && "ml-auto"
+                    )}
+                  />
                 ) : null}
               </span>
             )}

package/src/components/content/VirtualGrid.tsx

@@ -509,7 +509,17 @@ export function VirtualGrid({
               className="focus-visible:outline-accent-strong rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
             >
               {/* `gridcell` у react-aria — `display: contents`: высоту держит обёртка. */}
-              <div className="h-full" style={{ minHeight: minItemHeight }}>
+              {/* Обёртка — сетка из одной строки, а не блок с `min-height`: процентная высота
+                  вложенного узла (`h-full`) от `min-height` не считается и схлопывается до
+                  содержимого, а от строки сетки — считается. `items-start` оставляет ячейку без
+                  `h-full` её естественной высоты. */}
+              <div
+                className="grid h-full grid-cols-1 items-start"
+                style={{
+                  minHeight: minItemHeight,
+                  gridTemplateRows: `minmax(${minItemHeight}px, 1fr)`,
+                }}
+              >
                 {item.contextMenu != null ? (
                   <CellContextMenu
                     menu={item.contextMenu}

package/src/components/inputs/Checkbox.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { CheckboxButton, CheckboxField, Text } from "react-aria-components";
 import { CheckIcon, MinusIcon } from "../../icons.js";
+import { DIMMED_IN_DISABLED_FIELDSET } from "../../lib/choice-card.js";
 import { cn } from "../../lib/cn.js";
 import { hasContent } from "../../lib/empty.js";
 import { STATE_BORDER, TONE_TOKENS, type Size, type Tone } from "../../lib/variants.js";
@@ -239,6 +240,10 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(function Check
         className={
           "hover:bg-bg-2 relative flex w-fit cursor-pointer items-center gap-2 rounded-sm px-1 py-0.5 " +
           "transition-colors disabled:cursor-default disabled:opacity-50 " +
+          // `disabled:` ловит только собственный `isDisabled`; выключенный предок-
+          // `fieldset` — см. `DIMMED_IN_DISABLED_FIELDSET`.
+          DIMMED_IN_DISABLED_FIELDSET +
+          " " +
           "before:absolute before:inset-x-0 before:bottom-full before:h-0.5 before:content-[''] after:absolute after:inset-x-0 after:top-full after:h-0.5 after:content-['']"
         }
       >

package/src/components/inputs/CheckboxCard.tsx

@@ -6,6 +6,7 @@ import { CheckIcon, MinusIcon } from "../../icons.js";
 import { cn } from "../../lib/cn.js";
 import {
   CHOICE_CARD_BASE,
+  CHOICE_CARD_DIMMED_IN_DISABLED_FIELDSET,
   CHOICE_CARD_FOCUS_RING,
   CHOICE_CARD_IDLE_BORDER,
   CHOICE_CARD_INVALID_BORDER,
@@ -82,6 +83,7 @@ export const CheckboxCard: CheckboxCardComponent = forwardRef<
               ? CHOICE_CARD_SELECTED_BORDER[tone]
               : CHOICE_CARD_IDLE_BORDER,
           isDisabled ? "opacity-50" : "hover:bg-bg-3",
+          CHOICE_CARD_DIMMED_IN_DISABLED_FIELDSET,
           orientation === "horizontal" && CHOICE_CARD_ROW,
           className
         )

package/src/components/inputs/RadioGroup.tsx

@@ -14,6 +14,8 @@ import { hasContent } from "../../lib/empty.js";
 import { ChoiceCardBody } from "./ChoiceCardBody.js";
 import {
   CHOICE_CARD_BASE,
+  DIMMED_IN_DISABLED_FIELDSET,
+  CHOICE_CARD_DIMMED_IN_DISABLED_FIELDSET,
   CHOICE_CARD_FOCUS_RING,
   CHOICE_CARD_IDLE_BORDER,
   CHOICE_CARD_INVALID_BORDER,
@@ -214,6 +216,7 @@ export const Radio = forwardRef<HTMLDivElement, RadioProps>(function Radio(
                 ? CHOICE_CARD_SELECTED_BORDER[tone]
                 : CHOICE_CARD_IDLE_BORDER,
             isDisabled ? "opacity-50" : "hover:bg-bg-3",
+            CHOICE_CARD_DIMMED_IN_DISABLED_FIELDSET,
             orientation === "horizontal" && CHOICE_CARD_ROW,
             className
           )
@@ -247,7 +250,13 @@ export const Radio = forwardRef<HTMLDivElement, RadioProps>(function Radio(
       isDisabled={disabled}
       className={cn("flex flex-col", className)}
     >
-      <RadioButton className="hover:bg-bg-2 flex w-fit cursor-pointer items-center gap-2 rounded-sm px-1 py-0.5 transition-colors disabled:cursor-default disabled:opacity-50">
+      <RadioButton
+        className={
+          "hover:bg-bg-2 flex w-fit cursor-pointer items-center gap-2 rounded-sm px-1 py-0.5 transition-colors " +
+          "disabled:cursor-default disabled:opacity-50 " +
+          DIMMED_IN_DISABLED_FIELDSET
+        }
+      >
         {({ isSelected, isInvalid, isFocusVisible }) => (
           <>
             <RadioBox selected={isSelected} invalid={isInvalid} focusVisible={isFocusVisible} />