@feugene/granularity 0.12.0 → 0.16.0

package/dist/types/src/components/GrBadge/grBadgeStyles.d.ts

@@ -1,10 +1,22 @@
+import type { GrComponentSize } from '../shared/sizes';
 import type { GrTone } from '../shared/tones';
 export type GrBadgeTone = GrTone;
-export type GrBadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrBadgeSize = GrComponentSize;
 export type GrBadgeRadius = 'square' | 'semi' | 'round';
 export declare const sizeClassBySize: Record<GrBadgeSize, string>;
 export declare const semiRadiusClassBySize: Record<GrBadgeSize, string>;
 export declare const lightToneClassByTone: Record<GrBadgeTone, string>;
+/**
+ * Заливка filled-бейджа идёт через покомпонентный слой `--gr-badge-{tone}-*`, а
+ * не напрямую из роли тона, потому что нужный вес у тем разный.
+ *
+ * В светлой теме `--gr-{tone}` — это яркая заливка под **тёмный** текст (`-fg`
+ * там обязан быть тёмным: белый на `--gr-success` даёт 2.54:1), и filled-бейдж
+ * читался как тяжёлая почти чёрная плашка. Слой уводит его на `-solid`/`-solid-fg`
+ * — заливку кнопочного веса под светлый текст, ту же, что у solid-кнопок.
+ * В тёмной теме пастельная заливка с тёмным текстом — штатная конвенция, и слой
+ * оставляет прежние роли. Значения — `themes/{light,dark}.css`.
+ */
 export declare const darkToneClassByTone: Record<GrBadgeTone, string>;
 export declare function grBadgeClass(options: {
     tone: GrBadgeTone;

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

@@ -1,5 +1,7 @@
 export { default } from './GrBadge.vue';
 export { default as GrBadge } from './GrBadge.vue';
 export { grBadgeConfig } from './config';
+export type { GrBadgeConfigurableProps } from './defaults';
 export type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles';
 export { grBadgeSafelist } from './safelist';
+export type { GrBadgeProps } from './GrBadge.vue';

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

@@ -1,20 +1,57 @@
-type __VLS_Props = {
+import { type GrBadgeWrapPlacement, type GrBadgeWrapTone } from './grBadgeWrapStyles';
+export type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles';
+/**
+ * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.
+ *
+ * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,
+ * поэтому рядом с бейджем идёт визуально скрытая подпись.
+ */
+export interface GrBadgeWrapProps {
     value?: string | number;
+    /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */
     dot?: boolean;
-};
+    /** Порог: значения больше него рисуются как «{max}+». */
+    max?: number;
+    /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */
+    showZero?: boolean;
+    tone?: GrBadgeWrapTone;
+    placement?: GrBadgeWrapPlacement;
+    /** Подпись счётчика для скринридера. Не задана — берётся из локали. */
+    ariaLabel?: string;
+    /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */
+    animate?: boolean;
+}
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBadgeWrapProps>, {
     value: undefined;
     dot: boolean;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    max: undefined;
+    showZero: boolean;
+    tone: string;
+    placement: string;
+    ariaLabel: undefined;
+    animate: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBadgeWrapProps>, {
     value: undefined;
     dot: boolean;
+    max: undefined;
+    showZero: boolean;
+    tone: string;
+    placement: string;
+    ariaLabel: undefined;
+    animate: boolean;
 }>>> & Readonly<{}>, {
+    tone: GrBadgeWrapTone;
     value: string | number;
+    animate: boolean;
+    max: number;
+    placement: GrBadgeWrapPlacement;
     dot: boolean;
+    ariaLabel: string;
+    showZero: boolean;
 }, {}, {}, {}, 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/src/components/GrBadgeWrap/config.d.ts

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

package/dist/types/src/components/GrBadgeWrap/grBadgeWrapStyles.d.ts

@@ -0,0 +1,46 @@
+import type { GrTone } from '../shared/tones';
+export type GrBadgeWrapTone = GrTone;
+/** Угол, в котором висит бейдж. */
+export declare const GR_BADGE_WRAP_PLACEMENTS: readonly ["top-right", "top-left", "bottom-right", "bottom-left"];
+export type GrBadgeWrapPlacement = typeof GR_BADGE_WRAP_PLACEMENTS[number];
+export declare const rootClass = "relative inline-flex";
+/**
+ * Смещение бейджа — точки кастомизации: подвинуть его можно темой или инлайном,
+ * не переопределяя классы снаружи. Дефолты повторяют прежние `-top-2 -right-2`.
+ */
+export declare const placementClass: Record<GrBadgeWrapPlacement, string>;
+/** У точки смещение меньше: она вдвое мельче счётчика. */
+export declare const dotPlacementClass: Record<GrBadgeWrapPlacement, string>;
+export declare const dotBaseClass = "absolute h-2 w-2 rounded-[var(--gr-radius-full)]";
+export declare const countBaseClass = "absolute min-w-5 h-5 px-1 rounded-[var(--gr-radius-full)] text-[length:var(--gr-text-2xs)] font-700 inline-flex items-center justify-center";
+/**
+ * Заливка — насыщенная роль тона, текст из `-fg`, а не из белого литерала: тот не
+ * переживает смену темы.
+ *
+ * Вес намеренно не такой, как у filled-`GrBadge` (тот в светлой теме уехал на
+ * `-solid`): точка и счётчик лежат **поверх чужого элемента**, и порог у них свой
+ * — 3:1 к фону страницы, чтобы метку было видно на аватаре и на иконке. Заливка
+ * кнопочного веса читалась бы там как вторая кнопка.
+ *
+ * Карта своя, а не импорт из `GrBadge`: чужая карта означала бы зависимость от
+ * компонента и его CSS ради двух классов.
+ */
+export declare const toneClass: Record<GrBadgeWrapTone, string>;
+/**
+ * Видимый текст счётчика: число больше порога сворачивается в «{max}+», иначе
+ * бейдж расползается и ломает соседей. Озвучивается при этом настоящее
+ * значение — «99 плюс» пользователю ничего не говорит.
+ */
+export declare function formatBadgeValue(value: string | number, max?: number): string;
+/**
+ * Стоит ли отмечать анимацией переход счётчика из `prev` в `next`.
+ * `undefined` означает «счётчика на экране нет».
+ *
+ * Отмечается только прибавление: появление счётчика и рост числа — события,
+ * о которых пользователь ещё не знает. Убыль — наоборот, след его собственного
+ * действия («прочитал»), и подсвечивать её значит мигать бейджем на каждом
+ * прочитанном письме.
+ *
+ * У строкового значения порядка нет, поэтому любая его смена считается событием.
+ */
+export declare function isBadgeWrapPulse(prev: string | number | undefined, next: string | number | undefined): boolean;

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

@@ -1,3 +1,7 @@
 export { default } from './GrBadgeWrap.vue';
 export { default as GrBadgeWrap } from './GrBadgeWrap.vue';
+export type { GrBadgeWrapProps } from './GrBadgeWrap.vue';
 export { grBadgeWrapConfig } from './config';
+export { formatBadgeValue, GR_BADGE_WRAP_PLACEMENTS } from './grBadgeWrapStyles';
+export type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles';
+export { grBadgeWrapSafelist } from './safelist';

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

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

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

@@ -1,16 +1,88 @@
+import { type Component } from 'vue';
+import type { GrComponentSize } from '../shared/sizes';
+import { type GrBottomNavHideAbove, type GrBottomNavPosition } from './grBottomNavStyles';
+import './defaults';
+export type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles';
+/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */
 export type GrBottomNavItem = {
     label: string;
     value: string;
+    /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */
+    icon?: string | Component;
+    /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */
+    badge?: string | number;
+    /** Подпись счётчика для скринридера, сильнее локали. */
+    badgeLabel?: string;
+    disabled?: boolean;
+    href?: string;
+    /** Цель роутерной ссылки: уезжает в компонент из `as`. */
+    to?: unknown;
+    /** Доступное имя пункта, когда подписи недостаточно. */
+    ariaLabel?: string;
 };
-type __VLS_Props = {
+/**
+ * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней
+ * кромке экрана.
+ *
+ * Активный пункт объявлен `aria-current="page"` и отличается не только цветом:
+ * подложкой и весом подписи тоже.
+ */
+export interface GrBottomNavProps {
     modelValue: string;
     items: GrBottomNavItem[];
+    /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */
+    as?: string | Component;
+    /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */
+    hideAbove?: GrBottomNavHideAbove;
+    /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */
+    position?: GrBottomNavPosition;
+    /** Имя лендмарка. Не задано — берётся из локали. */
+    ariaLabel?: string;
+    /**
+     * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта
+     * остаётся 44×44 на любой ступени.
+     */
+    size?: GrComponentSize;
+}
+export interface GrBottomNavEmits {
+    (e: 'update:modelValue', value: string): void;
+}
+type __VLS_Slots = {
+    /**
+     * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —
+     * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.
+     */
+    item?: (props: {
+        item: GrBottomNavItem;
+        active: boolean;
+        disabled: boolean;
+        badgeLabel: string | undefined;
+    }) => any;
 };
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBottomNavProps>, {
+    as: undefined;
+    hideAbove: string;
+    position: string;
+    ariaLabel: undefined;
+    size: undefined;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBottomNavProps>, {
+    as: undefined;
+    hideAbove: string;
+    position: string;
+    ariaLabel: undefined;
+    size: undefined;
+}>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    size: GrComponentSize;
+    position: GrBottomNavPosition;
+    ariaLabel: string;
+    as: string | Component;
+    hideAbove: GrBottomNavHideAbove;
+}, {}, {}, {}, 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> = {
@@ -21,3 +93,18 @@ type __VLS_TypePropsToOption<T> = {
         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/GrBottomNav/config.d.ts

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

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

@@ -0,0 +1,16 @@
+import type { GrComponentSize } from '../GrConfigProvider/context';
+/**
+ * Пропы `GrBottomNav`, настраиваемые глобально через `componentDefaults`.
+ *
+ * Шкала у панели своя по смыслу: ступень тянет высоту полосы, глиф и кегль
+ * подписи, но не трогает тач-таргет пункта — он остаётся 44×44 на любой
+ * ступени (см. `grBottomNavStyles.ts`).
+ */
+export interface GrBottomNavConfigurableProps {
+    size: GrComponentSize;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrBottomNav: GrBottomNavConfigurableProps;
+    }
+}

package/dist/types/src/components/GrBottomNav/grBottomNavStyles.d.ts

@@ -0,0 +1,56 @@
+import type { GrComponentSize } from '../shared/sizes';
+/**
+ * Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда:
+ * киоск и PWA нижнюю навигацию не прячут.
+ */
+export declare const GR_BOTTOM_NAV_HIDE_ABOVE: readonly ["sm", "md", "lg", "none"];
+export type GrBottomNavHideAbove = typeof GR_BOTTOM_NAV_HIDE_ABOVE[number];
+/** Прижата к нижней кромке экрана или лежит обычным блоком в потоке. */
+export declare const GR_BOTTOM_NAV_POSITIONS: readonly ["fixed", "static"];
+export type GrBottomNavPosition = typeof GR_BOTTOM_NAV_POSITIONS[number];
+export declare const rootBase = "border-t border-[var(--gr-brd)] bg-[var(--gr-bg)] px-2 pb-[env(safe-area-inset-bottom)]";
+export declare const rootPositionClass: Record<GrBottomNavPosition, string>;
+export declare const rootHideAboveClass: Record<GrBottomNavHideAbove, string>;
+export declare const listClass = "flex items-center justify-around";
+/**
+ * Размерная шкала панели: высота полосы, глиф и кегль подписи.
+ *
+ * Что тянуть у панели фиксированной высоты — вопрос неочевидный, и ответ здесь
+ * ограничен снизу доступностью: **тач-таргет пункта не может стать меньше
+ * 44×44** (WCAG 2.5.5). Поэтому ступень ужимает полосу и содержимое, а сам
+ * пункт остаётся тем же прямоугольником под палец — `min-w-[44px]
+ * min-h-[44px]` в `itemBase` вне шкалы намеренно.
+ *
+ * `md` совпадает с историческим видом панели: без пропа не меняется ничего.
+ */
+export declare const listSizes: Record<GrComponentSize, string>;
+export declare const itemTextSizes: Record<GrComponentSize, string>;
+export declare const itemIconSizes: Record<GrComponentSize, string>;
+export declare const itemBase = "relative min-w-[44px] min-h-[44px] px-3 py-1 rounded-[var(--gr-radius-md)] flex flex-col items-center justify-center gap-0.5 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+ * Активный пункт несёт три отличия сразу — подложку, вес и цвет. Одного цвета
+ * мало: он не виден при монохромном зрении и не существует для диктора
+ * (`aria-current` закрывает вторую половину задачи).
+ */
+export declare const itemActiveClass = "bg-[var(--gr-muted)] font-600 text-[var(--gr-primary-text)]";
+export declare const itemIdleClass = "font-500 text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]";
+/** Недоступный пункт гасится токеном: `opacity` разбавляет выверенные на AA цвета. */
+export declare const itemDisabledClass = "cursor-not-allowed font-500 text-[var(--gr-disabled-fg)]";
+export declare const itemIconClass = "block shrink-0";
+export declare const itemLabelClass = "max-w-full truncate leading-none";
+/**
+ * Бейдж висит поверх правого верхнего угла пункта. Своя разметка, а не
+ * `GrBadgeWrap`: зависимость притащила бы потребителю чужой CSS ради кружка.
+ */
+export declare const itemBadgeClass = "absolute top-0.5 right-1 min-w-4 h-4 px-1 rounded-[var(--gr-radius-full)] bg-[var(--gr-danger)] text-[var(--gr-danger-fg)] text-[length:var(--gr-text-2xs)] font-700 inline-flex items-center justify-center";
+export declare function grBottomNavRootClass(options: {
+    position: GrBottomNavPosition;
+    hideAbove: GrBottomNavHideAbove;
+}): string;
+export declare function grBottomNavListClass(size: GrComponentSize): string;
+export declare function grBottomNavIconClass(size: GrComponentSize): string;
+export declare function grBottomNavItemClass(options: {
+    active: boolean;
+    disabled: boolean;
+    size: GrComponentSize;
+}): string;

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

@@ -1,4 +1,9 @@
 export { default } from './GrBottomNav.vue';
 export { default as GrBottomNav } from './GrBottomNav.vue';
+export type { GrBottomNavItem, GrBottomNavProps } from './GrBottomNav.vue';
+export type { GrBottomNavConfigurableProps } from './defaults';
 export { grBottomNavConfig } from './config';
-export type { GrBottomNavItem } from './GrBottomNav.vue';
+export { GR_BOTTOM_NAV_HIDE_ABOVE, GR_BOTTOM_NAV_POSITIONS } from './grBottomNavStyles';
+export type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles';
+export { grBottomNavSafelist } from './safelist';
+export type { GrBottomNavEmits } from './GrBottomNav.vue';

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

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

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

@@ -0,0 +1,117 @@
+import { type GrBreadcrumbItem, type GrBreadcrumbsLinkComponent, type GrBreadcrumbsSize } from './grBreadcrumbsStyles';
+export type { GrBreadcrumbItem, GrBreadcrumbsSize } from './grBreadcrumbsStyles';
+/**
+ * Путь до текущей страницы (WAI-ARIA breadcrumb): `<nav>` с именем, внутри
+ * упорядоченный список ссылок, последний пункт — текущая страница.
+ *
+ * Ссылки рисует `GrLink`, поэтому роутер подключается тем же способом, что и
+ * везде в пакете: `as` + `to`.
+ */
+export interface GrBreadcrumbsProps {
+    /** Путь от корня к текущей странице. Последний пункт — текущая страница. */
+    items: GrBreadcrumbItem[];
+    /** Компонент ссылки для всех пунктов: `RouterLink`, `NuxtLink`, `Link` Inertia. */
+    as?: GrBreadcrumbsLinkComponent;
+    /** Разделитель между пунктами. Декоративен: диктору не читается. */
+    separator?: string;
+    size?: GrBreadcrumbsSize;
+    /**
+     * С какого числа пунктов схлопывать середину в «…». `0`/не задано — показывать
+     * путь целиком.
+     */
+    maxItems?: number;
+    /** Сколько пунктов оставить в начале при схлопывании. */
+    itemsBeforeCollapse?: number;
+    /** Сколько пунктов оставить в конце при схлопывании. */
+    itemsAfterCollapse?: number;
+    /** Имя лендмарка. Не задано — берётся из локали. */
+    ariaLabel?: string;
+    /** Последний пункт остаётся ссылкой (текущая страница кликабельна). */
+    linkCurrent?: boolean;
+    /** i18n-метка кнопки раскрытия схлопнутого пути. */
+    expandLabel?: string;
+    /**
+     * Схлопывать по доступной ширине, а не по числу пунктов. Путь становится
+     * однострочным, середина уходит под «…» ровно настолько, насколько не влезает.
+     *
+     * Без пропа поведение прежнее: список переносится на вторую строку, а порог
+     * задаёт `maxItems`. Вместе пропы совместимы — `maxItems` остаётся жёстким
+     * потолком, ширина ужимает дальше.
+     */
+    autoCollapse?: boolean;
+}
+type __VLS_Slots = {
+    /** Содержимое пункта целиком (иконка и подпись). */
+    item?: (props: {
+        item: GrBreadcrumbItem;
+        index: number;
+        isCurrent: boolean;
+    }) => unknown;
+    /** Разделитель между пунктами. */
+    separator?: () => unknown;
+    /** Кнопка раскрытия схлопнутой середины. */
+    ellipsis?: (props: {
+        hiddenCount: number;
+        expand: () => void;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBreadcrumbsProps>, {
+    as: undefined;
+    separator: undefined;
+    size: undefined;
+    maxItems: undefined;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    ariaLabel: undefined;
+    linkCurrent: boolean;
+    expandLabel: undefined;
+    autoCollapse: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrBreadcrumbsProps>, {
+    as: undefined;
+    separator: undefined;
+    size: undefined;
+    maxItems: undefined;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    ariaLabel: undefined;
+    linkCurrent: boolean;
+    expandLabel: undefined;
+    autoCollapse: boolean;
+}>>> & Readonly<{}>, {
+    size: GrBreadcrumbsSize;
+    separator: string;
+    ariaLabel: string;
+    as: GrBreadcrumbsLinkComponent;
+    itemsBeforeCollapse: number;
+    maxItems: number;
+    itemsAfterCollapse: number;
+    linkCurrent: boolean;
+    expandLabel: string;
+    autoCollapse: 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/src/components/GrBreadcrumbs/config.d.ts

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

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

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

package/dist/types/src/components/GrBreadcrumbs/grBreadcrumbsStyles.d.ts

@@ -0,0 +1,86 @@
+import type { Component } from 'vue';
+import type { GrComponentSize } from '../shared/sizes';
+export type GrBreadcrumbsSize = GrComponentSize;
+/** Пункт пути. Кроме `label` всё опционально: последний пункт обычно без ссылки. */
+export type GrBreadcrumbItem = {
+    label: string;
+    href?: string;
+    /** Цель роутерной ссылки: уезжает в `GrLink` через `attrs` вместе с `as`. */
+    to?: unknown;
+    /** Класс иконки перед подписью (`i-lucide-*`) — иконка декоративна. */
+    icon?: string;
+    disabled?: boolean;
+    /** Доступное имя пункта, когда подписи недостаточно («Настройки» → «Настройки проекта»). */
+    ariaLabel?: string;
+};
+export declare const breadcrumbsRootClass = "w-full min-w-0";
+export declare const breadcrumbsListClass = "flex items-center gap-1 m-0 p-0 [list-style:none]";
+/**
+ * Перенос — умолчание: длинный путь уезжает на вторую строку и остаётся читаемым.
+ * В режиме `autoCollapse` строка одна, иначе переполнения не случится никогда и
+ * мерить будет нечего: список просто перенесётся.
+ *
+ * Исключение — раскрытый вручную путь: в одну строку он бы не влез (её нехватка и
+ * вызвала схлопывание), `overflow: hidden` срезал бы хвост вместе с текущей
+ * страницей, а фокус на раскрытом пункте молча уводил бы скролл контейнера.
+ * Поэтому раскрытие возвращает перенос.
+ */
+export declare const breadcrumbsListWrapClass = "flex-wrap";
+export declare const breadcrumbsListNowrapClass = "flex-nowrap overflow-hidden";
+/** Кегль строки пути. Шкала общая с `GrLink`: путь — это ряд ссылок. */
+export declare const breadcrumbsSizeClassBySize: Record<GrBreadcrumbsSize, string>;
+export declare const breadcrumbsSeparatorClass = "select-none text-[var(--gr-muted-fg)]";
+/** Текущая страница: не ссылка, но и не «выключенный» текст — обычный акцент подписи. */
+export declare const breadcrumbsCurrentClass = "inline-flex items-center gap-1 min-w-0 font-600 text-[var(--gr-fg)]";
+export declare const breadcrumbsItemIconClass = "inline-block h-4 w-4 shrink-0";
+export declare const breadcrumbsLabelClass = "truncate";
+/**
+ * Кнопка «…»: раскрывает схлопнутую середину пути на месте. Оформлена как
+ * приглушённая ссылка, чтобы не выбиваться из ряда.
+ */
+export declare const breadcrumbsEllipsisClass = "inline-flex items-center rounded-[var(--gr-radius-sm)] px-1 text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export type GrBreadcrumbsLinkComponent = string | Component;
+/**
+ * Раскладка пути: какие пункты видны и где стоит кнопка раскрытия.
+ *
+ * Чистая функция, потому что вся её сложность — арифметика границ, и проверять
+ * её монтированием компонента дороже, чем таблицей входов.
+ */
+export type GrBreadcrumbsLayoutEntry = {
+    kind: 'item';
+    item: GrBreadcrumbItem;
+    index: number;
+} | {
+    kind: 'ellipsis';
+    hiddenCount: number;
+};
+/**
+ * Сколько пунктов хвоста влезает в доступную ширину.
+ *
+ * Порог по числу пунктов (`maxItems`) на узком экране предсказывает плохо: три
+ * коротких пункта влезают, два длинных — нет. Здесь решение принимается по
+ * измеренным ширинам.
+ *
+ * Голова не ужимается: `itemsBeforeCollapse` — обычно один корневой пункт, и он
+ * дёшев. Хвост ужимается до упора, но **не меньше одного**: последний пункт
+ * отвечает на вопрос «где я сейчас», и прятать его бессмысленно — путь
+ * превратился бы в «Главная / …».
+ *
+ * Возврат — число пунктов хвоста; `items.length` означает «влезло всё».
+ */
+export declare function resolveBreadcrumbsFit(options: {
+    itemWidths: number[];
+    separatorWidth: number;
+    ellipsisWidth: number;
+    available: number;
+    itemsBeforeCollapse: number;
+    /** Зазор списка (`gap`). Стоит между каждой парой соседей, включая разделители. */
+    gapWidth?: number;
+}): number;
+export declare function resolveBreadcrumbsLayout(options: {
+    items: GrBreadcrumbItem[];
+    maxItems?: number;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    expanded: boolean;
+}): GrBreadcrumbsLayoutEntry[];

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

@@ -0,0 +1,8 @@
+export { default } from './GrBreadcrumbs.vue';
+export { default as GrBreadcrumbs } from './GrBreadcrumbs.vue';
+export { grBreadcrumbsConfig } from './config';
+export type { GrBreadcrumbsConfigurableProps } from './defaults';
+export { resolveBreadcrumbsFit, resolveBreadcrumbsLayout } from './grBreadcrumbsStyles';
+export type { GrBreadcrumbItem, GrBreadcrumbsLayoutEntry, GrBreadcrumbsSize, } from './grBreadcrumbsStyles';
+export type { GrBreadcrumbsProps } from './GrBreadcrumbs.vue';
+export { grBreadcrumbsSafelist } from './safelist';

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

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