@feugene/granularity 0.13.0 → 0.18.0

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

@@ -1,3 +1,5 @@
+import { type GrSidebarLandmark, type GrSidebarPosition } from './grSidebarStyles';
+export type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles';
 export interface GrSidebarProps {
     title?: string;
     subtitle?: string;
@@ -9,16 +11,30 @@ export interface GrSidebarProps {
     width?: string;
     /** Ширина в свёрнутом состоянии. */
     collapsedWidth?: string;
-    /** A11y-лейбл кнопки тогла. */
+    /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */
     toggleLabel?: string;
+    /** Сторона экрана: граница и направление шеврона зеркалятся. */
+    position?: GrSidebarPosition;
+    /**
+     * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —
+     * `<nav>` для панели, которая действительно является навигацией. Вложенный
+     * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют
+     * обзор, а панель фильтров навигацией не является вовсе.
+     */
+    landmark?: GrSidebarLandmark;
+    /** Имя лендмарка: без него две панели на странице неразличимы. */
+    ariaLabel?: string;
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_29: {};
+export interface GrSidebarEmits {
+    (e: 'update:collapsed', value: boolean): void;
+}
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_31: {};
 type __VLS_Slots = {} & {
-    subtitle?: (props: typeof __VLS_1) => any;
+    subtitle?: (props: typeof __VLS_8) => any;
 } & {
-    title?: (props: typeof __VLS_3) => any;
+    title?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_29) => any;
+    default?: (props: typeof __VLS_31) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarProps>, {
     title: undefined;
@@ -28,6 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     width: string;
     collapsedWidth: string;
     toggleLabel: undefined;
+    position: string;
+    landmark: string;
+    ariaLabel: undefined;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:collapsed": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarProps>, {
@@ -38,11 +57,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     width: string;
     collapsedWidth: string;
     toggleLabel: undefined;
+    position: string;
+    landmark: string;
+    ariaLabel: undefined;
 }>>> & Readonly<{
     "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
 }>, {
     title: string;
     width: string;
+    position: GrSidebarPosition;
+    ariaLabel: string;
+    landmark: GrSidebarLandmark;
     subtitle: string;
     collapsed: boolean;
     showToggleButton: boolean;

package/dist/types/src/components/GrSidebar/GrSidebarGroup.vue.d.ts

@@ -0,0 +1,43 @@
+export interface GrSidebarGroupProps {
+    /** Заголовок секции. Слот `#label` сильнее. */
+    label?: string;
+}
+type __VLS_Slots = {
+    /** Пункты секции. */
+    default?: () => unknown;
+    /** Заголовок целиком — вместо строки `label`. */
+    label?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarGroupProps>, {
+    label: undefined;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarGroupProps>, {
+    label: undefined;
+}>>> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, 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/src/components/GrSidebar/GrSidebarItem.vue.d.ts

@@ -10,7 +10,7 @@
  * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).
  */
 import { type Component } from 'vue';
-type __VLS_Props = {
+export interface GrSidebarItemProps {
     label: string;
     /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */
     icon?: string | Component;
@@ -19,15 +19,15 @@ type __VLS_Props = {
     active?: boolean;
     disabled?: boolean;
     badge?: string | number;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarItemProps>, {
     icon: undefined;
     href: undefined;
     as: undefined;
     active: boolean;
     disabled: boolean;
     badge: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSidebarItemProps>, {
     icon: undefined;
     href: undefined;
     as: undefined;

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

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

package/dist/types/src/components/GrSidebar/grSidebarStyles.d.ts

@@ -0,0 +1,48 @@
+/** Сторона экрана, к которой прижата панель. */
+export declare const GR_SIDEBAR_POSITIONS: readonly ["left", "right"];
+export type GrSidebarPosition = typeof GR_SIDEBAR_POSITIONS[number];
+/** Лендмарк корня: навигация или дополняющий блок (фильтры, справка). */
+export declare const GR_SIDEBAR_LANDMARKS: readonly ["complementary", "navigation"];
+export type GrSidebarLandmark = typeof GR_SIDEBAR_LANDMARKS[number];
+export declare const rootBase = "flex flex-col bg-[var(--gr-sidebar)] text-[var(--gr-sidebar-fg)] transition-[width] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
+/** Граница отделяет панель от контента, поэтому уезжает на внутреннюю сторону. */
+export declare const rootPositions: Record<GrSidebarPosition, string>;
+export declare const headerBase = "flex items-center gap-2 border-b border-[var(--gr-sidebar-brd)] px-3 py-4";
+export declare const titleClass = "truncate text-[length:var(--gr-text-lg)] font-700";
+export declare const subtitleClass = "truncate text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]";
+/**
+ * Скроллящийся блок обязан быть достижим с клавиатуры, поэтому он остановка
+ * `Tab` с видимым кольцом: без него панель с текстовым содержимым не
+ * проскроллить вовсе.
+ */
+export declare const contentBase = "flex-1 overflow-y-auto focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--gr-ring)]";
+export declare const itemBase = "relative flex w-full items-center rounded-[var(--gr-radius-md)] text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const itemCollapsedClass = "justify-center px-0 py-2";
+export declare const itemExpandedClass = "gap-3 px-3 py-2";
+/**
+ * Недоступный пункт гасится токеном, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены текста.
+ */
+export declare const itemDisabledClass = "cursor-not-allowed text-[var(--gr-disabled-fg)]";
+export declare const itemActiveClass = "bg-[var(--gr-muted)] font-600 text-[var(--gr-fg)]";
+export declare const itemIdleClass = "text-[var(--gr-sidebar-fg)] hover:bg-[color-mix(in_srgb,var(--gr-sidebar-fg)_8%,transparent)]";
+export declare const itemLetterClass = "text-[length:var(--gr-text-xs)] font-700 leading-none";
+export declare const itemBadgeClass = "shrink-0 rounded-[var(--gr-radius-full)] bg-[color-mix(in_srgb,var(--gr-sidebar-fg)_12%,transparent)] px-1.5 py-0.5 text-[length:var(--gr-text-2xs)] font-600";
+export declare const groupLabelClass = "px-3 pb-1 pt-3 text-[length:var(--gr-text-2xs)] font-700 [text-transform:uppercase] tracking-wide text-[var(--gr-muted-fg)]";
+/**
+ * В свёрнутой панели заголовка секции нет — иначе он не помещается. Границы
+ * между группами берёт на себя линия: без неё иконки соседних секций сливаются
+ * в один столбец.
+ */
+export declare const groupCollapsedClass = "mt-2 border-t border-[var(--gr-sidebar-brd)] pt-2";
+export declare function grSidebarRootClass(position: GrSidebarPosition): string;
+/**
+ * Куда указывает шеврон кнопки тогла: всегда в ту сторону, куда уедет панель.
+ * У правой панели «свернуть» — это стрелка вправо.
+ */
+export declare function grSidebarCollapseDirection(position: GrSidebarPosition, collapsed: boolean): GrSidebarPosition;
+export declare function grSidebarItemClass(options: {
+    collapsed: boolean;
+    disabled: boolean;
+    active: boolean;
+}): string;

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

@@ -1,4 +1,10 @@
 export { default } from './GrSidebar.vue';
 export { default as GrSidebar, type GrSidebarProps } from './GrSidebar.vue';
 export { default as GrSidebarItem } from './GrSidebarItem.vue';
+export { default as GrSidebarGroup, type GrSidebarGroupProps } from './GrSidebarGroup.vue';
 export { grSidebarConfig } from './config';
+export { GR_SIDEBAR_LANDMARKS, GR_SIDEBAR_POSITIONS } from './grSidebarStyles';
+export type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles';
+export { grSidebarSafelist } from './safelist';
+export type { GrSidebarEmits } from './GrSidebar.vue';
+export type { GrSidebarItemProps } from './GrSidebarItem.vue';

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

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

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

@@ -1,3 +1,5 @@
+import { type GrSkeletonVariant } from './grSkeletonStyles';
+export type { GrSkeletonVariant } from './grSkeletonStyles';
 /**
  * GrSkeleton — заглушка-плейсхолдер для загружающегося контента.
  *
@@ -5,21 +7,35 @@
  * внешний контейнер обычно имеет `aria-busy="true"` + `aria-live`.
  */
 export interface GrSkeletonProps {
+    /**
+     * Форма, а не размеры: `width`/`height` остаются на потребителе, потому что
+     * высота заглушки диктуется соседним контентом, а не шкалой компонента.
+     */
+    variant?: GrSkeletonVariant;
     height?: string;
     width?: string;
+    /** Радиус точечно. Не задан — берётся из `variant`. */
     rounded?: string;
+    /** Сколько заглушек подряд. Больше одной — они уезжают в общую обёртку. */
+    count?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSkeletonProps>, {
-    height: string;
-    width: string;
-    rounded: string;
+    variant: string;
+    height: undefined;
+    width: undefined;
+    rounded: undefined;
+    count: number;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSkeletonProps>, {
-    height: string;
-    width: string;
-    rounded: string;
+    variant: string;
+    height: undefined;
+    width: undefined;
+    rounded: undefined;
+    count: number;
 }>>> & Readonly<{}>, {
+    variant: GrSkeletonVariant;
     height: string;
     width: string;
+    count: number;
     rounded: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

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

package/dist/types/src/components/GrSkeleton/grSkeletonStyles.d.ts

@@ -0,0 +1,9 @@
+/** Форма заглушки: строка текста, прямоугольный блок или круг. */
+export declare const GR_SKELETON_VARIANTS: readonly ["text", "rect", "circle"];
+export type GrSkeletonVariant = typeof GR_SKELETON_VARIANTS[number];
+/**
+ * Радиус — единственное, что задаёт форма: размеры диктует соседний контент, а
+ * не компонент. Пилюля правильна для строки текста и неправильна для блока —
+ * из-за одного дефолта на всех прямоугольник просил `rounded` каждый раз.
+ */
+export declare const skeletonRoundedByVariant: Record<GrSkeletonVariant, string>;

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

@@ -1,3 +1,4 @@
 export { default } from './GrSkeleton.vue';
 export { default as GrSkeleton, type GrSkeletonProps } from './GrSkeleton.vue';
+export { GR_SKELETON_VARIANTS, type GrSkeletonVariant } from './grSkeletonStyles';
 export { grSkeletonConfig } from './config';

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

@@ -1,5 +1,5 @@
-import { type GrSliderMarks, type GrSliderModelValue, type GrSliderSize } from './grSliderStyles';
-export type { GrSliderMarks, GrSliderModelValue, GrSliderSize, } from './grSliderStyles';
+import { type GrSliderMarks, type GrSliderModelValue, type GrSliderOrientation, type GrSliderSize } from './grSliderStyles';
+export type { GrSliderMarks, GrSliderModelValue, GrSliderOrientation, GrSliderSize, } from './grSliderStyles';
 /**
  * Публичный GR-примитив «Slider» (WAI-ARIA slider pattern).
  *
@@ -17,54 +17,104 @@ export interface GrSliderProps {
     /** Диапазон с двумя бегунками; модель — кортеж `[lo, hi]`. */
     range?: boolean;
     disabled?: boolean;
+    /** Только для чтения: значение видно, но не меняется. */
+    readonly?: boolean;
+    /** Визуальное и ARIA-состояние ошибки. */
+    invalid?: boolean;
+    /** Обязательное поле (`aria-required`). */
+    required?: boolean;
     size?: GrSliderSize;
     /** Метки делений: `{ [value]: label }` или массив значений. */
     marks?: GrSliderMarks;
     /** Всплывающее значение над бегунком: `true`/`'hover'` — при hover/drag/focus, `'always'` — всегда. */
     showTooltip?: boolean | 'always' | 'hover';
-    /** Форматирование значения в tooltip. */
+    /** Форматирование значения в tooltip. Оно же уходит в `aria-valuetext`. */
     formatTooltip?: (value: number) => string;
+    /** Ориентация дорожки. В вертикальной минимум внизу. */
+    orientation?: GrSliderOrientation;
+    /**
+     * Эмитить `update:modelValue` только по завершении жеста: во время
+     * перетаскивания значение ведёт сам слайдер. Клавиатура коммитит сразу —
+     * нажатие клавиши дискретно, придерживать его нечего.
+     */
+    lazy?: boolean;
     ariaLabel?: string;
+    /** Имя для нативной формы: hidden input на значение, при `range` — два с одним именем. */
+    name?: string;
 }
+export interface GrSliderEmits {
+    (e: 'update:modelValue', value: GrSliderModelValue): void;
+    /** Значение зафиксировано (отпущен бегунок / клавиша). */
+    (e: 'change', value: GrSliderModelValue): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+declare function focus(): void;
+declare function blur(): void;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSliderProps>, {
     min: number;
     max: number;
     step: number;
     range: boolean;
     disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
     size: undefined;
     marks: undefined;
     showTooltip: boolean;
     formatTooltip: undefined;
+    orientation: string;
+    lazy: 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: GrSliderModelValue) => void;
     change: (value: GrSliderModelValue) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrSliderProps>, {
     min: number;
     max: number;
     step: number;
     range: boolean;
     disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    required: boolean;
     size: undefined;
     marks: undefined;
     showTooltip: boolean;
     formatTooltip: undefined;
+    orientation: string;
+    lazy: boolean;
     ariaLabel: undefined;
+    name: undefined;
 }>>> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onChange?: ((value: GrSliderModelValue) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: GrSliderModelValue) => any) | undefined;
 }>, {
     size: GrSliderSize;
+    orientation: GrSliderOrientation;
+    readonly: boolean;
+    name: string;
+    invalid: boolean;
     max: number;
     min: number;
     range: boolean;
     disabled: boolean;
+    required: boolean;
     ariaLabel: string;
     step: number;
     marks: GrSliderMarks;
     showTooltip: boolean | "always" | "hover";
     formatTooltip: (value: number) => string;
+    lazy: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -7,7 +7,7 @@ import type { GrSliderSize } from './grSliderStyles';
 export interface GrSliderConfigurableProps {
     size: GrSliderSize;
 }
-declare module '../GrConfigProvider/context' {
+declare module '../../composables/useGrComponentConfig' {
     interface GrComponentDefaultsRegistry {
         GrSlider: GrSliderConfigurableProps;
     }

package/dist/types/src/components/GrSlider/grSliderStyles.d.ts

@@ -1,8 +1,12 @@
-export type GrSliderSize = 'sm' | 'md' | 'lg';
+import type { GrComponentSize } from '../shared/sizes';
+export type GrSliderSize = GrComponentSize;
 /** Значение: число (single) или кортеж `[lo, hi]` (range при `range=true`). */
 export type GrSliderModelValue = number | [number, number];
 /** Метка деления: словарь `value → label` или просто массив значений (label = значение). */
 export type GrSliderMarks = Record<number, string> | number[];
+/** Ориентация дорожки. В вертикальной минимум внизу — как на регуляторе громкости. */
+export declare const GR_SLIDER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type GrSliderOrientation = typeof GR_SLIDER_ORIENTATIONS[number];
 /**
  * Кастомизация через CSS-переменные (можно задать на самом слайдере или любом
  * предке — inline `style`, класс, тема). Значение по умолчанию — второй аргумент
@@ -14,23 +18,58 @@ export type GrSliderMarks = Record<number, string> | number[];
  * - `--gr-slider-thumb-border` — цвет окантовки бегунка (по умолчанию = fill).
  * - `--gr-slider-thumb-size`   — диаметр бегунка (по умолчанию — из `size`).
  * - `--gr-slider-track-height` — толщина дорожки (по умолчанию — из `size`).
+ * - `--gr-slider-length`       — длина вертикальной дорожки (по умолчанию `10rem`).
  */
 export declare const sliderTrackHeightBySize: Record<GrSliderSize, string>;
+/** В вертикали та же толщина задаёт ширину, а длину берёт `--gr-slider-length`. */
+export declare const sliderTrackWidthBySize: Record<GrSliderSize, string>;
+export declare const sliderTrackVerticalLengthClass = "h-[var(--gr-slider-length,10rem)]";
 export declare const sliderThumbSizeBySize: Record<GrSliderSize, string>;
 export declare const sliderPaddingBySize: Record<GrSliderSize, string>;
-export declare const sliderRailClass = "absolute inset-0 rounded-full bg-[var(--gr-slider-rail,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
-export declare const sliderFillClass = "absolute top-0 bottom-0 rounded-full bg-[var(--gr-slider-fill,var(--gr-primary))]";
-export declare const sliderThumbBaseClass = "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[var(--gr-slider-thumb-border,var(--gr-slider-fill,var(--gr-primary)))] bg-[var(--gr-slider-thumb-bg,var(--gr-bg))] ring-1 ring-[color-mix(in_srgb,var(--gr-fg)_22%,transparent)] shadow-[var(--gr-shadow-1)] transition-[box-shadow,transform] duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--gr-bg)]";
+export declare const sliderRailClass = "absolute inset-0 rounded-[var(--gr-radius-full)] bg-[var(--gr-slider-rail,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+export declare const sliderFillBaseClass = "absolute rounded-[var(--gr-radius-full)]";
+/** Заливка растёт вдоль дорожки: по горизонтали — влево-вправо, по вертикали — снизу вверх. */
+export declare const sliderFillOrientationClass: Record<GrSliderOrientation, string>;
+/**
+ * Недоступный слайдер гасится токенами, а не `opacity`: прозрачность разбавляет
+ * выверенные на AA токены и роняет контраст подписей меток.
+ */
+export declare const sliderFillDisabledClass = "bg-[var(--gr-disabled-fg)]";
+export declare const sliderFillEnabledClass = "bg-[var(--gr-slider-fill,var(--gr-primary))]";
+export declare function sliderFillClass(disabled: boolean): string;
+export declare const sliderThumbBaseClass = "absolute rounded-[var(--gr-radius-full)] border-2 border-[var(--gr-slider-thumb-border,var(--gr-slider-fill,var(--gr-primary)))] bg-[var(--gr-slider-thumb-bg,var(--gr-bg))] ring-1 ring-[color-mix(in_srgb,var(--gr-fg)_22%,transparent)] shadow-[var(--gr-shadow-1)] transition-[box-shadow,transform] duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--gr-bg)]";
+/** Бегунок центрируется поперёк дорожки, а вдоль неё его ведёт inline-стиль. */
+export declare const sliderThumbOrientationClass: Record<GrSliderOrientation, string>;
+export declare const sliderThumbDisabledClass = "cursor-not-allowed border-[var(--gr-disabled-fg)] bg-[var(--gr-disabled-bg)]";
+export declare const sliderThumbEnabledClass = "cursor-grab active:cursor-grabbing hover:scale-110";
 export declare function sliderThumbClass(options: {
     size: GrSliderSize;
     disabled: boolean;
+    orientation?: GrSliderOrientation;
+}): string;
+export declare const sliderTooltipBaseClass = "pointer-events-none absolute whitespace-nowrap rounded-[var(--gr-radius-control)] bg-[var(--gr-fg)] px-1.5 py-0.5 text-[length:var(--gr-text-2xs)] font-medium leading-tight text-[var(--gr-bg)] shadow-[var(--gr-shadow-2)]";
+/** В вертикали подсказка уходит вбок: над бегунком она легла бы на дорожку. */
+export declare const sliderTooltipOrientationClass: Record<GrSliderOrientation, string>;
+export declare function sliderTooltipClass(orientation?: GrSliderOrientation): string;
+export declare const sliderMarkTickBaseClass = "absolute h-1.5 w-1.5 rounded-[var(--gr-radius-full)] bg-[var(--gr-bg)] ring-1 ring-[var(--gr-brd)]";
+export declare const sliderMarkTickOrientationClass: Record<GrSliderOrientation, string>;
+export declare function sliderMarkTickClass(orientation?: GrSliderOrientation): string;
+export declare const sliderMarkLabelClass = "absolute whitespace-nowrap text-[length:var(--gr-text-2xs)] leading-none text-[var(--gr-muted-fg)]";
+export declare const sliderMarkLabelDisabledClass = "text-[var(--gr-disabled-fg)]";
+/** Вертикальные подписи уходят вправо от дорожки: под ней им места нет. */
+export declare const sliderMarkLabelVerticalClass = "left-full ml-2.5 translate-y-1/2";
+export declare const sliderMarkLabelHorizontalClass = "top-full mt-2.5";
+export declare function sliderMarkLabelClassFor(pct: number, options?: {
+    orientation?: GrSliderOrientation;
+    disabled?: boolean;
 }): string;
-export declare const sliderTooltipClass = "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-[6px] bg-[var(--gr-fg)] px-1.5 py-0.5 text-[11px] font-medium leading-tight text-[var(--gr-bg)] shadow-[var(--gr-shadow-2)]";
-export declare const sliderMarkTickClass = "absolute top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--gr-bg)] ring-1 ring-[var(--gr-brd)]";
-export declare const sliderMarkLabelClass = "absolute top-full mt-2.5 whitespace-nowrap text-[11px] leading-none text-[var(--gr-muted-fg)]";
-export declare function sliderMarkLabelClassFor(pct: number): string;
+export declare const sliderRootBaseClass = "relative select-none";
+export declare const sliderRootOrientationClass: Record<GrSliderOrientation, string>;
+/** Горизонтальный отступ обёртки вертикали — та же роль, что у `py-*` у горизонтали. */
+export declare const sliderPaddingVerticalBySize: Record<GrSliderSize, string>;
 export declare function sliderRootClass(options: {
     size: GrSliderSize;
     disabled: boolean;
     hasMarks?: boolean;
+    orientation?: GrSliderOrientation;
 }): string;

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

@@ -1,6 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrSliderComponent from './GrSlider.vue';
 export { default } from './GrSlider.vue';
 export { default as GrSlider } from './GrSlider.vue';
 export { grSliderConfig } from './config';
 export type { GrSliderConfigurableProps } from './defaults';
 export type { GrSliderMarks, GrSliderModelValue, GrSliderProps, GrSliderSize, } from './GrSlider.vue';
 export { grSliderSafelist } from './safelist';
+export type { GrSliderEmits } from './GrSlider.vue';
+export type GrSliderInstance = ComponentExposed<typeof GrSliderComponent>;

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

@@ -0,0 +1,68 @@
+import { type GrCardVariant } from '../GrCard';
+import type { GrSortableOrientation } from './grSortableListStyles';
+export interface GrSortableListProps<TItem = unknown> {
+    /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */
+    modelValue: TItem[];
+    /** Ключ элемента: имя поля или функция. Без него — индекс. */
+    itemKey?: string | ((item: TItem, index: number) => string | number);
+    /** Список только для чтения: ни указателем, ни с клавиатуры. */
+    disabled?: boolean;
+    /** Ось переноса. `horizontal` — ряд с переносом по ширине. */
+    orientation?: GrSortableOrientation;
+    /** Поверхность под списком — вариант карточки. */
+    variant?: GrCardVariant;
+    /** Разделители между строками. */
+    divided?: boolean;
+    /** Тянуть можно только за ручку. Выключено — тянется вся строка. */
+    handleOnly?: boolean;
+    /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */
+    maxHeight?: number | string;
+    /** Текст пустого состояния. Слот `#empty` сильнее. */
+    emptyText?: string;
+    /** Имя списка для скринридера. Не задано — берётся из локали. */
+    ariaLabel?: string;
+}
+export interface GrSortableListEmits<TItem = unknown> {
+    (e: 'update:modelValue', value: TItem[]): void;
+    (e: 'move', from: number, to: number): void;
+    (e: 'change', value: TItem[]): void;
+}
+declare const __VLS_export: <T>(__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<GrSortableListProps<T> & {
+        onChange?: ((value: T[]) => any) | undefined;
+        onMove?: ((from: number, to: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Программная перестановка — та же, что делает перенос. */
+        move: (from: number, to: number) => void;
+        focusItem: (index: number) => Promise<void>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            item: T;
+            index: number;
+            dragging: boolean;
+            grabbed: boolean;
+        }) => any;
+        handle?: (props: {
+            item: T;
+            index: number;
+            disabled: boolean;
+        }) => any;
+        empty?: () => any;
+    };
+    emit: GrSortableListEmits<T>;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

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

package/dist/types/src/components/GrSortableList/grSortableListStyles.d.ts

@@ -0,0 +1,38 @@
+export type GrSortableOrientation = 'horizontal' | 'vertical';
+/**
+ * Классы `GrSortableList`. Единственный источник правды для шаблона и
+ * `safelist.ts`: литерал, живущий только здесь, до скана UnoCSS не доходит —
+ * хелпер уезжает в общий чанк `dist/chunks/`.
+ */
+export declare const listClass: Record<GrSortableOrientation, string>;
+export declare const rowLayoutClass = "relative flex items-center gap-2 px-4 py-3 transition-colors duration-[var(--gr-duration-fast)]";
+/**
+ * Строка — остановка роверного фокуса, поэтому кольцо на ней, а не на ручке:
+ * с клавиатуры берут строку целиком, ручка остаётся affordance для мыши.
+ */
+export declare const rowFocusClass = "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-inset";
+export declare const rowDraggingClass = "bg-[var(--gr-sortable-row-bg-active,var(--gr-muted))]";
+/** Взятая с клавиатуры строка обязана отличаться от просто сфокусированной. */
+export declare const rowGrabbedClass = "bg-[var(--gr-sortable-row-bg-active,var(--gr-muted))] ring-2 ring-[var(--gr-ring)] ring-inset";
+export declare const rowDisabledClass = "cursor-not-allowed bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]";
+export declare const dividedClass = "divide-y divide-[var(--gr-brd)]";
+export declare const emptyClass = "px-4 py-6 text-center text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]";
+/**
+ * Ручка не табируется: внутри роверного композита свой таб-стоп сломал бы
+ * правило «один Tab на список» — тот же приём, что у ручки `GrTree`.
+ */
+/**
+ * `[touch-action:none]` вместо `touch-none`: утилиты нет ни в `presetMini`, ни
+ * в extra-rules, класс молча не превратился бы в CSS — и вертикальный свайп по
+ * ручке ушёл бы в прокрутку страницы. Тот же приём у дорожки `GrSlider`.
+ */
+export declare const handleClass = "flex shrink-0 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-sortable-handle-color,var(--gr-muted-fg))] size-[var(--gr-sortable-handle-size,1.5rem)] cursor-grab [touch-action:none] focus:outline-none";
+export declare const handleDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+export declare const handleIconClass = "i-lucide-grip-vertical";
+export declare const contentClass = "min-w-0 flex-1 text-[length:var(--gr-text-sm)]";
+/**
+ * Куда встанет строка — псевдоэлемент самой строки, а не отдельный узел:
+ * лишний узел между строками ломает и `divide-y`, и подсчёт позиций.
+ */
+export declare const indicatorBeforeClass = "before:absolute before:inset-x-0 before:top-0 before:h-[var(--gr-sortable-indicator-width,2px)] before:bg-[var(--gr-sortable-indicator,var(--gr-primary))] before:content-empty";
+export declare const indicatorAfterClass = "after:absolute after:inset-x-0 after:bottom-0 after:h-[var(--gr-sortable-indicator-width,2px)] after:bg-[var(--gr-sortable-indicator,var(--gr-primary))] after:content-empty";

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

@@ -0,0 +1,9 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrSortableListComponent from './GrSortableList.vue';
+export { default } from './GrSortableList.vue';
+export { default as GrSortableList } from './GrSortableList.vue';
+export type { GrSortableListEmits, GrSortableListProps } from './GrSortableList.vue';
+export type { GrSortableOrientation } from './grSortableListStyles';
+export { grSortableListConfig } from './config';
+export { grSortableListSafelist } from './safelist';
+export type GrSortableListInstance = ComponentExposed<typeof GrSortableListComponent>;

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

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