@feugene/granularity 0.13.0 → 0.16.0

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

@@ -25,32 +25,57 @@ export interface GrRatingProps {
     /** Только показ: без ввода и фокуса. */
     readonly?: boolean;
     disabled?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     /** Повторный клик по текущей оценке сбрасывает её в `0`. */
     clearable?: boolean;
     /** UnoCSS-класс иконки вместо встроенной звезды (например `i-lucide-heart`). */
     icon?: string;
     /** Показывать числовую подпись справа от шкалы. */
     showText?: boolean;
-    /** Формат подписи. По умолчанию — само значение. */
+    /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */
     formatText?: (value: number) => string;
+    /**
+     * Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в
+     * видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует.
+     * Массив короче `max` оставляет верхние деления без подписи.
+     */
+    texts?: string[];
+    /**
+     * Компактный вид: рисуются только заполненные символы. Осмысленно вместе с
+     * `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.
+     */
+    compact?: boolean;
     ariaLabel?: string;
+    /** Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. */
+    name?: string;
 }
-declare var __VLS_1: {
-    index: number;
-    filled: boolean;
-}, __VLS_3: {
-    index: number;
-    filled: boolean;
-}, __VLS_5: {
-    value: number;
-};
-type __VLS_Slots = {} & {
-    symbol?: (props: typeof __VLS_1) => any;
-} & {
-    symbol?: (props: typeof __VLS_3) => any;
-} & {
-    text?: (props: typeof __VLS_5) => any;
+export interface GrRatingEmits {
+    (e: 'update:modelValue', value: number): void;
+    /** Оценка зафиксирована (клик / клавиша). */
+    (e: 'change', value: number): void;
+    /** Значение под курсором; `null` — курсор ушёл со шкалы. */
+    (e: 'hoverChange', value: number | null): void;
+    /** Оценка снята повторным кликом; только при `clearable`. */
+    (e: 'clear'): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+type __VLS_Slots = {
+    /** Свой символ вместо звезды. `filled` — закрашенная половина символа. */
+    symbol?: (props: {
+        index: number;
+        filled: boolean;
+    }) => any;
+    /** Подпись рядом с оценкой. */
+    text?: (props: {
+        value: number;
+    }) => any;
 };
+declare function focus(): void;
+declare function blur(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrRatingProps>, {
     max: number;
     size: undefined;
@@ -58,15 +83,26 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     allowHalf: boolean;
     readonly: boolean;
     disabled: boolean;
+    invalid: boolean;
+    required: boolean;
     clearable: boolean;
     icon: undefined;
     showText: boolean;
     formatText: undefined;
+    texts: undefined;
+    compact: boolean;
     ariaLabel: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    name: undefined;
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => void;
     change: (value: number) => void;
     hoverChange: (value: number | null) => void;
+    clear: () => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrRatingProps>, {
     max: number;
     size: undefined;
@@ -74,13 +110,21 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     allowHalf: boolean;
     readonly: boolean;
     disabled: boolean;
+    invalid: boolean;
+    required: boolean;
     clearable: boolean;
     icon: undefined;
     showText: boolean;
     formatText: undefined;
+    texts: undefined;
+    compact: boolean;
     ariaLabel: undefined;
+    name: undefined;
 }>>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onChange?: ((value: number) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
     onHoverChange?: ((value: number | null) => any) | undefined;
 }>, {
@@ -89,9 +133,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     clearable: boolean;
     icon: string;
     readonly: boolean;
+    name: string;
+    invalid: boolean;
     max: number;
+    compact: boolean;
     disabled: boolean;
+    required: boolean;
     ariaLabel: string;
+    texts: string[];
     allowHalf: boolean;
     showText: boolean;
     formatText: (value: number) => string;

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

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

package/dist/types/src/components/GrRating/grRatingStyles.d.ts

@@ -1,5 +1,6 @@
+import type { GrComponentSize } from '../shared/sizes';
 import type { GrTone } from '../shared/tones';
-export type GrRatingSize = 'sm' | 'md' | 'lg';
+export type GrRatingSize = GrComponentSize;
 export type GrRatingTone = GrTone;
 /**
  * Кастомизация через CSS-переменные (на самом компоненте или любом предке):
@@ -13,6 +14,8 @@ export declare const ratingGapBySize: Record<GrRatingSize, string>;
 export declare const ratingTextSizeBySize: Record<GrRatingSize, string>;
 export declare const ratingFillClassByTone: Record<GrRatingTone, string>;
 export declare const ratingVoidClass = "text-[var(--gr-rating-void-color,color-mix(in_srgb,var(--gr-muted-fg)_35%,transparent))]";
+export declare const ratingDisabledClass = "cursor-not-allowed text-[var(--gr-disabled-fg)]";
+export declare const ratingRootBaseClass = "inline-flex items-center rounded-[var(--gr-radius-control)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--gr-bg)]";
 export declare function ratingRootClass(options: {
     size: GrRatingSize;
     disabled: boolean;

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

@@ -1,6 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrRatingComponent from './GrRating.vue';
 export { default } from './GrRating.vue';
 export { default as GrRating } from './GrRating.vue';
 export { grRatingConfig } from './config';
 export type { GrRatingConfigurableProps } from './defaults';
 export type { GrRatingProps, GrRatingSize, GrRatingTone, } from './GrRating.vue';
 export { grRatingSafelist } from './safelist';
+export type { GrRatingEmits } from './GrRating.vue';
+export type GrRatingInstance = ComponentExposed<typeof GrRatingComponent>;

package/dist/types/src/components/GrResponseErrorBanner/GrFormErrorBanner.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ResponseErrorInfo, ResponseErrorKind, ResponseErrorTexts, ResponseErrorTone } from './responseError.types';
-type __VLS_Props = {
+export interface GrFormErrorBannerProps {
     error: ResponseErrorInfo | null;
     fieldLabels?: Record<string, string>;
     texts?: Partial<ResponseErrorTexts>;
@@ -9,8 +9,12 @@ type __VLS_Props = {
     canDismiss?: boolean;
     autoHideKinds?: ResponseErrorKind[];
     testIdPrefix?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}
+export interface GrFormErrorBannerEmits {
+    (e: 'retry', error: ResponseErrorInfo): void;
+    (e: 'dismiss'): void;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrFormErrorBannerProps>, {
     fieldLabels: () => {};
     texts: () => {};
     tone: undefined;
@@ -24,7 +28,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: (error: ResponseErrorInfo) => void;
     dismiss: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrFormErrorBannerProps>, {
     fieldLabels: () => {};
     texts: () => {};
     tone: undefined;

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

@@ -1,6 +1,6 @@
 import type { ResponseErrorInfo, ResponseErrorKind, ResponseErrorTexts, ResponseErrorTone } from './responseError.types';
 export type { ResponseErrorInfo, ResponseErrorKind, ResponseErrorTexts, ResponseErrorTone, } from './responseError.types';
-type __VLS_Props = {
+export interface GrResponseErrorBannerProps {
     /** Готовая структура ошибки. Если `null` — баннер не рендерится. */
     error: ResponseErrorInfo | null;
     /** Частичный override текстов. Мерджится с `DEFAULT_RESPONSE_ERROR_TEXTS`. */
@@ -27,8 +27,12 @@ type __VLS_Props = {
     showStatus?: boolean;
     /** Префикс `data-testid`. */
     testIdPrefix?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}
+export interface GrResponseErrorBannerEmits {
+    (e: 'retry', error: ResponseErrorInfo): void;
+    (e: 'dismiss'): void;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrResponseErrorBannerProps>, {
     texts: () => {};
     tone: undefined;
     toneByKind: () => {};
@@ -44,7 +48,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: (error: ResponseErrorInfo) => void;
     dismiss: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrResponseErrorBannerProps>, {
     texts: () => {};
     tone: undefined;
     toneByKind: () => {};

package/dist/types/src/components/GrResponseErrorBanner/GrUploadErrorBanner.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ResponseErrorInfo, ResponseErrorKind, ResponseErrorTexts, ResponseErrorTone } from './responseError.types';
-type __VLS_Props = {
+export interface GrUploadErrorBannerProps {
     error: ResponseErrorInfo | null;
     /** Файлы, которые пытались загрузить — пробрасываются в `retry` payload. */
     files?: File[];
@@ -10,8 +10,15 @@ type __VLS_Props = {
     canDismiss?: boolean;
     autoHideKinds?: ResponseErrorKind[];
     testIdPrefix?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}
+export interface GrUploadErrorBannerEmits {
+    (e: 'retry', payload: {
+        error: ResponseErrorInfo;
+        files: File[];
+    }): void;
+    (e: 'dismiss'): void;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrUploadErrorBannerProps>, {
     files: () => never[];
     texts: () => {};
     tone: undefined;
@@ -26,7 +33,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         files: File[];
     }) => void;
     dismiss: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrUploadErrorBannerProps>, {
     files: () => never[];
     texts: () => {};
     tone: undefined;

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

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

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

@@ -8,3 +8,9 @@ export { DEFAULT_AUTO_HIDE_KINDS, DEFAULT_TONE_BY_KIND, } from './responseError.
 export { abortErrorParser, coreResponseErrorParsers, createResponseErrorClassifier, defaultResponseErrorParsers, extendDefaultParsers, fileValidationParser, httpStatusParser, jsonApiErrorParser, laravelValidationParser, networkErrorParser, normalizeError, plainMessageParser, problemDetailsParser, resolveResponseErrorTitle, responseErrorParserPresets, } from './parsers';
 export type { CreateResponseErrorClassifierOptions, ResponseErrorParserPresets, } from './parsers';
 export type { NormalizedRawError, ResponseErrorContext, ResponseErrorFieldError, ResponseErrorInfo, ResponseErrorKind, ResponseErrorParser, ResponseErrorParserResult, ResponseErrorTexts, ResponseErrorTone, } from './responseError.types';
+export type { GrFormErrorBannerEmits } from './GrFormErrorBanner.vue';
+export type { GrResponseErrorBannerProps } from './GrResponseErrorBanner.vue';
+export type { GrResponseErrorBannerEmits } from './GrResponseErrorBanner.vue';
+export type { GrUploadErrorBannerEmits } from './GrUploadErrorBanner.vue';
+export type { GrFormErrorBannerProps } from './GrFormErrorBanner.vue';
+export type { GrUploadErrorBannerProps } from './GrUploadErrorBanner.vue';

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,51 +7,90 @@ 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: 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: undefined;
     size: undefined;
+    orientation: string;
     indicatorDuration: number;
     block: boolean;
     disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
     name: undefined;
     ariaLabel: undefined;
 }>>> & Readonly<{
+    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;
+    orientation: GrSegmentedOrientation;
+    readonly: boolean;
     name: string;
+    invalid: boolean;
     block: boolean;
     disabled: boolean;
+    required: boolean;
     ariaLabel: string;
     indicatorDuration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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/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(--gr-ring),0_0_0_4px_var(--gr-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,7 +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 { GrSegmentedConfigurableProps } from './defaults';
-export type { GrSegmentedOption, GrSegmentedSize, GrSegmentedValue, GrSegmentedVariant, } from './grSegmentedStyles';
+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[];