@feugene/granularity 0.13.0 → 0.18.0

package/dist/types/src/components/GrModal/GrModal.vue.d.ts

@@ -1,34 +1,80 @@
-import { type GrModalSize } from './grModalStyles';
+import { type GrModalScrollBehavior, type GrModalSize } from './grModalStyles';
+export type { GrModalScrollBehavior };
 export interface GrModalProps {
     modelValue: boolean;
     closeOnBackdrop?: boolean;
     closeOnEsc?: boolean;
     size?: GrModalSize;
+    /**
+     * Кто скроллится при длинном содержимом: весь оверлей (`outside`) или сама
+     * панель (`inside` — окно остаётся на месте, шапка и подвал на виду).
+     */
+    scrollBehavior?: GrModalScrollBehavior;
+    /**
+     * Доступное имя окна, когда заголовка в слоте `#title` нет. Слот сильнее:
+     * при нём имя даёт `aria-labelledby`.
+     */
+    ariaLabel?: string;
+    /**
+     * Элемент, получающий фокус при открытии. По умолчанию — сама панель: она
+     * фокусируема программно (`tabindex="-1"`), диктор объявляет окно целиком, а
+     * первый Tab приводит в начало содержимого.
+     */
+    initialFocus?: HTMLElement | null;
 }
-declare var __VLS_49: {}, __VLS_57: {}, __VLS_59: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_49) => any;
-} & {
-    description?: (props: typeof __VLS_57) => any;
-} & {
-    default?: (props: typeof __VLS_59) => any;
+export interface GrModalEmits {
+    (e: 'update:modelValue', value: boolean): void;
+    /** Окно открылось и анимация закончилась. */
+    (e: 'opened'): void;
+    /** Окно закрылось и анимация закончилась — содержимое можно размонтировать. */
+    (e: 'closed'): void;
+}
+import './defaults';
+type __VLS_Slots = {
+    default?: () => any;
+    title?: () => any;
+    description?: () => any;
+    /** Закреплённая шапка: при `inside` остаётся на месте, скроллится только тело. */
+    header?: () => any;
+    /** Закреплённый подвал: там же, где и шапка, — вне скроллящегося тела. */
+    footer?: () => any;
 };
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrModalProps>, {
     closeOnBackdrop: boolean;
     closeOnEsc: boolean;
-    size: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    size: undefined;
+    scrollBehavior: string;
+    ariaLabel: undefined;
+    initialFocus: null;
+}>>, {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
+    opened: () => void;
+    closed: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrModalProps>, {
     closeOnBackdrop: boolean;
     closeOnEsc: boolean;
-    size: string;
+    size: undefined;
+    scrollBehavior: string;
+    ariaLabel: undefined;
+    initialFocus: null;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
 }>, {
     size: GrModalSize;
-    closeOnBackdrop: boolean;
+    scrollBehavior: GrModalScrollBehavior;
+    ariaLabel: string;
+    initialFocus: HTMLElement | null;
     closeOnEsc: boolean;
+    closeOnBackdrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/src/components/GrModal/config.d.ts

@@ -1 +1 @@
-export declare const grModalConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrModal">;
+export declare const grModalConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrModal">;

package/dist/types/src/components/GrModal/context.d.ts

@@ -0,0 +1,37 @@
+import type { InjectionKey } from 'vue';
+export interface GrModalContext {
+    /** Id, который обязан оказаться на элементе заголовка окна. */
+    titleId: string;
+    /** Id, который обязан оказаться на элементе описания окна. */
+    descriptionId: string;
+    /** «Заголовок отрисован» — окно ставит `aria-labelledby`. Возвращает отказ от заявки. */
+    claimTitle: () => () => void;
+    /** То же для описания и `aria-describedby`. */
+    claimDescription: () => () => void;
+}
+export declare const GR_MODAL_CONTEXT_KEY: InjectionKey<GrModalContext>;
+export declare function provideGrModalContext(context: GrModalContext): void;
+/**
+ * Контекст окна для его частей.
+ *
+ * Именно контекст, а не проп: заголовок рисует `GrDialogHeader` — внук
+ * `GrModal` через слот, — а `aria-labelledby` стоит на корне окна.
+ *
+ * **Id принадлежит окну, а не заголовку.** Заголовок только сообщает, что
+ * отрисовался. Обратный порядок (id рождается у потомка и уезжает наверх)
+ * означает мутацию состояния окна во время его собственного патча: Vue уходит
+ * в рекурсивный ре-рендер и монтирует заголовок заново, пока не упрётся в
+ * лимит. Стабильный id этого класса ошибок не допускает по построению.
+ *
+ * `null` вне окна — законное состояние: `GrDialogHeader` используют и отдельно.
+ */
+export declare function useGrModalContext(): GrModalContext | null;
+/**
+ * Объявляет элемент заголовком окна, пока `active` истинно.
+ *
+ * Возвращает id для элемента — или `undefined` вне окна: тогда заголовок просто
+ * рисуется без связи.
+ */
+export declare function useGrModalTitle(active: () => boolean): {
+    titleId: string | undefined;
+};

package/dist/types/src/components/GrModal/defaults.d.ts

@@ -0,0 +1,14 @@
+import type { GrModalSize } from './grModalStyles';
+/**
+ * Пропы `GrModal`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrModal: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrModalConfigurableProps {
+    size: GrModalSize;
+}
+declare module '../../composables/useGrComponentConfig' {
+    interface GrComponentDefaultsRegistry {
+        GrModal: GrModalConfigurableProps;
+    }
+}

package/dist/types/src/components/GrModal/grModalStyles.d.ts

@@ -1,26 +1,41 @@
-export type GrModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+import type { GrOverlaySize } from '../shared/sizes';
+export type GrModalSize = GrOverlaySize;
+/**
+ * Кто скроллится при длинном содержимом: весь оверлей (`outside`, окно уезжает
+ * вверх вместе со страницей) или сама панель (`inside`, окно остаётся на месте,
+ * а шапка и подвал `GrDialog` — на виду).
+ */
+export type GrModalScrollBehavior = 'outside' | 'inside';
 export declare const root = "fixed inset-0 z-[var(--gr-z-modal)]";
-export declare const shell = "fixed inset-0 overflow-y-auto p-4 sm:p-6";
-export declare const layout = "min-h-full flex items-center justify-center";
-export declare const overlay = "fixed inset-0 z-0 bg-black/40";
+export declare const overlay = "fixed inset-0 z-0 bg-[var(--gr-overlay-bg)]";
+export declare const shellBase = "fixed inset-0";
+export declare const shellPaddingBySize: Record<GrModalSize, string>;
+export declare const shellByScroll: Record<GrModalScrollBehavior, string>;
+export declare const layoutByScroll: Record<GrModalScrollBehavior, string>;
 export declare const overlayTransition: {
-    readonly enter: "duration-200 ease-out";
+    readonly enter: "duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
     readonly enterFrom: "opacity-0";
     readonly enterTo: "opacity-100";
-    readonly leave: "duration-150 ease-in";
+    readonly leave: "duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]";
     readonly leaveFrom: "opacity-100";
     readonly leaveTo: "opacity-0";
 };
 export declare const panelTransition: {
-    readonly enter: "duration-200 ease-out";
+    readonly enter: "duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
     readonly enterFrom: "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95";
     readonly enterTo: "opacity-100 translate-y-0 sm:scale-100";
-    readonly leave: "duration-150 ease-in";
+    readonly leave: "duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]";
     readonly leaveFrom: "opacity-100 translate-y-0 sm:scale-100";
     readonly leaveTo: "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95";
 };
-export declare const panelBase = "w-full overflow-hidden relative z-10 border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] outline-none";
+export declare const panelBase = "w-full relative z-10 border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] outline-none";
+export declare const panelOverflowByScroll: Record<GrModalScrollBehavior, string>;
+/** Тело окна при `inside`. `min-h-0` — иначе flex-потомок не даст себя сжать. */
+export declare const panelBodyScrollClass = "min-h-0 overflow-y-auto";
+/** Шапка и подвал при `inside`: сжиматься должно тело, а не они. */
+export declare const panelSectionClass = "shrink-0";
 export declare const panelWidthBySize: Record<GrModalSize, string>;
 export declare const panelRadiusBySize: Record<GrModalSize, string>;
 export declare const panelHeightBySize: Partial<Record<GrModalSize, string>>;
-export declare function getGrModalPanelClass(size: GrModalSize): string;
+export declare function getGrModalPanelClass(size: GrModalSize, scrollBehavior?: GrModalScrollBehavior): string;
+export declare function getGrModalShellClass(size: GrModalSize, scrollBehavior: GrModalScrollBehavior): string;

package/dist/types/src/components/GrModal/index.d.ts

@@ -1,7 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrModalComponent from './GrModal.vue';
 export { default } from './GrModal.vue';
 export { default as GrModal } from './GrModal.vue';
 export type { GrModalProps } from './GrModal.vue';
 export { grModalConfig } from './config';
-export type { GrModalSize } from './grModalStyles';
-export { getGrModalPanelClass } from './grModalStyles';
-export { grModalClassTokens, grModalSafelist } from './safelist';
+export type { GrModalScrollBehavior, GrModalSize } from './grModalStyles';
+export { grModalSafelist } from './safelist';
+export type { GrModalEmits } from './GrModal.vue';
+export type GrModalInstance = ComponentExposed<typeof GrModalComponent>;

package/dist/types/src/components/GrNavbar/GrNavbar.vue.d.ts

@@ -1,34 +1,53 @@
 /**
- * GrNavbar — верхняя панель приложения (header) с заголовком,
- * опциональной кнопкой меню (обычно — для мобильных) и правым слотом
- * для действий/аватара.
+ * GrNavbar — верхняя панель приложения (header) с тремя зонами: слева заголовок
+ * и кнопка меню, по центру — свободная зона (поиск, хлебные крошки), справа —
+ * действия и аватар.
  *
  * - Корень — `<header>` (landmark), без собственного `role`.
  * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.
  */
 export interface GrNavbarProps {
-    title: string;
+    /** Заголовок строкой. Слот `#title` сильнее и позволяет обойтись без пропа. */
+    title?: string;
     showMenuButton?: boolean;
     /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */
     menuButtonClass?: string;
+    /**
+     * Панель прилипает к верху при прокрутке. Слой — `--gr-z-navbar`: он ниже
+     * якорных панелей, чтобы открытый список не уезжал под шапку.
+     */
+    sticky?: boolean;
+}
+export interface GrNavbarEmits {
+    (e: 'menu'): void;
 }
-declare var __VLS_20: {}, __VLS_22: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_20) => any;
-} & {
-    default?: (props: typeof __VLS_22) => any;
+type __VLS_Slots = {
+    /** Заголовок целиком — вместо строки `title`. */
+    title?: () => unknown;
+    /** Зона сразу после заголовка: вкладки, переключатель раздела. */
+    left?: () => unknown;
+    /** Центральная зона: поиск, хлебные крошки. */
+    center?: () => unknown;
+    /** Правая зона: действия, аватар. */
+    default?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrNavbarProps>, {
+    title: undefined;
     showMenuButton: boolean;
     menuButtonClass: string;
+    sticky: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     menu: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrNavbarProps>, {
+    title: undefined;
     showMenuButton: boolean;
     menuButtonClass: string;
+    sticky: boolean;
 }>>> & Readonly<{
     onMenu?: (() => any) | undefined;
 }>, {
+    title: string;
+    sticky: boolean;
     showMenuButton: boolean;
     menuButtonClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/src/components/GrNavbar/config.d.ts

@@ -1 +1 @@
-export declare const grNavbarConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrNavbar">;
+export declare const grNavbarConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrNavbar">;

package/dist/types/src/components/GrNavbar/grNavbarStyles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Кастомизация через CSS-переменные:
+ *
+ * - `--gr-navbar-height` — высота панели (по умолчанию `56px`).
+ */
+export declare const navbarBaseClass = "h-[var(--gr-navbar-height,56px)] border-b border-[var(--gr-brd)] bg-[var(--gr-bg)] flex items-center gap-4 px-4 sm:px-6";
+/**
+ * Прилипшая шапка идёт слоем ниже якорных панелей: она обязана перекрывать
+ * контент, но не выпадашки, тултипы и модалки — иначе открытый список уезжал бы
+ * под неё.
+ */
+export declare const navbarStickyClass = "sticky top-0 z-[var(--gr-z-navbar)]";
+export declare const navbarSideClass = "flex min-w-0 items-center gap-3";
+/**
+ * Центрировать содержимое относительно панели можно только когда боковые зоны
+ * делят остаток поровну: у центра с одним `flex-1` середина считается от
+ * остатка, а не от панели, и уезжает вслед за более широким боком.
+ */
+export declare const navbarSideGrowClass = "flex-1";
+export declare const navbarRightAlignClass = "justify-end";
+export declare const navbarCenterClass = "flex min-w-0 flex-1 items-center justify-center gap-3";
+export declare const navbarTitleClass = "text-[length:var(--gr-text-sm)] font-700";
+export declare function grNavbarRootClass(sticky: boolean): string;

package/dist/types/src/components/GrNavbar/index.d.ts

@@ -2,3 +2,5 @@ export { default } from './GrNavbar.vue';
 export { default as GrNavbar } from './GrNavbar.vue';
 export type { GrNavbarProps } from './GrNavbar.vue';
 export { grNavbarConfig } from './config';
+export { grNavbarSafelist } from './safelist';
+export type { GrNavbarEmits } from './GrNavbar.vue';

package/dist/types/src/components/GrNavbar/safelist.d.ts

@@ -0,0 +1 @@
+export declare const grNavbarSafelist: string[];

package/dist/types/src/components/GrNumberInput/GrNumberInput.vue.d.ts

@@ -1,14 +1,26 @@
 import type { InputHTMLAttributes } from 'vue';
 import { type GrNumberInputControlsDirection, type GrNumberInputSize, type GrNumberInputState, type GrNumberInputTextAlign } from './grNumberInputStyles';
 export interface GrNumberInputProps {
-    /** Значение (строка — контролируем форматирование внутри). */
-    modelValue: string;
+    /**
+     * Значение поля. `null` — пусто.
+     *
+     * Незавершённый ввод («-», «1,») числом не является и в модель не попадает:
+     * пока он набирается, поле держит его во внутреннем черновике, а модель
+     * честно говорит «числа пока нет».
+     */
+    modelValue: number | null;
     placeholder?: string;
     autocomplete?: string;
     inputmode?: InputHTMLAttributes['inputmode'];
     disabled?: boolean;
     /** Быстрый флаг невалидности; эквивалент `state='danger'` + `aria-invalid`. */
     invalid?: boolean;
+    /** Только для чтения: значение видно и уходит в форму, но не редактируется. */
+    readonly?: boolean;
+    /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */
+    required?: boolean;
+    /** Доступное имя вне `GrFormField`. */
+    ariaLabel?: string;
     state?: GrNumberInputState;
     name?: string;
     id?: string;
@@ -19,6 +31,10 @@ export interface GrNumberInputProps {
     min?: number;
     max?: number;
     precision?: number;
+    /** Кнопка очистки значения. */
+    clearable?: boolean;
+    /** A11y-подпись кнопки очистки. */
+    clearLabel?: string;
     /**
      * BCP-47 локаль для отображения значения (группировка разрядов и разделители
      * через `Intl.NumberFormat`). Работает вместе с `useGrouping`.
@@ -48,19 +64,31 @@ export interface GrNumberInputProps {
     /** i18n-friendly aria-label для кнопки "уменьшить". */
     decreaseLabel?: string;
 }
-declare function focus(): void;
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_1) => any;
-} & {
-    suffix?: (props: typeof __VLS_3) => any;
+export interface GrNumberInputEmits {
+    (e: 'update:modelValue', value: number | null): void;
+    (e: 'change', value: number | null): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    /** Значение стёрто кнопкой очистки. */
+    (e: 'clear'): void;
+}
+type __VLS_Slots = {
+    /** Аддон слева от поля: знак валюты, иконка. */
+    prefix?: () => any;
+    /** Аддон справа от поля: единица измерения. */
+    suffix?: () => any;
 };
+declare function focus(): void;
+declare function blur(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrNumberInputProps>, {
     placeholder: undefined;
     autocomplete: undefined;
     inputmode: string;
     disabled: boolean;
     invalid: boolean;
+    readonly: boolean;
+    required: boolean;
+    ariaLabel: undefined;
     state: string;
     name: undefined;
     id: undefined;
@@ -73,6 +101,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     precision: undefined;
     locale: undefined;
     useGrouping: boolean;
+    clearable: undefined;
+    clearLabel: undefined;
     controls: boolean;
     controlsDirection: string;
     prefixMinWidth: undefined;
@@ -85,15 +115,22 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     decreaseLabel: undefined;
 }>>, {
     focus: typeof focus;
+    blur: typeof blur;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => void;
-    change: (value: string) => void;
+    "update:modelValue": (value: number | null) => void;
+    change: (value: number | null) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+    clear: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrNumberInputProps>, {
     placeholder: undefined;
     autocomplete: undefined;
     inputmode: string;
     disabled: boolean;
     invalid: boolean;
+    readonly: boolean;
+    required: boolean;
+    ariaLabel: undefined;
     state: string;
     name: undefined;
     id: undefined;
@@ -106,6 +143,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     precision: undefined;
     locale: undefined;
     useGrouping: boolean;
+    clearable: undefined;
+    clearLabel: undefined;
     controls: boolean;
     controlsDirection: string;
     prefixMinWidth: undefined;
@@ -117,30 +156,38 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     increaseLabel: undefined;
     decreaseLabel: undefined;
 }>>> & Readonly<{
-    onChange?: ((value: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: number | null) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     size: GrNumberInputSize;
+    clearable: boolean;
+    readonly: boolean;
+    name: string;
     invalid: boolean;
     id: string;
     max: number;
     min: number;
-    name: string;
     textAlign: GrNumberInputTextAlign;
     disabled: boolean;
+    required: boolean;
     placeholder: string;
-    autocomplete: string;
-    inputmode: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal";
-    state: GrNumberInputState;
+    ariaLabel: string;
+    clearLabel: string;
     prefixMinWidth: string;
     prefixMaxWidth: string;
     suffixMinWidth: string;
     suffixMaxWidth: string;
     prefixFixed: boolean;
     suffixFixed: boolean;
+    autocomplete: string;
+    step: number;
+    inputmode: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal";
+    state: GrNumberInputState;
     locale: string;
     decimalSeparator: string;
-    step: number;
     precision: number;
     useGrouping: boolean;
     controls: boolean;

package/dist/types/src/components/GrNumberInput/config.d.ts

@@ -1 +1 @@
-export declare const grNumberInputConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrNumberInput">;
+export declare const grNumberInputConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrNumberInput">;

package/dist/types/src/components/GrNumberInput/defaults.d.ts

@@ -6,8 +6,9 @@ import type { GrNumberInputSize } from './grNumberInputStyles';
  */
 export interface GrNumberInputConfigurableProps {
     size: GrNumberInputSize;
+    clearable: boolean;
 }
-declare module '../GrConfigProvider/context' {
+declare module '../../composables/useGrComponentConfig' {
     interface GrComponentDefaultsRegistry {
         GrNumberInput: GrNumberInputConfigurableProps;
     }

package/dist/types/src/components/GrNumberInput/grNumberInputStyles.d.ts

@@ -1,5 +1,6 @@
-export type GrNumberInputState = 'default' | 'success' | 'warning' | 'danger';
-export type GrNumberInputSize = 'xs' | 'sm' | 'md' | 'lg';
+import type { GrComponentSize, GrControlState } from '../shared/sizes';
+export type GrNumberInputState = GrControlState;
+export type GrNumberInputSize = GrComponentSize;
 export type GrNumberInputControlsDirection = 'vertical' | 'horizontal';
 export type GrNumberInputTextAlign = 'left' | 'center' | 'right';
 export type NumberInputSize = GrNumberInputSize;
@@ -7,11 +8,26 @@ export type NumberInputControlsDirection = GrNumberInputControlsDirection;
 export declare const sizeClassBySize: Record<GrNumberInputSize, string>;
 export declare const textAlignClassByAlign: Record<GrNumberInputTextAlign, string>;
 export declare const borderClassByState: Record<GrNumberInputState, string>;
-/** Динамические классы для disabled-состояния shell'а — выбираются в рантайме. */
-export declare const disabledShellClass = "opacity-50 cursor-not-allowed";
+/**
+ * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+ * `state="danger"` — это подсветка по решению разработчика, `invalid` — вердикт
+ * валидации, и тема вправе развести их по цвету.
+ */
+export declare const invalidBorderClass = "border-[var(--gr-invalid-brd)] focus-within:ring-[var(--gr-invalid-ring)]";
+/**
+ * Недоступное поле гасится токенами, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста и роняет контраст подписи.
+ */
+export declare const disabledShellClass = "bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)] cursor-not-allowed";
+/** Компактная кнопка вертикального стека ± . */
+export declare const stepperCompactClass = "h-4 w-7 rounded-[var(--gr-radius-sm)] inline-flex items-center justify-center text-[var(--gr-muted-fg)] hover:bg-[var(--gr-muted)] active:bg-[var(--gr-muted)] disabled:cursor-not-allowed disabled:text-[var(--gr-disabled-fg)] disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/** Кнопка бокового стека ± — занимает всю высоту поля. */
+export declare const stepperWideClass = "h-full w-full inline-flex items-center justify-center text-[var(--gr-muted-fg)] hover:bg-[var(--gr-muted)] active:bg-[var(--gr-muted)] disabled:cursor-not-allowed disabled:text-[var(--gr-disabled-fg)] disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const clearButtonClass = "absolute top-1/2 -translate-y-1/2 inline-flex h-5 w-5 items-center justify-center rounded-[var(--gr-radius-full)] text-[var(--gr-muted-fg)] hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
 export declare function grNumberInputShellClass(options: {
     disabled: boolean;
     state: GrNumberInputState;
+    invalid: boolean;
 }): string;
 export declare function grNumberInputInputClass(options: {
     size: GrNumberInputSize;

package/dist/types/src/components/GrNumberInput/index.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrNumberInputComponent from './GrNumberInput.vue';
 export { default } from './GrNumberInput.vue';
 export { default as GrNumberInput } from './GrNumberInput.vue';
 export { grNumberInputConfig } from './config';
@@ -5,3 +7,5 @@ export type { GrNumberInputConfigurableProps } from './defaults';
 export { grNumberInputSafelist } from './safelist';
 export type { GrNumberInputProps } from './GrNumberInput.vue';
 export type { GrNumberInputControlsDirection, GrNumberInputSize, GrNumberInputState, GrNumberInputTextAlign, NumberInputControlsDirection, NumberInputSize, } from './grNumberInputStyles';
+export type { GrNumberInputEmits } from './GrNumberInput.vue';
+export type GrNumberInputInstance = ComponentExposed<typeof GrNumberInputComponent>;

package/dist/types/src/components/GrNumberInput/numberInputMath.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Экспоненциальная запись разбирается отдельно: `String(1e-7)` — это `"1e-7"`,
+ * и поиск точки насчитал бы ноль знаков, после чего округление съело бы всё
+ * значение.
+ */
+export declare function decimalsOf(value: number): number;
+/**
+ * Двоичная дробь копит ошибку, поэтому сумма округляется. Разрядность — по
+ * большему из операндов: шаг `0.5` от значения `1.25` обязан дать `1.75`.
+ */
+export declare function addStep(current: number, step: number): number;
+/**
+ * Правило `GrSlider` (`bigStep` в `GrSlider.vue`): десять шагов либо десятая
+ * часть диапазона — что крупнее. У поля границы необязательны, и без них
+ * диапазона не существует.
+ */
+export declare function bigStep(step: number, min?: number, max?: number): number;