@feugene/granularity 0.48.0 → 0.49.0

package/dist/types/components/GrOtpInput/GrOtpInput.vue.d.ts

@@ -0,0 +1,164 @@
+import { type GrOtpInputSize } from './grOtpInputStyles';
+import { type GrOtpInputType } from './otpValue';
+export type { GrOtpInputSize } from './grOtpInputStyles';
+export type { GrOtpInputType } from './otpValue';
+export interface GrOtpInputProps {
+    /** Код целиком, без разделителей. */
+    modelValue?: string;
+    /** Число ячеек. */
+    length?: number;
+    /** Допустимый алфавит и раскладка мобильной клавиатуры. */
+    type?: GrOtpInputType;
+    /** Свой алфавит регуляркой на **один символ**. Перекрывает `type`. */
+    pattern?: string;
+    /** Разбивка на группы: `[3, 3]` рисует `123 – 456`. Сумма обязана равняться `length`. */
+    groups?: number[];
+    /** Точки вместо символов — сценарий PIN. На `modelValue` не влияет. */
+    masked?: boolean;
+    /** Знак в пустой ячейке. */
+    placeholder?: string;
+    size?: GrOtpInputSize;
+    autofocus?: boolean;
+    /** `autocomplete="one-time-code"`: код из SMS подставляется на iOS и macOS. */
+    oneTimeCode?: boolean;
+    /**
+     * Приём кода из SMS на Android через WebOTP. Выключен: требует HTTPS и
+     * особого хвоста в тексте сообщения, который добавляет бэкенд.
+     */
+    webOtp?: boolean;
+    /** Имя поля для нативной отправки формы. */
+    name?: string;
+    /** `id` формы, если поле лежит вне неё. */
+    form?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+}
+export interface GrOtpInputEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    /** Код набран целиком. Точка автосабмита. */
+    (e: 'complete', value: string): void;
+}
+type __VLS_Slots = {
+    /** Своё оформление ячейки. Размер и рамку по-прежнему держит компонент. */
+    cell?: (props: {
+        char: string;
+        index: number;
+        active: boolean;
+        filled: boolean;
+        masked: boolean;
+    }) => any;
+    /** Знак между группами. По умолчанию — тире. */
+    separator?: (props: {
+        index: number;
+    }) => any;
+};
+declare function focus(): void;
+declare function blur(): void;
+/** Штатный сценарий: сервер отверг код, поле чистится и снова ждёт ввода. */
+declare function clear(): void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrOtpInputProps>, {
+    modelValue: string;
+    length: undefined;
+    type: string;
+    pattern: undefined;
+    groups: undefined;
+    masked: undefined;
+    placeholder: string;
+    size: undefined;
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: boolean;
+    name: undefined;
+    form: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    ariaLabel: undefined;
+}>>, {
+    focus: typeof focus;
+    blur: typeof blur;
+    clear: typeof clear;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+    change: (value: string) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+    complete: (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrOtpInputProps>, {
+    modelValue: string;
+    length: undefined;
+    type: string;
+    pattern: undefined;
+    groups: undefined;
+    masked: undefined;
+    placeholder: string;
+    size: undefined;
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: boolean;
+    name: undefined;
+    form: undefined;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
+    ariaLabel: undefined;
+}>>> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    length: number;
+    disabled: boolean;
+    readonly: boolean;
+    form: string;
+    pattern: string;
+    type: GrOtpInputType;
+    size: GrOtpInputSize;
+    masked: boolean;
+    name: string;
+    invalid: boolean;
+    ariaLabel: string;
+    modelValue: string;
+    required: boolean;
+    placeholder: string;
+    groups: number[];
+    autofocus: boolean;
+    oneTimeCode: boolean;
+    webOtp: 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];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/components/GrOtpInput/config.d.ts

@@ -0,0 +1 @@
+export declare const grOtpInputConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrOtpInput">;

package/dist/types/components/GrOtpInput/defaults.d.ts

@@ -0,0 +1,15 @@
+import type { GrComponentSize } from '../GrConfigProvider/context';
+/**
+ * Пропы `GrOtpInput`, настраиваемые глобально через `componentDefaults`.
+ * Только оформление и поведение по умолчанию — см. `GrButton/defaults.ts`.
+ */
+export interface GrOtpInputConfigurableProps {
+    size: GrComponentSize;
+    length: number;
+    masked: boolean;
+}
+declare module '../../composables/useGrComponentConfig' {
+    interface GrComponentDefaultsRegistry {
+        GrOtpInput: GrOtpInputConfigurableProps;
+    }
+}

package/dist/types/components/GrOtpInput/grOtpInputStyles.d.ts

@@ -0,0 +1,62 @@
+import type { GrComponentSize } from '../shared/sizes';
+export type GrOtpInputSize = GrComponentSize;
+/**
+ * `w-fit` тут не украшение. Гридовый или флексовый родитель **блокифицирует**
+ * `inline-flex`, и ряд растягивался на всю колонку: сами ячейки оставались на
+ * месте, а невидимое поле поверх них ловило клики далеко справа от кода.
+ */
+export declare const rootBaseClass = "relative inline-flex w-fit items-center";
+export declare const rootGaps: Record<GrOtpInputSize, string>;
+/**
+ * Настоящее поле лежит **поверх** ряда ячеек и невидимо: текст, каретка и
+ * подсветка выделения прозрачны, всё видимое рисуют ячейки.
+ *
+ * Оно остаётся полноценным `<input>`, и потому даром достаются вставка,
+ * автозаполнение кода из SMS, отмена, выделение и вся каретка со стрелками —
+ * см. `docs/components/GrOtpInput.md`.
+ *
+ * `z-index` не нужен: поле позиционировано, ячейки — нет, а позиционированный
+ * элемент и так красится поверх статичных соседей. Литерал слоя тут был бы
+ * лишней записью в шкале `docs/z-index.md`.
+ */
+export declare const fieldClass = "absolute inset-0 w-full cursor-text bg-transparent text-transparent [caret-color:transparent] outline-none selection:bg-transparent disabled:cursor-not-allowed";
+export declare const cellBaseClass = "relative inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-control)] border [font-variant-numeric:tabular-nums] transition-colors duration-[var(--gr-duration-fast)]";
+/**
+ * Сторона ячейки повторяет высоту `GrInput` на той же ступени: код стоит в
+ * форме рядом с полями, и ряд обязан садиться с ними в одну линию.
+ *
+ * Через хук, а не классом-числом: квадратная ячейка — решение оформления, и
+ * макет вправе сделать её шире.
+ */
+export declare const cellSizes: Record<GrOtpInputSize, string>;
+export declare const cellIdleClass = "border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+/** Активная ячейка — та, в которой стоит каретка, и только пока поле в фокусе. */
+export declare const cellActiveClass = "border-[var(--gr-otp-input-active-brd,var(--gr-primary))] ring-2 ring-[var(--gr-ring)]";
+/**
+ * Вердикт валидации красится своей ролью, а не декоративным `danger`: тема
+ * вправе развести подсветку по решению разработчика и ошибку формы.
+ */
+export declare const cellInvalidClass = "border-[var(--gr-invalid-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+export declare const cellInvalidActiveClass = "ring-2 ring-[var(--gr-invalid-ring)]";
+/**
+ * Недоступность гасится фоном, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста и роняет контраст кода.
+ */
+export declare const cellDisabledClass = "border-[var(--gr-disabled-brd)] bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]";
+export declare const placeholderClass = "text-[var(--gr-muted-fg)]";
+/**
+ * Каретка рисуется своей, потому что настоящая скрыта вместе с текстом.
+ * Мигание — CSS-анимация, значит подчиняется глобальному клампу движения
+ * пакета (`docs/motion.md`), а не собственному таймеру.
+ */
+export declare const caretClass = "pointer-events-none absolute h-[1em] w-px bg-[var(--gr-otp-input-caret,var(--gr-primary))]";
+export declare const separatorClass = "select-none px-0.5 text-[var(--gr-muted-fg)]";
+export declare function grOtpInputRootClass(size: GrOtpInputSize): string;
+type GrOtpInputCellClassOptions = {
+    size: GrOtpInputSize;
+    active: boolean;
+    invalid: boolean;
+    disabled: boolean;
+};
+export declare function grOtpInputCellClass(options: GrOtpInputCellClassOptions): string;
+export {};

package/dist/types/components/GrOtpInput/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrOtpInputComponent from './GrOtpInput.vue';
+export { default } from './GrOtpInput.vue';
+export { default as GrOtpInput } from './GrOtpInput.vue';
+export { grOtpInputConfig } from './config';
+export type { GrOtpInputConfigurableProps } from './defaults';
+export { grOtpInputSafelist } from './safelist';
+export type { GrOtpInputEmits, GrOtpInputProps, GrOtpInputSize, GrOtpInputType } from './GrOtpInput.vue';
+export type GrOtpInputInstance = ComponentExposed<typeof GrOtpInputComponent>;

package/dist/types/components/GrOtpInput/otpValue.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Чистая логика значения OTP-поля: алфавит, нормализация ввода и разбивка на
+ * группы. Без Vue и без DOM — здесь дёшево перебрать края, а края тут и есть
+ * весь риск.
+ */
+export declare const GR_OTP_INPUT_TYPES: readonly ["numeric", "alphanumeric", "text"];
+export type GrOtpInputType = typeof GR_OTP_INPUT_TYPES[number];
+/**
+ * Алфавиты по типу. `text` — любой непробельный символ: пробел в коде не несёт
+ * смысла, а при вставке из мессенджера приходит вместе с ним.
+ */
+export declare const OTP_TYPE_PATTERNS: Record<GrOtpInputType, string>;
+/** Раскладка клавиатуры на мобильном: цифровой блок только там, где он уместен. */
+export declare const OTP_TYPE_INPUT_MODES: Record<GrOtpInputType, 'numeric' | 'text'>;
+export type OtpMatcher = (char: string) => boolean;
+/**
+ * Матчер алфавита. Своя регулярка потребителя перекрывает тип; сломанная —
+ * повод сказать об этом в dev и вернуться к типу, а не уронить рендер.
+ */
+export declare function createOtpMatcher(type: GrOtpInputType, pattern?: string): OtpMatcher;
+export interface NormalizeOtpOptions {
+    /** Значение до правки: по нему считается, сколько символов вставлено. */
+    previous: string;
+    /** Сырое содержимое поля после события `input`. */
+    raw: string;
+    /** Каретка в координатах **сырой** строки. */
+    caret: number;
+    length: number;
+    matcher: OtpMatcher;
+    /** Приводить ли к верхнему регистру: коды печатают капсом. */
+    uppercase: boolean;
+}
+export interface NormalizedOtp {
+    value: string;
+    caret: number;
+}
+/**
+ * Свести сырое содержимое поля к коду фиксированной длины.
+ *
+ * Одна функция на все источники ввода — символ с клавиатуры, вставка из буфера,
+ * подстановка кода из SMS, — потому что различить их по событию нельзя:
+ * мобильные клавиатуры и автозаполнение присылают целую строку одним `input`.
+ *
+ * Три шага, и каждый закрывает свой отказ:
+ *
+ * 1. **Отсев чужих символов с переносом каретки.** Индексы после отсева
+ *    съезжают, и каретку надо считать в новых координатах, иначе вставка
+ *    `123-456` поставит её на два символа правее конца.
+ * 2. **Печать заменяет, а не сдвигает.** Ячейка держит ровно один символ, и
+ *    напечатанное в неё занимает её место, а хвост кода остаётся где стоял.
+ *    Правило безусловное, а не «когда поле заполнено»: иначе одно и то же
+ *    нажатие в начале кода то заменяло бы символ, то двигало весь остаток —
+ *    в зависимости от того, сколько ячеек занято.
+ * 3. **Обрезка по длине.** Вставка длиннее поля режется со стороны каретки:
+ *    выкусывать за ней уже нечего, а сдвигать набранное нельзя.
+ */
+export declare function normalizeOtpInput(options: NormalizeOtpOptions): NormalizedOtp;
+/** Отсев без каретки — для значения, пришедшего из `v-model`. */
+export declare function sanitizeOtpValue(value: string, options: {
+    length: number;
+    matcher: OtpMatcher;
+    uppercase: boolean;
+}): string;
+/**
+ * Индексы ячеек, **перед** которыми стоит разделитель.
+ *
+ * Разбивка, не сходящаяся с длиной, — ошибка потребителя, а не повод рисовать
+ * половину: группы игнорируются целиком, о чём говорит предупреждение в вызове.
+ */
+export declare function otpSeparatorIndexes(length: number, groups?: number[]): Set<number>;
+export declare function isOtpGroupsValid(length: number, groups?: number[]): boolean;

package/dist/types/components/GrOtpInput/safelist.d.ts

@@ -0,0 +1,7 @@
+export declare const grOtpInputClassTokens: {
+    readonly root: readonly string[];
+    readonly field: string[];
+    readonly cell: readonly string[];
+    readonly decoration: readonly string[];
+};
+export declare const grOtpInputSafelist: string[];

package/dist/types/components/GrSwitch/GrSwitch.vue.d.ts

@@ -1,5 +1,5 @@
 import { type GrSwitchLabelPosition, type GrSwitchSize } from './grSwitchStyles';
-export type { GrSwitchLabelPosition, GrSwitchSize } from './grSwitchStyles';
+export type { GrSwitchLabelPosition, GrSwitchSize, GrSwitchStateTextSize, } from './grSwitchStyles';
 /**
  * Пропсы публичного GR-примитива «Switch».
  */
@@ -35,6 +35,20 @@ export interface GrSwitchProps {
     activeBackgroundColor?: string;
     /** Кастомный цвет фона в неактивном состоянии. Если не задан — `var(--gr-muted)`. */
     inactiveBackgroundColor?: string;
+    /**
+     * Подпись состояния внутри дорожки — на свободной от бегунка стороне.
+     * Помещается только на `md` и `lg`; на мелких ступенях не рисуется.
+     */
+    showStateText?: boolean;
+    /** Текст включённого состояния. Без него — `gr.switch.on` из локали. */
+    checkedText?: string;
+    /** Текст выключенного состояния. Без него — `gr.switch.off` из локали. */
+    uncheckedText?: string;
+    /**
+     * Дорожка растягивается под подпись, а ступень размера становится нижней
+     * границей ширины. Без `showStateText` смысла не имеет: тянуться не под что.
+     */
+    autoWidth?: boolean;
 }
 export interface GrSwitchEmits {
     (e: 'update:modelValue', value: boolean): void;
@@ -42,12 +56,24 @@ export interface GrSwitchEmits {
     (e: 'focus', event: FocusEvent): void;
     (e: 'blur', event: FocusEvent): void;
 }
-declare function focus(): void;
-declare function blur(): void;
 type __VLS_Slots = {
     /** Подпись переключателя. */
-    default?: () => any;
+    'default'?: () => any;
+    /**
+     * Знак на бегунке во включённом состоянии — галочка, замок, что угодно.
+     *
+     * Размер задаёт обёртка по ступени `size`, поэтому содержимое слота тянется
+     * до неё: `class="h-full w-full"`, как у `GrBadge` и `GrChip`.
+     *
+     * Знак декоративен — бегунок целиком `aria-hidden`, а состояние диктор берёт
+     * из `aria-checked`. Смысла, которого нет больше нигде, сюда класть нельзя.
+     */
+    'checked-icon'?: () => any;
+    /** То же для выключенного состояния. Слоты независимы. */
+    'unchecked-icon'?: () => any;
 };
+declare function focus(): void;
+declare function blur(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSwitchProps>, {
     modelValue: boolean;
     disabled: boolean;
@@ -64,6 +90,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     form: undefined;
     activeBackgroundColor: undefined;
     inactiveBackgroundColor: undefined;
+    showStateText: undefined;
+    checkedText: undefined;
+    uncheckedText: undefined;
+    autoWidth: undefined;
 }>>, {
     focus: typeof focus;
     blur: typeof blur;
@@ -88,6 +118,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     form: undefined;
     activeBackgroundColor: undefined;
     inactiveBackgroundColor: undefined;
+    showStateText: undefined;
+    checkedText: undefined;
+    uncheckedText: undefined;
+    autoWidth: undefined;
 }>>> & Readonly<{
     onBlur?: ((event: FocusEvent) => any) | undefined;
     onChange?: ((value: boolean) => any) | undefined;
@@ -100,6 +134,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: GrSwitchSize;
     labelPosition: GrSwitchLabelPosition;
     loading: boolean;
+    showStateText: boolean;
+    autoWidth: boolean;
     value: string;
     name: string;
     invalid: boolean;
@@ -109,6 +145,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     loadingText: string;
     activeBackgroundColor: string;
     inactiveBackgroundColor: string;
+    checkedText: string;
+    uncheckedText: string;
 }, {}, {}, {}, 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/components/GrSwitch/defaults.d.ts

@@ -6,6 +6,8 @@ import type { GrSwitchSize } from './grSwitchStyles';
  */
 export interface GrSwitchConfigurableProps {
     size: GrSwitchSize;
+    showStateText: boolean;
+    autoWidth: boolean;
 }
 declare module '../../composables/useGrComponentConfig' {
     interface GrComponentDefaultsRegistry {

package/dist/types/components/GrSwitch/grSwitchStyles.d.ts

@@ -12,39 +12,59 @@ export declare const rootBase = "inline-flex items-center gap-2 select-none disa
 export declare const rootLabelPositions: Record<GrSwitchLabelPosition, string>;
 export declare const trackBase = "relative inline-flex shrink-0 items-center rounded-[var(--gr-radius-full)] border border-[var(--gr-switch-track-brd)] transition-colors duration-[var(--gr-duration-fast)]";
 export declare const trackSizes: Record<GrSwitchSize, string>;
-export declare const thumbBase = "inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-full)] bg-[var(--gr-card)] shadow-[var(--gr-shadow-1)] transition-transform duration-[var(--gr-duration-fast)]";
+/**
+ * Дорожка в режиме `autoWidth`: та же ступень становится **нижней границей**,
+ * а ширину берёт подпись. Высота остаётся фиксированной — тянется только строка.
+ */
+export declare const trackAutoSizes: Record<GrSwitchSize, string>;
+export declare const thumbBase = "absolute top-[1px] inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-full)] bg-[var(--gr-card)] shadow-[var(--gr-shadow-1)] transition-[left,transform] duration-[var(--gr-duration-fast)]";
 export declare const thumbSizes: Record<GrSwitchSize, string>;
-/** Спиннер загрузки живёт в бегунке, поэтому мельче его на ступень. */
-export declare const thumbSpinnerSizes: Record<GrSwitchSize, string>;
-export declare const thumbSpinnerBase = "animate-spin text-[var(--gr-muted-fg)]";
 /**
- * Сдвиг бегунка по горизонтали.
+ * Содержимое бегунка — спиннер загрузки или иконка действия — мельче его на
+ * ступень: иначе знак упирается в края круга и теряет форму.
+ */
+export declare const thumbContentSizes: Record<GrSwitchSize, string>;
+/**
+ * Цвет содержимого бегунка — один на спиннер и иконку.
+ *
+ * Хук с фолбэком в самом классе, а не инлайн-значение: инлайн победил бы CSS
+ * потребителя, и переопределить цвет было бы нечем.
  *
- * Бегунок — обычный флекс-ребёнок дорожки, поэтому сдвиг отсчитывается от её
- * **content-box**, а он на 2px уже внешнего размера: рамка по 1px с каждой
- * стороны. Отсюда и весь расчёт.
+ * По состоянию цвет не ветвится и в `disabled` не тускнеет: гасится дорожка, а
+ * бегунок остаётся `--gr-card` в любом состоянии — содержимое, меняющее цвет,
+ * разошлось бы со своей же подложкой.
+ */
+export declare const thumbContentColorClass = "text-[var(--gr-switch-thumb-fg,var(--gr-muted-fg))]";
+export declare const thumbSpinnerBase = "animate-spin text-[var(--gr-switch-thumb-fg,var(--gr-muted-fg))]";
+/** Обёртка иконки держит размер, содержимое слота тянется до неё `h-full w-full`. */
+export declare const thumbIconBase = "inline-flex shrink-0 items-center justify-center text-[var(--gr-switch-thumb-fg,var(--gr-muted-fg))]";
+/**
+ * Зазор бегунка со всех сторон, px.
  *
- * Зазор по вертикали задан геометрией и равен 1px на всех ступенях
- * (`(content-height − thumb) / 2`, дорожка центрирует бегунок сама). Значит и по
- * горизонтали он обязан быть 1px: иначе бегунок в покое выглядит вдавленным
+ * Дорожка — `border-box` с рамкой 1px, и по вертикали зазор задан геометрией:
+ * `(content-height − thumb) / 2` даёт ровно 1 на всех ступенях. Значит и по
+ * горизонтали он обязан быть тем же: иначе бегунок в покое выглядит вдавленным
  * внутрь, а в крайнем положении прижатым к краю — именно так и было, зазоры
  * расходились на 1–2px у `xs`, `sm` и `lg`.
  *
- * | ступень | дорожка | content | бегунок | покой | крайнее |
- * | --- | --- | --- | --- | --- | --- |
- * | `xs` | 28 | 26 | 12 | 1 | 13 |
- * | `sm` | 36 | 34 | 16 | 1 | 17 |
- * | `md` | 44 | 42 | 20 | 1 | 21 |
- * | `lg` | 56 | 54 | 24 | 1 | 29 |
+ * Гейт живёт в `__tests__/GrSwitch.test.ts` и считает вертикаль заново из
+ * `trackSizes`/`thumbSizes`, поэтому смена любой ступени размера сразу покажет
+ * разъехавшийся зазор.
+ */
+export declare const SWITCH_THUMB_GAP = 1;
+/**
+ * Положение бегунка — **без единого числа, зависящего от ширины дорожки**.
+ *
+ * Крайнее положение выражено парой `left: calc(100% − зазор)` и
+ * `translateX(-100%)`: процент в `left` считается от padding-box дорожки,
+ * процент в `transform` — от самого бегунка. В сумме левый край встаёт на
+ * `ширина − бегунок − зазор`, какой бы ширина ни была.
  *
- * Крайнее положение — `content − thumb − зазор`. Гейт на эту арифметику живёт в
- * `__tests__/GrSwitch.test.ts`: он считает её заново из `trackSizes`/`thumbSizes`,
- * поэтому смена любой ступени размера сразу покажет разъехавшийся зазор.
+ * Обе величины анимируются, и композиция даёт строго линейный ход: в момент `t`
+ * смещение равно `t · (ширина − бегунок)`. Поэтому режим `autoWidth` не требует
+ * ни измерений, ни ResizeObserver — только эти два класса.
  */
-export declare const thumbTranslations: Record<GrSwitchSize, {
-    checked: string;
-    unchecked: string;
-}>;
+export declare const thumbPositions: Record<'checked' | 'unchecked', string>;
 export declare const labelBase = "text-[var(--gr-muted-fg)]";
 /**
  * Недоступность гасится токеном, а не `opacity`: прозрачность разбавляет
@@ -53,8 +73,92 @@ export declare const labelBase = "text-[var(--gr-muted-fg)]";
 export declare const labelDisabledClass = "text-[var(--gr-disabled-fg)]";
 export declare const labelSizes: Record<GrSwitchSize, string>;
 export declare function grSwitchRootClass(labelPosition: GrSwitchLabelPosition): string;
-export declare function grSwitchTrackClass(size: GrSwitchSize): string;
+export declare function grSwitchTrackClass(size: GrSwitchSize, autoWidth?: boolean): string;
 export declare function grSwitchThumbClass(options: GrSwitchThumbClassOptions): string;
 export declare function grSwitchSpinnerClass(size: GrSwitchSize): string;
+export declare function grSwitchThumbIconClass(size: GrSwitchSize): string;
 export declare function grSwitchLabelClass(size: GrSwitchSize, disabled?: boolean): string;
+/**
+ * Ступени, на которых подпись состояния помещается внутрь дорожки.
+ *
+ * Свободное место рядом с бегунком — `content − (бегунок + зазор)`, то есть
+ * 13 / 17 / 21 / 29px на `xs` / `sm` / `md` / `lg`. Минимальная ступень
+ * типографики пакета — `--gr-text-xs` (12px), и «OFF» на ней занимает ~25px;
+ * собственные 10px дают ~20px. В 13 и 17 не встаёт и это, а ужимать шрифт
+ * дальше значит сделать подпись нечитаемой ради того, чтобы она была.
+ */
+export declare const GR_SWITCH_STATE_TEXT_SIZES: readonly ["md", "lg"];
+export type GrSwitchStateTextSize = typeof GR_SWITCH_STATE_TEXT_SIZES[number];
+/** Свободное место в дорожке рядом с бегунком, px. Считается гейтом заново. */
+export declare const stateTextRoom: Record<GrSwitchSize, number>;
+export declare function isGrSwitchStateTextSize(size: GrSwitchSize): size is GrSwitchStateTextSize;
+/**
+ * Ячейка подписи. Грид, а не флекс, ради второго режима: в `autoWidth` в ту же
+ * клетку кладётся невидимый дубль противоположного текста, и ширина ячейки
+ * становится максимумом из двух — иначе дорожка дёргалась бы на каждом щелчке
+ * («ON» 15.6px против «OFF» 19.9px).
+ */
+export declare const stateTextBase = "pointer-events-none grid items-center justify-items-center overflow-hidden font-semibold uppercase leading-none";
+/**
+ * Где ячейка живёт. При фиксированной ширине она накрывает дорожку и на её
+ * размер не влияет; в `autoWidth` встаёт в поток и ширину как раз задаёт.
+ */
+export declare const stateTextLayouts: Record<'fixed' | 'auto', string>;
+/** Оба текста ложатся в одну клетку грида — отсюда максимум по ширине. */
+export declare const stateTextStackClass = "col-start-1 row-start-1";
+/** Дубль занимает место, но не рисуется: `visibility`, а не `display`. */
+export declare const stateTextGhostClass = "col-start-1 row-start-1 invisible";
+/**
+ * Кегль подписи — свой, а не ступень шкалы пакета: минимальный `--gr-text-xs`
+ * это 12px, и трёхбуквенное слово на нём занимает ~24px при 21px места.
+ *
+ * Значения меряны, а не выведены (Inter 600, uppercase). На `md` в 21px:
+ * «OFF» 17.9, «НЕТ» 18.8, «ВКЛ» 19.4 — то есть 9px берёт трёхбуквенные слова
+ * во всех трёх локалях с запасом; 10px оставлял «НЕТ» 0.1px до обреза.
+ * На `lg` места 29px, и 11px там читается лучше, не рискуя ничем.
+ *
+ * Четырёхбуквенное «ВЫКЛ» не встаёт ни на одной ступени и ни при каком кегле
+ * (31px на 10px кегля) — поэтому русский дефолт «ДА»/«НЕТ», а не «ВКЛ»/«ВЫКЛ».
+ */
+export declare const stateTextSizes: Record<GrSwitchStateTextSize, string>;
+/** Отступ со стороны бегунка — `бегунок + зазор`; остаток и есть место подписи. */
+export declare const stateTextPaddings: Record<GrSwitchStateTextSize, {
+    checked: string;
+    unchecked: string;
+}>;
+/**
+ * Отступы в `autoWidth` — те же, плюс воздух с **обеих** сторон.
+ *
+ * При фиксированной ширине текст центруется в остатке и сам ни во что не
+ * упирается. Здесь остатка нет: ширину задаёт сам текст, и без воздуха он
+ * прилипает к бегунку с одной стороны и к закруглению с другой — проверено
+ * глазами, «ОНЛАЙН» вплотную к бегунку читается как дефект вёрстки.
+ *
+ * Поэтому со стороны бегунка отступ равен `бегунок + зазор + воздух`, а со
+ * свободной — просто воздуху. Воздух: 8px на `md`, 10px на `lg`.
+ */
+export declare const stateTextAutoPaddings: Record<GrSwitchStateTextSize, {
+    checked: string;
+    unchecked: string;
+}>;
+/**
+ * Цвет подписи — роль `-fg` той заливки, на которой она лежит.
+ *
+ * Хук стоит фолбэком в самом классе, а не инлайн-значением: инлайн победил бы
+ * CSS потребителя, и переопределить токен было бы нечем. Заливку дорожки задают
+ * произвольным цветом (`activeBackgroundColor`), и безопасный цвет текста на
+ * ней библиотека не вычислит — его называет тот же, кто задал фон.
+ */
+export declare const stateTextColors: {
+    readonly checked: "text-[var(--gr-switch-state-text-fg,var(--gr-primary-fg))]";
+    readonly unchecked: "text-[var(--gr-switch-state-text-fg,var(--gr-muted-fg))]";
+    readonly disabled: "text-[var(--gr-switch-state-text-fg,var(--gr-disabled-fg))]";
+};
+type GrSwitchStateTextClassOptions = {
+    size: GrSwitchStateTextSize;
+    checked: boolean;
+    disabled: boolean;
+    autoWidth: boolean;
+};
+export declare function grSwitchStateTextClass(options: GrSwitchStateTextClassOptions): string;
 export {};

package/dist/types/components/GrSwitch/index.d.ts

@@ -5,6 +5,6 @@ export { default as GrSwitch } from './GrSwitch.vue';
 export { grSwitchConfig } from './config';
 export type { GrSwitchConfigurableProps } from './defaults';
 export { grSwitchSafelist } from './safelist';
-export type { GrSwitchLabelPosition, GrSwitchProps, GrSwitchSize } from './GrSwitch.vue';
+export type { GrSwitchLabelPosition, GrSwitchProps, GrSwitchSize, GrSwitchStateTextSize, } from './GrSwitch.vue';
 export type { GrSwitchEmits } from './GrSwitch.vue';
 export type GrSwitchInstance = ComponentExposed<typeof GrSwitchComponent>;

package/dist/types/components/GrSwitch/safelist.d.ts

@@ -2,12 +2,13 @@ export declare const grSwitchClassTokens: {
     readonly rootBase: string[];
     readonly rootLabelPositions: string[];
     readonly trackBase: string[];
-    readonly trackSizes: string[];
+    readonly trackSizes: readonly string[];
     readonly thumbBase: string[];
     readonly thumbSizes: string[];
-    readonly thumbSpinner: readonly string[];
-    readonly thumbTranslations: string[];
+    readonly thumbContent: readonly string[];
+    readonly thumbPositions: string[];
     readonly labelBase: readonly string[];
     readonly labelSizes: string[];
+    readonly stateText: readonly string[];
 };
 export declare const grSwitchSafelist: string[];