@feugene/granularity 0.49.0 → 0.50.0

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

@@ -0,0 +1,543 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-DTZIgmje.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
+import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
+import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
+import { t as useModalOverlay } from "../../../chunks/useModalOverlay-CKCQkGdB.js";
+import { C as titleClass, S as subtitleClass, _ as layerBackdropClass, a as grSidebarItemClass, b as layerPassThroughClass, c as groupLabelClass, d as itemChevronClass, f as itemChevronExpandedClass, g as itemNestIndent, h as itemNestClass, i as grSidebarCollapseDirection, l as headerBase, m as itemLetterClass, o as grSidebarRootClass, p as itemChildrenClass, r as contentBase, s as groupCollapsedClass, u as itemBadgeClass, v as layerPanelEnterFrom, x as layerRootClass, y as layerPanelPositions } from "../../../chunks/config-DpzFoSIh.js";
+import { t as GrTooltip_default } from "../../GrTooltip/chunks/GrTooltip-BDcFycvW.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, useId, useSlots, watch, withCtx } from "vue";
+//#region src/components/GrSidebar/sidebarContext.ts
+var GR_SIDEBAR_KEY = Symbol.for("@feugene/granularity/sidebar");
+/**
+* Уровень вложенности пункта. Раздаётся не панелью, а самими пунктами: каждый
+* объявляет своим детям `level + 1`, поэтому глубина считается разметкой, а не
+* пропом, который потребителю пришлось бы проставлять руками и держать в
+* синхроне при перестановке ветки.
+*/
+var GR_SIDEBAR_LEVEL_KEY = Symbol.for("@feugene/granularity/sidebar-level");
+//#endregion
+//#region src/components/GrSidebar/GrSidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = [
+	"data-gr-sidebar-layer",
+	"data-gr-overlay-root",
+	"role",
+	"aria-modal",
+	"aria-label",
+	"inert"
+];
+var _hoisted_2$2 = {
+	key: 0,
+	class: "min-w-0"
+};
+//#endregion
+//#region src/components/GrSidebar/GrSidebar.vue
+var GrSidebar_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__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 },
+		overlay: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:collapsed", "update:open"],
+	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);
+		}
+		function expand() {
+			if (!collapsedState.value) return;
+			collapsedState.value = false;
+			emit("update:collapsed", false);
+		}
+		const panelEl = ref(null);
+		const openState = ref(props.open);
+		watch(() => props.open, (value) => openState.value = value);
+		function closeOverlay() {
+			openState.value = false;
+			emit("update:open", false);
+		}
+		/**
+		* Слой активен только вместе с `overlay`: композабл зовётся всегда — условным
+		* его сделать нельзя, — но при выключенном режиме открытым не бывает никогда, и
+		* ни портал, ни ловушка фокуса не включаются.
+		*/
+		const layerOpen = computed(() => props.overlay && openState.value);
+		const { rootEl, isMounted, isVisible, inertAttr, layerZIndex, portalTarget, teleportEnabled, themeAttrs, backdrop, onPanelAfterLeave } = useModalOverlay(layerOpen, closeOverlay, { panel: panelEl });
+		/**
+		* Портал включается только под слой. В обычном режиме панель обязана остаться
+		* там, где её поставил потребитель: она часть его раскладки, а не всплывающий
+		* элемент.
+		*
+		* До монтирования слой не рисуется вовсе — ни панели, ни подложки. Иначе первый
+		* клиентский рендер показал бы модальную панель прямо в потоке страницы: телепорт
+		* включается только после монтирования, чтобы совпасть с серверным рендером.
+		*
+		* `isMounted` здесь обязателен: корень слоя растянут на весь экран, и оставь мы
+		* его при закрытой панели, страница получила бы невидимую плёнку, перехватывающую
+		* все клики.
+		*/
+		const layerActive = computed(() => props.overlay && teleportEnabled.value && isMounted.value);
+		/**
+		* В слое панель показывается целиком: рейл шириной в иконку внутри модального
+		* окна — это половина экрана, потраченная на пустоту. Поэтому свёрнутость там
+		* игнорируется.
+		*/
+		const effectiveCollapsed = computed(() => collapsedState.value && !props.overlay);
+		/**
+		* Кнопка в шапке меняет смысл вместе с режимом: в колонке она сворачивает
+		* панель, в слое — закрывает его. Сворачивать там нечего, а закрыть иначе можно
+		* только `Esc` или подложкой.
+		*/
+		function onHeaderButton() {
+			if (props.overlay) closeOverlay();
+			else toggle();
+		}
+		provide(GR_SIDEBAR_KEY, {
+			collapsed: effectiveCollapsed,
+			position: computed(() => props.position),
+			expand
+		});
+		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(Teleport, {
+				to: unref(portalTarget),
+				disabled: !layerActive.value
+			}, [createElementVNode("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-sidebar-layer": layerActive.value ? "" : void 0,
+				"data-gr-overlay-root": layerActive.value ? "" : void 0,
+				role: layerActive.value ? "dialog" : void 0,
+				"aria-modal": layerActive.value ? "true" : void 0,
+				"aria-label": layerActive.value ? __props.ariaLabel : void 0,
+				class: normalizeClass(layerActive.value ? unref(layerRootClass) : unref(layerPassThroughClass)),
+				style: normalizeStyle(layerActive.value ? { zIndex: unref(layerZIndex) } : void 0),
+				inert: unref(inertAttr)
+			}, [createVNode(Transition, {
+				"enter-active-class": "transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+				"enter-from-class": "opacity-0",
+				"leave-active-class": "transition-opacity duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: withCtx(() => [layerActive.value && unref(isVisible) ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 0,
+					"data-gr-sidebar-backdrop": "",
+					class: unref(layerBackdropClass),
+					"aria-hidden": "true"
+				}, toHandlers(unref(backdrop), true)), null, 16)) : createCommentVNode("", true)]),
+				_: 1
+			}), createVNode(Transition, {
+				"enter-active-class": "transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+				"enter-from-class": unref(layerPanelEnterFrom)[__props.position],
+				"leave-active-class": "transition-transform duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]",
+				"leave-to-class": unref(layerPanelEnterFrom)[__props.position],
+				onAfterLeave: unref(onPanelAfterLeave)
+			}, {
+				default: withCtx(() => [(__props.overlay ? layerActive.value && unref(isVisible) : true) ? (openBlock(), createBlock(resolveDynamicComponent(rootTag.value), mergeProps({
+					key: 0,
+					ref_key: "panelEl",
+					ref: panelEl
+				}, {
+					..._ctx.$attrs,
+					...layerActive.value ? unref(themeAttrs) : {}
+				}, {
+					"data-gr-sidebar": "",
+					"data-collapsed": effectiveCollapsed.value ? "true" : void 0,
+					"data-position": __props.position,
+					"aria-label": __props.ariaLabel,
+					class: [rootClass.value, layerActive.value ? unref(layerPanelPositions)[__props.position] : ""],
+					style: 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_2$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": __props.overlay ? void 0 : collapsedState.value ? "false" : "true",
+						"data-direction": __props.overlay ? void 0 : collapseDirection.value,
+						onClick: onHeaderButton
+					}, {
+						default: withCtx(() => [createVNode(GrIcon_default, { size: 16 }, {
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.overlay ? unref(x_default) : 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), effectiveCollapsed.value ? "p-2" : "p-3"])
+					}, [renderSlot(_ctx.$slots, "default")], 2)]),
+					_: 3
+				}, 16, [
+					"data-collapsed",
+					"data-position",
+					"aria-label",
+					"class",
+					"style"
+				])) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, [
+				"enter-from-class",
+				"leave-to-class",
+				"onAfterLeave"
+			])], 14, _hoisted_1$2)], 8, ["to", "disabled"]);
+		};
+	}
+});
+//#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 = [
+	"aria-current",
+	"aria-disabled",
+	"aria-expanded",
+	"aria-controls"
+];
+var _hoisted_3 = { class: "flex h-5 w-5 shrink-0 items-center justify-center" };
+var _hoisted_4 = { class: "min-w-0 flex-1 truncate text-left" };
+var _hoisted_5 = ["id"];
+var _hoisted_6 = { class: "flex h-5 w-5 shrink-0 items-center justify-center" };
+var _hoisted_7 = { 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 },
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultExpanded: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:expanded"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrSidebarItem — пункт навигации боковой панели `GrSidebar`.
+		*
+		* Контракт:
+		* - развёрнутая панель — `[иконка] метка [бейдж]`;
+		* - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА
+		*   метки (uppercase). Имя пункту даёт `aria-label`, а подпись показывает
+		*   `GrTooltip`: нативный `title` появлялся только по наведению, то есть с
+		*   клавиатуры свёрнутую панель было не прочесть.
+		*
+		* Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).
+		*/
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const sidebar = inject(GR_SIDEBAR_KEY, null);
+		const collapsed = computed(() => sidebar?.collapsed.value ?? false);
+		/**
+		* Подсказка уходит **от** панели: у левой — вправо, у правой — влево. Иначе
+		* она легла бы поверх самой панели и закрыла соседние пункты.
+		*/
+		const tooltipPlacement = computed(() => sidebar?.position.value === "right" ? "left" : "right");
+		const level = inject(GR_SIDEBAR_LEVEL_KEY, 0);
+		provide(GR_SIDEBAR_LEVEL_KEY, level + 1);
+		const hasChildren = computed(() => Boolean(slots.default));
+		const childrenId = useId();
+		/**
+		* Раскрытие живёт локально, пока проп не задан: панель навигации чаще всего
+		* управляет собой сама, и требовать `v-model` на каждую ветку значило бы
+		* заставить потребителя держать дерево состояний ради поведения по умолчанию.
+		*/
+		const uncontrolledExpanded = ref(props.defaultExpanded);
+		const isExpanded = computed(() => props.expanded ?? uncontrolledExpanded.value);
+		function toggleChildren() {
+			const next = !isExpanded.value;
+			uncontrolledExpanded.value = next;
+			emit("update:expanded", next);
+		}
+		/**
+		* Нажатие на ветку в свёрнутом рейле сперва возвращает панели ширину: показать
+		* подпункты в шестидесяти четырёх пикселях негде, и без этого кнопка ничего бы
+		* не делала.
+		*/
+		function onCollapsedActivate() {
+			if (!hasChildren.value) return;
+			sidebar?.expand();
+			if (!isExpanded.value) toggleChildren();
+		}
+		if (process.env.NODE_ENV !== "production") watch(() => hasChildren.value && (props.href !== void 0 || props.as !== void 0), (conflict) => {
+			if (conflict) console.warn(`[GrSidebarItem] У пункта "${props.label}" есть подпункты, поэтому он стал переключателем ветки: \`href\` и \`as\` не используются. Ссылкой сделайте отдельный подпункт.`);
+		}, { immediate: true });
+		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 (hasChildren.value) return "button";
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			return props.href ? "a" : "button";
+		});
+		/**
+		* Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без
+		* `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —
+		* там он и гасится.
+		*/
+		const rootHref = computed(() => typeof rootTag.value === "string" && rootTag.value !== "a" ? void 0 : props.href);
+		const rootClass = computed(() => grSidebarItemClass({
+			collapsed: collapsed.value,
+			disabled: props.disabled,
+			active: props.active
+		}));
+		/**
+		* Отступ уровня — в свёрнутом рейле его нет: там строка шириной с иконку, и
+		* сдвигать её некуда.
+		*/
+		const rootStyle = computed(() => {
+			const indent = collapsed.value ? void 0 : itemNestIndent(level);
+			return indent ? { paddingInlineStart: indent } : void 0;
+		});
+		/**
+		* Поддерево исчезает из DOM, а не прячется: невидимая ветка ловила бы `Tab` и
+		* читалась бы диктором вопреки `aria-expanded="false"`.
+		*
+		* Свёрнутость здесь не проверяется — её перехватывает `v-if="collapsed"` раньше:
+		* в рейле пункт рисуется иконкой с подсказкой, и до ветки дело не доходит.
+		*/
+		const showChildren = computed(() => hasChildren.value && isExpanded.value);
+		return (_ctx, _cache) => {
+			return collapsed.value ? (openBlock(), createBlock(GrTooltip_default, {
+				key: 0,
+				text: __props.label,
+				placement: tooltipPlacement.value,
+				block: "",
+				"describe-trigger": false,
+				"data-gr-sidebar-item-tooltip": ""
+			}, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+					"data-gr-sidebar-item": "",
+					type: rootTag.value === "button" ? "button" : void 0,
+					href: rootHref.value,
+					"aria-current": __props.active ? "page" : void 0,
+					"aria-disabled": __props.disabled ? "true" : void 0,
+					"aria-label": __props.label,
+					"aria-expanded": hasChildren.value ? "false" : void 0,
+					class: normalizeClass(rootClass.value),
+					onClick: onCollapsedActivate
+				}, {
+					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)) : (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(itemLetterClass)),
+						"aria-hidden": "true"
+					}, toDisplayString(firstLetter.value), 3))])]),
+					_: 1
+				}, 8, [
+					"type",
+					"href",
+					"aria-current",
+					"aria-disabled",
+					"aria-label",
+					"aria-expanded",
+					"class"
+				]))]),
+				_: 1
+			}, 8, ["text", "placement"])) : hasChildren.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				"data-gr-sidebar-item-nest": "",
+				class: normalizeClass(unref(itemNestClass))
+			}, [createElementVNode("button", {
+				"data-gr-sidebar-item": "",
+				type: "button",
+				"aria-current": __props.active ? "page" : void 0,
+				"aria-disabled": __props.disabled ? "true" : void 0,
+				"aria-expanded": isExpanded.value ? "true" : "false",
+				"aria-controls": showChildren.value ? unref(childrenId) : void 0,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value),
+				onClick: toggleChildren
+			}, [
+				createElementVNode("span", _hoisted_3, [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)) : createCommentVNode("", true)]),
+				createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1),
+				__props.badge != null ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(itemBadgeClass))
+				}, toDisplayString(__props.badge), 3)) : createCommentVNode("", true),
+				createVNode(unref(chevron_right_default), {
+					"aria-hidden": "true",
+					class: normalizeClass([unref(itemChevronClass), isExpanded.value ? unref(itemChevronExpandedClass) : ""])
+				}, null, 8, ["class"])
+			], 14, _hoisted_2$1), showChildren.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(childrenId),
+				"data-gr-sidebar-item-children": "",
+				class: normalizeClass(unref(itemChildrenClass))
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_5)) : createCommentVNode("", true)], 2)) : (openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+				key: 2,
+				"data-gr-sidebar-item": "",
+				type: rootTag.value === "button" ? "button" : void 0,
+				href: rootHref.value,
+				"aria-current": __props.active ? "page" : void 0,
+				"aria-disabled": __props.disabled ? "true" : void 0,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value)
+			}, {
+				default: withCtx(() => [
+					createElementVNode("span", _hoisted_6, [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)) : createCommentVNode("", true)]),
+					createElementVNode("span", _hoisted_7, toDisplayString(__props.label), 1),
+					__props.badge != null ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(itemBadgeClass))
+					}, toDisplayString(__props.badge), 3)) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, [
+				"type",
+				"href",
+				"aria-current",
+				"aria-disabled",
+				"class",
+				"style"
+			]));
+		};
+	}
+});
+//#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 };