@via-profit/ui-kit 0.9.0 → 0.10.0

package/Badge/BadgeContainer.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledBadge = styled_1.default.span `
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2.5}em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   font-size: 1em;
   border-width: 0;
   outline-style: solid;

package/Badge/BadgeTextWrapper.js

@@ -18,7 +18,9 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const TextWrapper = styled_1.default.span `
   font-size: 0.86em;
-  padding: 0.3em 0.5em;
+  /* the badge is about the height of the line of the text around it, not taller */
+  line-height: 1.35;
+  padding: 0.15em 0.5em;
   display: flex;
   align-items: center;
   user-select: none;

package/Button/buttonVariants.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@emotion/react';
 import type { ButtonGroupOrientation } from '../ButtonGroup/ButtonGroupContext';
-export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+export type ButtonVariant = 'standard' | 'outlined' | 'plain' | 'soft';
 type ButtonColor = 'default' | 'primary' | 'secondary' | string | undefined;
 /**
  * The styles of the variant. They are applied inside the Container part,

package/Button/buttonVariants.js

@@ -43,7 +43,7 @@ const getStandardColors = (color, theme) => {
     }
 };
 /**
- * The main color of the outlined and plain variants (text and border)
+ * The main color of the outlined, plain and soft variants (text and border)
  */
 const getAccentColor = (color, theme) => {
     switch (true) {
@@ -82,11 +82,23 @@ const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_1
     }
   `}
 `;
-const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
-  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+/**
+ * The border of the neutral outlined button: light, as the lines of the tables. The dark border
+ * of the text color makes «Отмена», «Сбросить» and the groups of the filters heavy;
+ * the colored outlined buttons keep the border of their color
+ */
+const neutralBorder = (theme) => theme.color.textPrimary.alpha(0.18).toString();
+const outlinedStyles = ({ $color, $neutral, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled
+    ? theme.color.textPrimary.alpha(0.4).toString()
+    : $neutral
+        ? $color.toString()
+        : $color.darken(30).toString()};
   border-color: ${disabled
     ? theme.color.surface.darken(80).alpha(0.4).toString()
-    : $color.toString()};
+    : $neutral
+        ? neutralBorder(theme)
+        : $color.toString()};
   background-color: transparent;
   border-style: solid;
   border-width: ${tokens_1.CONTROL_BORDER};
@@ -94,10 +106,18 @@ const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
   ${!disabled &&
     (0, react_1.css) `
     &:hover {
-      background-color: ${$color.darken(20).alpha(0.1).toString()};
+      background-color: ${$neutral
+        ? $color.alpha(0.05).toString()
+        : $color.darken(20).alpha(0.1).toString()};
+      ${$neutral &&
+        (0, react_1.css) `
+        border-color: ${theme.color.textPrimary.alpha(0.35).toString()};
+      `}
     }
     &:active {
-      background-color: ${$color.darken(50).alpha(0.3).toString()};
+      background-color: ${$neutral
+        ? $color.alpha(0.12).toString()
+        : $color.darken(50).alpha(0.3).toString()};
     }
     &:focus-visible {
       outline-color: ${focusOutlineColor($color, theme)};
@@ -126,6 +146,32 @@ const plainStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
     }
   `}
 `;
+/**
+ * The tonal button: the pale background of its color and the text of the same hue,
+ * as the plain button under the cursor. Quieter than the standard button, more visible than the plain one
+ */
+const softStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.darken(30).toString()};
+  background-color: ${disabled ? $color.alpha(0.05).toString() : $color.alpha(0.1).toString()};
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      color: ${$color.darken(50).toString()};
+      background-color: ${$color.alpha(0.18).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
 /**
  * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
  * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
@@ -156,13 +202,16 @@ const buttonVariantStyles = (params) => {
     const colors = variant === 'standard'
         ? getStandardColors(color, theme)
         : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
-    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, $neutral: typeof color === 'undefined' || color === 'default', disabled,
+        theme });
     return (0, react_1.css) `
     ${variant === 'outlined'
         ? outlinedStyles(props)
         : variant === 'plain'
             ? plainStyles(props)
-            : standardStyles(props)}
+            : variant === 'soft'
+                ? softStyles(props)
+                : standardStyles(props)}
     ${groupStyles(props)}
   `;
 };

package/Button/index.d.ts

@@ -5,19 +5,19 @@ import type { ButtonPlainProps } from './ButtonPlain';
 export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps | ButtonPlainProps) & {
     /**
      * Button style variant\
-     * Allowed variants: `standard`, `outlined` or `plain`\
+     * Allowed variants: `standard`, `outlined`, `plain` or `soft` (the pale background of the color)\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: 'standard' | 'outlined' | 'plain';
+    readonly variant?: 'standard' | 'outlined' | 'plain' | 'soft';
 };
 declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
     /**
      * Button style variant\
-     * Allowed variants: `standard`, `outlined` or `plain`\
+     * Allowed variants: `standard`, `outlined`, `plain` or `soft` (the pale background of the color)\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: "standard" | "outlined" | "plain";
+    readonly variant?: "standard" | "outlined" | "plain" | "soft";
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
 
+## Не выпущено
+
+## 0.10.0 — 2026-10-21
+
+### Добавлено
+
+- **Menu**: свойство `maxHeight` — максимальная высота списка (по умолчанию, как раньше, `18em`). Меню действий с разделителями переросло 18em и прокручивалось на пару пикселей;
+- **Menu**: разделители групп пунктов — свойство `isSeparator` отмечает элементы `items`, которые меню рисует само линией с отступами (часть `Separator`, компонент `MenuSeparator`). Стрелки, Home и End их пропускают, выбрать их нельзя, программы чтения с экрана их не объявляют;
+- **Stepper** — шаги процесса: выполненные (бледная подложка и галочка цвета), текущий (подложка контрастного цвета темы, обводка и номер цвета), будущие (бледно-серые), между ними линии — цветом после выполненных. В строку или столбец (`orientation`), подписи под кружками (`alternativeLabel`), у шага — `caption`, `completed`, `status` (`warning` / `error`), своя `icon`;
+- **Tabs**: `variant` — `underline` (линия под текстом выбранной вкладки со скруглёнными концами, скруглённая подложка при наведении) и `segmented` (вкладки в лотке, выбранная — плашка); `size` — `s` / `m` / `l` (32 / 40 / 48px при тексте 14px); `counter` у `Tab` — счётчик: бледный бейдж цвета вкладок (`soft`), серый при нуле;
+- **Button**: вариант `soft` — тональная кнопка: бледная подложка цвета кнопки и текст того же оттенка, как у `plain` под курсором. Тише `standard`, заметнее `plain`; под курсором подложка темнеет. Работает с любым `color`;
+- **ThemeProvider**: уровень тени `elevation.modal` — у модальных окон (Dialog, Drawer, MessageBox, ConfirmBox), глубже, чем у всплывающих элементов. Если в теме его нет, окна берут `elevation.popup` темы, как раньше, а без него — новую тень уровня по умолчанию.
+
+### Изменено
+
+- **Tabs**: новый вид по умолчанию — линия только под текстом выбранной вкладки (а не во всю её ширину), концы скруглены, подложка при наведении скруглена; текст вкладки — 0.929em (13px при тексте 14px; S — 12px, L — 14px), вес 400, выбранная — 500 и темнее цвета вкладок. Линия под рядом и у вертикальных вкладок светлее.
+- **Badge**: ниже — вертикальный отступ текста 0.15em вместо 0.3em, высота строки 1.35: бейдж примерно на высоту строки текста рядом, а не выше неё. Размер текста прежний. Скругление — как у кнопок (`radiusFactor × 2` вместо `× 2.5`).
+- **Surface**: подзаголовок — размер текста (1em вместо 0.9em), вес 300 вместо 200: тише текста за счёт цвета и Light, но не мелкий.
+- **Button**: у нейтральной кнопки `outlined` (`color="default"` или без `color`) — светлая рамка (цвет текста с прозрачностью 0.18, под курсором 0.35) и текст цвета темы без затемнения. Тёмная рамка цвета текста делала второстепенные кнопки («Отмена», «Сбросить») и группы кнопок-фильтров тяжёлыми. Цветные `outlined` (`primary`, `secondary`, свой цвет) не изменились.
+- **Calendar** (дни недели): вес шрифта 300 вместо 200 — начертания 200 нет в распространённых шрифтах, браузер всё равно рисовал 300.
+
+## 0.9.1 — 2026-10-19
+
+### Исправлено
+
+- **Modal** (Dialog, Drawer, MessageBox, ConfirmBox): при открытии окно больше не уводит фокус с поля, которое содержимое окна сфокусировало само (например, поле поиска), на следующий элемент.
+
 ## 0.9.0 — 2026-10-19
 
 ### Добавлено

package/Calendar/CalendarControlButton.d.ts

@@ -4,7 +4,7 @@ export type CalendarControlButtonProps = ButtonProps & {
     readonly isActive?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
-    readonly variant?: "standard" | "outlined" | "plain";
+    readonly variant?: "standard" | "outlined" | "plain" | "soft";
 } & {
     readonly isActive?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/Calendar/CalendarWeekDayLabel.js

@@ -9,7 +9,7 @@ const CalendarWeekDayLabel = styled_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 200;
+  font-weight: 300;
   font-size: 0.8em;
   user-select: none;
   width: 3em;

package/Menu/MenuContainer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuListProps } from './MenuList';
+import { MenuSeparatorProps } from './MenuSeparator';
 import { AnchorPos, PopperProps, PositionStrategy } from '../Popper';
 import type { MenuItemProps } from './MenuItem';
 export type AnchorElement<E extends HTMLElement = HTMLElement> = E;
@@ -195,6 +196,27 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * ```
      */
     readonly maxWidth?: number | string;
+    /**
+     * List menu maximum height (px, em, etc.): the longer list scrolls.
+     * The menu of the actions should not scroll — give it the height of the window,
+     * e.g. `maxHeight="80vh"`\
+     * \
+     * **Default**: `18em`
+     */
+    readonly maxHeight?: number | string;
+    /**
+     * Marks the items which are the separators between the groups of the items.
+     * The menu renders them itself (the `Separator` part): the keyboard skips them,
+     * they are not selected and `children` is not called for them\
+     * Example:
+     * ```tsx
+     * <Menu
+     *   items={[{ id: 'open' }, { id: 'separator' }, { id: 'delete' }]}
+     *   isSeparator={item => item.id === 'separator'}
+     * >
+     * ```
+     */
+    readonly isSeparator?: (item: T) => boolean;
 }
 export interface MenuOverrides {
     /**
@@ -205,6 +227,10 @@ export interface MenuOverrides {
      * Popper wrapper
      */
     readonly Popper?: React.ComponentType<PopperProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The separator between the groups of the items (see `isSeparator`)
+     */
+    readonly Separator?: React.ComponentType<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type MenuRef = {
     /**

package/Menu/MenuContainer.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const context_1 = __importStar(require("./context"));
 const MenuList_1 = __importDefault(require("./MenuList"));
+const MenuSeparator_1 = __importDefault(require("./MenuSeparator"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
 const onRequestCloseDefault = () => undefined;
@@ -56,11 +57,27 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, maxHeight, isSeparator, } = props;
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,
-    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper]);
+        Separator: (overrides === null || overrides === void 0 ? void 0 : overrides.Separator) || MenuSeparator_1.default,
+    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper, overrides === null || overrides === void 0 ? void 0 : overrides.Separator]);
+    // The separators are not the options: the keyboard skips them, they are not selected
+    const isOption = react_1.default.useCallback((index) => index >= 0 &&
+        index < items.length &&
+        !(typeof isSeparator === 'function' && isSeparator(items[index])), [items, isSeparator]);
+    /**
+     * The nearest option from the index in the direction (1 — down, -1 — up), -1 when there is none
+     */
+    const findOption = react_1.default.useCallback((from, direction) => {
+        for (let index = from; index >= 0 && index < items.length; index += direction) {
+            if (isOption(index)) {
+                return index;
+            }
+        }
+        return -1;
+    }, [items.length, isOption]);
     const menuListRef = react_1.default.useRef(null);
     const menuPopperRef = react_1.default.useRef(null);
     // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
@@ -134,7 +151,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             return;
         const item = items[index];
         // Falsy items such as 0 or an empty string are valid options
-        if (item === undefined)
+        if (item === undefined || !isOption(index))
             return;
         if (typeof onSelectItem === 'function') {
             if (multiple) {
@@ -155,7 +172,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
                 onRequestClose();
             }
         }
-    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple]);
+    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple, isOption]);
     const highlightIndex = react_1.default.useCallback((index) => {
         const validIndex = Math.max(-1, Math.min(index, items.length - 1));
         isKeyboardNavigationRef.current = true;
@@ -165,20 +182,21 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         dispatch((0, context_1.actionSetmenuState)({ markedIndex: validIndex, hoveredIndex: -1 }));
         scrollToIndex(validIndex);
     }, [dispatch, items.length, scrollToIndex]);
+    // Without the previous (next) option the highlight stays where it is
     const highlightPrevItem = react_1.default.useCallback(() => {
-        const newIndex = markedIndex - 1;
-        highlightIndex(newIndex >= 0 ? newIndex : 0);
-    }, [markedIndex, highlightIndex]);
+        const newIndex = findOption(markedIndex - 1, -1);
+        highlightIndex(newIndex >= 0 ? newIndex : findOption(0, 1));
+    }, [markedIndex, highlightIndex, findOption]);
     const highlightNextItem = react_1.default.useCallback(() => {
-        const newIndex = markedIndex + 1;
-        highlightIndex(newIndex < items.length ? newIndex : items.length - 1);
-    }, [markedIndex, items.length, highlightIndex]);
+        const newIndex = findOption(markedIndex + 1, 1);
+        highlightIndex(newIndex >= 0 ? newIndex : findOption(items.length - 1, -1));
+    }, [markedIndex, items.length, highlightIndex, findOption]);
     const highlightFirstItem = react_1.default.useCallback(() => {
-        highlightIndex(0);
-    }, [highlightIndex]);
+        highlightIndex(findOption(0, 1));
+    }, [highlightIndex, findOption]);
     const highlightLastItem = react_1.default.useCallback(() => {
-        highlightIndex(items.length - 1);
-    }, [highlightIndex, items.length]);
+        highlightIndex(findOption(items.length - 1, -1));
+    }, [highlightIndex, items.length, findOption]);
     const selectHighlightedItem = react_1.default.useCallback(() => {
         if (markedIndex > -1 && markedIndex < items.length) {
             selectItem(markedIndex);
@@ -367,7 +385,10 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             onAnchorPosChanged(newPlacement);
         }
     }, [onAnchorPosChanged]);
-    const renderedChildren = react_1.default.useMemo(() => items.map((item, index) => children({ item, index }, {
+    const SeparatorComponent = overridesMap.Separator;
+    const renderedChildren = react_1.default.useMemo(() => items.map((item, index) => 
+    // the separator stays among the children: the index of the child is the index of the item
+    !isOption(index) ? (react_1.default.createElement(SeparatorComponent, { key: index })) : (children({ item, index }, {
         key: index,
         onMouseEnter: itemMouseEnterHandler(index),
         // mouseenter is skipped during the keyboard navigation, so the item under a moving
@@ -377,8 +398,10 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         onClick: itemClickHandler(index),
         selected: selectedIndexes.includes(index),
         hovered: markedIndex === index,
-    })), [
+    }))), [
         items,
+        isOption,
+        SeparatorComponent,
         children,
         selectedIndexes,
         markedIndex,
@@ -397,7 +420,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     const ListComponent = overridesMap.List;
     return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false, ignoreElements: closeOnAnchorClick ? undefined : [anchorElement] },
         react_1.default.createElement(PopperComponent, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, alternativePlacements: alternativePlacements, anchorElement: anchorElement, onAnchorPosChanged: onAnchorPosChangedMemo, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
-            react_1.default.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
+            react_1.default.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, maxHeight: maxHeight, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
 });
 MenuContainer.displayName = 'MenuContainer';
 exports.default = MenuContainer;

package/Menu/MenuList.d.ts

@@ -4,6 +4,10 @@ export interface MenuListProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
     readonly anchorPos: AnchorPos;
     readonly maxWidth?: number | string;
+    /**
+     * The maximum height of the list: the longer list scrolls. Default: `18em`
+     */
+    readonly maxHeight?: number | string;
 }
 export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuList;

package/Menu/MenuList.js

@@ -77,11 +77,11 @@ const StyledMenuList = styled_1.default.div `
   box-sizing: border-box;
   overflow-y: auto;
   padding: 0.4em;
-  max-height: 18em;
+  max-height: ${({ $maxHeight = '18em' }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
 `;
 exports.MenuList = react_1.default.forwardRef((props, ref) => {
-    const { isOpen, anchorPos, maxWidth, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "children"]);
-    return (react_1.default.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
+    const { isOpen, anchorPos, maxWidth, maxHeight, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "maxHeight", "children"]);
+    return (react_1.default.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.default = exports.MenuList;

package/Menu/MenuSeparator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type MenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * The separator of the menu: not an option — it is not highlighted, selected or announced
+ * (a listbox may contain the options only, so it is hidden from the screen readers)
+ */
+export declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuSeparator;

package/Menu/MenuSeparator.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSeparator = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+/**
+ * The line between the groups of the items. The space around it separates the groups:
+ * a line flush with the items is not seen
+ */
+const StyledMenuSeparator = styled_1.default.div `
+  flex: none;
+  height: 1px;
+  margin: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'item');
+    return `${y} ${x}`;
+}};
+  background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.12).toString()};
+`;
+/**
+ * The separator of the menu: not an option — it is not highlighted, selected or announced
+ * (a listbox may contain the options only, so it is hidden from the screen readers)
+ */
+exports.MenuSeparator = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(StyledMenuSeparator, Object.assign({ role: "presentation", "aria-hidden": true }, props, { ref: ref }))));
+exports.MenuSeparator.displayName = 'MenuSeparator';
+exports.default = exports.MenuSeparator;

package/Menu/index.d.ts

@@ -5,6 +5,7 @@ export type AnchorPos = PopperAnchorPos;
 export * from './MenuContainer';
 export * from './MenuItem';
 export * from './MenuList';
+export * from './MenuSeparator';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
     ref?: React.Ref<MenuRef>;
 }) => React.ReactElement;

package/Menu/index.js

@@ -23,6 +23,7 @@ const MenuContainer_1 = __importDefault(require("./MenuContainer"));
 __exportStar(require("./MenuContainer"), exports);
 __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./MenuList"), exports);
+__exportStar(require("./MenuSeparator"), exports);
 const Menu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(context_1.MenuContextProvider, null,
     react_1.default.createElement(MenuContainer_1.default, Object.assign({}, props, { ref: ref })))));
 Menu.displayName = 'Menu';

package/Modal/BaseModal/ModalInner.js

@@ -25,7 +25,8 @@ const StyledModalInner = styled_1.default.div `
   pointer-events: all;
   position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
-  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
+  /* the themes made before the modal level keep the popup shadow for the windows */
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'modal', theme.elevation.popup)};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   margin-top: 2em;
   transition:

package/Modal/BaseModal/ModalWrapper.js

@@ -50,7 +50,9 @@ const ModalWrapper = props => {
         const container = containerRef.current;
         if (isOpen && container) {
             TabManager_1.default.registerContainer(container);
-            if (autofocus) {
+            // the content may focus its field itself (the effects of the children run first):
+            // the modal must not move the focus away from it to the next element
+            if (autofocus && !container.contains(document.activeElement)) {
                 TabManager_1.default.focusNext();
             }
         }

package/Pagination/PaginationItem.d.ts

@@ -21,7 +21,7 @@ export type PaginationItemProps = ButtonProps & {
     readonly soft?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
-    readonly variant?: "standard" | "outlined" | "plain";
+    readonly variant?: "standard" | "outlined" | "plain" | "soft";
 } & {
     /**
      * What the button does: opens a page or goes to the first, previous, next or last page

package/Stepper/Step.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export type StepState = 'completed' | 'active' | 'pending';
+export type StepProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The label of the step
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The small text under the label: «optional», «1 of 2», the time
+     */
+    readonly caption?: React.ReactNode;
+    /**
+     * The step is completed regardless of `activeStep` of the stepper
+     * (e.g. the payment came before the work)
+     */
+    readonly completed?: boolean;
+    /**
+     * The attention on the step: `warning` — something is not finished, `error` — something went wrong.
+     * Colors the icon of the step that is not completed
+     */
+    readonly status?: 'warning' | 'error';
+    /**
+     * Own icon instead of the number
+     */
+    readonly icon?: React.ReactNode;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * The label of the step
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The small text under the label: «optional», «1 of 2», the time
+     */
+    readonly caption?: React.ReactNode;
+    /**
+     * The step is completed regardless of `activeStep` of the stepper
+     * (e.g. the payment came before the work)
+     */
+    readonly completed?: boolean;
+    /**
+     * The attention on the step: `warning` — something is not finished, `error` — something went wrong.
+     * Colors the icon of the step that is not completed
+     */
+    readonly status?: "warning" | "error";
+    /**
+     * Own icon instead of the number
+     */
+    readonly icon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;