@olddevs/ui 4.0.3 → 4.1.1

package/src/components/inputs/Select.tsx

@@ -15,7 +15,7 @@ import { LISTBOX_ITEM_CLASS } from "../../lib/menu.js";
 import { FIELD_CLEAR_CLASS } from "../../lib/field.js";
 import { useMessages } from "../../i18n/useMessages.js";
 import { CheckIcon, CloseIcon, SelectIcon } from "../../icons.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../overlays/Popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../overlays/Popover.js";
 import { VisuallyHidden } from "../content/VisuallyHidden.js";
 
 /** Минимум, который список требует от элемента. Остальные поля — ваши. */
@@ -502,41 +502,47 @@ export function Select<T extends SelectItem>(props: SelectProps<T>) {
         Кольцо фокуса рисуется на псевдоэлементе, а не на кнопке: обводить надо
         пилюлю целиком, иначе она у`же собственного контура.
       */}
-      <span
-        className={cn(
-          "relative inline-flex items-center gap-2 rounded-full border px-3 py-[7px]",
-          // `leading-5` задаёт высоту, а не наследует её: строчный бокс в 20px
-          // плюс отступы дают ровно 36 — рост `Button` размера `md`, рядом с
-          // которым пилюля и стоит в панели фильтров. С отступами формы
-          // (`py-2.5` от потребителя) те же 20 дают 42 — рост `TextControl`
-          // и `NumberInput` (см. `lib/field.ts`).
-          //
-          // Картинка выбранного значения тоже 20, и это условие, а не совпадение:
-          // содержимое выше строчного бокса растягивало бы триггер. Пока она
-          // была 22, пилюля с картинкой вырастала до 38, а триггер формы — до 44,
-          // и контрол расходился и с соседним полем, и сам с собой в пустом
-          // состоянии.
-          // `transition-colors`, а не `transition-all`: на этом боксе меняются
-          // только рамка, фон и цвет подписи — по ветке `hasSelection`. `all`
-          // обещал переход всему, чего на пилюле нет, и заодно тому, что
-          // потребитель пришлёт через `triggerClassName`. Заменено в волне 27
-          // при ревизии движения: класс выглядел перемещающим, а перемещать
-          // здесь нечего.
-          "text-[13px] leading-5 font-semibold transition-colors",
-          hasSelection && highlightSelected
-            ? "border-accent-strong bg-accent-soft text-fg-0"
-            : "border-line-soft text-fg-1 hover:border-line hover:bg-bg-2 bg-transparent",
-          // Выбранное значение читается тёмным даже без акцентной подсветки:
-          // подпись — это содержимое контрола, а не подсказка.
-          hasSelection && !highlightSelected && "text-fg-0",
-          // Гаснет ПИЛЮЛЯ, а не кнопка внутри неё: рамка и фон нарисованы здесь,
-          // и приглушённая подпись рядом с яркой рамкой выглядела бы сбоем
-          // отрисовки, а не выключенным полем.
-          disabled && "cursor-not-allowed opacity-50",
-          triggerClassName
-        )}
-      >
-        {/*
+      {/*
+        Якорь панели — вся пилюля, а не кнопка-триггер внутри неё: кнопка отступает
+        от нижней кромки на рамку и `py-[7px]`, и панель с `sideOffset` в 4px
+        заходила на пилюлю вместо зазора.
+      */}
+      <PopoverAnchor asChild>
+        <span
+          className={cn(
+            "relative inline-flex items-center gap-2 rounded-full border px-3 py-[7px]",
+            // `leading-5` задаёт высоту, а не наследует её: строчный бокс в 20px
+            // плюс отступы дают ровно 36 — рост `Button` размера `md`, рядом с
+            // которым пилюля и стоит в панели фильтров. С отступами формы
+            // (`py-2.5` от потребителя) те же 20 дают 42 — рост `TextControl`
+            // и `NumberInput` (см. `lib/field.ts`).
+            //
+            // Картинка выбранного значения тоже 20, и это условие, а не совпадение:
+            // содержимое выше строчного бокса растягивало бы триггер. Пока она
+            // была 22, пилюля с картинкой вырастала до 38, а триггер формы — до 44,
+            // и контрол расходился и с соседним полем, и сам с собой в пустом
+            // состоянии.
+            // `transition-colors`, а не `transition-all`: на этом боксе меняются
+            // только рамка, фон и цвет подписи — по ветке `hasSelection`. `all`
+            // обещал переход всему, чего на пилюле нет, и заодно тому, что
+            // потребитель пришлёт через `triggerClassName`. Заменено в волне 27
+            // при ревизии движения: класс выглядел перемещающим, а перемещать
+            // здесь нечего.
+            "text-[13px] leading-5 font-semibold transition-colors",
+            hasSelection && highlightSelected
+              ? "border-accent-strong bg-accent-soft text-fg-0"
+              : "border-line-soft text-fg-1 hover:border-line hover:bg-bg-2 bg-transparent",
+            // Выбранное значение читается тёмным даже без акцентной подсветки:
+            // подпись — это содержимое контрола, а не подсказка.
+            hasSelection && !highlightSelected && "text-fg-0",
+            // Гаснет ПИЛЮЛЯ, а не кнопка внутри неё: рамка и фон нарисованы здесь,
+            // и приглушённая подпись рядом с яркой рамкой выглядела бы сбоем
+            // отрисовки, а не выключенным полем.
+            disabled && "cursor-not-allowed opacity-50",
+            triggerClassName
+          )}
+        >
+          {/*
           Подпись видна только скринридеру и стоит ВНЕ кнопки: внутри неё она
           попала бы в содержимое, то есть прочиталась бы дважды — один раз как
           имя, второй как значение.
@@ -544,46 +550,46 @@ export function Select<T extends SelectItem>(props: SelectProps<T>) {
           `elementType="span"`: по умолчанию react-aria рисует `<div>`, а здесь
           он оказался бы внутри строчной пилюли.
         */}
-        {ariaLabel && !ariaLabelledBy ? (
-          <VisuallyHidden elementType="span" id={labelId}>
-            {ariaLabel}
-          </VisuallyHidden>
-        ) : null}
-
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            disabled={disabled}
-            aria-haspopup="listbox"
-            aria-expanded={open && !disabled}
-            aria-labelledby={labelledBy ? `${labelledBy} ${valueId}` : undefined}
-            aria-describedby={describedBy}
-            className={cn(
-              // `grow` + `justify-between`: когда потребитель растягивает пилюлю
-              // (`w-full`, `min-w`), кнопка занимает всю ширину, и его
-              // `justify-between` разводит иконку и подпись — как было до выноса.
-              // На пилюле по размеру содержимого свободного места нет, и оба
-              // класса ничего не меняют.
-              "inline-flex min-w-0 grow cursor-pointer items-center justify-between gap-2 text-left",
-              "disabled:cursor-not-allowed",
-              "after:absolute after:inset-0 after:rounded-[inherit]",
-              "focus-visible:after:outline-accent-strong focus-visible:after:outline-2 focus-visible:after:outline-offset-2",
-              // Место под крестик — на кнопке, а не на пилюле: пилюля уже несёт
-              // отступы потребителя, и добавка к ним сместила бы рамку.
-              hasSelection && clearable && !disabled && "pr-6"
-            )}
-          >
-            {/*
+          {ariaLabel && !ariaLabelledBy ? (
+            <VisuallyHidden elementType="span" id={labelId}>
+              {ariaLabel}
+            </VisuallyHidden>
+          ) : null}
+
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              disabled={disabled}
+              aria-haspopup="listbox"
+              aria-expanded={open && !disabled}
+              aria-labelledby={labelledBy ? `${labelledBy} ${valueId}` : undefined}
+              aria-describedby={describedBy}
+              className={cn(
+                // `grow` + `justify-between`: когда потребитель растягивает пилюлю
+                // (`w-full`, `min-w`), кнопка занимает всю ширину, и его
+                // `justify-between` разводит иконку и подпись — как было до выноса.
+                // На пилюле по размеру содержимого свободного места нет, и оба
+                // класса ничего не меняют.
+                "inline-flex min-w-0 grow cursor-pointer items-center justify-between gap-2 text-left",
+                "disabled:cursor-not-allowed",
+                "after:absolute after:inset-0 after:rounded-[inherit]",
+                "focus-visible:after:outline-accent-strong focus-visible:after:outline-2 focus-visible:after:outline-offset-2",
+                // Место под крестик — на кнопке, а не на пилюле: пилюля уже несёт
+                // отступы потребителя, и добавка к ним сместила бы рамку.
+                hasSelection && clearable && !disabled && "pr-6"
+              )}
+            >
+              {/*
               Содержимое собрано в одну группу, а не выложено соседями кнопки.
               Иначе `justify-between` разводит по краям именно их: в пилюле по
               ширине содержимого это незаметно, а в широком триггере (`w-full`
               в форме) картинка прилипает к левому краю, подпись — к правому,
               и между ними дыра во всю строку.
             */}
-            {selected ? (
-              <span id={valueId} className="inline-flex min-w-0 items-center gap-2">
-                {renderMedia?.(selected, 20)}
-                {/*
+              {selected ? (
+                <span id={valueId} className="inline-flex min-w-0 items-center gap-2">
+                  {renderMedia?.(selected, 20)}
+                  {/*
                   Ширина подписи ограничена переменной, а не жёстким числом.
                   В пилюле фильтра предел нужен: она растёт по содержимому, и
                   «Абстрактные градиенты» растолкали бы соседние фильтры. В
@@ -592,10 +598,10 @@ export function Select<T extends SelectItem>(props: SelectProps<T>) {
                   Снимается это классом на триггере:
                   `triggerClassName="[--select-label-max:none]"`.
                 */}
-                <span className={LABEL_CLASS}>{selected.label}</span>
-              </span>
-            ) : hasSelection && props.multiple ? (
-              /*
+                  <span className={LABEL_CLASS}>{selected.label}</span>
+                </span>
+              ) : hasSelection && props.multiple ? (
+                /*
                 Счётчик — СТРОГО за множественным выбором.
 
                 Ветка ловила и одиночный `Select`, у которого значение есть, а
@@ -605,13 +611,13 @@ export function Select<T extends SelectItem>(props: SelectProps<T>) {
                 нечего. Одиночный случай уходит теперь в ветку ниже и
                 показывает сам ключ, как это делает `captionOf` в `TreeSelect`.
               */
-              <span id={valueId} className={LABEL_CLASS}>
-                {countLabel
-                  ? countLabel(selectedIds.length)
-                  : `${placeholder}: ${selectedIds.length}`}
-              </span>
-            ) : hasSelection ? (
-              /*
+                <span id={valueId} className={LABEL_CLASS}>
+                  {countLabel
+                    ? countLabel(selectedIds.length)
+                    : `${placeholder}: ${selectedIds.length}`}
+                </span>
+              ) : hasSelection ? (
+                /*
                 Одиночный выбор, которому не нашлось элемента.
 
                 Ключ ЧЕСТНЕЕ плейсхолдера, когда он человекочитаем
@@ -622,36 +628,37 @@ export function Select<T extends SelectItem>(props: SelectProps<T>) {
                 умолчанию показывается ключ, как это делает `captionOf` в
                 `TreeSelect`.
               */
-              <span id={valueId} className={LABEL_CLASS}>
-                {missingLabel ? missingLabel(selectedIds[0]!) : selectedIds[0]}
-              </span>
-            ) : (
-              /*
+                <span id={valueId} className={LABEL_CLASS}>
+                  {missingLabel ? missingLabel(selectedIds[0]!) : selectedIds[0]}
+                </span>
+              ) : (
+                /*
                 `id` значения стоит на КОРНЕ КАЖДОЙ ветки, а не на общей обёртке
                 вокруг них: обёртка — лишний бокс во флексе триггера, и она
                 сместила бы содержимое там, где менять его никто не просил.
               */
-              <span id={valueId} className="inline-flex min-w-0 items-center gap-2">
-                <span aria-hidden className="inline-flex shrink-0 items-center opacity-60">
-                  {icon ?? <SelectIcon size={14} />}
+                <span id={valueId} className="inline-flex min-w-0 items-center gap-2">
+                  <span aria-hidden className="inline-flex shrink-0 items-center opacity-60">
+                    {icon ?? <SelectIcon size={14} />}
+                  </span>
+                  <span className="truncate">{placeholder}</span>
                 </span>
-                <span className="truncate">{placeholder}</span>
-              </span>
-            )}
-          </button>
-        </PopoverTrigger>
-
-        {hasSelection && clearable && !disabled ? (
-          <button
-            type="button"
-            aria-label={clearLabel ?? messages.common.clear}
-            onClick={clear}
-            className={FIELD_CLEAR_CLASS}
-          >
-            <CloseIcon size={10} aria-hidden />
-          </button>
-        ) : null}
-      </span>
+              )}
+            </button>
+          </PopoverTrigger>
+
+          {hasSelection && clearable && !disabled ? (
+            <button
+              type="button"
+              aria-label={clearLabel ?? messages.common.clear}
+              onClick={clear}
+              className={FIELD_CLEAR_CLASS}
+            >
+              <CloseIcon size={10} aria-hidden />
+            </button>
+          ) : null}
+        </span>
+      </PopoverAnchor>
 
       <PopoverContent
         className={cn("w-[260px]", contentClassName)}

package/src/components/inputs/Slider.tsx

@@ -64,15 +64,19 @@ export type RangeSliderProps = SliderLookProps &
   `State=disabled` в Figma. `disabled:` здесь срабатывает на `data-disabled`,
   который react-aria ставит на корень. Раньше вида не было вовсе —
   отличался только курсор над бегунком.
+
+  `has-[input:disabled]:` — для ползунка внутри `<fieldset disabled>` (так `Form` с
+  `pending` гасит поля): react-aria о таком предке не знает и `data-disabled`
+  на корне не ставит, а нативное состояние видит только скрытый `input` бегунка.
 */
-const DIMMED_WHEN_DISABLED = "disabled:opacity-50";
+const DIMMED_WHEN_DISABLED = "disabled:opacity-50 has-[input:disabled]:opacity-50";
 const ROOT_CLASS = `flex w-full flex-col gap-2 ${DIMMED_WHEN_DISABLED}`;
 const TRACK_CLASS = "bg-bg-3 relative h-1.5 w-full rounded-full";
 const FILL_CLASS = "bg-accent absolute h-full rounded-full";
 const THUMB_BASE_CLASS =
   "border-accent bg-bg-1 size-4 cursor-grab rounded-full border-2 shadow-[var(--shadow-1)] transition-shadow " +
   "dragging:cursor-grabbing focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2 " +
-  "disabled:cursor-not-allowed";
+  "disabled:cursor-not-allowed has-[input:disabled]:cursor-not-allowed";
 // Вдоль оси бегунок ставит react-aria (`left` или `top`), поперёк — мы.
 const THUMB_CLASS = `${THUMB_BASE_CLASS} top-1/2`;
 

package/src/components/navigation/Accordion.tsx

@@ -91,7 +91,10 @@ export function AccordionItem({ id, title, disabled, className, children }: Acco
               />
             </AriaButton>
           </AriaHeading>
-          <DisclosurePanel className="text-fg-1 pb-3 text-sm">{children}</DisclosurePanel>
+          {/* Отступ только у раскрытой панели: свёрнутая остаётся в потоке, и её `pb-3` добавлял 12px. */}
+          <DisclosurePanel className={cn("text-fg-1 text-sm", isExpanded && "pb-3")}>
+            {children}
+          </DisclosurePanel>
         </>
       )}
     </Disclosure>

package/src/components/navigation/TreeView.tsx

@@ -165,57 +165,78 @@ export function TreeView({
         className="outline-none [--tree-indent:1.25rem]"
       >
         <TreeItemContent>
-          {({ isExpanded, hasChildItems }) => (
-            <div
-              ref={(content) => markCurrent(content, current)}
-              className={cn(
-                "text-fg-1 flex items-center gap-2 rounded-xs py-1.5 pr-2 text-[13px] leading-5",
-                "hover:bg-bg-2 selected:bg-accent-soft selected:text-fg-0",
-                // Текущий узел — подложка и вес шрифта, как у `NavItem` с `active`.
-                current && "bg-bg-3 text-fg-0 font-semibold",
-                "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:-outline-offset-2",
-                "disabled:opacity-50"
-              )}
-              // Уровень вложенности берётся у react-aria: она кладёт его в
-              // `--tree-item-level` на строке, и считать глубину самим не нужно
-              // — иначе у нас была бы вторая копия того же числа.
-              style={{
-                paddingLeft: "calc((var(--tree-item-level) - 1) * var(--tree-indent) + 0.25rem)",
-              }}
-            >
-              {hasChildItems ? (
-                <Button
-                  slot="chevron"
-                  aria-label={isExpanded ? messages.treeView.collapse : messages.treeView.expand}
-                  className={cn(
-                    "text-fg-3 hover:text-fg-0 flex cursor-pointer items-center rounded-xs",
-                    "transition-colors",
-                    "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2"
-                  )}
-                >
-                  <ChevronRightIcon
-                    size={14}
-                    aria-hidden
+          {({ isExpanded, hasChildItems, isSelected, isDisabled }) => {
+            // Гасятся шеврон, иконка и подпись по отдельности, а не весь `div`:
+            // флажок выбора получает блокировку от строки сам и гасится собственным
+            // `disabled:opacity-50`, так что приглушение всего ряда дало бы ему
+            // двойное — 25% вместо 50%.
+            const dim = isDisabled && "opacity-50";
+            return (
+              <div
+                ref={(content) => markCurrent(content, current)}
+                className={cn(
+                  "text-fg-1 flex items-center gap-2 rounded-xs py-1.5 pr-2 text-[13px] leading-5",
+                  // Выбор и блокировка берутся из рендер-пропа, а не вариантами
+                  // `selected:` и `disabled:`: `data-selected` и `data-disabled`
+                  // react-aria ставит на строку (`row`), а красится её содержимое —
+                  // вариант на нём не срабатывал, и ни выбранный узел не
+                  // подсвечивался, ни заблокированный не гас. Тот же случай, что
+                  // шеврон в `Accordion`.
+                  //
+                  // Приглушение — не на всём `div`, а на частях (см. `dim` ниже).
+                  //
+                  // Текущий узел — подложка и вес шрифта, как у `NavItem` с `active`.
+                  // Стоит ДО выбора: `cn` оставляет последнюю подложку, и у узла,
+                  // который и текущий, и выбран, видна подложка выбора — как было,
+                  // пока порядок решал каскад вариантов.
+                  current && "bg-bg-3 text-fg-0 font-semibold",
+                  isSelected ? "bg-accent-soft text-fg-0" : !isDisabled && "hover:bg-bg-2",
+                  "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:-outline-offset-2"
+                )}
+                // Уровень вложенности берётся у react-aria: она кладёт его в
+                // `--tree-item-level` на строке, и считать глубину самим не нужно
+                // — иначе у нас была бы вторая копия того же числа.
+                style={{
+                  paddingLeft: "calc((var(--tree-item-level) - 1) * var(--tree-indent) + 0.25rem)",
+                }}
+              >
+                {hasChildItems ? (
+                  <Button
+                    slot="chevron"
+                    aria-label={isExpanded ? messages.treeView.collapse : messages.treeView.expand}
                     className={cn(
-                      "transition-transform motion-reduce:transition-none",
-                      isExpanded && "rotate-90"
+                      "text-fg-3 hover:text-fg-0 flex cursor-pointer items-center rounded-xs",
+                      "transition-colors",
+                      dim,
+                      "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2"
                     )}
-                  />
-                </Button>
-              ) : (
-                // Место раскрывателя занято всегда: без него подписи листьев
-                // разъезжаются с подписями узлов на том же уровне.
-                <span aria-hidden className="w-[14px] shrink-0" />
-              )}
-              {selectionMode ? (
-                <Checkbox slot="selection" label={messages.treeView.select} />
-              ) : null}
-              {node.icon != null && (
-                <span className="text-fg-3 flex shrink-0 items-center">{node.icon}</span>
-              )}
-              <span className="min-w-0 truncate">{node.label}</span>
-            </div>
-          )}
+                  >
+                    <ChevronRightIcon
+                      size={14}
+                      aria-hidden
+                      className={cn(
+                        "transition-transform motion-reduce:transition-none",
+                        isExpanded && "rotate-90"
+                      )}
+                    />
+                  </Button>
+                ) : (
+                  // Место раскрывателя занято всегда: без него подписи листьев
+                  // разъезжаются с подписями узлов на том же уровне.
+                  <span aria-hidden className="w-[14px] shrink-0" />
+                )}
+                {selectionMode ? (
+                  <Checkbox slot="selection" label={messages.treeView.select} />
+                ) : null}
+                {node.icon != null && (
+                  <span className={cn("text-fg-3 flex shrink-0 items-center", dim)}>
+                    {node.icon}
+                  </span>
+                )}
+                <span className={cn("min-w-0 truncate", dim)}>{node.label}</span>
+              </div>
+            );
+          }}
         </TreeItemContent>
         {node.children != null && node.children.length > 0 ? (
           <Collection items={node.children}>{renderNode}</Collection>

package/src/editor/RichTextEditor.tsx

@@ -67,7 +67,7 @@ import {
 } from "./core/jsonDocument.js";
 import { markdownOf } from "./core/atomText.js";
 import { countCharacters, EXTERNAL_CHANGE } from "./core/maxLength.js";
-import { proseClass } from "./styles/prose.js";
+import { PAPER_SHEET_CLASS, proseClass } from "./styles/prose.js";
 import { SELECTION_BUBBLE_KEY, SelectionBubble } from "./ui/SelectionBubble.js";
 import { useSlashMenu } from "./ui/SlashMenu.js";
 import { useTriggerMenu } from "./ui/TriggerMenu.js";
@@ -1543,8 +1543,11 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
                 {...surfaceAttributes(surface)}
                 className={cn(
                   "grid",
-                  surface === "paper" ? EDITOR_PAPER_TOKENS_CLASS : EDITOR_TOKENS_CLASS,
-                  surface === "paper" ? "my-3" : "py-2.5"
+                  // На листе светлый лист остаётся под тёмным полем: смена режима
+                  // меняет содержимое листа, а не сам лист.
+                  surface === "paper"
+                    ? cn(EDITOR_PAPER_TOKENS_CLASS, PAPER_SHEET_CLASS, "my-3")
+                    : cn(EDITOR_TOKENS_CLASS, "py-2.5")
                 )}
                 style={{ minHeight: source.minHeight }}
               >

package/src/editor/styles/prose.ts

@@ -415,7 +415,7 @@ export const PROSE_CLASS = EDITOR_TOKENS_CLASS + " " + PROSE_RULES;
  * видны на тёмной подложке так же, как на светлой. `scheme-light` — родной
  * флажок чек-листа и полосы прокрутки рисуются светлыми.
  */
-const PAPER_SHEET_CLASS =
+export const PAPER_SHEET_CLASS =
   "rounded-(--r-sm) border border-(--line) bg-(--rte-background) px-4 py-3 " +
   "shadow-[var(--shadow-1)] scheme-light";
 

package/src/editor/ui/FormatMenus.tsx

@@ -13,6 +13,7 @@ import {
 } from "../../components/overlays/Menu.js";
 import { Tooltip } from "../../components/overlays/Tooltip.js";
 import type { UiMessages } from "../../i18n/messages.js";
+import { cn } from "../../lib/cn.js";
 import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
 import {
   AlignCenterIcon,
@@ -227,7 +228,21 @@ export function formatMenuSections(
               icon={ItemIcon ? <ItemIcon size={14} aria-hidden /> : undefined}
               shortcut={item.keys ? shortcut(item.keys) : undefined}
             >
-              {item.swatch ? <span className={item.swatch}>{item.label}</span> : item.label}
+              {item.swatch ? (
+                /*
+                  Образец не должен брать вид выбранной строки: её голубой текст
+                  и подложка перекрашивали цвета тона. Текст задан образцу
+                  самому, а непрозрачная основа под ним не даёт полупрозрачной
+                  подложке тона смешаться с подложкой строки. Основа — только в
+                  отмеченной строке: у остальных образец лежит на панели меню,
+                  как обёртка в документе, и выглядит так же.
+                */
+                <span className="in-[[aria-checked=true]]:bg-surface-elevated rounded-xs">
+                  <span className={cn(item.swatch, "text-fg-0")}>{item.label}</span>
+                </span>
+              ) : (
+                item.label
+              )}
             </MenuItem>
           );
           if (!item.submenu || item.disabled) return entry;

package/src/index.ts

@@ -208,7 +208,7 @@ export type {
   MobileTabBarProps,
 } from "./components/app-shell/MobileTabBar.js";
 
-export { NavGroup, SideNav } from "./components/app-shell/SideNav.js";
+export { NavGroup, SideNav, useNavCollapsed } from "./components/app-shell/SideNav.js";
 export type { NavGroupProps, SideNavProps } from "./components/app-shell/SideNav.js";
 
 export { DataTable } from "./components/table/DataTable.js";

package/src/lib/choice-card.ts

@@ -50,6 +50,23 @@ export const CHOICE_CARD_INVALID_BORDER = "border-danger-strong";
  */
 export const CHOICE_CARD_BASE = "flex flex-col rounded-lg border bg-bg-2 transition-colors";
 
+/**
+ * Выключенность от `<fieldset disabled>` (так `Form` с `pending` гасит поля).
+ *
+ * React-aria о таком предке не знает: `isDisabled` ложен, `data-disabled` не
+ * ставится, и `disabled:` не срабатывает. Нативное состояние видит только
+ * скрытый `input` контрола — поэтому `has-[input:disabled]`, а не голый
+ * `has-disabled`: тот ловил бы любой выключенный узел внутри, например кнопку в
+ * описании карточки, и гасил бы рабочий контрол. Hover гасится вместе с видом:
+ * выключенный контрол не должен отзываться на указатель.
+ */
+export const DIMMED_IN_DISABLED_FIELDSET =
+  "has-[input:disabled]:cursor-default has-[input:disabled]:opacity-50 has-[input:disabled]:hover:bg-transparent";
+
+/** То же для карточки: её подложка `bg-bg-2` при наведении не меняется. */
+export const CHOICE_CARD_DIMMED_IN_DISABLED_FIELDSET =
+  "has-[input:disabled]:opacity-50 has-[input:disabled]:hover:bg-bg-2";
+
 /** Раскладка карточки в строке с переносом: растёт, но не уезжает в полосу. */
 export const CHOICE_CARD_ROW = "max-w-xs flex-1 basis-48";