@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrSidebar/chunks/GrSidebar-DRGnnViw.js

@@ -0,0 +1,257 @@
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-D0m_z0XW.js";
+import { n as chevron_left_default, t as chevron_right_default } from "../../../chunks/chevron-right-BfqMVpbB.js";
+import { a as contentBase, c as grSidebarRootClass, d as headerBase, f as itemBadgeClass, h as titleClass, l as groupCollapsedClass, m as subtitleClass, o as grSidebarCollapseDirection, p as itemLetterClass, s as grSidebarItemClass, u as groupLabelClass } from "../../../chunks/config-Rw9OyW70.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, withCtx } from "vue";
+//#region src/components/GrSidebar/sidebarContext.ts
+var GR_SIDEBAR_KEY = Symbol.for("@feugene/granularity/sidebar");
+//#endregion
+//#region src/components/GrSidebar/GrSidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = {
+	key: 0,
+	class: "min-w-0"
+};
+//#endregion
+//#region src/components/GrSidebar/GrSidebar.vue
+var GrSidebar_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSidebar",
+	props: {
+		title: { default: void 0 },
+		subtitle: { default: void 0 },
+		collapsed: {
+			type: Boolean,
+			default: false
+		},
+		showToggleButton: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: "240px" },
+		collapsedWidth: { default: "64px" },
+		toggleLabel: { default: void 0 },
+		position: { default: "left" },
+		landmark: { default: "complementary" },
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["update:collapsed"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой
+		* сворачивания и слотом контента (обычно — список `GrSidebarItem`).
+		*
+		* - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает
+		*   панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только
+		*   иконку (или первую букву метки).
+		* - Кнопка тогла (`show-toggle-button`) переключает состояние.
+		* - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —
+		*   иначе панель начинается сразу с контента.
+		* - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.
+		*/
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const emit = __emit;
+		const collapsedState = ref(props.collapsed);
+		watch(() => props.collapsed, (value) => collapsedState.value = value);
+		function toggle() {
+			collapsedState.value = !collapsedState.value;
+			emit("update:collapsed", collapsedState.value);
+		}
+		provide(GR_SIDEBAR_KEY, { collapsed: collapsedState });
+		const hasTitle = computed(() => Boolean(props.title));
+		const hasSubtitle = computed(() => Boolean(props.subtitle));
+		const showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton));
+		const asideStyle = computed(() => ({ width: collapsedState.value ? props.collapsedWidth : props.width }));
+		const resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value ? t("gr.sidebar.expand", "Expand sidebar") : t("gr.sidebar.collapse", "Collapse sidebar")));
+		const rootTag = computed(() => props.landmark === "navigation" ? "nav" : "aside");
+		const rootClass = computed(() => grSidebarRootClass(props.position));
+		const collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value));
+		const collapseIcon = computed(() => collapseDirection.value === "right" ? chevron_right_default : chevron_left_default);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+				"data-gr-sidebar": "",
+				"data-collapsed": collapsedState.value ? "true" : void 0,
+				"data-position": __props.position,
+				"aria-label": __props.ariaLabel,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(asideStyle.value)
+			}, {
+				default: withCtx(() => [showHeader.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-gr-sidebar-header": "",
+					class: normalizeClass([unref(headerBase), collapsedState.value ? "justify-center" : "justify-between"])
+				}, [!collapsedState.value && (hasTitle.value || hasSubtitle.value || _ctx.$slots.title || _ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", _hoisted_1$2, [_ctx.$slots.subtitle || hasSubtitle.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-gr-sidebar-subtitle": "",
+					class: normalizeClass(unref(subtitleClass))
+				}, [renderSlot(_ctx.$slots, "subtitle", {}, () => [createTextVNode(toDisplayString(__props.subtitle), 1)])], 2)) : createCommentVNode("", true), _ctx.$slots.title || hasTitle.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					"data-gr-sidebar-title": "",
+					class: normalizeClass(unref(titleClass))
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true), __props.showToggleButton ? (openBlock(), createBlock(GrButton_default, {
+					key: 1,
+					"data-gr-sidebar-toggle": "",
+					variant: "ghost",
+					size: "sm",
+					square: "",
+					"aria-label": resolvedToggleLabel.value,
+					"aria-expanded": collapsedState.value ? "false" : "true",
+					"data-direction": collapseDirection.value,
+					onClick: toggle
+				}, {
+					default: withCtx(() => [createVNode(GrIcon_default, { size: 16 }, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(collapseIcon.value)))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"aria-label",
+					"aria-expanded",
+					"data-direction"
+				])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("div", {
+					"data-gr-sidebar-content": "",
+					tabindex: "0",
+					class: normalizeClass([unref(contentBase), collapsedState.value ? "p-2" : "p-3"])
+				}, [renderSlot(_ctx.$slots, "default")], 2)]),
+				_: 3
+			}, 8, [
+				"data-collapsed",
+				"data-position",
+				"aria-label",
+				"class",
+				"style"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrSidebar/GrSidebarItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "flex h-5 w-5 shrink-0 items-center justify-center" };
+var _hoisted_2$1 = { class: "min-w-0 flex-1 truncate text-left" };
+//#endregion
+//#region src/components/GrSidebar/GrSidebarItem.vue
+var GrSidebarItem_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSidebarItem",
+	props: {
+		label: {},
+		icon: { default: void 0 },
+		href: { default: void 0 },
+		as: { default: void 0 },
+		active: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		badge: { default: void 0 }
+	},
+	setup(__props) {
+		/**
+		* GrSidebarItem — пункт навигации боковой панели `GrSidebar`.
+		*
+		* Контракт:
+		* - развёрнутая панель — `[иконка] метка [бейдж]`;
+		* - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА
+		*   метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для
+		*   доступности и tooltip.
+		*
+		* Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).
+		*/
+		const props = __props;
+		const sidebar = inject(GR_SIDEBAR_KEY, null);
+		const collapsed = computed(() => sidebar?.collapsed.value ?? false);
+		const isStringIcon = computed(() => typeof props.icon === "string");
+		const iconComponent = computed(() => props.icon && typeof props.icon !== "string" ? markRaw(props.icon) : null);
+		const firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || "•");
+		const rootTag = computed(() => {
+			if (props.disabled) return "span";
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			return props.href ? "a" : "button";
+		});
+		const rootClass = computed(() => grSidebarItemClass({
+			collapsed: collapsed.value,
+			disabled: props.disabled,
+			active: props.active
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+				"data-gr-sidebar-item": "",
+				type: rootTag.value === "button" ? "button" : void 0,
+				href: rootTag.value === "a" ? __props.href : void 0,
+				"aria-current": __props.active ? "page" : void 0,
+				"aria-disabled": __props.disabled ? "true" : void 0,
+				title: collapsed.value ? __props.label : void 0,
+				"aria-label": collapsed.value ? __props.label : void 0,
+				class: normalizeClass(rootClass.value)
+			}, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$1, [iconComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value), {
+					key: 0,
+					class: "h-5 w-5",
+					"aria-hidden": "true"
+				})) : isStringIcon.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass([__props.icon, "block h-5 w-5"]),
+					"aria-hidden": "true"
+				}, null, 2)) : collapsed.value ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(itemLetterClass)),
+					"aria-hidden": "true"
+				}, toDisplayString(firstLetter.value), 3)) : createCommentVNode("", true)]), !collapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$1, toDisplayString(__props.label), 1), __props.badge != null ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(itemBadgeClass))
+				}, toDisplayString(__props.badge), 3)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, [
+				"type",
+				"href",
+				"aria-current",
+				"aria-disabled",
+				"title",
+				"aria-label",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrSidebar/GrSidebarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-labelledby"];
+var _hoisted_2 = ["id"];
+//#endregion
+//#region src/components/GrSidebar/GrSidebarGroup.vue
+var GrSidebarGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSidebarGroup",
+	props: { label: { default: void 0 } },
+	setup(__props) {
+		/**
+		* GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.
+		*
+		* В свёрнутой панели заголовку негде поместиться: он скрывается, а секции
+		* разделяет линия — без неё иконки соседних секций сливаются в один столбец.
+		*/
+		const props = __props;
+		const slots = useSlots();
+		const sidebar = inject(GR_SIDEBAR_KEY, null);
+		const collapsed = computed(() => sidebar?.collapsed.value ?? false);
+		const labelId = useId();
+		const hasLabel = computed(() => Boolean(props.label || slots.label));
+		const showLabel = computed(() => hasLabel.value && !collapsed.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-sidebar-group": "",
+				role: "group",
+				"aria-labelledby": showLabel.value ? unref(labelId) : void 0,
+				class: normalizeClass(collapsed.value ? unref(groupCollapsedClass) : void 0)
+			}, [showLabel.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(labelId),
+				"data-gr-sidebar-group-label": "",
+				class: normalizeClass(unref(groupLabelClass))
+			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 10, _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrSidebarItem_default as n, GrSidebar_default as r, GrSidebarGroup_default as t };

package/dist/components/GrSidebar/chunks/GrSidebar-DRGnnViw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSidebar-DRGnnViw.js","names":["$slots"],"sources":["../../../../src/components/GrSidebar/sidebarContext.ts","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\n/**\n * Контекст `GrSidebar`, который потребляют `GrSidebarItem`'ы: свёрнута ли панель.\n * В свёрнутом состоянии пункты показывают только иконку (или первую букву метки).\n */\nexport interface GrSidebarContext {\n  collapsed: Ref<boolean>\n}\n\nexport const GR_SIDEBAR_KEY: InjectionKey<GrSidebarContext> = Symbol.for('@feugene/granularity/sidebar')\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n *   панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n *   иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n *   иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  contentBase,\n  grSidebarCollapseDirection,\n  grSidebarRootClass,\n  headerBase,\n  subtitleClass,\n  titleClass,\n  type GrSidebarLandmark,\n  type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n  title?: string\n  subtitle?: string\n  /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n  collapsed?: boolean\n  /** Показать кнопку сворачивания/разворачивания в хедере. */\n  showToggleButton?: boolean\n  /** Ширина в развёрнутом состоянии. */\n  width?: string\n  /** Ширина в свёрнутом состоянии. */\n  collapsedWidth?: string\n  /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n  toggleLabel?: string\n  /** Сторона экрана: граница и направление шеврона зеркалятся. */\n  position?: GrSidebarPosition\n  /**\n   * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n   * `<nav>` для панели, которая действительно является навигацией. Вложенный\n   * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n   * обзор, а панель фильтров навигацией не является вовсе.\n   */\n  landmark?: GrSidebarLandmark\n  /** Имя лендмарка: без него две панели на странице неразличимы. */\n  ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n  (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  collapsed: false,\n  showToggleButton: false,\n  width: '240px',\n  collapsedWidth: '64px',\n  toggleLabel: undefined,\n  position: 'left',\n  landmark: 'complementary',\n  ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n  collapsedState.value = !collapsedState.value\n  emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n  width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n  ? t('gr.sidebar.expand', 'Expand sidebar')\n  : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-sidebar\n    :data-collapsed=\"collapsedState ? 'true' : undefined\"\n    :data-position=\"position\"\n    :aria-label=\"ariaLabel\"\n    :class=\"rootClass\"\n    :style=\"asideStyle\"\n  >\n    <div\n      v-if=\"showHeader\"\n      data-gr-sidebar-header\n      :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n    >\n      <div\n        v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n        class=\"min-w-0\"\n      >\n        <div\n          v-if=\"$slots.subtitle || hasSubtitle\"\n          data-gr-sidebar-subtitle\n          :class=\"subtitleClass\"\n        >\n          <slot name=\"subtitle\">\n            {{ subtitle }}\n          </slot>\n        </div>\n        <div\n          v-if=\"$slots.title || hasTitle\"\n          data-gr-sidebar-title\n          :class=\"titleClass\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n      </div>\n\n      <GrButton\n        v-if=\"showToggleButton\"\n        data-gr-sidebar-toggle\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"resolvedToggleLabel\"\n        :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n        :data-direction=\"collapseDirection\"\n        @click=\"toggle\"\n      >\n        <GrIcon :size=\"16\">\n          <component :is=\"collapseIcon\" />\n        </GrIcon>\n      </GrButton>\n    </div>\n\n    <div\n      data-gr-sidebar-content\n      tabindex=\"0\"\n      :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n    >\n      <slot />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n *   панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n *   иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n *   иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  contentBase,\n  grSidebarCollapseDirection,\n  grSidebarRootClass,\n  headerBase,\n  subtitleClass,\n  titleClass,\n  type GrSidebarLandmark,\n  type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n  title?: string\n  subtitle?: string\n  /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n  collapsed?: boolean\n  /** Показать кнопку сворачивания/разворачивания в хедере. */\n  showToggleButton?: boolean\n  /** Ширина в развёрнутом состоянии. */\n  width?: string\n  /** Ширина в свёрнутом состоянии. */\n  collapsedWidth?: string\n  /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n  toggleLabel?: string\n  /** Сторона экрана: граница и направление шеврона зеркалятся. */\n  position?: GrSidebarPosition\n  /**\n   * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n   * `<nav>` для панели, которая действительно является навигацией. Вложенный\n   * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n   * обзор, а панель фильтров навигацией не является вовсе.\n   */\n  landmark?: GrSidebarLandmark\n  /** Имя лендмарка: без него две панели на странице неразличимы. */\n  ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n  (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  collapsed: false,\n  showToggleButton: false,\n  width: '240px',\n  collapsedWidth: '64px',\n  toggleLabel: undefined,\n  position: 'left',\n  landmark: 'complementary',\n  ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n  collapsedState.value = !collapsedState.value\n  emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n  width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n  ? t('gr.sidebar.expand', 'Expand sidebar')\n  : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-sidebar\n    :data-collapsed=\"collapsedState ? 'true' : undefined\"\n    :data-position=\"position\"\n    :aria-label=\"ariaLabel\"\n    :class=\"rootClass\"\n    :style=\"asideStyle\"\n  >\n    <div\n      v-if=\"showHeader\"\n      data-gr-sidebar-header\n      :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n    >\n      <div\n        v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n        class=\"min-w-0\"\n      >\n        <div\n          v-if=\"$slots.subtitle || hasSubtitle\"\n          data-gr-sidebar-subtitle\n          :class=\"subtitleClass\"\n        >\n          <slot name=\"subtitle\">\n            {{ subtitle }}\n          </slot>\n        </div>\n        <div\n          v-if=\"$slots.title || hasTitle\"\n          data-gr-sidebar-title\n          :class=\"titleClass\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n      </div>\n\n      <GrButton\n        v-if=\"showToggleButton\"\n        data-gr-sidebar-toggle\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"resolvedToggleLabel\"\n        :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n        :data-direction=\"collapseDirection\"\n        @click=\"toggle\"\n      >\n        <GrIcon :size=\"16\">\n          <component :is=\"collapseIcon\" />\n        </GrIcon>\n      </GrButton>\n    </div>\n\n    <div\n      data-gr-sidebar-content\n      tabindex=\"0\"\n      :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n    >\n      <slot />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n *   метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n *   доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n  label: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n  icon?: string | Component\n  href?: string\n  as?: string | Component\n  active?: boolean\n  disabled?: boolean\n  badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n  icon: undefined,\n  href: undefined,\n  as: undefined,\n  active: false,\n  disabled: false,\n  badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.disabled) return 'span'\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\nconst rootClass = computed(() => grSidebarItemClass({\n  collapsed: collapsed.value,\n  disabled: props.disabled,\n  active: props.active,\n}))\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-sidebar-item\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootTag === 'a' ? href : undefined\"\n    :aria-current=\"active ? 'page' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :title=\"collapsed ? label : undefined\"\n    :aria-label=\"collapsed ? label : undefined\"\n    :class=\"rootClass\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n      <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n      <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n      <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n    </span>\n\n    <template v-if=\"!collapsed\">\n      <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n      <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n    </template>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n *   метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n *   доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n  label: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n  icon?: string | Component\n  href?: string\n  as?: string | Component\n  active?: boolean\n  disabled?: boolean\n  badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n  icon: undefined,\n  href: undefined,\n  as: undefined,\n  active: false,\n  disabled: false,\n  badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.disabled) return 'span'\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\nconst rootClass = computed(() => grSidebarItemClass({\n  collapsed: collapsed.value,\n  disabled: props.disabled,\n  active: props.active,\n}))\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-sidebar-item\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootTag === 'a' ? href : undefined\"\n    :aria-current=\"active ? 'page' : undefined\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :title=\"collapsed ? label : undefined\"\n    :aria-label=\"collapsed ? label : undefined\"\n    :class=\"rootClass\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n      <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n      <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n      <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n    </span>\n\n    <template v-if=\"!collapsed\">\n      <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n      <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n    </template>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n  /** Заголовок секции. Слот `#label` сильнее. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n  label: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Пункты секции. */\n  default?: () => unknown\n  /** Заголовок целиком — вместо строки `label`. */\n  label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n  <div\n    data-gr-sidebar-group\n    role=\"group\"\n    :aria-labelledby=\"showLabel ? labelId : undefined\"\n    :class=\"collapsed ? groupCollapsedClass : undefined\"\n  >\n    <div\n      v-if=\"showLabel\"\n      :id=\"labelId\"\n      data-gr-sidebar-group-label\n      :class=\"groupLabelClass\"\n    >\n      <slot name=\"label\">\n        {{ label }}\n      </slot>\n    </div>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n  /** Заголовок секции. Слот `#label` сильнее. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n  label: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Пункты секции. */\n  default?: () => unknown\n  /** Заголовок целиком — вместо строки `label`. */\n  label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n  <div\n    data-gr-sidebar-group\n    role=\"group\"\n    :aria-labelledby=\"showLabel ? labelId : undefined\"\n    :class=\"collapsed ? groupCollapsedClass : undefined\"\n  >\n    <div\n      v-if=\"showLabel\"\n      :id=\"labelId\"\n      data-gr-sidebar-group-label\n      :class=\"groupLabelClass\"\n    >\n      <slot name=\"label\">\n        {{ label }}\n      </slot>\n    </div>\n\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSidebar/index.js

@@ -1,3 +1,3 @@
-import { n as GrSidebar_default, t as GrSidebarItem_default } from "./chunks/GrSidebar-cvnzBfj3.js";
-import { t as grSidebarConfig } from "../../chunks/config-CGHLoBlH2.js";
-export { GrSidebar_default as GrSidebar, GrSidebar_default as default, GrSidebarItem_default as GrSidebarItem, grSidebarConfig };
+import { i as GR_SIDEBAR_POSITIONS, n as grSidebarSafelist, r as GR_SIDEBAR_LANDMARKS, t as grSidebarConfig } from "../../chunks/config-Rw9OyW70.js";
+import { n as GrSidebarItem_default, r as GrSidebar_default, t as GrSidebarGroup_default } from "./chunks/GrSidebar-DRGnnViw.js";
+export { GR_SIDEBAR_LANDMARKS, GR_SIDEBAR_POSITIONS, GrSidebar_default as GrSidebar, GrSidebar_default as default, GrSidebarGroup_default as GrSidebarGroup, GrSidebarItem_default as GrSidebarItem, grSidebarConfig, grSidebarSafelist };

package/dist/components/GrSkeleton/chunks/GrSkeleton-DEvNE3bC.js

@@ -0,0 +1,84 @@
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList } from "vue";
+import '../styles.css';//#region src/components/GrSkeleton/grSkeletonStyles.ts
+/** Форма заглушки: строка текста, прямоугольный блок или круг. */
+var GR_SKELETON_VARIANTS = [
+	"text",
+	"rect",
+	"circle"
+];
+/**
+* Радиус — единственное, что задаёт форма: размеры диктует соседний контент, а
+* не компонент. Пилюля правильна для строки текста и неправильна для блока —
+* из-за одного дефолта на всех прямоугольник просил `rounded` каждый раз.
+*/
+var skeletonRoundedByVariant = {
+	text: "var(--gr-radius-full)",
+	rect: "var(--gr-radius-md)",
+	circle: "var(--gr-radius-full)"
+};
+//#endregion
+//#region src/components/GrSkeleton/GrSkeleton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-gr-skeleton-group": "",
+	class: "grid gap-2",
+	"aria-hidden": "true"
+};
+var DEFAULT_CIRCLE_SIZE = "2.5rem";
+var LAST_LINE_WIDTH = "60%";
+//#endregion
+//#region src/components/GrSkeleton/GrSkeleton.vue
+var GrSkeleton_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSkeleton",
+	props: {
+		variant: { default: "text" },
+		height: { default: void 0 },
+		width: { default: void 0 },
+		rounded: { default: void 0 },
+		count: { default: 1 }
+	},
+	setup(__props) {
+		const props = __props;
+		/** Круг — единственная форма, у которой размер и пропорция связаны. */
+		const resolvedWidth = computed(() => props.width ?? (props.variant === "circle" ? DEFAULT_CIRCLE_SIZE : "100%"));
+		const resolvedHeight = computed(() => {
+			if (props.height !== void 0) return props.height;
+			return props.variant === "circle" ? resolvedWidth.value : "12px";
+		});
+		const resolvedRounded = computed(() => props.rounded ?? skeletonRoundedByVariant[props.variant]);
+		const items = computed(() => Math.max(Math.floor(props.count) || 1, 1));
+		/**
+		* Последняя строка текста короче — так блок читается как абзац, а не как
+		* список одинаковых полос. У прямоугольников и кругов «недописанной строки» не
+		* бывает, поэтому правило только для `text`.
+		*/
+		function widthOf(index) {
+			return index === items.value - 1 && items.value > 1 && props.variant === "text" && props.width === void 0 ? LAST_LINE_WIDTH : resolvedWidth.value;
+		}
+		function styleOf(index) {
+			return {
+				height: resolvedHeight.value,
+				width: widthOf(index),
+				borderRadius: resolvedRounded.value
+			};
+		}
+		return (_ctx, _cache) => {
+			return items.value > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (_, index) => {
+				return openBlock(), createElementBlock("div", {
+					key: index,
+					"data-gr-skeleton": "",
+					class: "bg-[var(--gr-muted)] border border-[var(--gr-brd)]",
+					style: normalizeStyle(styleOf(index))
+				}, null, 4);
+			}), 128))])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				"data-gr-skeleton": "",
+				"aria-hidden": "true",
+				class: "bg-[var(--gr-muted)] border border-[var(--gr-brd)]",
+				style: normalizeStyle(styleOf(0))
+			}, null, 4));
+		};
+	}
+});
+//#endregion
+export { GR_SKELETON_VARIANTS as n, GrSkeleton_default as t };

package/dist/components/GrSkeleton/chunks/GrSkeleton-DEvNE3bC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSkeleton-DEvNE3bC.js","names":[],"sources":["../../../../src/components/GrSkeleton/grSkeletonStyles.ts","../../../../src/components/GrSkeleton/GrSkeleton.vue","../../../../src/components/GrSkeleton/GrSkeleton.vue"],"sourcesContent":["/** Форма заглушки: строка текста, прямоугольный блок или круг. */\nexport const GR_SKELETON_VARIANTS = ['text', 'rect', 'circle'] as const\nexport type GrSkeletonVariant = typeof GR_SKELETON_VARIANTS[number]\n\n/**\n * Радиус — единственное, что задаёт форма: размеры диктует соседний контент, а\n * не компонент. Пилюля правильна для строки текста и неправильна для блока —\n * из-за одного дефолта на всех прямоугольник просил `rounded` каждый раз.\n */\nexport const skeletonRoundedByVariant: Record<GrSkeletonVariant, string> = {\n  text: 'var(--gr-radius-full)',\n  rect: 'var(--gr-radius-md)',\n  circle: 'var(--gr-radius-full)',\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { skeletonRoundedByVariant, type GrSkeletonVariant } from './grSkeletonStyles'\n\nexport type { GrSkeletonVariant } from './grSkeletonStyles'\n\n/**\n * GrSkeleton — заглушка-плейсхолдер для загружающегося контента.\n *\n * Помечен `aria-hidden=\"true\"`, чтобы скринридер не озвучивал «пустой» узел;\n * внешний контейнер обычно имеет `aria-busy=\"true\"` + `aria-live`.\n */\nexport interface GrSkeletonProps {\n  /**\n   * Форма, а не размеры: `width`/`height` остаются на потребителе, потому что\n   * высота заглушки диктуется соседним контентом, а не шкалой компонента.\n   */\n  variant?: GrSkeletonVariant\n  height?: string\n  width?: string\n  /** Радиус точечно. Не задан — берётся из `variant`. */\n  rounded?: string\n  /** Сколько заглушек подряд. Больше одной — они уезжают в общую обёртку. */\n  count?: number\n}\n\nconst props = withDefaults(defineProps<GrSkeletonProps>(), {\n  variant: 'text',\n  // Дефолты живут в резолверах ниже: иначе форма не смогла бы задать свои.\n  height: undefined,\n  width: undefined,\n  rounded: undefined,\n  count: 1,\n})\n\n/** Круг — единственная форма, у которой размер и пропорция связаны. */\nconst DEFAULT_CIRCLE_SIZE = '2.5rem'\n\nconst resolvedWidth = computed(() => props.width ?? (props.variant === 'circle' ? DEFAULT_CIRCLE_SIZE : '100%'))\n\n// У круга высота повторяет ширину, пока её не задали явно: иначе одна заданная\n// сторона превращала бы его в овал.\nconst resolvedHeight = computed(() => {\n  if (props.height !== undefined) return props.height\n  return props.variant === 'circle' ? resolvedWidth.value : '12px'\n})\n\nconst resolvedRounded = computed(() => props.rounded ?? skeletonRoundedByVariant[props.variant])\n\nconst items = computed(() => Math.max(Math.floor(props.count) || 1, 1))\n\n/**\n * Последняя строка текста короче — так блок читается как абзац, а не как\n * список одинаковых полос. У прямоугольников и кругов «недописанной строки» не\n * бывает, поэтому правило только для `text`.\n */\nconst LAST_LINE_WIDTH = '60%'\n\nfunction widthOf(index: number): string {\n  const isLast = index === items.value - 1\n  return isLast && items.value > 1 && props.variant === 'text' && props.width === undefined\n    ? LAST_LINE_WIDTH\n    : resolvedWidth.value\n}\n\nfunction styleOf(index: number): Record<string, string> {\n  return { height: resolvedHeight.value, width: widthOf(index), borderRadius: resolvedRounded.value }\n}\n</script>\n\n<template>\n  <div\n    v-if=\"items > 1\"\n    data-gr-skeleton-group\n    class=\"grid gap-2\"\n    aria-hidden=\"true\"\n  >\n    <div\n      v-for=\"(_, index) in items\"\n      :key=\"index\"\n      data-gr-skeleton\n      class=\"bg-[var(--gr-muted)] border border-[var(--gr-brd)]\"\n      :style=\"styleOf(index)\"\n    />\n  </div>\n\n  <div\n    v-else\n    data-gr-skeleton\n    aria-hidden=\"true\"\n    class=\"bg-[var(--gr-muted)] border border-[var(--gr-brd)]\"\n    :style=\"styleOf(0)\"\n  />\n</template>\n\n<style>\n@keyframes gr-skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n[data-gr-skeleton] {\n  animation: gr-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-gr-skeleton] {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { skeletonRoundedByVariant, type GrSkeletonVariant } from './grSkeletonStyles'\n\nexport type { GrSkeletonVariant } from './grSkeletonStyles'\n\n/**\n * GrSkeleton — заглушка-плейсхолдер для загружающегося контента.\n *\n * Помечен `aria-hidden=\"true\"`, чтобы скринридер не озвучивал «пустой» узел;\n * внешний контейнер обычно имеет `aria-busy=\"true\"` + `aria-live`.\n */\nexport interface GrSkeletonProps {\n  /**\n   * Форма, а не размеры: `width`/`height` остаются на потребителе, потому что\n   * высота заглушки диктуется соседним контентом, а не шкалой компонента.\n   */\n  variant?: GrSkeletonVariant\n  height?: string\n  width?: string\n  /** Радиус точечно. Не задан — берётся из `variant`. */\n  rounded?: string\n  /** Сколько заглушек подряд. Больше одной — они уезжают в общую обёртку. */\n  count?: number\n}\n\nconst props = withDefaults(defineProps<GrSkeletonProps>(), {\n  variant: 'text',\n  // Дефолты живут в резолверах ниже: иначе форма не смогла бы задать свои.\n  height: undefined,\n  width: undefined,\n  rounded: undefined,\n  count: 1,\n})\n\n/** Круг — единственная форма, у которой размер и пропорция связаны. */\nconst DEFAULT_CIRCLE_SIZE = '2.5rem'\n\nconst resolvedWidth = computed(() => props.width ?? (props.variant === 'circle' ? DEFAULT_CIRCLE_SIZE : '100%'))\n\n// У круга высота повторяет ширину, пока её не задали явно: иначе одна заданная\n// сторона превращала бы его в овал.\nconst resolvedHeight = computed(() => {\n  if (props.height !== undefined) return props.height\n  return props.variant === 'circle' ? resolvedWidth.value : '12px'\n})\n\nconst resolvedRounded = computed(() => props.rounded ?? skeletonRoundedByVariant[props.variant])\n\nconst items = computed(() => Math.max(Math.floor(props.count) || 1, 1))\n\n/**\n * Последняя строка текста короче — так блок читается как абзац, а не как\n * список одинаковых полос. У прямоугольников и кругов «недописанной строки» не\n * бывает, поэтому правило только для `text`.\n */\nconst LAST_LINE_WIDTH = '60%'\n\nfunction widthOf(index: number): string {\n  const isLast = index === items.value - 1\n  return isLast && items.value > 1 && props.variant === 'text' && props.width === undefined\n    ? LAST_LINE_WIDTH\n    : resolvedWidth.value\n}\n\nfunction styleOf(index: number): Record<string, string> {\n  return { height: resolvedHeight.value, width: widthOf(index), borderRadius: resolvedRounded.value }\n}\n</script>\n\n<template>\n  <div\n    v-if=\"items > 1\"\n    data-gr-skeleton-group\n    class=\"grid gap-2\"\n    aria-hidden=\"true\"\n  >\n    <div\n      v-for=\"(_, index) in items\"\n      :key=\"index\"\n      data-gr-skeleton\n      class=\"bg-[var(--gr-muted)] border border-[var(--gr-brd)]\"\n      :style=\"styleOf(index)\"\n    />\n  </div>\n\n  <div\n    v-else\n    data-gr-skeleton\n    aria-hidden=\"true\"\n    class=\"bg-[var(--gr-muted)] border border-[var(--gr-brd)]\"\n    :style=\"styleOf(0)\"\n  />\n</template>\n\n<style>\n@keyframes gr-skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n[data-gr-skeleton] {\n  animation: gr-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-gr-skeleton] {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;AACA,IAAa,uBAAuB;CAAC;CAAQ;CAAQ;AAAQ;;;;;;AAQ7D,IAAa,2BAA8D;CACzE,MAAM;CACN,MAAM;CACN,QAAQ;AACV;;;;;;;;;ACwBA,IAAM,sBAAsB;AAoB5B,IAAM,kBAAkB;;;;;;;;;;;;;EA9BxB,MAAM,QAAQ;;EAYd,MAAM,gBAAgB,eAAe,MAAM,UAAU,MAAM,YAAY,WAAW,sBAAsB,OAAO;EAI/G,MAAM,iBAAiB,eAAe;GACpC,IAAI,MAAM,WAAW,KAAA,GAAW,OAAO,MAAM;GAC7C,OAAO,MAAM,YAAY,WAAW,cAAc,QAAQ;EAC5D,CAAC;EAED,MAAM,kBAAkB,eAAe,MAAM,WAAW,yBAAyB,MAAM,QAAQ;EAE/F,MAAM,QAAQ,eAAe,KAAK,IAAI,KAAK,MAAM,MAAM,KAAK,KAAK,GAAG,CAAC,CAAC;;;;;;EAStE,SAAS,QAAQ,OAAuB;GAEtC,OADe,UAAU,MAAM,QAAQ,KACtB,MAAM,QAAQ,KAAK,MAAM,YAAY,UAAU,MAAM,UAAU,KAAA,IAC5E,kBACA,cAAc;EACpB;EAEA,SAAS,QAAQ,OAAuC;GACtD,OAAO;IAAE,QAAQ,eAAe;IAAO,OAAO,QAAQ,KAAK;IAAG,cAAc,gBAAgB;GAAM;EACpG;;UAKU,MAAA,QAAK,KAAA,UAAA,GADb,mBAaM,OAbN,YAaM,EAAA,UAAA,IAAA,GAPJ,mBAME,UAAA,MAAA,WALqB,MAAA,QAAb,GAAG,UAAK;wBADlB,mBAME,OAAA;KAJC,KAAK;KACN,oBAAA;KACA,OAAM;KACL,OAAK,eAAE,QAAQ,KAAK,CAAA;;gCAIzB,mBAME,OAAA;;IAJA,oBAAA;IACA,eAAY;IACZ,OAAM;IACL,OAAK,eAAE,QAAO,CAAA,CAAA"}

package/dist/components/GrSkeleton/index.js

@@ -1,3 +1,3 @@
-import { t as GrSkeleton_default } from "./chunks/GrSkeleton-BucA5F4J.js";
+import { n as GR_SKELETON_VARIANTS, t as GrSkeleton_default } from "./chunks/GrSkeleton-DEvNE3bC.js";
 import { t as grSkeletonConfig } from "../../chunks/config-8Pcutu1j.js";
-export { GrSkeleton_default as GrSkeleton, GrSkeleton_default as default, grSkeletonConfig };
+export { GR_SKELETON_VARIANTS, GrSkeleton_default as GrSkeleton, GrSkeleton_default as default, grSkeletonConfig };