@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrBadge/chunks/GrBadge-u2ZdS7CN.js

@@ -0,0 +1,40 @@
+import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as grBadgeClass } from "../../../chunks/grBadgeStyles-C2wLlkjF.js";
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+import '../styles.css';//#region src/components/GrBadge/GrBadge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "gr-badge__label" };
+var _hoisted_2 = { class: "gr-badge__text" };
+//#endregion
+//#region src/components/GrBadge/GrBadge.vue
+var GrBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "GrBadge",
+	props: {
+		tone: { default: void 0 },
+		dark: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: void 0 },
+		radius: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const resolvedTone = useGrComponentProp("GrBadge", "tone", () => props.tone, "neutral");
+		const resolvedSize = useGrComponentProp("GrBadge", "size", () => props.size, "sm");
+		const resolvedRadius = useGrComponentProp("GrBadge", "radius", () => props.radius, "round");
+		const className = computed(() => {
+			return grBadgeClass({
+				tone: resolvedTone.value,
+				dark: props.dark,
+				size: resolvedSize.value,
+				radius: resolvedRadius.value
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["gr-badge inline-block border whitespace-nowrap leading-none", className.value]) }, [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
+		};
+	}
+}), [["__scopeId", "data-v-880b19ed"]]);
+//#endregion
+export { GrBadge_default as t };

package/dist/components/GrBadge/chunks/GrBadge-u2ZdS7CN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrBadge-u2ZdS7CN.js","names":[],"sources":["../../../../src/components/GrBadge/GrBadge.vue","../../../../src/components/GrBadge/GrBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport {\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n    tone?: GrBadgeTone\n    dark?: boolean\n    size?: GrBadgeSize\n    radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n    defineProps<GrBadgeProps>(),\n    {\n      // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n      // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n      tone: undefined,\n      dark: false,\n      size: undefined,\n      radius: undefined,\n    },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport {\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n    tone?: GrBadgeTone\n    dark?: boolean\n    size?: GrBadgeSize\n    radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n    defineProps<GrBadgeProps>(),\n    {\n      // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n      // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n      tone: undefined,\n      dark: false,\n      size: undefined,\n      radius: undefined,\n    },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ;EAad,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,SAAS;EACtF,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,IAAI;EACjF,MAAM,iBAAiB,mBAAmB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;EAE1F,MAAM,YAAY,eAAe;GAC/B,OAAO,aAAa;IAClB,MAAM,aAAa;IACnB,MAAM,MAAM;IACZ,MAAM,aAAa;IACnB,QAAQ,eAAe;GACzB,CAAC;EACH,CAAC;;uBAIC,mBASO,QAAA,EARH,OAAK,eAAA,CAAC,+DACE,UAAA,KAAS,CAAA,EAAA,GAAA,CAEnB,mBAIO,QAJP,YAIO,CAHL,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrBadge/index.js

@@ -1,3 +1,3 @@
-import { t as GrBadge_default } from "./chunks/GrBadge-B1tgqfGQ.js";
+import { t as GrBadge_default } from "./chunks/GrBadge-u2ZdS7CN.js";
 import { n as grBadgeSafelist, t as grBadgeConfig } from "../../chunks/config-qVg3Zz_A.js";
 export { GrBadge_default as GrBadge, GrBadge_default as default, grBadgeConfig, grBadgeSafelist };

package/dist/components/GrBadgeWrap/chunks/GrBadgeWrap-DDoFQscR.js

@@ -0,0 +1,97 @@
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { a as dotPlacementClass, c as placementClass, i as dotBaseClass, l as rootClass, o as formatBadgeValue, r as countBaseClass, s as isBadgeWrapPulse, u as toneClass } from "../../../chunks/config-B4w5gBD0.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, watch } from "vue";
+import '../styles.css';//#region src/components/GrBadgeWrap/GrBadgeWrap.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-gr-badge-wrap-label": "",
+	class: "sr-only"
+};
+var _hoisted_2 = ["data-gr-badge-wrap-pop"];
+var _hoisted_3 = {
+	"data-gr-badge-wrap-label": "",
+	class: "sr-only"
+};
+//#endregion
+//#region src/components/GrBadgeWrap/GrBadgeWrap.vue
+var GrBadgeWrap_default = /* @__PURE__ */ defineComponent({
+	__name: "GrBadgeWrap",
+	props: {
+		value: { default: void 0 },
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		max: { default: void 0 },
+		showZero: {
+			type: Boolean,
+			default: false
+		},
+		tone: { default: "danger" },
+		placement: { default: "top-right" },
+		ariaLabel: { default: void 0 },
+		animate: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const showCount = computed(() => {
+			if (props.dot || props.value === void 0) return false;
+			return props.value !== 0 || props.showZero;
+		});
+		/** Видимый текст: «120» при `max=99` превращается в «99+». */
+		const displayValue = computed(() => formatBadgeValue(props.value ?? "", props.max));
+		/**
+		* Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю
+		* ничего не говорит, «120 непрочитанных» — говорит.
+		*/
+		const countLabel = computed(() => props.ariaLabel ?? t("gr.badgeWrap.count", "{count} new", {
+			count: props.value,
+			n: props.value
+		}));
+		const pulsing = ref(false);
+		/**
+		* Пока анимация играет, новое изменение её не перезапускает: счётчик меняется
+		* пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.
+		* Серия за время анимации даёт ровно один «поп».
+		*
+		* Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,
+		* и число в скрипте было бы вторым источником правды. Под
+		* `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает
+		* анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).
+		*/
+		watch(computed(() => showCount.value ? props.value : void 0), (next, prev) => {
+			if (!props.animate || pulsing.value) return;
+			if (isBadgeWrapPulse(prev, next)) pulsing.value = true;
+		});
+		watch(showCount, (visible) => {
+			if (!visible) pulsing.value = false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(rootClass)) }, [renderSlot(_ctx.$slots, "default"), __props.dot ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
+				"data-gr-badge-wrap-dot": "",
+				class: normalizeClass([
+					unref(dotBaseClass),
+					unref(dotPlacementClass)[__props.placement],
+					unref(toneClass)[__props.tone]
+				]),
+				"aria-hidden": "true"
+			}, null, 2), __props.ariaLabel ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.ariaLabel), 1)) : createCommentVNode("", true)], 64)) : showCount.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", {
+				"data-gr-badge-wrap-count": "",
+				"data-gr-badge-wrap-pop": pulsing.value || void 0,
+				class: normalizeClass([
+					unref(countBaseClass),
+					unref(placementClass)[__props.placement],
+					unref(toneClass)[__props.tone]
+				]),
+				"aria-hidden": "true",
+				onAnimationend: _cache[0] || (_cache[0] = ($event) => pulsing.value = false)
+			}, toDisplayString(displayValue.value), 43, _hoisted_2), createElementVNode("span", _hoisted_3, toDisplayString(countLabel.value), 1)], 64)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { GrBadgeWrap_default as t };

package/dist/components/GrBadgeWrap/chunks/GrBadgeWrap-DDoFQscR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrBadgeWrap-DDoFQscR.js","names":[],"sources":["../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue","../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined) return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value) return\n  if (isBadgeWrapPulse(prev, next)) pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible) pulsing.value = false\n})\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined) return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value) return\n  if (isBadgeWrapPulse(prev, next)) pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible) pulsing.value = false\n})\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,QAAQ;EAWd,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,OAAO,MAAM,UAAU,KAAA,GAAW,OAAO;GACnD,OAAO,MAAM,UAAU,KAAK,MAAM;EACpC,CAAC;;EAGD,MAAM,eAAe,eAAe,iBAAiB,MAAM,SAAS,IAAI,MAAM,GAAG,CAAC;;;;;EAMlF,MAAM,aAAa,eAAe,MAAM,aACnC,EAAE,sBAAsB,eAAe;GAAE,OAAO,MAAM;GAAO,GAAG,MAAM;EAAM,CAAC,CAAC;EAEnF,MAAM,UAAU,IAAI,KAAK;;;;;;;;;;;EAezB,MAZqB,eAAe,UAAU,QAAQ,MAAM,QAAQ,KAAA,CAY9D,IAAe,MAAM,SAAS;GAClC,IAAI,CAAC,MAAM,WAAW,QAAQ,OAAO;GACrC,IAAI,iBAAiB,MAAM,IAAI,GAAG,QAAQ,QAAQ;EACpD,CAAC;EAID,MAAM,YAAY,YAAY;GAC5B,IAAI,CAAC,SAAS,QAAQ,QAAQ;EAChC,CAAC;;uBAIC,mBAwBO,QAAA,EAxBA,OAAK,eAAE,MAAA,SAAA,CAAS,EAAA,GAAA,CACrB,WAAQ,KAAA,QAAA,SAAA,GAEQ,QAAA,OAAA,UAAA,GAAhB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAIE,QAAA;IAHA,0BAAA;IACC,OAAK,eAAA;KAAG,MAAA,YAAA;KAAc,MAAA,iBAAA,CAAiB,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IACnE,eAAY;gBAIF,QAAA,aAAA,UAAA,GAAZ,mBAAsF,QAAtF,YAAsF,gBAAnB,QAAA,SAAS,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,EAAA,KAGzD,UAAA,SAAA,UAAA,GAArB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAM0B,QAAA;IALxB,4BAAA;IACC,0BAAwB,QAAA,SAAW,KAAA;IACnC,OAAK,eAAA;KAAG,MAAA,cAAA;KAAgB,MAAA,cAAA,CAAc,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IAClE,eAAY;IACX,gBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;sBACpB,aAAA,KAAY,GAAA,IAAA,UAAA,GAChB,mBAAsE,QAAtE,YAAsE,gBAApB,WAAA,KAAU,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrBadgeWrap/index.js

@@ -1,3 +1,3 @@
-import { n as grBadgeWrapSafelist, r as GR_BADGE_WRAP_PLACEMENTS, s as formatBadgeValue, t as grBadgeWrapConfig } from "../../chunks/config-06SQjBx0.js";
-import { t as GrBadgeWrap_default } from "./chunks/GrBadgeWrap-C-E9betg.js";
-export { GR_BADGE_WRAP_PLACEMENTS, GrBadgeWrap_default as GrBadgeWrap, GrBadgeWrap_default as default, formatBadgeValue, grBadgeWrapConfig, grBadgeWrapSafelist };
+import { n as grBadgeWrapSafelist, o as formatBadgeValue, t as grBadgeWrapConfig } from "../../chunks/config-B4w5gBD0.js";
+import { t as GrBadgeWrap_default } from "./chunks/GrBadgeWrap-DDoFQscR.js";
+export { GrBadgeWrap_default as GrBadgeWrap, GrBadgeWrap_default as default, formatBadgeValue, grBadgeWrapConfig, grBadgeWrapSafelist };

package/dist/components/GrBottomNav/chunks/GrBottomNav-JUu4ylYv.js

@@ -0,0 +1,117 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { a as grBottomNavListClass, c as itemLabelClass, i as grBottomNavItemClass, o as grBottomNavRootClass, r as grBottomNavIconClass, s as itemBadgeClass } from "../../../chunks/config-Dguto_6o.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, markRaw, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/GrBottomNav/GrBottomNav.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	"data-gr-bottom-nav-badge-label": "",
+	class: "sr-only"
+};
+//#endregion
+//#region src/components/GrBottomNav/GrBottomNav.vue
+var GrBottomNav_default = /* @__PURE__ */ defineComponent({
+	__name: "GrBottomNav",
+	props: {
+		modelValue: {},
+		items: {},
+		as: { default: void 0 },
+		hideAbove: { default: "sm" },
+		position: { default: "fixed" },
+		ariaLabel: { default: void 0 },
+		size: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const resolvedAriaLabel = computed(() => props.ariaLabel ?? t("gr.bottomNav.label", "Bottom navigation"));
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrBottomNav" });
+		const rootClass = computed(() => grBottomNavRootClass({
+			position: props.position,
+			hideAbove: props.hideAbove
+		}));
+		const linkComponent = computed(() => props.as && typeof props.as !== "string" ? markRaw(props.as) : props.as);
+		function itemTag(item) {
+			if (item.disabled) return "span";
+			if (item.to !== void 0 && linkComponent.value) return linkComponent.value;
+			return item.href ? "a" : "button";
+		}
+		/**
+		* Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без
+		* единицы измерения диктору ничего не сообщает.
+		*/
+		function badgeLabel(item) {
+			if (item.badge == null || item.badge === "") return void 0;
+			if (item.badgeLabel) return item.badgeLabel;
+			if (typeof item.badge === "number") return t("gr.bottomNav.badge", "{count} new", {
+				count: item.badge,
+				n: item.badge
+			});
+			return String(item.badge);
+		}
+		function select(item) {
+			if (item.disabled) return;
+			emit("update:modelValue", item.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: normalizeClass(rootClass.value),
+				"aria-label": resolvedAriaLabel.value
+			}, [createElementVNode("div", { class: normalizeClass(unref(grBottomNavListClass)(unref(resolvedSize))) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createBlock(resolveDynamicComponent(itemTag(item)), {
+					key: item.value,
+					"data-gr-bottom-nav-item": "",
+					type: itemTag(item) === "button" ? "button" : void 0,
+					href: itemTag(item) === "a" ? item.href : void 0,
+					to: item.to !== void 0 && linkComponent.value ? item.to : void 0,
+					"aria-current": item.value === __props.modelValue ? "page" : void 0,
+					"aria-disabled": item.disabled ? "true" : void 0,
+					"aria-label": item.ariaLabel,
+					class: normalizeClass(unref(grBottomNavItemClass)({
+						active: item.value === __props.modelValue,
+						disabled: item.disabled ?? false,
+						size: unref(resolvedSize)
+					})),
+					onClick: ($event) => select(item)
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+						item,
+						active: item.value === __props.modelValue,
+						disabled: item.disabled ?? false,
+						badgeLabel: badgeLabel(item)
+					}, () => [
+						item.icon && typeof item.icon !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+							key: 0,
+							class: normalizeClass(unref(grBottomNavIconClass)(unref(resolvedSize))),
+							"aria-hidden": "true"
+						}, null, 8, ["class"])) : item.icon ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: normalizeClass([item.icon, unref(grBottomNavIconClass)(unref(resolvedSize))]),
+							"aria-hidden": "true"
+						}, null, 2)) : createCommentVNode("", true),
+						createElementVNode("span", { class: normalizeClass(unref(itemLabelClass)) }, toDisplayString(item.label), 3),
+						item.badge != null && item.badge !== "" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("span", {
+							"data-gr-bottom-nav-badge": "",
+							class: normalizeClass(unref(itemBadgeClass)),
+							"aria-hidden": "true"
+						}, toDisplayString(item.badge), 3), createElementVNode("span", _hoisted_2, toDisplayString(badgeLabel(item)), 1)], 64)) : createCommentVNode("", true)
+					])]),
+					_: 2
+				}, 1032, [
+					"type",
+					"href",
+					"to",
+					"aria-current",
+					"aria-disabled",
+					"aria-label",
+					"class",
+					"onClick"
+				]);
+			}), 128))], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrBottomNav_default as t };

package/dist/components/GrBottomNav/chunks/GrBottomNav-JUu4ylYv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrBottomNav-JUu4ylYv.js","names":[],"sources":["../../../../src/components/GrBottomNav/GrBottomNav.vue","../../../../src/components/GrBottomNav/GrBottomNav.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled) return 'span'\n  if (item.to !== undefined && linkComponent.value) return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '') return undefined\n  if (item.badgeLabel) return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled) return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled) return 'span'\n  if (item.to !== undefined && linkComponent.value) return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '') return undefined\n  if (item.badgeLabel) return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled) return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAeb,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,sBAAsB,mBAAmB,CAAC;EAExG,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,cAAc,CAAC;EAEtF,MAAM,YAAY,eAAe,qBAAqB;GACpD,UAAU,MAAM;GAChB,WAAW,MAAM;EACnB,CAAC,CAAC;EAEF,MAAM,gBAAgB,eAAgB,MAAM,MAAM,OAAO,MAAM,OAAO,WAAW,QAAQ,MAAM,EAAE,IAAI,MAAM,EAAG;EAE9G,SAAS,QAAQ,MAA2C;GAC1D,IAAI,KAAK,UAAU,OAAO;GAC1B,IAAI,KAAK,OAAO,KAAA,KAAa,cAAc,OAAO,OAAO,cAAc;GACvE,OAAO,KAAK,OAAO,MAAM;EAC3B;;;;;EAMA,SAAS,WAAW,MAA2C;GAC7D,IAAI,KAAK,SAAS,QAAQ,KAAK,UAAU,IAAI,OAAO,KAAA;GACpD,IAAI,KAAK,YAAY,OAAO,KAAK;GACjC,IAAI,OAAO,KAAK,UAAU,UACxB,OAAO,EAAE,sBAAsB,eAAe;IAAE,OAAO,KAAK;IAAO,GAAG,KAAK;GAAM,CAAC;GAEpF,OAAO,OAAO,KAAK,KAAK;EAC1B;EAEA,SAAS,OAAO,MAA6B;GAC3C,IAAI,KAAK,UAAU;GACnB,KAAK,qBAAqB,KAAK,KAAK;EACtC;;uBAIE,mBAmCM,OAAA;IAnCA,OAAK,eAAE,UAAA,KAAS;IAAG,cAAY,kBAAA;OACnC,mBAiCM,OAAA,EAjCA,OAAK,eAAE,MAAA,oBAAA,CAAoB,CAAC,MAAA,YAAA,CAAY,CAAA,EAAA,GAAA,EAAA,UAAA,IAAA,GAC5C,mBA+BY,UAAA,MAAA,WA7BK,QAAA,QAAR,SAAI;wBAFb,YA+BY,wBA9BL,QAAQ,IAAI,CAAA,GAAA;KAEhB,KAAK,KAAK;KACX,2BAAA;KACC,MAAM,QAAQ,IAAI,MAAA,WAAA,WAA4B,KAAA;KAC9C,MAAM,QAAQ,IAAI,MAAA,MAAY,KAAK,OAAO,KAAA;KAC1C,IAAI,KAAK,OAAO,KAAA,KAAa,cAAA,QAAgB,KAAK,KAAK,KAAA;KACvD,gBAAc,KAAK,UAAU,QAAA,aAAU,SAAY,KAAA;KACnD,iBAAe,KAAK,WAAQ,SAAY,KAAA;KACxC,cAAY,KAAK;KACjB,OAAK,eAAE,MAAA,oBAAA,CAAoB,CAAA;MAAA,QAAW,KAAK,UAAU,QAAA;MAAU,UAAY,KAAK,YAAQ;MAAA,MAAiB,MAAA,YAAA;KAAY,CAAA,CAAA;KACrH,UAAK,WAAE,OAAO,IAAI;;4BAkBZ,CAhBP,WAgBO,KAAA,QAAA,QAAA;MAdE;MACN,QAAQ,KAAK,UAAU,QAAA;MACvB,UAAU,KAAK,YAAQ;MACvB,YAAa,WAAW,IAAI;cAWxB;MAT4B,KAAK,QAAI,OAAW,KAAK,SAAI,YAAA,UAAA,GAA9D,YAA8I,wBAA9H,KAAK,IAAI,GAAA;;OAAqD,OAAK,eAAE,MAAA,oBAAA,CAAoB,CAAC,MAAA,YAAA,CAAY,CAAA;OAAG,eAAY;gCACpH,KAAK,QAAA,UAAA,GAAtB,mBAA0G,QAAA;;OAA7E,OAAK,eAAA,CAAG,KAAK,MAAM,MAAA,oBAAA,CAAoB,CAAC,MAAA,YAAA,CAAY,CAAA,CAAA;OAAI,eAAY;;MAEjG,mBAAqD,QAAA,EAA9C,OAAK,eAAE,MAAA,cAAA,CAAc,EAAA,GAAA,gBAAK,KAAK,KAAK,GAAA,CAAA;MAE3B,KAAK,SAAK,QAAY,KAAK,UAAK,MAAA,UAAA,GAAhD,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAFT,mBAAiG,QAAA;OAA3F,4BAAA;OAA0B,OAAK,eAAE,MAAA,cAAA,CAAc;OAAE,eAAY;yBAAU,KAAK,KAAK,GAAA,CAAA,GACvF,mBAAkF,QAAlF,YAAkF,gBAA1B,WAAW,IAAI,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/GrBottomNav/index.js

@@ -1,3 +1,3 @@
-import { i as GR_BOTTOM_NAV_POSITIONS, n as grBottomNavSafelist, r as GR_BOTTOM_NAV_HIDE_ABOVE, t as grBottomNavConfig } from "../../chunks/config-D3_g2KIn.js";
-import { t as GrBottomNav_default } from "./chunks/GrBottomNav-9GH7Dd9E.js";
-export { GR_BOTTOM_NAV_HIDE_ABOVE, GR_BOTTOM_NAV_POSITIONS, GrBottomNav_default as GrBottomNav, GrBottomNav_default as default, grBottomNavConfig, grBottomNavSafelist };
+import { n as grBottomNavSafelist, t as grBottomNavConfig } from "../../chunks/config-Dguto_6o.js";
+import { t as GrBottomNav_default } from "./chunks/GrBottomNav-JUu4ylYv.js";
+export { GrBottomNav_default as GrBottomNav, GrBottomNav_default as default, grBottomNavConfig, grBottomNavSafelist };

package/dist/components/GrBreadcrumbs/chunks/GrBreadcrumbs-CQ44iU2o.js

@@ -0,0 +1,267 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrLink_default } from "../../GrLink/chunks/GrLink-BQb7U4so.js";
+import { n as iconTag, t as iconClass } from "../../../chunks/icon-Dag2tIMs.js";
+import { a as breadcrumbsItemIconClass, c as breadcrumbsListNowrapClass, d as breadcrumbsSeparatorClass, f as breadcrumbsSizeClassBySize, i as breadcrumbsEllipsisClass, l as breadcrumbsListWrapClass, m as resolveBreadcrumbsLayout, o as breadcrumbsLabelClass, p as resolveBreadcrumbsFit, r as breadcrumbsCurrentClass, s as breadcrumbsListClass, u as breadcrumbsRootClass } from "../../../chunks/config-DKdlqXiY.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
+//#region src/components/GrBreadcrumbs/GrBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 1,
+	"data-gr-breadcrumbs-ellipsis-item": "",
+	class: "min-w-0"
+};
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = {
+	key: 2,
+	"data-gr-breadcrumbs-item-wrap": "",
+	class: "min-w-0"
+};
+var _hoisted_5 = [
+	"aria-label",
+	"aria-current",
+	"aria-disabled"
+];
+//#endregion
+//#region src/components/GrBreadcrumbs/GrBreadcrumbs.vue
+var GrBreadcrumbs_default = /* @__PURE__ */ defineComponent({
+	__name: "GrBreadcrumbs",
+	props: {
+		items: {},
+		as: { default: void 0 },
+		separator: { default: void 0 },
+		size: { default: void 0 },
+		maxItems: { default: void 0 },
+		itemsBeforeCollapse: { default: 1 },
+		itemsAfterCollapse: { default: 1 },
+		ariaLabel: { default: void 0 },
+		linkCurrent: {
+			type: Boolean,
+			default: false
+		},
+		expandLabel: { default: void 0 },
+		autoCollapse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrBreadcrumbs" });
+		const resolvedSeparator = useGrComponentProp("GrBreadcrumbs", "separator", () => props.separator, "/");
+		const resolvedAriaLabel = computed(() => props.ariaLabel ?? t("gr.breadcrumbs.label", "Breadcrumb"));
+		const resolvedExpandLabel = computed(() => props.expandLabel ?? t("gr.breadcrumbs.expand", "Show hidden path"));
+		const rootEl = ref(null);
+		const listEl = ref(null);
+		const expanded = ref(false);
+		/**
+		* Схлопывание по ширине: сколько пунктов хвоста влезает.
+		*
+		* `undefined` — ещё не мерили, показываем путь целиком. Первый кадр в режиме
+		* `autoCollapse` намеренно полный: ширины снимаются с него, а посчитать их до
+		* рендера неоткуда.
+		*/
+		const fitAfter = ref(void 0);
+		/** Ширины не зависят от контейнера, поэтому живут до смены самого пути. */
+		let measured = null;
+		/**
+		* Ширина кнопки «…» узнаётся только когда она отрисована, то есть уже после
+		* первого схлопывания. До этого считаем её нулевой: поправка может лишь
+		* ужать хвост ещё на пункт, а не вернуть спрятанное, поэтому качелей не будет.
+		*/
+		let ellipsisWidth = 0;
+		/** Ширина, на которой считали в прошлый раз: по её смене раскрытый путь сворачивается. */
+		let lastAvailable = 0;
+		watch(() => props.items, () => {
+			expanded.value = false;
+			measured = null;
+			ellipsisWidth = 0;
+			fitAfter.value = void 0;
+			nextTick(measure);
+		});
+		const lastIndex = computed(() => props.items.length - 1);
+		/**
+		* Схлопывание по ширине выражается через тот же `maxItems`: раскладку считает
+		* одна функция, а режимы отличаются только тем, откуда взялось число.
+		*/
+		const autoMaxItems = computed(() => {
+			if (!props.autoCollapse || fitAfter.value === void 0) return void 0;
+			if (fitAfter.value >= props.items.length) return void 0;
+			return props.items.length - 1;
+		});
+		const effectiveMaxItems = computed(() => {
+			const limits = [props.maxItems, autoMaxItems.value].filter((value) => typeof value === "number" && value > 0);
+			return limits.length > 0 ? Math.min(...limits) : void 0;
+		});
+		const effectiveAfter = computed(() => props.autoCollapse && fitAfter.value !== void 0 ? fitAfter.value : props.itemsAfterCollapse);
+		const entries = computed(() => resolveBreadcrumbsLayout({
+			items: props.items,
+			maxItems: effectiveMaxItems.value,
+			itemsBeforeCollapse: props.itemsBeforeCollapse,
+			itemsAfterCollapse: effectiveAfter.value,
+			expanded: expanded.value
+		}));
+		function isCurrent(index) {
+			return index === lastIndex.value;
+		}
+		/** Ссылкой пункт становится, только если ведёт куда-то и не выключен. */
+		function isLink(item, index) {
+			if (item.disabled) return false;
+			if (isCurrent(index) && !props.linkCurrent) return false;
+			return item.href !== void 0 || item.to !== void 0 || props.as !== void 0;
+		}
+		function widthOf(el) {
+			return el ? el.scrollWidth : 0;
+		}
+		/**
+		* Снять ширины с полного пути и пересчитать, сколько пунктов хвоста влезает.
+		*
+		* Замер делается один раз на путь: подписи от ширины контейнера не зависят,
+		* поэтому `resize` пересчитывает только арифметику.
+		*/
+		function measure() {
+			if (!props.autoCollapse) return;
+			const list = listEl.value;
+			if (!list) return;
+			const ellipsis = list.querySelector("[data-gr-breadcrumbs-ellipsis-item]");
+			if (ellipsis) ellipsisWidth = widthOf(ellipsis);
+			if (!measured) {
+				if (fitAfter.value !== void 0) return;
+				const wraps = [...list.querySelectorAll("[data-gr-breadcrumbs-item-wrap]")];
+				if (wraps.length !== props.items.length) return;
+				measured = {
+					items: wraps.map(widthOf),
+					separator: widthOf(list.querySelector("[data-gr-breadcrumbs-separator]"))
+				};
+			}
+			const available = list.clientWidth;
+			if (available <= 0) return;
+			lastAvailable = available;
+			fitAfter.value = resolveBreadcrumbsFit({
+				itemWidths: measured.items,
+				separatorWidth: measured.separator,
+				ellipsisWidth,
+				available,
+				itemsBeforeCollapse: props.itemsBeforeCollapse,
+				gapWidth: listGap(list)
+			});
+		}
+		/** Зазор списка в пикселях: он задан классом, а не пропом, поэтому спрашиваем стиль. */
+		function listGap(list) {
+			if (typeof getComputedStyle !== "function") return 0;
+			return Number.parseFloat(getComputedStyle(list).columnGap) || 0;
+		}
+		/**
+		* Ширина кнопки «…» известна только после того, как она отрисована, то есть
+		* после первого схлопывания. Поэтому решение пересчитывается ещё раз: поправка
+		* либо ничего не меняет, либо ужимает хвост на пункт. Цикла нет — второй проход
+		* оставляет `fitAfter` прежним, и наблюдатель больше не срабатывает.
+		*/
+		watch(fitAfter, () => void nextTick(measure));
+		let observer = null;
+		watch(() => props.autoCollapse, (enabled) => {
+			if (enabled) {
+				nextTick(measure);
+				return;
+			}
+			measured = null;
+			ellipsisWidth = 0;
+			fitAfter.value = void 0;
+		});
+		onMounted(() => {
+			nextTick(measure);
+			if (typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver(() => {
+				if (expanded.value && listEl.value && listEl.value.clientWidth !== lastAvailable) expanded.value = false;
+				measure();
+			});
+			if (listEl.value) observer.observe(listEl.value);
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		async function expand() {
+			expanded.value = true;
+			await nextTick();
+			const before = Math.max(0, Math.min(props.itemsBeforeCollapse, props.items.length));
+			(rootEl.value?.querySelectorAll("[data-gr-breadcrumbs-item]"))?.[before]?.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-breadcrumbs": "",
+				class: normalizeClass([unref(breadcrumbsRootClass), unref(breadcrumbsSizeClassBySize)[unref(resolvedSize)]]),
+				"aria-label": resolvedAriaLabel.value
+			}, [createElementVNode("ol", {
+				ref_key: "listEl",
+				ref: listEl,
+				"data-gr-breadcrumbs-list": "",
+				class: normalizeClass([unref(breadcrumbsListClass), __props.autoCollapse && !expanded.value ? unref(breadcrumbsListNowrapClass) : unref(breadcrumbsListWrapClass)])
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry, position) => {
+				return openBlock(), createElementBlock(Fragment, { key: entry.kind === "item" ? `item-${entry.index}` : "ellipsis" }, [position > 0 ? (openBlock(), createElementBlock("li", {
+					key: 0,
+					"data-gr-breadcrumbs-separator": "",
+					class: normalizeClass(unref(breadcrumbsSeparatorClass)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "separator", {}, () => [createTextVNode(toDisplayString(unref(resolvedSeparator)), 1)])], 2)) : createCommentVNode("", true), entry.kind === "ellipsis" ? (openBlock(), createElementBlock("li", _hoisted_2, [renderSlot(_ctx.$slots, "ellipsis", {
+					hiddenCount: entry.hiddenCount,
+					expand
+				}, () => [createElementVNode("button", {
+					type: "button",
+					"data-gr-breadcrumbs-ellipsis": "",
+					"data-testid": "gr-breadcrumbs-ellipsis",
+					class: normalizeClass(unref(breadcrumbsEllipsisClass)),
+					"aria-label": resolvedExpandLabel.value,
+					onClick: expand
+				}, " … ", 10, _hoisted_3)])])) : (openBlock(), createElementBlock("li", _hoisted_4, [isLink(entry.item, entry.index) ? (openBlock(), createBlock(GrLink_default, {
+					key: `link-${entry.index}`,
+					"data-gr-breadcrumbs-item": "",
+					as: __props.as,
+					href: entry.item.href,
+					to: entry.item.to,
+					size: unref(resolvedSize),
+					variant: isCurrent(entry.index) ? "default" : "muted",
+					"aria-label": entry.item.ariaLabel,
+					"aria-current": isCurrent(entry.index) ? "page" : void 0
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+						item: entry.item,
+						index: entry.index,
+						isCurrent: isCurrent(entry.index)
+					}, () => [entry.item.icon ? (openBlock(), createBlock(resolveDynamicComponent(unref(iconTag)(entry.item.icon)), {
+						key: 0,
+						class: normalizeClass([unref(breadcrumbsItemIconClass), unref(iconClass)(entry.item.icon)]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(unref(breadcrumbsLabelClass)) }, toDisplayString(entry.item.label), 3)])]),
+					_: 2
+				}, 1032, [
+					"as",
+					"href",
+					"to",
+					"size",
+					"variant",
+					"aria-label",
+					"aria-current"
+				])) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					"data-gr-breadcrumbs-item": "",
+					class: normalizeClass(unref(breadcrumbsCurrentClass)),
+					"aria-label": entry.item.ariaLabel,
+					"aria-current": isCurrent(entry.index) ? "page" : void 0,
+					"aria-disabled": entry.item.disabled ? "true" : void 0,
+					tabindex: "-1"
+				}, [renderSlot(_ctx.$slots, "item", {
+					item: entry.item,
+					index: entry.index,
+					isCurrent: isCurrent(entry.index)
+				}, () => [entry.item.icon ? (openBlock(), createBlock(resolveDynamicComponent(unref(iconTag)(entry.item.icon)), {
+					key: 0,
+					class: normalizeClass([unref(breadcrumbsItemIconClass), unref(iconClass)(entry.item.icon)]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(unref(breadcrumbsLabelClass)) }, toDisplayString(entry.item.label), 3)])], 10, _hoisted_5))]))], 64);
+			}), 128))], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrBreadcrumbs_default as t };