@feugene/granularity 0.12.0 → 0.16.0

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

@@ -0,0 +1,67 @@
+import type { ComputedRef } from 'vue';
+import type { GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectValue } from '../grSelectStyles';
+/**
+ * Элемент рендера панели: либо заголовок группы, либо опция.
+ * Группировка сохраняется, фильтрация по запросу скрывает пустые группы.
+ */
+export type GrSelectPanelItem<TValue extends GrSelectValue> = {
+    kind: 'group';
+    label: string;
+    key: string;
+}
+/** `groupKey` связывает опцию с заголовком её группы для скринридера. */
+ | {
+    kind: 'option';
+    option: GrSelectOption<TValue>;
+    key: string;
+    groupKey?: string;
+};
+export type GrSelectPanelOptionRow<TValue extends GrSelectValue> = {
+    option: GrSelectOption<TValue>;
+    key: string;
+    index: number;
+};
+export type GrSelectPanelRow<TValue extends GrSelectValue> = {
+    kind: 'group';
+    label: string;
+    key: string;
+    options: GrSelectPanelOptionRow<TValue>[];
+    /**
+     * Есть ли в этой отрисовке видимый заголовок. При виртуализации окно может
+     * начаться серединой группы: обёртка нужна всё равно, а заголовка нет —
+     * имя тогда идёт в `aria-label`.
+     */
+    labelVisible?: boolean;
+    /** Позиция заголовка в `panelItems` — по ней его замеряет виртуализатор. */
+    labelIndex?: number;
+} | ({
+    kind: 'option';
+} & GrSelectPanelOptionRow<TValue>);
+/**
+ * Состав панели `GrSelect`: плоский набор строк, их группировка и признак
+ * «набранное можно добавить».
+ *
+ * Отвечает только на вопрос «что показывать в списке». Окно виртуализации,
+ * клавиатура и вид — не здесь.
+ */
+export interface UseSelectPanelItemsOptions<TValue extends GrSelectValue> {
+    optionsResolved: ComputedRef<GrSelectOptionOrGroup<TValue>[]>;
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    isOptionGroup: (item: GrSelectOptionOrGroup<TValue>) => item is GrSelectOptionGroup<TValue>;
+    modelSingle: ComputedRef<TValue | ''>;
+    selectedValues: ComputedRef<TValue[]>;
+    hasModelInOptions: ComputedRef<boolean>;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    /** Текст поиска: он же кандидат в кастомные значения. */
+    query: () => string;
+    allowCustomValue: () => boolean;
+    filterable: () => boolean;
+    multiple: () => boolean;
+    isPanelView: () => boolean;
+}
+export interface SelectPanelItems<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    panelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+}
+export declare function useSelectPanelItems<TValue extends GrSelectValue>(options: UseSelectPanelItemsOptions<TValue>): SelectPanelItems<TValue>;

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

@@ -0,0 +1,37 @@
+import type { ComputedRef } from 'vue';
+import type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectValue } from '../grSelectStyles';
+/**
+ * Значение и опции `GrSelect`: плоский список, выбранное, подпись триггера.
+ *
+ * Здесь живёт всё, что отвечает на вопрос «что выбрано и как это назвать», и
+ * ничего про панель, клавиатуру и вид. Сравнения идут через ключ значения
+ * (`selectValue.ts`), а не через `===`: модель приходит снаружи отдельной
+ * копией, и объекты по ссылке не совпали бы ни с одной опцией.
+ */
+export interface UseSelectValuesOptions<TValue extends GrSelectValue> {
+    modelValue: () => GrSelectModelValue<TValue>;
+    options: () => GrSelectOptionOrGroup<TValue>[] | undefined;
+    multiple: () => boolean;
+    /** Имя поля-идентификатора для объектных значений. */
+    valueKey: () => string | undefined;
+    placeholder: () => string | undefined;
+}
+export interface SelectValues<TValue extends GrSelectValue> {
+    optionsResolved: ComputedRef<GrSelectOptionOrGroup<TValue>[]>;
+    /** Плоский список всех опций (группы «развёрнуты»). */
+    flatOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    isOptionGroup: (item: GrSelectOptionOrGroup<TValue>) => item is GrSelectOptionGroup<TValue>;
+    keyOf: (value: unknown) => string;
+    sameValue: (a: unknown, b: unknown) => boolean;
+    modelSingle: ComputedRef<TValue | ''>;
+    modelMultiple: ComputedRef<TValue[]>;
+    selectedValues: ComputedRef<TValue[]>;
+    hasSelection: ComputedRef<boolean>;
+    /** Восстанавливает типизированное значение из строки, пришедшей из DOM. */
+    fromDomValue: (raw: string) => TValue;
+    selectedOptions: ComputedRef<GrSelectOption<TValue>[]>;
+    hasModelInOptions: ComputedRef<boolean>;
+    displayLabel: ComputedRef<string>;
+    displayText: ComputedRef<string>;
+}
+export declare function useSelectValues<TValue extends GrSelectValue>(options: UseSelectValuesOptions<TValue>): SelectValues<TValue>;

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

@@ -0,0 +1,27 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { GrSelectValue } from '../grSelectStyles';
+import type { GrSelectPanelItem, GrSelectPanelRow } from './useSelectPanelItems';
+export interface UseSelectVirtualizationOptions<TValue extends GrSelectValue> {
+    panelItems: ComputedRef<GrSelectPanelItem<TValue>[]>;
+    panelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    canAddCustom: ComputedRef<boolean>;
+    /** Контейнер списка: по нему считается окно и замеряются строки. */
+    listboxEl: Ref<HTMLElement | null>;
+    enabled: () => boolean;
+    maxHeight: () => number;
+}
+export interface SelectVirtualization<TValue extends GrSelectValue> {
+    virtualEnabled: ComputedRef<boolean>;
+    /** Сдвиг набора: строка «Add …» стоит перед опциями. */
+    addOffset: ComputedRef<number>;
+    scrollToIndex: (index: number) => void;
+    /** Замер строки: оценка высоты уточняется по реальному узлу. */
+    measure: (index: number, el: Element | null) => void;
+    /** ARIA набора для опции; вне виртуализации набор виден по DOM. */
+    optionSetProps: (index: number) => Record<string, number> | undefined;
+    addOptionSetProps: ComputedRef<Record<string, number> | undefined>;
+    showAddOption: ComputedRef<boolean>;
+    renderedPanelRows: ComputedRef<GrSelectPanelRow<TValue>[]>;
+    listboxStyle: ComputedRef<Record<string, string>>;
+}
+export declare function useSelectVirtualization<TValue extends GrSelectValue>(options: UseSelectVirtualizationOptions<TValue>): SelectVirtualization<TValue>;

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

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

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

@@ -0,0 +1,17 @@
+import type { GrSelectSize, GrSelectUnderline, GrSelectVariant } from './grSelectStyles';
+/**
+ * Пропы `GrSelect`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrSelect: { … } }">`.
+ * Только оформление и поведение по умолчанию — см. `GrButton/defaults.ts`.
+ */
+export interface GrSelectConfigurableProps {
+    size: GrSelectSize;
+    variant: GrSelectVariant;
+    underline: GrSelectUnderline;
+    clearable: boolean;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrSelect: GrSelectConfigurableProps;
+    }
+}

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

@@ -1,25 +1,59 @@
+import type { GrComponentSize, GrControlState } from '../shared/sizes';
 export type GrSelectView = 'default' | 'link';
-export type GrSelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrSelectSize = GrComponentSize;
 export type GrSelectVariant = 'primary' | 'default' | 'muted' | 'danger';
 export type GrSelectUnderline = 'auto' | 'always' | 'none';
 export type GrSelectOptionsView = 'native' | 'panel';
-export type GrSelectOption = {
-    value: string;
+/**
+ * Тип значения опции. Ограничен примитивами, которые переживают путь через DOM:
+ * нативный `<select>` хранит в `option.value` только строку, поэтому значение
+ * должно однозначно восстанавливаться из своего строкового представления.
+ * Объектные модели потребовали бы отдельного key-экстрактора — см. `docs/components.md`.
+ */
+/**
+ * Значение опции. Объект допустим, но тогда обязателен проп `valueKey`: в DOM
+ * значение живёт строкой, и без ключа объекты неотличимы друг от друга.
+ */
+export type GrSelectValue = string | number | object;
+export type GrSelectState = GrControlState;
+export type GrSelectOption<TValue extends GrSelectValue = string> = {
+    value: TValue;
     label: string;
     disabled?: boolean;
 };
 /** Группа опций: заголовок `label` + вложенные опции `options`. */
-export type GrSelectOptionGroup = {
+export type GrSelectOptionGroup<TValue extends GrSelectValue = string> = {
     label: string;
-    options: GrSelectOption[];
+    options: GrSelectOption<TValue>[];
 };
 /** Элемент списка опций: либо одиночная опция, либо группа опций. */
-export type GrSelectOptionOrGroup = GrSelectOption | GrSelectOptionGroup;
-export type GrSelectModelValue = string | string[];
-export declare const defaultBaseClass = "w-full rounded-md border border-[var(--brd)] bg-[var(--bg)] text-[var(--fg)] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]";
-export declare const linkBaseClass = "cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[6px] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]";
+export type GrSelectOptionOrGroup<TValue extends GrSelectValue = string> = GrSelectOption<TValue> | GrSelectOptionGroup<TValue>;
+export type GrSelectModelValue<TValue extends GrSelectValue = string> = TValue | TValue[];
+export declare const defaultBaseClass = "w-full rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+ * Цвет рамки по состоянию — та же карта, что у `GrInput` и `GrTextarea`: поля
+ * одной формы обязаны показывать ошибку одинаково.
+ */
+export declare const borderClassByState: Record<GrSelectState, string>;
+/**
+ * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:
+ * `state="danger"` — это подсветка по решению разработчика, `invalid` — вердикт
+ * валидации, и тема вправе развести их по цвету.
+ */
+export declare const invalidBorderClass = "border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]";
+export declare const linkBaseClass = "cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
 export declare const selectSizeClassBySize: Record<GrSelectSize, string>;
 export declare const selectLinkSizeClassBySize: Record<GrSelectSize, string>;
+/**
+ * Ссылка — это ТЕКСТ на фоне страницы, поэтому опасный тон берётся из
+ * `--gr-danger-text`, а не из насыщенного `--gr-danger` (последний под текст не
+ * рассчитан). Hover/active выводятся подмесом `--gr-fg` — той же формулой, что
+ * `GrLink`. `primary` берётся из `--gr-primary-text` по той же причине: на фоне
+ * страницы насыщенный `--gr-primary` под текст не рассчитан.
+ *
+ * Классы записаны литералами, а не собраны интерполяцией: safelist и скан
+ * UnoCSS читают исходник, и вычисленная строка для них не класс.
+ */
 export declare const selectLinkVariantClassByVariant: Record<GrSelectVariant, string>;
 /**
  * Variant-классы для видимой метки в `view="link"` + `optionsView="native"`.
@@ -38,6 +72,9 @@ export declare const grSelectLinkNativeOverlayClass = "peer absolute inset-0 w-f
  * Классы видимой метки для `view="link"` + `optionsView="native"` (поверх прозрачного `<select>`).
  * Получает все link-стили (size/variant/underline), а также focus-ring через `peer-focus-visible`.
  */
+export declare const grSelectLinkNativeLabelBaseClass = "pointer-events-none inline-block whitespace-nowrap align-baseline rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]";
+export declare const grSelectLinkNativeLabelDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)] no-underline";
+export declare const grSelectLinkNativeLabelFocusClass = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--gr-ring)]";
 export declare function grSelectLinkNativeLabelClass(options: {
     size: GrSelectSize;
     variant: GrSelectVariant;
@@ -50,6 +87,8 @@ export declare function grSelectClass(options: {
     disabled: boolean;
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
+    state?: GrSelectState;
+    invalid?: boolean;
 }): string;
 export declare function grSelectNativeClass(options: {
     view: GrSelectView;
@@ -58,6 +97,8 @@ export declare function grSelectNativeClass(options: {
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
     showNativeChevron: boolean;
+    state?: GrSelectState;
+    invalid?: boolean;
 }): string;
 export declare function grSelectTriggerClass(options: {
     view: GrSelectView;
@@ -66,5 +107,19 @@ export declare function grSelectTriggerClass(options: {
     disabled: boolean;
     variant: GrSelectVariant;
     underline: GrSelectUnderline;
+    state?: GrSelectState;
+    invalid?: boolean;
+}): string;
+export declare const grSelectPanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden";
+export declare const selectOptionBaseClass = "rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)]";
+export declare const selectOptionLinkWidthClass = "block min-w-full w-max whitespace-nowrap";
+export declare const selectOptionWidthClass = "w-full";
+export declare const selectOptionEnabledClass = "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+export declare const selectOptionActiveClass = "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]";
+/** Выключенная опция гасится токеном текста — по той же причине, что и контрол. */
+export declare const selectOptionDisabledClass = "cursor-not-allowed text-[var(--gr-muted-fg)]";
+export declare function grSelectOptionClass(options: {
+    view: GrSelectView;
+    disabled: boolean;
+    active: boolean;
 }): string;
-export declare const grSelectPanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--brd)] bg-[var(--card)] text-[var(--card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden";

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

@@ -1,5 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrSelectComponent from './GrSelect.vue';
 export { default } from './GrSelect.vue';
 export { default as GrSelect } from './GrSelect.vue';
 export { grSelectConfig } from './config';
-export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectProps, GrSelectSize, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './GrSelect.vue';
+export type { GrSelectConfigurableProps } from './defaults';
+export type { GrSelectModelValue, GrSelectOption, GrSelectOptionGroup, GrSelectOptionOrGroup, GrSelectOptionsView, GrSelectProps, GrSelectSize, GrSelectState, GrSelectUnderline, GrSelectVariant, GrSelectView, } from './GrSelect.vue';
 export { grSelectSafelist } from './safelist';
+export type { GrSelectEmits } from './GrSelect.vue';
+export type GrSelectInstance = ComponentExposed<typeof GrSelectComponent>;

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

@@ -0,0 +1,20 @@
+/**
+ * Сравнение значений `GrSelect` — чистая арифметика без Vue и без пропов.
+ *
+ * Вынесено отдельным модулем, потому что от состояния компонента здесь не
+ * зависит ничего: только само значение и имя поля-идентификатора. Тестируется
+ * напрямую, без монтирования.
+ */
+/**
+ * Ключ значения: для объектов — поле `valueKey`, иначе само значение строкой.
+ * Через него идут все сравнения — `===` для объектов означал бы сравнение
+ * ссылок, а модель обычно приходит снаружи отдельной копией.
+ */
+export declare function selectValueKey(value: unknown, valueKey?: string): string;
+/**
+ * `0` — валидное значение, поэтому «пусто» проверяется явно, а не через falsy:
+ * прежняя проверка `if (!value)` теряла ноль вместе с пустой строкой.
+ */
+export declare function isEmptySelectValue(value: unknown): boolean;
+/** Модель к массиву: скаляр становится набором из одного, пустое — пустым. */
+export declare function toSelectArray<TValue>(value: TValue | TValue[] | ''): TValue[];

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;
@@ -36,10 +36,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     badge: undefined;
 }>>> & Readonly<{}>, {
     icon: string | Component;
-    disabled: boolean;
-    as: string | Component;
     href: string;
     active: boolean;
+    disabled: boolean;
+    as: string | Component;
     badge: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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<{}>, {
-    width: string;
+    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';