@feugene/granularity 0.12.0 → 0.16.0

package/dist/types/src/components/GrResponseErrorBanner/parsers/httpStatusParser.d.ts

@@ -10,6 +10,8 @@ import type { ResponseErrorParser } from '../responseError.types';
  * Не использует `stop` — даёт более специализированным парсерам
  * (Laravel/JSON:API/RFC 7807) уточнить сообщение и `fieldErrors`.
  *
- * `message` берёт из `ctx.texts` как осмысленный фолбэк.
+ * `message` **не** заполняет: общий текст по `kind` — работа классификатора,
+ * который помечает такое сообщение `isFallbackMessage`. Только по этому флагу
+ * баннер вправе заменить текст переводом.
  */
 export declare const httpStatusParser: ResponseErrorParser;

package/dist/types/src/components/GrResponseErrorBanner/parsers/plainMessageParser.d.ts

@@ -7,7 +7,10 @@ import type { ResponseErrorParser } from '../responseError.types';
  * 1. `ctx.body` — если строка ⇒ message,
  * 2. `ctx.body[messageKey]` (default `'message'`),
  * 3. `ctx.body.error` (строка),
- * 4. `ctx.raw.message` (для голых `Error`).
+ * 4. `ctx.raw.message` — **только когда ответа не было вовсе** (нет ни статуса,
+ *    ни тела). Иначе это строка транспорта (`Request failed with status 500` у
+ *    axios), а не сообщение сервера: пользователь получил бы техническую фразу
+ *    на английском вместо переведённого текста по `kind`.
  *
  * Не выставляет `kind` — оставляет на усмотрение классификатора.
  * Использует ключ `messageKey` из `ctx.meta._messageKey`, если задан.

package/dist/types/src/components/GrResponseErrorBanner/responseError.types.d.ts

@@ -1,3 +1,4 @@
+import type { GrTone } from '../shared/tones';
 /**
  * Универсальные типы для отображения ошибок ответа сервера/сети.
  *
@@ -20,8 +21,8 @@
  * - `unknown`     — ничего не сматчилось, fallback.
  */
 export type ResponseErrorKind = 'network' | 'aborted' | 'validation' | 'client' | 'server' | 'unknown';
-/** Визуальный тон баннера. Совпадает с `tone` у `GrAlert`. */
-export type ResponseErrorTone = 'info' | 'success' | 'warning' | 'danger' | 'slate' | 'azure' | 'primary' | 'neutral';
+/** Визуальный тон баннера — та же шкала, что у всех компонентов пакета. */
+export type ResponseErrorTone = GrTone;
 /** Ошибка по конкретному полю (Laravel-style / JSON:API pointer / RFC 7807 errors). */
 export type ResponseErrorFieldError = {
     /** Имя поля. Для Laravel — ключ из `errors`. Для JSON:API — последний сегмент `source.pointer`. */
@@ -46,6 +47,13 @@ export type ResponseErrorInfo = {
     raw: unknown;
     /** Произвольный контекст, переданный потребителем (например, `{ files }`). */
     meta?: Record<string, unknown>;
+    /**
+     * `message` не пришёл ни от одного парсера, и классификатор подставил свой
+     * текст по `kind`. Флаг нужен баннеру: только такое сообщение он вправе
+     * заменить переводом. Опознание фолбэка сравнением строк давало ложное
+     * срабатывание на сервере, вернувшем дословно тот же текст.
+     */
+    isFallbackMessage?: boolean;
 };
 /**
  * Нормализованный «сырой» результат запроса. Заполняется `normalizeError`
@@ -110,6 +118,8 @@ export type ResponseErrorTexts = {
     serverMessage: string;
     unknownTitle: string;
     unknownMessage: string;
+    /** Подпись бейджа HTTP-статуса. `{status}` подставляется компонентом. */
+    statusLabel: string;
     retryLabel: string;
     dismissLabel: string;
 };

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

@@ -1,4 +1,4 @@
-import { type GrSegmentedOption, type GrSegmentedSize, type GrSegmentedValue, type GrSegmentedVariant } from './grSegmentedStyles';
+import { type GrSegmentedOption, type GrSegmentedOrientation, type GrSegmentedSize, type GrSegmentedValue, type GrSegmentedVariant } from './grSegmentedStyles';
 /**
  * Пропсы публичного GR-примитива «Segmented».
  */
@@ -7,52 +7,91 @@ export interface GrSegmentedProps {
     options: GrSegmentedOption[];
     variant?: GrSegmentedVariant;
     size?: GrSegmentedSize;
+    /**
+     * Направление ряда. Вертикаль — боковые фильтры; индикатор к ней готов по
+     * построению, он двумерный.
+     */
+    orientation?: GrSegmentedOrientation;
     /** Длительность анимации индикатора в мс. */
     indicatorDuration?: number;
     /** Растягивать сегмент на всю ширину контейнера. */
     block?: boolean;
     disabled?: boolean;
+    /** Только для чтения: выбор видно, но он не меняется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     /** Имя скрытых radio-inputs для интеграции с нативной формой. */
     name?: string;
     ariaLabel?: string;
 }
-declare var __VLS_1: {
-    option: GrSegmentedOption;
-    selected: boolean;
-    disabled: boolean;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+export interface GrSegmentedEmits {
+    (e: 'update:modelValue', value: GrSegmentedValue): void;
+    (e: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+type __VLS_Slots = {
+    /** Содержимое сегмента вместо подписи из `options`. */
+    default?: (props: {
+        option: GrSegmentedOption;
+        selected: boolean;
+        disabled: boolean;
+        loading: boolean;
+    }) => any;
 };
+declare function focus(): void;
+declare function blur(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSegmentedProps>, {
-    variant: string;
-    size: string;
+    variant: undefined;
+    size: undefined;
+    orientation: string;
     indicatorDuration: number;
     block: boolean;
     disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
     name: undefined;
     ariaLabel: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: GrSegmentedValue) => void;
     change: (value: GrSegmentedValue, option: GrSegmentedOption) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSegmentedProps>, {
-    variant: string;
-    size: string;
+    variant: undefined;
+    size: undefined;
+    orientation: string;
     indicatorDuration: number;
     block: boolean;
     disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
     name: undefined;
     ariaLabel: undefined;
 }>>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: GrSegmentedValue) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onChange?: ((value: GrSegmentedValue, option: GrSegmentedOption) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: GrSegmentedValue) => any) | undefined;
 }>, {
     variant: GrSegmentedVariant;
     size: GrSegmentedSize;
-    disabled: boolean;
-    ariaLabel: string;
+    orientation: GrSegmentedOrientation;
+    readonly: boolean;
     name: string;
+    invalid: boolean;
     block: boolean;
+    disabled: boolean;
+    required: boolean;
+    ariaLabel: string;
     indicatorDuration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

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

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

@@ -0,0 +1,15 @@
+import type { GrSegmentedSize, GrSegmentedVariant } from './grSegmentedStyles';
+/**
+ * Пропы `GrSegmented`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrSegmented: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrSegmentedConfigurableProps {
+    size: GrSegmentedSize;
+    variant: GrSegmentedVariant;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrSegmented: GrSegmentedConfigurableProps;
+    }
+}

package/dist/types/src/components/GrSegmented/grSegmentedStyles.d.ts

@@ -1,34 +1,59 @@
+import type { GrComponentSize } from '../shared/sizes';
 import type { Component } from 'vue';
 export type GrSegmentedVariant = 'pills' | 'button';
-export type GrSegmentedSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrSegmentedSize = GrComponentSize;
+/** Направление ряда сегментов. Вертикаль — боковые фильтры. */
+export declare const GR_SEGMENTED_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type GrSegmentedOrientation = typeof GR_SEGMENTED_ORIENTATIONS[number];
 export type GrSegmentedValue = string | number;
 export type GrSegmentedOption = {
     value: GrSegmentedValue;
     label?: string;
     icon?: Component;
     disabled?: boolean;
+    /**
+     * Сегмент занят: вместо иконки крутится спиннер, выбор не принимается.
+     * От `disabled` отличается смыслом — сегмент доступен, но сейчас работает.
+     */
+    loading?: boolean;
+    /**
+     * Доступное имя сегмента. Обязательно для icon-only опций: иконка декоративна
+     * (`aria-hidden`), и без этого у сегмента нет имени вовсе — скринридер объявит
+     * пустую кнопку. Когда есть `label`, имя берётся из него, и поле не нужно.
+     */
+    ariaLabel?: string;
 };
-export declare const rootBaseClass = "relative inline-grid min-w-0 grid-flow-col items-stretch rounded-[var(--gr-segmented-radius)] p-[var(--gr-segmented-padding)] transition-colors duration-150";
+export declare const rootBaseClass = "relative inline-grid min-w-0 items-stretch rounded-[var(--gr-segmented-radius)] p-[var(--gr-segmented-padding)] transition-colors duration-[var(--gr-duration-fast)]";
+/** Направление потока: остальную раскладку задают `gridTemplate*` в стиле корня. */
+export declare const rootOrientationClassMap: Record<GrSegmentedOrientation, string>;
 export declare const rootVariantClassMap: Record<GrSegmentedVariant, string>;
 export declare const rootBlockClass = "w-full";
-export declare const indicatorBaseClass = "pointer-events-none absolute left-0 top-0 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] transition-[transform,width,height,opacity] ease-out";
+export declare const rootDisabledClass = "text-[var(--gr-disabled-fg)]";
+export declare const indicatorBaseClass = "pointer-events-none absolute left-0 top-0 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] transition-[transform,width,height,opacity] ease-[var(--gr-ease-out)]";
 export declare const indicatorVariantClassMap: Record<GrSegmentedVariant, string>;
-export declare const itemBaseClass = "group/segmented-item relative z-[1] inline-flex min-h-[var(--gr-segmented-min-height)] min-w-0 items-center justify-center gap-2 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] px-[var(--gr-segmented-item-px)] py-[var(--gr-segmented-item-py)] text-[length:var(--gr-segmented-font-size)] leading-[var(--gr-segmented-line-height)] font-[var(--gr-segmented-font-weight)] text-[var(--gr-segmented-item-color)] transition-colors duration-150 select-none focus:outline-none focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]";
+export declare const itemBaseClass = "group/segmented-item relative z-[1] inline-flex min-h-[var(--gr-segmented-min-height)] min-w-0 items-center justify-center gap-2 rounded-[calc(var(--gr-segmented-radius)-var(--gr-segmented-padding))] px-[var(--gr-segmented-item-px)] py-[var(--gr-segmented-item-py)] text-[length:var(--gr-segmented-font-size)] leading-[var(--gr-segmented-line-height)] font-[var(--gr-segmented-font-weight)] text-[var(--gr-segmented-item-color)] transition-colors duration-[var(--gr-duration-fast)] select-none focus:outline-none focus-visible:shadow-[0_0_0_2px_var(--gr-ring),0_0_0_4px_var(--gr-bg)]";
 export declare const itemVariantClassMap: Record<GrSegmentedVariant, string>;
 export declare const itemSelectedClass = "text-[var(--gr-segmented-item-selected-color)]";
-export declare const itemDisabledClass = "cursor-not-allowed opacity-50";
+/**
+ * Недоступный сегмент гасится токеном, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста и роняет контраст подписи.
+ */
+export declare const itemDisabledClass = "cursor-not-allowed text-[var(--gr-disabled-fg)]";
 export declare const itemEnabledClass = "cursor-pointer hover:text-[var(--gr-segmented-item-hover-color)]";
 export declare const itemLabelClass = "truncate";
 export declare const itemIconClass = "h-4 w-4 shrink-0";
+export declare const itemSpinnerClass = "h-4 w-4 shrink-0 animate-spin";
 export declare const iconOnlyClass = "gap-0";
 export declare function grSegmentedRootClass(options: {
     variant: GrSegmentedVariant;
+    orientation: GrSegmentedOrientation;
     block: boolean;
     disabled: boolean;
 }): string;
 export declare function grSegmentedRootStyle(options: {
     variant: GrSegmentedVariant;
     size: GrSegmentedSize;
+    orientation: GrSegmentedOrientation;
 }): Record<string, string>;
 export declare function grSegmentedIndicatorClass(variant: GrSegmentedVariant): string;
 export declare function grSegmentedItemClass(options: {
@@ -39,3 +64,4 @@ export declare function grSegmentedItemClass(options: {
 }): string;
 export declare const grSegmentedItemLabelClass = "truncate";
 export declare const grSegmentedItemIconClass = "h-4 w-4 shrink-0";
+export declare const grSegmentedItemSpinnerClass = "h-4 w-4 shrink-0 animate-spin";

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

@@ -1,6 +1,11 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrSegmentedComponent from './GrSegmented.vue';
 export { default } from './GrSegmented.vue';
 export { default as GrSegmented } from './GrSegmented.vue';
 export { grSegmentedConfig } from './config';
-export type { GrSegmentedOption, GrSegmentedSize, GrSegmentedValue, GrSegmentedVariant, } from './grSegmentedStyles';
+export type { GrSegmentedConfigurableProps } from './defaults';
+export { GR_SEGMENTED_ORIENTATIONS, type GrSegmentedOption, type GrSegmentedOrientation, type GrSegmentedSize, type GrSegmentedValue, type GrSegmentedVariant, } from './grSegmentedStyles';
 export type { GrSegmentedProps } from './GrSegmented.vue';
 export { grSegmentedSafelist } from './safelist';
+export type { GrSegmentedEmits } from './GrSegmented.vue';
+export type GrSegmentedInstance = ComponentExposed<typeof GrSegmentedComponent>;

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

@@ -1,7 +1,9 @@
 export declare const grSegmentedClassTokens: {
     readonly rootBaseClass: string[];
+    readonly rootOrientationClassMap: string[];
     readonly rootVariantClassMap: string[];
     readonly rootBlockClass: string[];
+    readonly rootDisabledClass: string[];
     readonly indicatorBaseClass: string[];
     readonly indicatorVariantClassMap: string[];
     readonly itemBaseClass: string[];
@@ -11,7 +13,7 @@ export declare const grSegmentedClassTokens: {
     readonly itemEnabledClass: string[];
     readonly itemLabelClass: string[];
     readonly itemIconClass: string[];
+    readonly itemSpinnerClass: string[];
     readonly iconOnlyClass: string[];
-    readonly extra: string[];
 };
 export declare const grSegmentedSafelist: string[];

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

@@ -1,13 +1,32 @@
-import { type GrSelectModelValue, type GrSelectOption, type GrSelectOptionOrGroup, type GrSelectOptionsView, type GrSelectSize, type GrSelectUnderline, type GrSelectVariant, type GrSelectView } from './grSelectStyles';
-export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectSize, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './grSelectStyles';
+import type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge/grBadgeStyles';
+import { type GrSelectState, type GrSelectModelValue, type GrSelectValue, type GrSelectOption, type GrSelectOptionOrGroup, type GrSelectOptionsView, type GrSelectSize, type GrSelectUnderline, type GrSelectVariant, type GrSelectView } from './grSelectStyles';
+export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectSize, GrSelectState, GrSelectUnderline, GrSelectValue, GrSelectVariant, GrSelectView, } from './grSelectStyles';
 /**
  * Пропсы публичного GR-примитива «Select».
  */
-export interface GrSelectProps {
-    modelValue: GrSelectModelValue;
+export interface GrSelectProps<TValue extends GrSelectValue = string> {
+    modelValue: GrSelectModelValue<TValue>;
     /** Список опций. Поддерживает плоский массив опций и группы опций (`{ label, options }`). */
-    options?: GrSelectOptionOrGroup[];
+    options?: GrSelectOptionOrGroup<TValue>[];
     disabled?: boolean;
+    /** Только для чтения: значение видно и уходит в форму, но не меняется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /**
+     * Визуальный оттенок рамки: `default | success | warning | danger`. `invalid`
+     * сильнее — ошибка перекрывает любую другую подсветку. В `view="link"` рамки
+     * нет, и состояние туда не применяется.
+     */
+    state?: GrSelectState;
+    /**
+     * Имя поля-идентификатора, когда значения опций — объекты. Без него объекты
+     * сравнивались бы по ссылке, и пришедшая снаружи копия с тем же `id` не
+     * совпала бы ни с одной опцией.
+     */
+    valueKey?: string;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     ariaLabel?: string;
     view?: GrSelectView;
     size?: GrSelectSize;
@@ -15,16 +34,63 @@ export interface GrSelectProps {
     placeholder?: string;
     /** Multiple selection. */
     multiple?: boolean;
+    /**
+     * Вид чипов выбранных значений в режиме `multiple`. Чип — это `GrBadge`: своя
+     * плашка на светлой теме почти не отличалась от фона поля.
+     */
+    tagTone?: GrBadgeTone;
+    tagDark?: boolean;
+    tagSize?: GrBadgeSize;
+    tagRadius?: GrBadgeRadius;
     /** Как отображать список опций: нативный `<select>` или кастомная панель. */
     optionsView?: GrSelectOptionsView;
     /** Разрешает ввод/выбор значения, которого нет в `options`. */
     allowCustomValue?: boolean;
+    /**
+     * Поиск/фильтрация опций по вводу (независимо от `allowCustomValue`). Показывает
+     * поле поиска над списком и фильтрует опции. Работает только в `optionsView="panel"`
+     * (при `native` панель форсится автоматически).
+     */
+    filterable?: boolean;
+    /** Placeholder поля поиска (`filterable`). i18n: fallback `gr.select.searchPlaceholder`. */
+    filterPlaceholder?: string;
+    /**
+     * Текст поиска как контролируемое значение (`v-model:search`). Без него
+     * `loading` был декоративным: набранное пользователем наружу не выходило, и
+     * сходить за опциями на сервер было не с чем.
+     */
+    search?: string;
+    /**
+     * Состояние загрузки: вместо списка опций панель показывает индикатор загрузки.
+     * Полезно для удалённой подгрузки опций. Форсит `optionsView="panel"`.
+     */
+    loading?: boolean;
+    /** Текст индикатора загрузки. i18n: fallback `gr.select.loading`. */
+    loadingText?: string;
+    /** Текст пустого результата фильтрации. i18n: fallback `gr.select.noResults`. */
+    noResultsText?: string;
+    /**
+     * Режим тегов для `multiple`: выбранные значения показываются как удаляемые
+     * chips в триггере (вместо строки «a, b, c»). Форсит `optionsView="panel"`.
+     */
+    tags?: boolean;
     /** Placeholder для инпута кастомного значения (только в `optionsView="panel"`). i18n-friendly: если не задан — берётся из адаптера перевода (`gr.select.customValuePlaceholder`), иначе — встроенный fallback. */
     customValuePlaceholder?: string;
     /** Максимальная высота панели (только в `optionsView="panel"`). */
     dropdownMaxHeight?: number;
+    /**
+     * Виртуализация панели: в DOM живёт только окно вокруг вьюпорта. Высоту окна
+     * задаёт `dropdownMaxHeight`.
+     *
+     * Только для `optionsView="panel"`: у нативного `<select>` панели нет вовсе.
+     * Несовместим с `view="link"` — там ширина панели равна ширине отрисованной
+     * опции и прыгала бы при прокрутке.
+     */
+    virtual?: boolean;
     /** Закрывать панель после выбора (только в `optionsView="panel"`). */
     closeOnSelect?: boolean;
+    /** Сколько chips показать до сворачивания в «+N» (только `tags`). */
+    maxTagCount?: number;
     /** Разрешает очистку выбранного значения. */
     clearable?: boolean;
     /** i18n-label для кнопки очистки (`aria-label`). */
@@ -39,101 +105,99 @@ export interface GrSelectProps {
      * В `view="default"` не используется.
      */
     underline?: GrSelectUnderline;
+    /**
+     * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт
+     * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.
+     * Только для `optionsView="panel"`: у нативного `<select>` панель браузерная.
+     */
+    open?: boolean;
+    /**
+     * Имя для нативной формы: в native-режиме уходит на сам `<select>`, в
+     * panel-режиме значения сериализуются hidden-инпутами (ключ — `keyOf`).
+     */
+    name?: string;
+    /**
+     * Ширины аддонов `prefix`/`suffix` — общий контракт контролов пакета
+     * (`docs/form-controls.md`). Аддоны живут в панельном триггере: внутрь
+     * нативного `<select>` разметку положить нельзя.
+     */
+    prefixMinWidth?: string;
+    prefixMaxWidth?: string;
+    suffixMinWidth?: string;
+    suffixMaxWidth?: string;
+    prefixFixed?: boolean;
+    suffixFixed?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {
-    selectedOptions: GrSelectOption[];
-    selectedValues: string[];
-    displayLabel: string;
-    placeholder: string | undefined;
-    hasSelection: boolean;
-}, __VLS_26: {
-    option: GrSelectOption;
-    selected: boolean;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    value?: (props: typeof __VLS_3) => any;
-} & {
-    option?: (props: typeof __VLS_26) => any;
+export interface GrSelectEmits<TValue extends GrSelectValue = string> {
+    (e: 'update:modelValue', value: GrSelectModelValue<TValue>): void;
+    /** Значение изменилось — тот же payload, что у `update:modelValue`. */
+    (e: 'change', value: GrSelectModelValue<TValue>): void;
+    /** Значение снято кнопкой очистки. */
+    (e: 'clear'): void;
+    /** Панель открылась/закрылась (`v-model:open`). */
+    (e: 'update:open', value: boolean): void;
+    /**
+     * Панель открылась/закрылась.
+     * @deprecated Используйте `update:open` (`v-model:open`); алиас будет снят после 1.0.
+     */
+    (e: 'visibleChange', visible: boolean): void;
+    /** Текст поиска как контролируемое значение (`v-model:search`). */
+    (e: 'update:search', value: string): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    /** Пользователь набрал запрос — сигнал сходить за опциями. */
+    (e: 'search', value: string): void;
+}
+declare const __VLS_export: <TValue extends GrSelectValue = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & __VLS_PrettifyLocal<GrSelectProps<TValue> & {
+        onSearch?: ((value: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: GrSelectModelValue<TValue>) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GrSelectModelValue<TValue>) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onVisibleChange?: ((visible: boolean) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+        blur: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Собственные `<option>` для нативного режима. */
+        default?: () => any;
+        /** Аддон слева в панельном триггере (в нативном режиме недоступен). */
+        prefix?: () => any;
+        /** Аддон справа в панельном триггере, перед крестиком и шевроном. */
+        suffix?: () => any;
+        /** Отображение значения в триггере вместо текста по умолчанию. */
+        value?: (props: {
+            selectedOptions: GrSelectOption<TValue>[];
+            selectedValues: TValue[];
+            displayLabel: string;
+            placeholder?: string;
+            hasSelection: boolean;
+        }) => any;
+        /** Строка списка вместо подписи опции. */
+        option?: (props: {
+            option: GrSelectOption<TValue>;
+            selected: boolean;
+        }) => any;
+        /** Содержимое панели, пока едут опции. */
+        loading?: () => any;
+        /** Содержимое панели, когда подходящих опций нет. */
+        empty?: () => any;
+    };
+    emit: GrSelectEmits<TValue>;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSelectProps>, {
-    options: undefined;
-    disabled: boolean;
-    ariaLabel: undefined;
-    view: string;
-    size: string;
-    placeholder: undefined;
-    multiple: boolean;
-    optionsView: string;
-    allowCustomValue: boolean;
-    customValuePlaceholder: undefined;
-    dropdownMaxHeight: number;
-    closeOnSelect: boolean;
-    clearable: boolean;
-    clearLabel: undefined;
-    variant: string;
-    underline: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: GrSelectModelValue) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSelectProps>, {
-    options: undefined;
-    disabled: boolean;
-    ariaLabel: undefined;
-    view: string;
-    size: string;
-    placeholder: undefined;
-    multiple: boolean;
-    optionsView: string;
-    allowCustomValue: boolean;
-    customValuePlaceholder: undefined;
-    dropdownMaxHeight: number;
-    closeOnSelect: boolean;
-    clearable: boolean;
-    clearLabel: undefined;
-    variant: string;
-    underline: string;
-}>>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: GrSelectModelValue) => any) | undefined;
-}>, {
-    variant: GrSelectVariant;
-    view: GrSelectView;
-    size: GrSelectSize;
-    disabled: boolean;
-    ariaLabel: string;
-    placeholder: string;
-    clearable: boolean;
-    clearLabel: string;
-    options: GrSelectOptionOrGroup[];
-    underline: GrSelectUnderline;
-    multiple: boolean;
-    optionsView: GrSelectOptionsView;
-    allowCustomValue: boolean;
-    customValuePlaceholder: string;
-    dropdownMaxHeight: number;
-    closeOnSelect: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<Required<T>[K]>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/types/src/components/GrSelect/composables/useSelectNavigation.d.ts

@@ -0,0 +1,52 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { GrSelectOption, GrSelectValue } from '../grSelectStyles';
+import type { GrSelectPanelItem } from './useSelectPanelItems';
+/**
+ * Клавиатура ходит и по опциям, и по строке «Add …» (как в `GrAutocomplete`):
+ * иначе при непустом списке Enter не мог бы выбрать подсвеченную опцию, а при
+ * активной опции — закоммитить произвольное значение.
+ */
+export type GrSelectNavigableItem<TValue extends GrSelectValue> = {
+    kind: 'add';
+} | {
+    kind: 'option';
+    value: TValue;
+    index: number;
+};
+export interface UseSelectNavigationOptions<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    isSelected: (value: TValue) => boolean;
+    open: Ref<boolean>;
+    locked: ComputedRef<boolean>;
+    showSearchInput: ComputedRef<boolean>;
+    virtualEnabled: ComputedRef<boolean>;
+    addOffset: ComputedRef<number>;
+    listboxId: string;
+    optionDomId: (index: number) => string;
+    /** Подвинуть окно виртуализации к строке набора. */
+    scrollVirtualToIndex: (index: number) => void;
+    /** Действия выбора: они трогают модель и эмиты, поэтому живут в компоненте. */
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    addCustom: () => void;
+    toggleValue: (value: TValue) => void;
+}
+export interface SelectNavigation<TValue extends GrSelectValue> {
+    navigableItems: ComputedRef<GrSelectNavigableItem<TValue>[]>;
+    /** Индекс активного элемента: пишется и снаружи — строка «Add …» подсвечивается наведением. */
+    activeIndex: Ref<number>;
+    activeItem: ComputedRef<GrSelectNavigableItem<TValue> | undefined>;
+    addOptionDomId: ComputedRef<string>;
+    activeValue: ComputedRef<TValue | undefined>;
+    activeDescendantId: ComputedRef<string | undefined>;
+    triggerActiveDescendant: ComputedRef<string | undefined>;
+    searchActiveDescendant: ComputedRef<string | undefined>;
+    onOptionHover: (panelIndex: number) => void;
+    onComboKeydown: (event: KeyboardEvent) => void;
+    initActiveIndex: () => void;
+    resetActive: () => void;
+}
+export declare function useSelectNavigation<TValue extends GrSelectValue>(options: UseSelectNavigationOptions<TValue>): SelectNavigation<TValue>;