@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrPopover/chunks/GrPopover-b70bIlQ9.js

@@ -0,0 +1,216 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { useFloating } from "../../../composables/useFloating.js";
+import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
+import { t as useModalOverlay } from "../../../chunks/useModalOverlay-Cv5hF63W.js";
+import { t as grPopoverPanelClass } from "../../../chunks/grPopoverStyles-Rz_Z5nLW.js";
+import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+//#region src/components/GrPopover/GrPopover.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-gr-popover": "" };
+var _hoisted_2 = [
+	"id",
+	"role",
+	"aria-modal",
+	"inert",
+	"aria-label",
+	"aria-labelledby"
+];
+//#endregion
+//#region src/components/GrPopover/GrPopover.vue
+var GrPopover_default = /* @__PURE__ */ defineComponent({
+	__name: "GrPopover",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		placement: { default: "bottom-start" },
+		offsetPx: { default: 8 },
+		size: { default: void 0 },
+		role: { default: "dialog" },
+		modal: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		labelledBy: { default: void 0 },
+		trigger: { default: "click" },
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		closeOnClickOutside: {
+			type: Boolean,
+			default: true
+		},
+		closeOnContentClick: {
+			type: Boolean,
+			default: false
+		},
+		autoFocus: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: { default: void 0 },
+		contentClass: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* GrPopover — якорный немодальный оверлей с произвольным содержимым.
+		*
+		* Роль «универсального поповера» до сих пор насильно исполнял `GrDropdown`, но
+		* он про меню: жёстко объявляет `role="menu"`, `aria-haspopup="menu"` и водит
+		* фокус по пунктам. Для формы, подтверждения или палитры это неверная семантика.
+		*
+		* Здесь наоборот: позиционирование, слой и закрытие берёт на себя примитив, а
+		* клавиатурный паттерн внутри панели остаётся за потребителем — поэтому `role`
+		* задаётся пропом. На этом собираются `GrMenu` / `GrContextMenu` /
+		* `GrColorPicker` / Popconfirm.
+		*
+		* A11y:
+		* - триггер получает `aria-haspopup`/`aria-expanded`/`aria-controls` через
+		*   `triggerProps` (биндится на реальный фокусируемый элемент в слоте);
+		* - панель — `role="dialog"` по умолчанию и обязательное доступное имя
+		*   (`ariaLabel` либо `aria-labelledby` через `labelledBy`);
+		* - Esc закрывает верхний слой стека, клик вне — закрывает по точке попадания;
+		* - **по умолчанию фокус-ловушки нет намеренно**: Tab обязан уводить фокус
+		*   наружу, иначе немодальный слой запирает пользователя на странице, которая
+		*   не заблокирована. Проп `modal` включает второй режим — см. ниже.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrPopover" });
+		const { open: isOpen, setOpen } = useControlledOpen(() => props.open, (next) => emit("update:open", next));
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const panelId = useId();
+		const clickOutsideExclude = [() => panelEl.value];
+		function open() {
+			if (props.disabled) return;
+			setOpen(true);
+		}
+		function close() {
+			setOpen(false);
+		}
+		function toggle() {
+			isOpen.value ? close() : open();
+		}
+		const { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(rootEl, panelEl, isOpen, {
+			placement: () => props.placement,
+			offsetPx: props.offsetPx,
+			zIndexVar: "--gr-z-dropdown"
+		});
+		watch(() => props.placement, () => {
+			if (isOpen.value) updateFloatingPosition();
+		});
+		/**
+		* Слой стека оверлеев: очередь Esc общая с модалками, поэтому поповер, открытый
+		* внутри модалки, по Esc закрывает себя, а не её. Возврат фокуса на триггер
+		* тоже отсюда — по правилу «только если на момент закрытия фокус ещё внутри».
+		*
+		* Модальность включается пропом и приходит той же сборкой, что у окна и drawer'а
+		* (`useModalOverlay`): ловушка фокуса, `inert` фона, блокировка скролла. При
+		* `modal: false` не включается ничего из этого — дефолтный поповер немодален.
+		*
+		* Корень слоя и панель здесь один элемент: якорный оверлей уезжает в портал сам,
+		* без обёртки.
+		*/
+		const { inertAttr, portalTarget, teleportEnabled, themeAttrs } = useModalOverlay(isOpen, close, {
+			modal: () => props.modal,
+			closeOnEscape: () => props.closeOnEsc,
+			panel: panelEl,
+			root: panelEl,
+			teleportTo: () => props.teleportTo,
+			initialFocus: () => panelEl.value
+		});
+		watch(isOpen, async (next) => {
+			if (!next || !(props.autoFocus || props.modal)) return;
+			await nextTick();
+			panelEl.value?.focus();
+		});
+		/** Роли, которые `aria-haspopup` действительно понимает. */
+		const HASPOPUP_ROLES = [
+			"dialog",
+			"menu",
+			"listbox",
+			"grid"
+		];
+		/**
+		* Пропсы для реального фокусируемого триггера: `<button v-bind="triggerProps">`.
+		* Клик вешается на обёртку, а ARIA — сюда, потому что `aria-expanded` обязан
+		* жить на самом интерактивном элементе, а не на `div` вокруг него.
+		*/
+		const triggerProps = computed(() => ({
+			"aria-haspopup": HASPOPUP_ROLES.includes(props.role) ? props.role : void 0,
+			"aria-expanded": isOpen.value,
+			"aria-controls": isOpen.value ? panelId : void 0,
+			"disabled": props.disabled || void 0
+		}));
+		function onTriggerClick() {
+			if (props.trigger === "click") toggle();
+		}
+		function onContentClick() {
+			if (props.closeOnContentClick) close();
+		}
+		const panelClasses = computed(() => grPopoverPanelClass(resolvedSize.value, resolvedPlacement.value, props.contentClass));
+		__expose({
+			open,
+			close,
+			toggle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-popover-trigger": "",
+				class: "inline-block max-w-full",
+				onClick: onTriggerClick
+			}, [renderSlot(_ctx.$slots, "trigger", {
+				open: unref(isOpen),
+				toggle,
+				close,
+				triggerProps: triggerProps.value
+			})])), [[unref(vClickOutside), {
+				handler: close,
+				enabled: unref(isOpen) && __props.closeOnClickOutside,
+				exclude: clickOutsideExclude
+			}]]), (openBlock(), createBlock(Teleport, {
+				to: unref(portalTarget),
+				disabled: !unref(teleportEnabled)
+			}, [createVNode(Transition, {
+				"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
+				"enter-from-class": "transform opacity-0 scale-95",
+				"enter-to-class": "transform opacity-100 scale-100",
+				"leave-active-class": "transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]",
+				"leave-from-class": "transform opacity-100 scale-100",
+				"leave-to-class": "transform opacity-0 scale-95"
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+					id: unref(panelId),
+					ref_key: "panelEl",
+					ref: panelEl
+				}, unref(themeAttrs), {
+					"data-gr-popover-panel": "",
+					"data-gr-overlay-root": "",
+					role: __props.role === "none" ? void 0 : __props.role,
+					"aria-modal": __props.modal ? "true" : void 0,
+					inert: unref(inertAttr),
+					"aria-label": __props.labelledBy ? void 0 : __props.ariaLabel,
+					"aria-labelledby": __props.labelledBy,
+					tabindex: "-1",
+					class: panelClasses.value,
+					style: unref(floatingStyle),
+					onClick: onContentClick
+				}), [renderSlot(_ctx.$slots, "content", { close })], 16, _hoisted_2), [[vShow, unref(isOpen)]])]),
+				_: 3
+			})], 8, ["to", "disabled"]))]);
+		};
+	}
+});
+//#endregion
+export { GrPopover_default as t };

package/dist/components/GrPopover/chunks/GrPopover-b70bIlQ9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrPopover-b70bIlQ9.js","names":[],"sources":["../../../../src/components/GrPopover/GrPopover.vue","../../../../src/components/GrPopover/GrPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPopover — якорный немодальный оверлей с произвольным содержимым.\n *\n * Роль «универсального поповера» до сих пор насильно исполнял `GrDropdown`, но\n * он про меню: жёстко объявляет `role=\"menu\"`, `aria-haspopup=\"menu\"` и водит\n * фокус по пунктам. Для формы, подтверждения или палитры это неверная семантика.\n *\n * Здесь наоборот: позиционирование, слой и закрытие берёт на себя примитив, а\n * клавиатурный паттерн внутри панели остаётся за потребителем — поэтому `role`\n * задаётся пропом. На этом собираются `GrMenu` / `GrContextMenu` /\n * `GrColorPicker` / Popconfirm.\n *\n * A11y:\n * - триггер получает `aria-haspopup`/`aria-expanded`/`aria-controls` через\n *   `triggerProps` (биндится на реальный фокусируемый элемент в слоте);\n * - панель — `role=\"dialog\"` по умолчанию и обязательное доступное имя\n *   (`ariaLabel` либо `aria-labelledby` через `labelledBy`);\n * - Esc закрывает верхний слой стека, клик вне — закрывает по точке попадания;\n * - **по умолчанию фокус-ловушки нет намеренно**: Tab обязан уводить фокус\n *   наружу, иначе немодальный слой запирает пользователя на странице, которая\n *   не заблокирована. Проп `modal` включает второй режим — см. ниже.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { vClickOutside } from '../../directives'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  type GrPopoverRole,\n  type GrPopoverSize,\n  grPopoverPanelClass,\n} from './grPopoverStyles'\n\nexport interface GrPopoverProps {\n  /**\n   * Открыт ли поповер. Без этого пропа компонент ведёт состояние сам\n   * (uncontrolled), с ним — слушайте `update:open`.\n   */\n  open?: boolean\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  size?: GrPopoverSize\n  /** Роль панели. Меняется теми, кто строит поверх примитива своё меню/список. */\n  role?: GrPopoverRole\n  /**\n   * Модальный режим: фон уходит в `inert`, Tab ходит по кругу внутри панели,\n   * скролл страницы блокируется, а слой встаёт в стек модальным — как окно.\n   * Нужен поповеру с формой или подтверждением внутри: без изоляции фона\n   * пользователь уводит фокус на страницу, к которой поповер и относится.\n   *\n   * В этом режиме фокус переносится в панель независимо от `autoFocus`: фон\n   * недоступен, и слой без фокуса внутри стал бы клавиатурной ловушкой.\n   */\n  modal?: boolean\n  /** Доступное имя панели. Обязательно для `role=\"dialog\"` без видимого заголовка. */\n  ariaLabel?: string\n  /** `id` видимого заголовка внутри панели — альтернатива `ariaLabel`. */\n  labelledBy?: string\n  /**\n   * `manual` — открывать только программно (через `v-model:open`). Нужно для\n   * контекстного меню и подтверждений, где момент открытия решает потребитель.\n   */\n  trigger?: 'click' | 'manual'\n  closeOnEsc?: boolean\n  closeOnClickOutside?: boolean\n  /** Закрывать по клику внутри панели — удобно для меню, вредно для формы. */\n  closeOnContentClick?: boolean\n  /**\n   * Переносить фокус на панель при открытии. Именно на панель, а не на первый\n   * контрол внутри: сфокусировать поле ввода за пользователя — решение\n   * содержимого, а не оболочки.\n   */\n  autoFocus?: boolean\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  contentClass?: string\n  disabled?: boolean\n}\n\nexport interface GrPopoverEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrPopoverProps>(), {\n  open: undefined,\n  placement: 'bottom-start',\n  offsetPx: 8,\n  size: undefined,\n  role: 'dialog',\n  modal: false,\n  ariaLabel: undefined,\n  labelledBy: undefined,\n  trigger: 'click',\n  closeOnEsc: true,\n  closeOnClickOutside: true,\n  closeOnContentClick: false,\n  autoFocus: true,\n  teleportTo: undefined,\n  contentClass: undefined,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrPopoverEmits>()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrPopover' })\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst panelId = useId()\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nfunction open(): void {\n  if (props.disabled) return\n  setOpen(true)\n}\n\nfunction close(): void {\n  setOpen(false)\n}\n\nfunction toggle(): void {\n  isOpen.value ? close() : open()\n}\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  rootEl,\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    offsetPx: props.offsetPx,\n    // Своего слоя у поповера нет намеренно: он и дропдаун — один класс якорных\n    // немодальных оверлеев и обязаны лежать на одной высоте, иначе начнут\n    // перекрывать друг друга в зависимости от порядка открытия.\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\nwatch(() => props.placement, () => {\n  if (isOpen.value) updateFloatingPosition()\n})\n\n/**\n * Слой стека оверлеев: очередь Esc общая с модалками, поэтому поповер, открытый\n * внутри модалки, по Esc закрывает себя, а не её. Возврат фокуса на триггер\n * тоже отсюда — по правилу «только если на момент закрытия фокус ещё внутри».\n *\n * Модальность включается пропом и приходит той же сборкой, что у окна и drawer'а\n * (`useModalOverlay`): ловушка фокуса, `inert` фона, блокировка скролла. При\n * `modal: false` не включается ничего из этого — дефолтный поповер немодален.\n *\n * Корень слоя и панель здесь один элемент: якорный оверлей уезжает в портал сам,\n * без обёртки.\n */\nconst { inertAttr, portalTarget, teleportEnabled, themeAttrs } = useModalOverlay(isOpen, close, {\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc,\n  panel: panelEl,\n  root: panelEl,\n  teleportTo: () => props.teleportTo,\n  initialFocus: () => panelEl.value,\n})\n\n// Фокус переносим после отрисовки панели: до `nextTick` её ещё нет в DOM.\n// В модальном режиме перенос обязателен: фон в `inert`, и фокус, оставленный\n// снаружи, попал бы в недоступное поддерево.\nwatch(isOpen, async (next) => {\n  if (!next || !(props.autoFocus || props.modal)) return\n\n  await nextTick()\n  panelEl.value?.focus()\n})\n\n/** Роли, которые `aria-haspopup` действительно понимает. */\nconst HASPOPUP_ROLES = ['dialog', 'menu', 'listbox', 'grid'] as const\n\n/**\n * Пропсы для реального фокусируемого триггера: `<button v-bind=\"triggerProps\">`.\n * Клик вешается на обёртку, а ARIA — сюда, потому что `aria-expanded` обязан\n * жить на самом интерактивном элементе, а не на `div` вокруг него.\n */\nconst triggerProps = computed(() => ({\n  // `aria-haspopup` принимает не любую роль: `group` в его списке нет, и\n  // объявленный им триггер отдавал бы невалидный атрибут, который AT просто\n  // отбрасывает. Роли вне списка сообщают о панели только через `aria-expanded`.\n  'aria-haspopup': HASPOPUP_ROLES.includes(props.role as (typeof HASPOPUP_ROLES)[number])\n    ? (props.role as (typeof HASPOPUP_ROLES)[number])\n    : undefined,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'disabled': props.disabled || undefined,\n}))\n\nfunction onTriggerClick(): void {\n  if (props.trigger === 'click') toggle()\n}\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick) close()\n}\n\nconst panelClasses = computed(() =>\n  grPopoverPanelClass(resolvedSize.value, resolvedPlacement.value, props.contentClass),\n)\n\ndefineExpose({ open, close, toggle })\n</script>\n\n<template>\n  <div data-gr-popover>\n    <div\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside, exclude: clickOutsideExclude }\"\n      data-gr-popover-trigger\n      class=\"inline-block max-w-full\"\n      @click=\"onTriggerClick\"\n    >\n      <slot\n        name=\"trigger\"\n        :open=\"isOpen\"\n        :toggle=\"toggle\"\n        :close=\"close\"\n        :trigger-props=\"triggerProps\"\n      />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-popover-panel\n          data-gr-overlay-root\n          :role=\"role === 'none' ? undefined : role\"\n          :aria-modal=\"modal ? 'true' : undefined\"\n          :inert=\"inertAttr\"\n          :aria-label=\"labelledBy ? undefined : ariaLabel\"\n          :aria-labelledby=\"labelledBy\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"floatingStyle\"\n          @click=\"onContentClick\"\n        >\n          <slot name=\"content\" :close=\"close\" />\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPopover — якорный немодальный оверлей с произвольным содержимым.\n *\n * Роль «универсального поповера» до сих пор насильно исполнял `GrDropdown`, но\n * он про меню: жёстко объявляет `role=\"menu\"`, `aria-haspopup=\"menu\"` и водит\n * фокус по пунктам. Для формы, подтверждения или палитры это неверная семантика.\n *\n * Здесь наоборот: позиционирование, слой и закрытие берёт на себя примитив, а\n * клавиатурный паттерн внутри панели остаётся за потребителем — поэтому `role`\n * задаётся пропом. На этом собираются `GrMenu` / `GrContextMenu` /\n * `GrColorPicker` / Popconfirm.\n *\n * A11y:\n * - триггер получает `aria-haspopup`/`aria-expanded`/`aria-controls` через\n *   `triggerProps` (биндится на реальный фокусируемый элемент в слоте);\n * - панель — `role=\"dialog\"` по умолчанию и обязательное доступное имя\n *   (`ariaLabel` либо `aria-labelledby` через `labelledBy`);\n * - Esc закрывает верхний слой стека, клик вне — закрывает по точке попадания;\n * - **по умолчанию фокус-ловушки нет намеренно**: Tab обязан уводить фокус\n *   наружу, иначе немодальный слой запирает пользователя на странице, которая\n *   не заблокирована. Проп `modal` включает второй режим — см. ниже.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { vClickOutside } from '../../directives'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  type GrPopoverRole,\n  type GrPopoverSize,\n  grPopoverPanelClass,\n} from './grPopoverStyles'\n\nexport interface GrPopoverProps {\n  /**\n   * Открыт ли поповер. Без этого пропа компонент ведёт состояние сам\n   * (uncontrolled), с ним — слушайте `update:open`.\n   */\n  open?: boolean\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  size?: GrPopoverSize\n  /** Роль панели. Меняется теми, кто строит поверх примитива своё меню/список. */\n  role?: GrPopoverRole\n  /**\n   * Модальный режим: фон уходит в `inert`, Tab ходит по кругу внутри панели,\n   * скролл страницы блокируется, а слой встаёт в стек модальным — как окно.\n   * Нужен поповеру с формой или подтверждением внутри: без изоляции фона\n   * пользователь уводит фокус на страницу, к которой поповер и относится.\n   *\n   * В этом режиме фокус переносится в панель независимо от `autoFocus`: фон\n   * недоступен, и слой без фокуса внутри стал бы клавиатурной ловушкой.\n   */\n  modal?: boolean\n  /** Доступное имя панели. Обязательно для `role=\"dialog\"` без видимого заголовка. */\n  ariaLabel?: string\n  /** `id` видимого заголовка внутри панели — альтернатива `ariaLabel`. */\n  labelledBy?: string\n  /**\n   * `manual` — открывать только программно (через `v-model:open`). Нужно для\n   * контекстного меню и подтверждений, где момент открытия решает потребитель.\n   */\n  trigger?: 'click' | 'manual'\n  closeOnEsc?: boolean\n  closeOnClickOutside?: boolean\n  /** Закрывать по клику внутри панели — удобно для меню, вредно для формы. */\n  closeOnContentClick?: boolean\n  /**\n   * Переносить фокус на панель при открытии. Именно на панель, а не на первый\n   * контрол внутри: сфокусировать поле ввода за пользователя — решение\n   * содержимого, а не оболочки.\n   */\n  autoFocus?: boolean\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  contentClass?: string\n  disabled?: boolean\n}\n\nexport interface GrPopoverEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrPopoverProps>(), {\n  open: undefined,\n  placement: 'bottom-start',\n  offsetPx: 8,\n  size: undefined,\n  role: 'dialog',\n  modal: false,\n  ariaLabel: undefined,\n  labelledBy: undefined,\n  trigger: 'click',\n  closeOnEsc: true,\n  closeOnClickOutside: true,\n  closeOnContentClick: false,\n  autoFocus: true,\n  teleportTo: undefined,\n  contentClass: undefined,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrPopoverEmits>()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrPopover' })\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst panelId = useId()\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nfunction open(): void {\n  if (props.disabled) return\n  setOpen(true)\n}\n\nfunction close(): void {\n  setOpen(false)\n}\n\nfunction toggle(): void {\n  isOpen.value ? close() : open()\n}\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  rootEl,\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    offsetPx: props.offsetPx,\n    // Своего слоя у поповера нет намеренно: он и дропдаун — один класс якорных\n    // немодальных оверлеев и обязаны лежать на одной высоте, иначе начнут\n    // перекрывать друг друга в зависимости от порядка открытия.\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\nwatch(() => props.placement, () => {\n  if (isOpen.value) updateFloatingPosition()\n})\n\n/**\n * Слой стека оверлеев: очередь Esc общая с модалками, поэтому поповер, открытый\n * внутри модалки, по Esc закрывает себя, а не её. Возврат фокуса на триггер\n * тоже отсюда — по правилу «только если на момент закрытия фокус ещё внутри».\n *\n * Модальность включается пропом и приходит той же сборкой, что у окна и drawer'а\n * (`useModalOverlay`): ловушка фокуса, `inert` фона, блокировка скролла. При\n * `modal: false` не включается ничего из этого — дефолтный поповер немодален.\n *\n * Корень слоя и панель здесь один элемент: якорный оверлей уезжает в портал сам,\n * без обёртки.\n */\nconst { inertAttr, portalTarget, teleportEnabled, themeAttrs } = useModalOverlay(isOpen, close, {\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc,\n  panel: panelEl,\n  root: panelEl,\n  teleportTo: () => props.teleportTo,\n  initialFocus: () => panelEl.value,\n})\n\n// Фокус переносим после отрисовки панели: до `nextTick` её ещё нет в DOM.\n// В модальном режиме перенос обязателен: фон в `inert`, и фокус, оставленный\n// снаружи, попал бы в недоступное поддерево.\nwatch(isOpen, async (next) => {\n  if (!next || !(props.autoFocus || props.modal)) return\n\n  await nextTick()\n  panelEl.value?.focus()\n})\n\n/** Роли, которые `aria-haspopup` действительно понимает. */\nconst HASPOPUP_ROLES = ['dialog', 'menu', 'listbox', 'grid'] as const\n\n/**\n * Пропсы для реального фокусируемого триггера: `<button v-bind=\"triggerProps\">`.\n * Клик вешается на обёртку, а ARIA — сюда, потому что `aria-expanded` обязан\n * жить на самом интерактивном элементе, а не на `div` вокруг него.\n */\nconst triggerProps = computed(() => ({\n  // `aria-haspopup` принимает не любую роль: `group` в его списке нет, и\n  // объявленный им триггер отдавал бы невалидный атрибут, который AT просто\n  // отбрасывает. Роли вне списка сообщают о панели только через `aria-expanded`.\n  'aria-haspopup': HASPOPUP_ROLES.includes(props.role as (typeof HASPOPUP_ROLES)[number])\n    ? (props.role as (typeof HASPOPUP_ROLES)[number])\n    : undefined,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'disabled': props.disabled || undefined,\n}))\n\nfunction onTriggerClick(): void {\n  if (props.trigger === 'click') toggle()\n}\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick) close()\n}\n\nconst panelClasses = computed(() =>\n  grPopoverPanelClass(resolvedSize.value, resolvedPlacement.value, props.contentClass),\n)\n\ndefineExpose({ open, close, toggle })\n</script>\n\n<template>\n  <div data-gr-popover>\n    <div\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside, exclude: clickOutsideExclude }\"\n      data-gr-popover-trigger\n      class=\"inline-block max-w-full\"\n      @click=\"onTriggerClick\"\n    >\n      <slot\n        name=\"trigger\"\n        :open=\"isOpen\"\n        :toggle=\"toggle\"\n        :close=\"close\"\n        :trigger-props=\"triggerProps\"\n      />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-popover-panel\n          data-gr-overlay-root\n          :role=\"role === 'none' ? undefined : role\"\n          :aria-modal=\"modal ? 'true' : undefined\"\n          :inert=\"inertAttr\"\n          :aria-label=\"labelledBy ? undefined : ariaLabel\"\n          :aria-labelledby=\"labelledBy\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"floatingStyle\"\n          @click=\"onContentClick\"\n        >\n          <slot name=\"content\" :close=\"close\" />\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FA,MAAM,QAAQ;EAmBd,MAAM,OAAO;EAEb,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,YAAY,CAAC;EAEpF,MAAM,EAAE,MAAM,QAAQ,YAAY,wBAC1B,MAAM,OACZ,SAAQ,KAAK,eAAe,IAAI,CAClC;EAEA,MAAM,SAAS,IAAwB,IAAI;EAC3C,MAAM,UAAU,IAAwB,IAAI;EAC5C,MAAM,UAAU,MAAM;EAEtB,MAAM,sBAAsB,OAAO,QAAQ,KAAK;EAEhD,SAAS,OAAa;GACpB,IAAI,MAAM,UAAU;GACpB,QAAQ,IAAI;EACd;EAEA,SAAS,QAAc;GACrB,QAAQ,KAAK;EACf;EAEA,SAAS,SAAe;GACtB,OAAO,QAAQ,MAAM,IAAI,KAAK;EAChC;EAEA,MAAM,EAAE,eAAe,mBAAmB,QAAQ,2BAA2B,YAC3E,QACA,SACA,QACA;GACE,iBAAiB,MAAM;GACvB,UAAU,MAAM;GAIhB,WAAW;EACb,CACF;EAEA,YAAY,MAAM,iBAAiB;GACjC,IAAI,OAAO,OAAO,uBAAuB;EAC3C,CAAC;;;;;;;;;;;;;EAcD,MAAM,EAAE,WAAW,cAAc,iBAAiB,eAAe,gBAAgB,QAAQ,OAAO;GAC9F,aAAa,MAAM;GACnB,qBAAqB,MAAM;GAC3B,OAAO;GACP,MAAM;GACN,kBAAkB,MAAM;GACxB,oBAAoB,QAAQ;EAC9B,CAAC;EAKD,MAAM,QAAQ,OAAO,SAAS;GAC5B,IAAI,CAAC,QAAQ,EAAE,MAAM,aAAa,MAAM,QAAQ;GAEhD,MAAM,SAAS;GACf,QAAQ,OAAO,MAAM;EACvB,CAAC;;EAGD,MAAM,iBAAiB;GAAC;GAAU;GAAQ;GAAW;EAAM;;;;;;EAO3D,MAAM,eAAe,gBAAgB;GAInC,iBAAiB,eAAe,SAAS,MAAM,IAAuC,IACjF,MAAM,OACP,KAAA;GACJ,iBAAiB,OAAO;GACxB,iBAAiB,OAAO,QAAQ,UAAU,KAAA;GAC1C,YAAY,MAAM,YAAY,KAAA;EAChC,EAAE;EAEF,SAAS,iBAAuB;GAC9B,IAAI,MAAM,YAAY,SAAS,OAAO;EACxC;EAEA,SAAS,iBAAuB;GAC9B,IAAI,MAAM,qBAAqB,MAAM;EACvC;EAEA,MAAM,eAAe,eACnB,oBAAoB,aAAa,OAAO,kBAAkB,OAAO,MAAM,YAAY,CACrF;EAEA,SAAa;GAAE;GAAM;GAAO;EAAO,CAAC;;uBAIlC,mBA+CM,OA/CN,YA+CM,CAAA,gBAAA,UAAA,GA9CJ,mBAcM,OAAA;aAbA;IAAJ,KAAI;IAEJ,2BAAA;IACA,OAAM;IACL,SAAO;OAER,WAME,KAAA,QAAA,WAAA;IAJC,MAAM,MAAA,MAAA;IACE;IACD;IACP,cAAe,aAAA;;aAVU;IAAK,SAAW,MAAA,MAAA,KAAU,QAAA;IAAmB,SAAW;GAAmB,CAAA,CAAA,CAAA,IAAA,UAAA,GAczG,YA6BW,UAAA;IA7BA,IAAI,MAAA,YAAA;IAAe,UAAQ,CAAG,MAAA,eAAA;OACvC,YA2Ba,YAAA;IA1BX,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;2BAoBT,CAAA,eAlBN,mBAkBM,OAlBN,WAkBM;KAhBH,IAAI,MAAA,OAAA;cACD;KAAJ,KAAI;OACI,MAAA,UAAA,GAAU;KAClB,yBAAA;KACA,wBAAA;KACC,MAAM,QAAA,SAAI,SAAc,KAAA,IAAY,QAAA;KACpC,cAAY,QAAA,QAAK,SAAY,KAAA;KAC7B,OAAO,MAAA,SAAA;KACP,cAAY,QAAA,aAAa,KAAA,IAAY,QAAA;KACrC,mBAAiB,QAAA;KAClB,UAAS;KACR,OAAO,aAAA;KACP,OAAO,MAAA,aAAA;KACP,SAAO;SAER,WAAsC,KAAA,QAAA,WAAA,EAAT,MAAK,CAAA,CAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAA,OAhB1B,MAAA,MAAA,CAAM,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/GrPopover/index.js

@@ -1,3 +1,3 @@
-import { t as GrPopover_default } from "./chunks/GrPopover-DuqeoFaI.js";
+import { t as GrPopover_default } from "./chunks/GrPopover-b70bIlQ9.js";
 import { n as grPopoverSafelist, t as grPopoverConfig } from "../../chunks/config-BSyiFlbi.js";
 export { GrPopover_default as GrPopover, GrPopover_default as default, grPopoverConfig, grPopoverSafelist };

package/dist/components/GrProgressBar/chunks/GrProgressBar-hszUOC8f.js

@@ -0,0 +1,90 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { a as valueTextSizes, i as trackSizes, n as grProgressBarFillClass, r as rowGaps, t as bufferClass } from "../../../chunks/grStyle-CrgLQKKf.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
+import '../styles.css';//#region src/components/GrProgressBar/GrProgressBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-gr-progress-bar-indeterminate",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext"
+];
+//#endregion
+//#region src/components/GrProgressBar/GrProgressBar.vue
+var GrProgressBar_default = /* @__PURE__ */ defineComponent({
+	__name: "GrProgressBar",
+	props: {
+		value: {},
+		buffer: { default: void 0 },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {
+			type: Function,
+			default: void 0
+		},
+		ariaLabel: { default: void 0 },
+		tone: { default: "primary" },
+		size: { default: void 0 },
+		borderless: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrProgressBar" });
+		const resolvedBorderless = useGrComponentProp("GrProgressBar", "borderless", () => props.borderless, false);
+		const trackClassName = computed(() => trackSizes[resolvedSize.value]);
+		const rowGapClassName = computed(() => rowGaps[resolvedSize.value]);
+		const valueClassName = computed(() => valueTextSizes[resolvedSize.value]);
+		function clampValue(value) {
+			if (Number.isNaN(value)) return 0;
+			return Math.min(100, Math.max(0, value));
+		}
+		const safe = computed(() => clampValue(props.value));
+		const safeBuffer = computed(() => props.buffer === void 0 ? void 0 : clampValue(props.buffer));
+		const fillClassName = computed(() => grProgressBarFillClass(props.tone));
+		/**
+		* `aria-valuetext` нужен только со своим форматом: «45» при `aria-valuemax="100"`
+		* диктор и так читает как проценты, дублировать это текстом незачем.
+		*/
+		const valueText = computed(() => props.formatValue ? props.formatValue(safe.value) : void 0);
+		const valueLabel = computed(() => valueText.value ?? `${Math.round(safe.value)}%`);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-progress-bar": "",
+				class: normalizeClass(["w-full flex items-center", rowGapClassName.value])
+			}, [createElementVNode("div", {
+				"data-gr-progress-bar-track": "",
+				"data-gr-progress-bar-indeterminate": __props.indeterminate ? "" : void 0,
+				role: "progressbar",
+				"aria-label": __props.ariaLabel,
+				"aria-valuenow": __props.indeterminate ? void 0 : safe.value,
+				"aria-valuetext": __props.indeterminate ? void 0 : valueText.value,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				class: normalizeClass(["relative min-w-0 flex-1 rounded-[var(--gr-radius-full)] bg-[var(--gr-muted)] overflow-hidden", [trackClassName.value, unref(resolvedBorderless) ? "" : "border border-[var(--gr-brd)]"]])
+			}, [safeBuffer.value !== void 0 && !__props.indeterminate ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-gr-progress-bar-buffer": "",
+				class: normalizeClass(["absolute inset-y-0 left-0", unref(bufferClass)]),
+				style: normalizeStyle({ width: `${safeBuffer.value}%` })
+			}, null, 6)) : createCommentVNode("", true), createElementVNode("div", {
+				"data-gr-progress-bar-fill": "",
+				class: normalizeClass(["absolute inset-y-0 left-0", fillClassName.value]),
+				style: normalizeStyle(__props.indeterminate ? void 0 : { width: `${safe.value}%` })
+			}, null, 6)], 10, _hoisted_1), __props.showValue && !__props.indeterminate ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-gr-progress-bar-value": "",
+				class: normalizeClass(["text-[var(--gr-muted-fg)] tabular-nums min-w-[4ch] text-right", valueClassName.value])
+			}, toDisplayString(valueLabel.value), 3)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { GrProgressBar_default as t };

package/dist/components/GrProgressBar/chunks/GrProgressBar-hszUOC8f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrProgressBar-hszUOC8f.js","names":[],"sources":["../../../../src/components/GrProgressBar/GrProgressBar.vue","../../../../src/components/GrProgressBar/GrProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  bufferClass,\n  grProgressBarFillClass,\n  type GrProgressBarSize,\n  type GrProgressBarTone,\n  rowGaps,\n  trackSizes,\n  valueTextSizes,\n} from './grStyle'\n\n/**\n * Пропы {@link GrProgressBar}.\n *\n * Линейный индикатор прогресса: определённый режим по `value` и неопределённый\n * по `indeterminate`, необязательный слой буфера и подпись значения.\n */\nexport interface GrProgressBarProps {\n  /** Текущее значение `0..100`; выходящие за границы клампятся, `NaN` → `0`. */\n  value: number\n  /** Загружено с запасом: слой позади заливки, `0..100`. Не задан — слоя нет. */\n  buffer?: number\n  /** Прогресс неизвестен: полоса бежит, значение наружу не объявляется. */\n  indeterminate?: boolean\n  /** Показать значение подписью справа от трека. */\n  showValue?: boolean\n  /** Свой формат значения. Управляет и подписью, и `aria-valuetext`. */\n  formatValue?: (value: number) => string\n  /** Метка для скринридера (обязательна, если рядом нет видимого заголовка). */\n  ariaLabel?: string\n  /** Цветовая тональность заливки. */\n  tone?: GrProgressBarTone\n  /** Толщина трека. */\n  size?: GrProgressBarSize\n  /** Убрать рамку трека: внутри карточки вторая рамка только шумит. */\n  borderless?: boolean\n}\n\nconst props = withDefaults(defineProps<GrProgressBarProps>(), {\n  buffer: undefined,\n  indeterminate: false,\n  showValue: false,\n  formatValue: undefined,\n  ariaLabel: undefined,\n  tone: 'primary',\n  size: undefined,\n  // `undefined`, а не `false`: иначе значение из `componentDefaults` не дошло бы.\n  borderless: undefined,\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrProgressBar' })\nconst resolvedBorderless = useGrComponentProp('GrProgressBar', 'borderless', () => props.borderless, false)\nconst trackClassName = computed(() => trackSizes[resolvedSize.value])\nconst rowGapClassName = computed(() => rowGaps[resolvedSize.value])\nconst valueClassName = computed(() => valueTextSizes[resolvedSize.value])\n\nfunction clampValue(value: number): number {\n  if (Number.isNaN(value))\n    return 0\n  return Math.min(100, Math.max(0, value))\n}\n\nconst safe = computed(() => clampValue(props.value))\nconst safeBuffer = computed(() => (props.buffer === undefined ? undefined : clampValue(props.buffer)))\n\nconst fillClassName = computed(() => grProgressBarFillClass(props.tone))\n\n/**\n * `aria-valuetext` нужен только со своим форматом: «45» при `aria-valuemax=\"100\"`\n * диктор и так читает как проценты, дублировать это текстом незачем.\n */\nconst valueText = computed(() => (props.formatValue ? props.formatValue(safe.value) : undefined))\nconst valueLabel = computed(() => valueText.value ?? `${Math.round(safe.value)}%`)\n</script>\n\n<template>\n  <div\n    data-gr-progress-bar\n    class=\"w-full flex items-center\"\n    :class=\"rowGapClassName\"\n  >\n    <div\n      data-gr-progress-bar-track\n      :data-gr-progress-bar-indeterminate=\"indeterminate ? '' : undefined\"\n      role=\"progressbar\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"indeterminate ? undefined : safe\"\n      :aria-valuetext=\"indeterminate ? undefined : valueText\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      class=\"relative min-w-0 flex-1 rounded-[var(--gr-radius-full)] bg-[var(--gr-muted)] overflow-hidden\"\n      :class=\"[trackClassName, resolvedBorderless ? '' : 'border border-[var(--gr-brd)]']\"\n    >\n      <div\n        v-if=\"safeBuffer !== undefined && !indeterminate\"\n        data-gr-progress-bar-buffer\n        class=\"absolute inset-y-0 left-0\"\n        :class=\"bufferClass\"\n        :style=\"{ width: `${safeBuffer}%` }\"\n      />\n      <div\n        data-gr-progress-bar-fill\n        class=\"absolute inset-y-0 left-0\"\n        :class=\"fillClassName\"\n        :style=\"indeterminate ? undefined : { width: `${safe}%` }\"\n      />\n    </div>\n    <span\n      v-if=\"showValue && !indeterminate\"\n      data-gr-progress-bar-value\n      class=\"text-[var(--gr-muted-fg)] tabular-nums min-w-[4ch] text-right\"\n      :class=\"valueClassName\"\n    >{{ valueLabel }}</span>\n  </div>\n</template>\n\n<style>\n@keyframes gr-progress-indeterminate {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(250%);\n  }\n}\n\n/* Ширина бегущей полосы задаётся здесь, а не инлайном: инлайн-стиль перебил бы\n   раскладку под `reduce` ниже. */\n[data-gr-progress-bar-indeterminate] [data-gr-progress-bar-fill] {\n  width: 40%;\n  animation-name: gr-progress-indeterminate;\n  animation-duration: var(--gr-progress-indeterminate-duration, 1.4s);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Замерев в исходном кадре, полоса легла бы у левого края и читалась как\n   «прогресс 40%». Нейтральная заливка на всю ширину не притворяется ни нулём,\n   ни завершением: она говорит «работа идёт, значение неизвестно». */\n@media (prefers-reduced-motion: reduce) {\n  [data-gr-progress-bar-indeterminate] [data-gr-progress-bar-fill] {\n    width: 100%;\n    animation: none;\n    background-color: var(--gr-progress-indeterminate-bg, var(--gr-muted-fg));\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  bufferClass,\n  grProgressBarFillClass,\n  type GrProgressBarSize,\n  type GrProgressBarTone,\n  rowGaps,\n  trackSizes,\n  valueTextSizes,\n} from './grStyle'\n\n/**\n * Пропы {@link GrProgressBar}.\n *\n * Линейный индикатор прогресса: определённый режим по `value` и неопределённый\n * по `indeterminate`, необязательный слой буфера и подпись значения.\n */\nexport interface GrProgressBarProps {\n  /** Текущее значение `0..100`; выходящие за границы клампятся, `NaN` → `0`. */\n  value: number\n  /** Загружено с запасом: слой позади заливки, `0..100`. Не задан — слоя нет. */\n  buffer?: number\n  /** Прогресс неизвестен: полоса бежит, значение наружу не объявляется. */\n  indeterminate?: boolean\n  /** Показать значение подписью справа от трека. */\n  showValue?: boolean\n  /** Свой формат значения. Управляет и подписью, и `aria-valuetext`. */\n  formatValue?: (value: number) => string\n  /** Метка для скринридера (обязательна, если рядом нет видимого заголовка). */\n  ariaLabel?: string\n  /** Цветовая тональность заливки. */\n  tone?: GrProgressBarTone\n  /** Толщина трека. */\n  size?: GrProgressBarSize\n  /** Убрать рамку трека: внутри карточки вторая рамка только шумит. */\n  borderless?: boolean\n}\n\nconst props = withDefaults(defineProps<GrProgressBarProps>(), {\n  buffer: undefined,\n  indeterminate: false,\n  showValue: false,\n  formatValue: undefined,\n  ariaLabel: undefined,\n  tone: 'primary',\n  size: undefined,\n  // `undefined`, а не `false`: иначе значение из `componentDefaults` не дошло бы.\n  borderless: undefined,\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrProgressBar' })\nconst resolvedBorderless = useGrComponentProp('GrProgressBar', 'borderless', () => props.borderless, false)\nconst trackClassName = computed(() => trackSizes[resolvedSize.value])\nconst rowGapClassName = computed(() => rowGaps[resolvedSize.value])\nconst valueClassName = computed(() => valueTextSizes[resolvedSize.value])\n\nfunction clampValue(value: number): number {\n  if (Number.isNaN(value))\n    return 0\n  return Math.min(100, Math.max(0, value))\n}\n\nconst safe = computed(() => clampValue(props.value))\nconst safeBuffer = computed(() => (props.buffer === undefined ? undefined : clampValue(props.buffer)))\n\nconst fillClassName = computed(() => grProgressBarFillClass(props.tone))\n\n/**\n * `aria-valuetext` нужен только со своим форматом: «45» при `aria-valuemax=\"100\"`\n * диктор и так читает как проценты, дублировать это текстом незачем.\n */\nconst valueText = computed(() => (props.formatValue ? props.formatValue(safe.value) : undefined))\nconst valueLabel = computed(() => valueText.value ?? `${Math.round(safe.value)}%`)\n</script>\n\n<template>\n  <div\n    data-gr-progress-bar\n    class=\"w-full flex items-center\"\n    :class=\"rowGapClassName\"\n  >\n    <div\n      data-gr-progress-bar-track\n      :data-gr-progress-bar-indeterminate=\"indeterminate ? '' : undefined\"\n      role=\"progressbar\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"indeterminate ? undefined : safe\"\n      :aria-valuetext=\"indeterminate ? undefined : valueText\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      class=\"relative min-w-0 flex-1 rounded-[var(--gr-radius-full)] bg-[var(--gr-muted)] overflow-hidden\"\n      :class=\"[trackClassName, resolvedBorderless ? '' : 'border border-[var(--gr-brd)]']\"\n    >\n      <div\n        v-if=\"safeBuffer !== undefined && !indeterminate\"\n        data-gr-progress-bar-buffer\n        class=\"absolute inset-y-0 left-0\"\n        :class=\"bufferClass\"\n        :style=\"{ width: `${safeBuffer}%` }\"\n      />\n      <div\n        data-gr-progress-bar-fill\n        class=\"absolute inset-y-0 left-0\"\n        :class=\"fillClassName\"\n        :style=\"indeterminate ? undefined : { width: `${safe}%` }\"\n      />\n    </div>\n    <span\n      v-if=\"showValue && !indeterminate\"\n      data-gr-progress-bar-value\n      class=\"text-[var(--gr-muted-fg)] tabular-nums min-w-[4ch] text-right\"\n      :class=\"valueClassName\"\n    >{{ valueLabel }}</span>\n  </div>\n</template>\n\n<style>\n@keyframes gr-progress-indeterminate {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(250%);\n  }\n}\n\n/* Ширина бегущей полосы задаётся здесь, а не инлайном: инлайн-стиль перебил бы\n   раскладку под `reduce` ниже. */\n[data-gr-progress-bar-indeterminate] [data-gr-progress-bar-fill] {\n  width: 40%;\n  animation-name: gr-progress-indeterminate;\n  animation-duration: var(--gr-progress-indeterminate-duration, 1.4s);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Замерев в исходном кадре, полоса легла бы у левого края и читалась как\n   «прогресс 40%». Нейтральная заливка на всю ширину не притворяется ни нулём,\n   ни завершением: она говорит «работа идёт, значение неизвестно». */\n@media (prefers-reduced-motion: reduce) {\n  [data-gr-progress-bar-indeterminate] [data-gr-progress-bar-fill] {\n    width: 100%;\n    animation: none;\n    background-color: var(--gr-progress-indeterminate-bg, var(--gr-muted-fg));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ;EAYd,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,gBAAgB,CAAC;EACxF,MAAM,qBAAqB,mBAAmB,iBAAiB,oBAAoB,MAAM,YAAY,KAAK;EAC1G,MAAM,iBAAiB,eAAe,WAAW,aAAa,MAAM;EACpE,MAAM,kBAAkB,eAAe,QAAQ,aAAa,MAAM;EAClE,MAAM,iBAAiB,eAAe,eAAe,aAAa,MAAM;EAExE,SAAS,WAAW,OAAuB;GACzC,IAAI,OAAO,MAAM,KAAK,GACpB,OAAO;GACT,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;EACzC;EAEA,MAAM,OAAO,eAAe,WAAW,MAAM,KAAK,CAAC;EACnD,MAAM,aAAa,eAAgB,MAAM,WAAW,KAAA,IAAY,KAAA,IAAY,WAAW,MAAM,MAAM,CAAE;EAErG,MAAM,gBAAgB,eAAe,uBAAuB,MAAM,IAAI,CAAC;;;;;EAMvE,MAAM,YAAY,eAAgB,MAAM,cAAc,MAAM,YAAY,KAAK,KAAK,IAAI,KAAA,CAAU;EAChG,MAAM,aAAa,eAAe,UAAU,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,EAAE,EAAE;;uBAI/E,mBAqCM,OAAA;IApCJ,wBAAA;IACA,OAAK,eAAA,CAAC,4BACE,gBAAA,KAAe,CAAA;OAEvB,mBAyBM,OAAA;IAxBJ,8BAAA;IACC,sCAAoC,QAAA,gBAAa,KAAQ,KAAA;IAC1D,MAAK;IACJ,cAAY,QAAA;IACZ,iBAAe,QAAA,gBAAgB,KAAA,IAAY,KAAA;IAC3C,kBAAgB,QAAA,gBAAgB,KAAA,IAAY,UAAA;IAC7C,iBAAc;IACd,iBAAc;IACd,OAAK,eAAA,CAAC,gGAA8F,CAC3F,eAAA,OAAgB,MAAA,kBAAA,IAAkB,KAAA,+BAAA,CAAA,CAAA;OAGnC,WAAA,UAAe,KAAA,KAAS,CAAK,QAAA,iBAAA,UAAA,GADrC,mBAME,OAAA;;IAJA,+BAAA;IACA,OAAK,eAAA,CAAC,6BACE,MAAA,WAAA,CAAW,CAAA;IAClB,OAAK,eAAA,EAAA,OAAA,GAAc,WAAA,MAAU,GAAA,CAAA;gDAEhC,mBAKE,OAAA;IAJA,6BAAA;IACA,OAAK,eAAA,CAAC,6BACE,cAAA,KAAa,CAAA;IACpB,OAAK,eAAE,QAAA,gBAAgB,KAAA,IAAS,EAAA,OAAA,GAAe,KAAA,MAAI,GAAA,CAAA;kCAIhD,QAAA,aAAS,CAAK,QAAA,iBAAA,UAAA,GADtB,mBAKwB,QAAA;;IAHtB,8BAAA;IACA,OAAK,eAAA,CAAC,iEACE,eAAA,KAAc,CAAA;sBACpB,WAAA,KAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrProgressBar/index.js

@@ -1,3 +1,3 @@
-import { t as GrProgressBar_default } from "./chunks/GrProgressBar-xwbNM9QB.js";
+import { t as GrProgressBar_default } from "./chunks/GrProgressBar-hszUOC8f.js";
 import { n as grProgressBarSafelist, t as grProgressBarConfig } from "../../chunks/config-CQzGyi1C.js";
 export { GrProgressBar_default as GrProgressBar, GrProgressBar_default as default, grProgressBarConfig, grProgressBarSafelist };

package/dist/components/GrProgressCircle/chunks/GrProgressCircle-BeUx1g1f.js

@@ -0,0 +1,202 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
+import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
+import { a as grProgressCircleArcColor, c as svgClass, d as valueTextSizeBySize, i as diameterBySize, l as thicknessBySize, o as rootClass, r as centerClass, s as statusIconSizeBySize, u as valueClass } from "../../../chunks/config-MRvhUl-O.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots } from "vue";
+import '../styles.css';/** Доля окружности под дугой: у «дашборда» снизу вырез в четверть. */
+var ARC_FRACTION = {
+	circle: 1,
+	dashboard: .75
+};
+/**
+* Угол начала дуги. `<circle>` в SVG стартует с трёх часов и идёт по часовой:
+* кольцу нужен старт с двенадцати, «дашборду» — так, чтобы вырез сел строго
+* вниз и симметрично.
+*/
+var ROTATION = {
+	circle: -90,
+	dashboard: 135
+};
+function clampProgress(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(100, Math.max(0, value));
+}
+/**
+* Дуга задаётся одним штрихом нужной длины и заведомо большим пробелом за ним,
+* а не парой `dasharray` + `dashoffset`: смещение пришлось бы пересчитывать под
+* каждую форму, и ошибка в нём видна только глазом на конкретной ступени.
+*/
+function arcGeometry(shape, thickness, value) {
+	const radius = 100 / 2 - Math.max(1, Math.min(100 / 2, thickness)) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const arcLength = circumference * ARC_FRACTION[shape];
+	const progress = clampProgress(value) / 100;
+	return {
+		radius,
+		circumference,
+		arcLength,
+		trackDashArray: `${arcLength} ${circumference}`,
+		valueDashArray: `${arcLength * progress} ${circumference}`,
+		rotation: ROTATION[shape]
+	};
+}
+//#endregion
+//#region src/components/GrProgressCircle/GrProgressCircle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-tone", "data-shape"];
+var _hoisted_2 = [
+	"data-gr-progress-circle-indeterminate",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext"
+];
+var _hoisted_3 = ["viewBox"];
+var _hoisted_4 = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width",
+	"stroke-dasharray"
+];
+var _hoisted_5 = [
+	"cx",
+	"cy",
+	"r",
+	"stroke",
+	"stroke-width",
+	"stroke-dasharray"
+];
+//#endregion
+//#region src/components/GrProgressCircle/GrProgressCircle.vue
+var GrProgressCircle_default = /* @__PURE__ */ defineComponent({
+	__name: "GrProgressCircle",
+	props: {
+		value: { default: 0 },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		shape: { default: void 0 },
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {
+			type: Function,
+			default: void 0
+		},
+		statusIcon: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		tone: { default: void 0 },
+		size: { default: void 0 },
+		thickness: { default: void 0 },
+		trackless: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrProgressCircle" });
+		const resolvedTone = useGrComponentProp("GrProgressCircle", "tone", () => props.tone, "primary");
+		const resolvedShape = useGrComponentProp("GrProgressCircle", "shape", () => props.shape, "circle");
+		const resolvedTrackless = useGrComponentProp("GrProgressCircle", "trackless", () => props.trackless, false);
+		const safe = computed(() => clampProgress(props.value));
+		const thickness = computed(() => props.thickness ?? thicknessBySize[resolvedSize.value]);
+		const arc = computed(() => arcGeometry(resolvedShape.value, thickness.value, safe.value));
+		const rootStyle = computed(() => ({
+			width: `var(--gr-progress-circle-size, ${diameterBySize[resolvedSize.value]})`,
+			height: `var(--gr-progress-circle-size, ${diameterBySize[resolvedSize.value]})`
+		}));
+		const arcStyle = computed(() => ({
+			transform: `rotate(${arc.value.rotation}deg)`,
+			transformOrigin: "50% 50%"
+		}));
+		const arcColor = computed(() => grProgressCircleArcColor(resolvedTone.value));
+		/**
+		* `aria-valuetext` нужен только со своим форматом: «45» при `aria-valuemax="100"`
+		* диктор и так читает как проценты.
+		*/
+		const valueText = computed(() => props.formatValue ? props.formatValue(safe.value) : void 0);
+		const valueLabel = computed(() => valueText.value ?? `${Math.round(safe.value)}%`);
+		const isComplete = computed(() => !props.indeterminate && safe.value >= 100);
+		const isFailed = computed(() => resolvedTone.value === "danger");
+		/**
+		* Приоритет центра: слот сильнее иконки итога, иконка итога — значения.
+		*
+		* Считается по содержимому слота, а не по факту его передачи: слот с `v-if`
+		* (кнопка отмены, живущая только на время загрузки) приходит комментарием, и
+		* центр остался бы пустым вместо значения.
+		*/
+		const hasSlotContent = computed(() => hasMeaningfulSlotContent(slots.default?.({ value: safe.value }) ?? []));
+		const showStatusIcon = computed(() => !hasSlotContent.value && props.statusIcon && (isComplete.value || isFailed.value));
+		const showValueLabel = computed(() => !hasSlotContent.value && props.showValue && !props.indeterminate && !showStatusIcon.value);
+		const hasCenter = computed(() => hasSlotContent.value || showStatusIcon.value || showValueLabel.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-progress-circle": "",
+				"data-tone": unref(resolvedTone),
+				"data-shape": unref(resolvedShape),
+				class: normalizeClass(unref(rootClass)),
+				style: normalizeStyle(rootStyle.value)
+			}, [createElementVNode("div", {
+				"data-gr-progress-circle-widget": "",
+				"data-gr-progress-circle-indeterminate": __props.indeterminate ? "" : void 0,
+				role: "progressbar",
+				class: "h-full w-full",
+				"aria-label": __props.ariaLabel,
+				"aria-valuenow": __props.indeterminate ? void 0 : safe.value,
+				"aria-valuetext": __props.indeterminate ? void 0 : valueText.value,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100"
+			}, [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(unref(svgClass)),
+				viewBox: `0 0 ${unref(100)} ${unref(100)}`,
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [!unref(resolvedTrackless) ? (openBlock(), createElementBlock("circle", {
+				key: 0,
+				"data-gr-progress-circle-track": "",
+				cx: unref(100) / 2,
+				cy: unref(100) / 2,
+				r: arc.value.radius,
+				fill: "none",
+				"stroke-width": thickness.value,
+				"stroke-dasharray": arc.value.trackDashArray,
+				style: normalizeStyle(arcStyle.value)
+			}, null, 12, _hoisted_4)) : createCommentVNode("", true), __props.indeterminate || safe.value > 0 ? (openBlock(), createElementBlock("circle", {
+				key: 1,
+				"data-gr-progress-circle-arc": "",
+				cx: unref(100) / 2,
+				cy: unref(100) / 2,
+				r: arc.value.radius,
+				fill: "none",
+				stroke: arcColor.value,
+				"stroke-width": thickness.value,
+				"stroke-dasharray": __props.indeterminate ? `${arc.value.circumference * .25} ${arc.value.circumference}` : arc.value.valueDashArray,
+				style: normalizeStyle(arcStyle.value)
+			}, null, 12, _hoisted_5)) : createCommentVNode("", true)], 10, _hoisted_3))], 8, _hoisted_2), hasCenter.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-gr-progress-circle-center": "",
+				class: normalizeClass(unref(centerClass)),
+				style: normalizeStyle({ fontSize: `var(--gr-progress-circle-value-size, ${unref(valueTextSizeBySize)[unref(resolvedSize)]})` })
+			}, [hasSlotContent.value ? renderSlot(_ctx.$slots, "default", { value: safe.value }, void 0, void 0, 0) : showStatusIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(isComplete.value ? unref(check_default) : unref(x_default)), {
+				key: 1,
+				"data-gr-progress-circle-status": "",
+				"aria-hidden": "true",
+				class: normalizeClass(unref(statusIconSizeBySize)[unref(resolvedSize)]),
+				style: normalizeStyle({ color: arcColor.value })
+			}, null, 8, ["class", "style"])) : showValueLabel.value ? (openBlock(), createElementBlock("span", {
+				key: 2,
+				"data-gr-progress-circle-value": "",
+				class: normalizeClass(unref(valueClass))
+			}, toDisplayString(valueLabel.value), 3)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true)], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrProgressCircle_default as t };