@feugene/granularity 0.19.0 → 0.21.0

package/dist/components/GrSegmented/chunks/GrSegmented-D1mjxF_O.js

@@ -0,0 +1,388 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { a as grSegmentedItemIconClass, c as grSegmentedRootClass, i as grSegmentedItemClass, l as grSegmentedRootStyle, o as grSegmentedItemLabelClass, r as grSegmentedIndicatorClass, s as grSegmentedItemSpinnerClass } from "../../../chunks/config-BEVBsvni2.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, watch } from "vue";
+//#region src/components/GrSegmented/GrSegmented.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"data-variant",
+	"aria-orientation",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-readonly",
+	"aria-disabled"
+];
+var _hoisted_2 = ["name", "value"];
+var _hoisted_3 = [
+	"data-value",
+	"aria-label",
+	"aria-checked",
+	"aria-disabled",
+	"aria-busy",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+];
+//#endregion
+//#region src/components/GrSegmented/GrSegmented.vue
+var GrSegmented_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSegmented",
+	props: {
+		modelValue: {},
+		options: {},
+		variant: { default: void 0 },
+		size: { default: void 0 },
+		orientation: { default: "horizontal" },
+		indicatorDuration: { default: 300 },
+		block: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrSegmented" });
+		const resolvedVariant = useGrComponentProp("GrSegmented", "variant", () => props.variant, "pills");
+		const emit = __emit;
+		const fallbackName = `gr-segmented-${useId()}`;
+		const field = useGrFormFieldContext();
+		const fieldId = computed(() => field?.id.value);
+		const describedBy = computed(() => field?.describedById.value);
+		const labelledBy = computed(() => props.ariaLabel ? void 0 : field?.labelId.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const rootRef = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootRef, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		__expose({
+			focus,
+			blur
+		});
+		const itemRefs = ref(/* @__PURE__ */ new Map());
+		const indicatorGeometry = ref(null);
+		const indicatorReady = ref(false);
+		let resizeObserver = null;
+		let observedRoot = null;
+		let observedItem = null;
+		let scheduled = false;
+		const selectedIndex = computed(() => props.options.findIndex((option) => option.value === props.modelValue));
+		const selectedOption = computed(() => props.options[selectedIndex.value] ?? null);
+		const indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)));
+		const isVertical = computed(() => props.orientation === "vertical");
+		const rootClassName = computed(() => grSegmentedRootClass({
+			variant: resolvedVariant.value,
+			orientation: props.orientation,
+			block: props.block,
+			disabled: isDisabled.value
+		}));
+		/**
+		* Раскладка задаётся треками, а не классами: число сегментов известно только в
+		* рантайме. По вертикали колонка одна — сегменты одинаковой ширины по
+		* построению, и `block` решает лишь, занимать ли ширину контейнера.
+		*/
+		const rootStyle = computed(() => {
+			const empty = props.options.length === 0;
+			const track = () => props.block && !isVertical.value ? "minmax(0,1fr)" : "minmax(0,max-content)";
+			return {
+				...grSegmentedRootStyle({
+					variant: resolvedVariant.value,
+					size: resolvedSize.value,
+					orientation: props.orientation
+				}),
+				gridTemplateColumns: isVertical.value ? "minmax(0,1fr)" : empty ? "none" : props.options.map(track).join(" "),
+				...isVertical.value ? { gridTemplateRows: empty ? "none" : props.options.map(track).join(" ") } : {}
+			};
+		});
+		const indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value));
+		const resolvedName = computed(() => props.name ?? fallbackName);
+		const hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null);
+		const indicatorStyle = computed(() => {
+			const geometry = indicatorGeometry.value;
+			if (!geometry) return {
+				opacity: "0",
+				width: "0px",
+				height: "0px",
+				transitionDuration: `${indicatorDuration.value}ms`,
+				transform: "translate3d(0px, 0px, 0px)"
+			};
+			return {
+				opacity: indicatorReady.value ? "1" : "0",
+				width: `${geometry.width}px`,
+				height: `${geometry.height}px`,
+				transitionDuration: `${indicatorDuration.value}ms`,
+				transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`
+			};
+		});
+		function getOptionKey(value) {
+			return String(value);
+		}
+		function resolveOptionDisabled(option) {
+			return isDisabled.value || Boolean(option.disabled);
+		}
+		/**
+		* Занятый сегмент не «недоступен», а работает: нативный `disabled` и
+		* `aria-disabled` ему не ставим — состояние несёт `aria-busy`. Но выбор он не
+		* принимает, поэтому блокировка считается отдельно от `disabled`.
+		*/
+		function isOptionBusy(option) {
+			return Boolean(option.loading);
+		}
+		function isOptionBlocked(option) {
+			return resolveOptionDisabled(option) || isOptionBusy(option);
+		}
+		function isOptionSelected(option) {
+			return option.value === props.modelValue;
+		}
+		function isIconOnlyOption(option) {
+			return Boolean(option.icon) && !option.label;
+		}
+		function setItemRef(value, element) {
+			const key = getOptionKey(value);
+			if (!(element instanceof HTMLElement)) {
+				itemRefs.value.delete(key);
+				return;
+			}
+			itemRefs.value.set(key, element);
+		}
+		function isSameGeometry(left, right) {
+			if (left === right) return true;
+			if (!left || !right) return false;
+			return left.width === right.width && left.height === right.height && left.x === right.x && left.y === right.y;
+		}
+		function measureIndicator() {
+			const root = rootRef.value;
+			const option = selectedOption.value;
+			if (!root || !option) {
+				if (indicatorGeometry.value !== null) indicatorGeometry.value = null;
+				if (indicatorReady.value) indicatorReady.value = false;
+				return;
+			}
+			const selectedItem = itemRefs.value.get(getOptionKey(option.value));
+			if (!selectedItem) return;
+			const rootRect = root.getBoundingClientRect();
+			const itemRect = selectedItem.getBoundingClientRect();
+			const nextGeometry = {
+				width: Math.max(Math.round(itemRect.width), 0),
+				height: Math.max(Math.round(itemRect.height), 0),
+				x: Math.round(itemRect.left - rootRect.left),
+				y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0)
+			};
+			if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) indicatorGeometry.value = nextGeometry;
+			const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0;
+			if (indicatorReady.value !== nextReady) indicatorReady.value = nextReady;
+		}
+		function refreshObserver() {
+			if (typeof ResizeObserver === "undefined") return;
+			const root = rootRef.value;
+			const option = selectedOption.value;
+			const selectedItem = option ? itemRefs.value.get(getOptionKey(option.value)) ?? null : null;
+			if (!resizeObserver) resizeObserver = new ResizeObserver(() => scheduleMeasure());
+			if (!root) {
+				resizeObserver.disconnect();
+				observedRoot = null;
+				observedItem = null;
+				return;
+			}
+			if (observedRoot === root && observedItem === selectedItem) return;
+			resizeObserver.disconnect();
+			resizeObserver.observe(root);
+			if (selectedItem) resizeObserver.observe(selectedItem);
+			observedRoot = root;
+			observedItem = selectedItem;
+		}
+		function scheduleMeasure() {
+			if (scheduled) return;
+			scheduled = true;
+			nextTick(() => {
+				scheduled = false;
+				measureIndicator();
+				refreshObserver();
+			});
+		}
+		function emitValue(option) {
+			if (isReadonly.value || isOptionBlocked(option) || option.value === props.modelValue) return;
+			emit("update:modelValue", option.value);
+			emit("change", option.value, option);
+		}
+		function optionOf(value) {
+			return props.options.find((option) => option.value === value);
+		}
+		/**
+		* Кольцо roving-фокуса. Обе оси работают всегда: `orientation` у сегмента
+		* описывает раскладку и уходит в `aria-orientation`, а не сужает клавиатуру —
+		* вертикальный набор листается и стрелками влево/вправо.
+		*/
+		const roving = useRovingFocus({
+			items: () => props.options.map((option) => option.value),
+			elementFor: (value) => itemRefs.value.get(getOptionKey(value)),
+			isDisabled: (value) => {
+				const option = optionOf(value);
+				return option ? isOptionBlocked(option) : true;
+			},
+			orientation: () => "both",
+			skipDisabled: () => true,
+			/**
+			* Выбранный сегмент держит остановку `Tab` — кроме выключенного: на нём
+			* стоит нативный `disabled`, и фокус на него не встанет вовсе. Загружающийся
+			* остановку сохраняет: он не «недоступен», а занят.
+			*/
+			initialKey: () => {
+				const selected = selectedOption.value;
+				return selected && !resolveOptionDisabled(selected) ? selected.value : void 0;
+			},
+			onMove: (value) => {
+				const option = optionOf(value);
+				if (option) emitValue(option);
+			}
+		});
+		function onItemClick(option) {
+			emitValue(option);
+			if (!isOptionBlocked(option)) roving.setActive(option.value);
+		}
+		/** Императивный фокус ведёт на текущую остановку `Tab`, а не на первый сегмент. */
+		function rovingElement() {
+			const key = roving.rovingKey.value;
+			return key === void 0 ? void 0 : itemRefs.value.get(getOptionKey(key));
+		}
+		function focus() {
+			rovingElement()?.focus();
+		}
+		function blur() {
+			rovingElement()?.blur();
+		}
+		function onKeydown(event, index) {
+			if (isDisabled.value || isReadonly.value) return;
+			if (roving.handleNavigationKeys(event)) return;
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				const option = props.options[index];
+				if (option) emitValue(option);
+			}
+		}
+		watch(() => props.modelValue, () => scheduleMeasure());
+		watch(() => props.options, () => scheduleMeasure(), { deep: true });
+		watch(resolvedVariant, () => scheduleMeasure());
+		watch(resolvedSize, () => scheduleMeasure());
+		watch(() => props.block, () => scheduleMeasure());
+		watch(() => props.orientation, () => scheduleMeasure());
+		onMounted(() => scheduleMeasure());
+		onBeforeUnmount(() => {
+			resizeObserver?.disconnect();
+			observedRoot = null;
+			observedItem = null;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: fieldId.value,
+				ref_key: "rootRef",
+				ref: rootRef,
+				"data-gr-segmented": "",
+				"data-variant": unref(resolvedVariant),
+				role: "radiogroup",
+				"aria-orientation": __props.orientation,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": labelledBy.value,
+				"aria-describedby": describedBy.value,
+				"aria-invalid": unref(isInvalid) ? "true" : void 0,
+				"aria-required": unref(isRequired) ? "true" : void 0,
+				"aria-readonly": unref(isReadonly) ? "true" : void 0,
+				"aria-disabled": unref(isDisabled) ? "true" : void 0,
+				class: normalizeClass(rootClassName.value),
+				style: normalizeStyle(rootStyle.value),
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				selectedOption.value && !resolveOptionDisabled(selectedOption.value) ? (openBlock(), createElementBlock("input", {
+					key: 0,
+					type: "hidden",
+					name: resolvedName.value,
+					value: String(selectedOption.value.value)
+				}, null, 8, _hoisted_2)) : createCommentVNode("", true),
+				hasIndicator.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					"data-gr-segmented-indicator": "",
+					"aria-hidden": "true",
+					class: normalizeClass(indicatorClassName.value),
+					style: normalizeStyle(indicatorStyle.value)
+				}, null, 6)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: option.value,
+						ref_for: true,
+						ref: (element) => setItemRef(option.value, element),
+						"data-gr-segmented-item": "",
+						"data-value": String(option.value),
+						type: "button",
+						role: "radio",
+						"aria-label": option.ariaLabel,
+						"aria-checked": isOptionSelected(option) ? "true" : "false",
+						"aria-disabled": resolveOptionDisabled(option) ? "true" : void 0,
+						"aria-busy": isOptionBusy(option) ? "true" : void 0,
+						disabled: resolveOptionDisabled(option),
+						tabindex: unref(roving).tabindexFor(option.value),
+						class: normalizeClass(unref(grSegmentedItemClass)({
+							variant: unref(resolvedVariant),
+							selected: isOptionSelected(option),
+							disabled: resolveOptionDisabled(option),
+							iconOnly: isIconOnlyOption(option)
+						})),
+						onClick: ($event) => onItemClick(option),
+						onKeydown: ($event) => onKeydown($event, index)
+					}, [renderSlot(_ctx.$slots, "default", {
+						option,
+						selected: isOptionSelected(option),
+						disabled: resolveOptionDisabled(option),
+						loading: isOptionBusy(option)
+					}, () => [isOptionBusy(option) ? (openBlock(), createBlock(unref(loader_circle_default), {
+						key: 0,
+						"data-gr-segmented-spinner": "",
+						"aria-hidden": "true",
+						class: normalizeClass(unref(grSegmentedItemSpinnerClass))
+					}, null, 8, ["class"])) : option.icon ? (openBlock(), createBlock(resolveDynamicComponent(option.icon), {
+						key: 1,
+						"aria-hidden": "true",
+						class: normalizeClass(unref(grSegmentedItemIconClass))
+					}, null, 8, ["class"])) : createCommentVNode("", true), option.label ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(grSegmentedItemLabelClass))
+					}, toDisplayString(option.label), 3)) : createCommentVNode("", true)])], 42, _hoisted_3);
+				}), 128))
+			], 46, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrSegmented_default as t };

package/dist/components/GrSegmented/chunks/GrSegmented-D1mjxF_O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSegmented-D1mjxF_O.js","names":[],"sources":["../../../../src/components/GrSegmented/GrSegmented.vue","../../../../src/components/GrSegmented/GrSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\n\nimport type { ComponentPublicInstance } from 'vue'\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport {\n  grSegmentedIndicatorClass,\n  grSegmentedItemClass,\n  grSegmentedItemIconClass,\n  grSegmentedItemLabelClass,\n  grSegmentedItemSpinnerClass,\n  grSegmentedRootClass,\n  grSegmentedRootStyle,\n  type GrSegmentedOption,\n  type GrSegmentedOrientation,\n  type GrSegmentedSize,\n  type GrSegmentedValue,\n  type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\ntype IndicatorGeometry = {\n  width: number\n  height: number\n  x: number\n  y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n  modelValue: GrSegmentedValue\n  options: GrSegmentedOption[]\n  variant?: GrSegmentedVariant\n  size?: GrSegmentedSize\n  /**\n   * Направление ряда. Вертикаль — боковые фильтры; индикатор к ней готов по\n   * построению, он двумерный.\n   */\n  orientation?: GrSegmentedOrientation\n  /** Длительность анимации индикатора в мс. */\n  indicatorDuration?: number\n  /** Растягивать сегмент на всю ширину контейнера. */\n  block?: boolean\n  disabled?: boolean\n  /** Только для чтения: выбор видно, но он не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  /** Имя скрытого поля, которым выбранное значение уходит в нативную форму. */\n  name?: string\n  ariaLabel?: string\n}\n\nexport interface GrSegmentedEmits {\n  (e: 'update:modelValue', value: GrSegmentedValue): void\n  (e: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrSegmentedProps>(),\n  {\n    variant: undefined,\n    size: undefined,\n    orientation: 'horizontal',\n    indicatorDuration: 300,\n    block: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    name: undefined,\n    ariaLabel: undefined,\n  },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrSegmented' })\nconst resolvedVariant = useGrComponentProp('GrSegmented', 'variant', () => props.variant, 'pills')\n\nconst emit = defineEmits<GrSegmentedEmits>()\ndefineSlots<{\n  /** Содержимое сегмента вместо подписи из `options`. */\n  default?: (props: {\n    option: GrSegmentedOption\n    selected: boolean\n    disabled: boolean\n    loading: boolean\n  }) => any\n}>()\n\n\n// `useId()` стабилен между сервером и клиентом, в отличие от `instance.uid`.\nconst fallbackName = `gr-segmented-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst labelledBy = computed(() => (props.ariaLabel ? undefined : field?.labelId.value))\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\n\nconst rootRef = ref<HTMLElement | null>(null)\n\n// Фокус ходит между сегментами: без границы каждая стрелка давала бы\n// потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootRef, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\ndefineExpose({ focus, blur })\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst isVertical = computed(() => props.orientation === 'vertical')\nconst rootClassName = computed(() => grSegmentedRootClass({\n  variant: resolvedVariant.value,\n  orientation: props.orientation,\n  block: props.block,\n  disabled: isDisabled.value,\n}))\n\n/**\n * Раскладка задаётся треками, а не классами: число сегментов известно только в\n * рантайме. По вертикали колонка одна — сегменты одинаковой ширины по\n * построению, и `block` решает лишь, занимать ли ширину контейнера.\n */\nconst rootStyle = computed<Record<string, string>>(() => {\n  const empty = props.options.length === 0\n  const track = () => props.block && !isVertical.value ? 'minmax(0,1fr)' : 'minmax(0,max-content)'\n\n  return {\n    ...grSegmentedRootStyle({\n      variant: resolvedVariant.value,\n      size: resolvedSize.value,\n      orientation: props.orientation,\n    }),\n    gridTemplateColumns: isVertical.value\n      ? 'minmax(0,1fr)'\n      : empty ? 'none' : props.options.map(track).join(' '),\n    ...(isVertical.value\n      ? { gridTemplateRows: empty ? 'none' : props.options.map(track).join(' ') }\n      : {}),\n  }\n})\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n  const geometry = indicatorGeometry.value\n  if (!geometry) {\n    return {\n      opacity: '0',\n      width: '0px',\n      height: '0px',\n      transitionDuration: `${indicatorDuration.value}ms`,\n      transform: 'translate3d(0px, 0px, 0px)',\n    }\n  }\n\n  return {\n    opacity: indicatorReady.value ? '1' : '0',\n    width: `${geometry.width}px`,\n    height: `${geometry.height}px`,\n    transitionDuration: `${indicatorDuration.value}ms`,\n    transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n  }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n  return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n  return isDisabled.value || Boolean(option.disabled)\n}\n\n/**\n * Занятый сегмент не «недоступен», а работает: нативный `disabled` и\n * `aria-disabled` ему не ставим — состояние несёт `aria-busy`. Но выбор он не\n * принимает, поэтому блокировка считается отдельно от `disabled`.\n */\nfunction isOptionBusy(option: GrSegmentedOption): boolean {\n  return Boolean(option.loading)\n}\n\nfunction isOptionBlocked(option: GrSegmentedOption): boolean {\n  return resolveOptionDisabled(option) || isOptionBusy(option)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n  return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n  return Boolean(option.icon) && !option.label\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n  const key = getOptionKey(value)\n\n  if (!(element instanceof HTMLElement)) {\n    itemRefs.value.delete(key)\n    return\n  }\n\n  itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n  if (left === right) {\n    return true\n  }\n\n  if (!left || !right) {\n    return false\n  }\n\n  return left.width === right.width\n    && left.height === right.height\n    && left.x === right.x\n    && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n  const root = rootRef.value\n  const option = selectedOption.value\n  if (!root || !option) {\n    if (indicatorGeometry.value !== null)\n      indicatorGeometry.value = null\n\n    if (indicatorReady.value)\n      indicatorReady.value = false\n\n    return\n  }\n\n  const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n  if (!selectedItem) {\n    return\n  }\n\n  const rootRect = root.getBoundingClientRect()\n  const itemRect = selectedItem.getBoundingClientRect()\n\n  const nextGeometry = {\n    width: Math.max(Math.round(itemRect.width), 0),\n    height: Math.max(Math.round(itemRect.height), 0),\n    x: Math.round(itemRect.left - rootRect.left),\n    y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n  } satisfies IndicatorGeometry\n\n  if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n    indicatorGeometry.value = nextGeometry\n  }\n\n  const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n  if (indicatorReady.value !== nextReady) {\n    indicatorReady.value = nextReady\n  }\n}\n\nfunction refreshObserver(): void {\n  if (typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  const root = rootRef.value\n  const option = selectedOption.value\n  const selectedItem = option\n    ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n    : null\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => scheduleMeasure())\n  }\n\n  if (!root) {\n    resizeObserver.disconnect()\n    observedRoot = null\n    observedItem = null\n    return\n  }\n\n  if (observedRoot === root && observedItem === selectedItem) {\n    return\n  }\n\n  resizeObserver.disconnect()\n  resizeObserver.observe(root)\n\n  if (selectedItem) {\n    resizeObserver.observe(selectedItem)\n  }\n\n  observedRoot = root\n  observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled) {\n    return\n  }\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureIndicator()\n    refreshObserver()\n  })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n  // Один guard на все пути: проверяй `readonly` только клавиатура, и клик по\n  // сегменту менял бы значение вопреки заявленному контракту.\n  if (isReadonly.value || isOptionBlocked(option) || option.value === props.modelValue) {\n    return\n  }\n\n  emit('update:modelValue', option.value)\n  emit('change', option.value, option)\n}\n\nfunction optionOf(value: GrSegmentedValue): GrSegmentedOption | undefined {\n  return props.options.find(option => option.value === value)\n}\n\n/**\n * Кольцо roving-фокуса. Обе оси работают всегда: `orientation` у сегмента\n * описывает раскладку и уходит в `aria-orientation`, а не сужает клавиатуру —\n * вертикальный набор листается и стрелками влево/вправо.\n */\nconst roving = useRovingFocus<GrSegmentedValue>({\n  items: () => props.options.map(option => option.value),\n  elementFor: value => itemRefs.value.get(getOptionKey(value)),\n  isDisabled: (value) => {\n    const option = optionOf(value)\n    return option ? isOptionBlocked(option) : true\n  },\n  orientation: () => 'both',\n  skipDisabled: () => true,\n  /**\n   * Выбранный сегмент держит остановку `Tab` — кроме выключенного: на нём\n   * стоит нативный `disabled`, и фокус на него не встанет вовсе. Загружающийся\n   * остановку сохраняет: он не «недоступен», а занят.\n   */\n  initialKey: () => {\n    const selected = selectedOption.value\n    return selected && !resolveOptionDisabled(selected) ? selected.value : undefined\n  },\n  // Стрелка в `radiogroup` переносит и выбор, а не только фокус.\n  onMove: (value) => {\n    const option = optionOf(value)\n    if (option) emitValue(option)\n  },\n})\n\nfunction onItemClick(option: GrSegmentedOption): void {\n  emitValue(option)\n  // Клик тоже переносит остановку `Tab`: иначе она осталась бы там, куда её\n  // увела последняя стрелка.\n  if (!isOptionBlocked(option)) roving.setActive(option.value)\n}\n\n/** Императивный фокус ведёт на текущую остановку `Tab`, а не на первый сегмент. */\nfunction rovingElement(): HTMLElement | undefined {\n  const key = roving.rovingKey.value\n  return key === undefined ? undefined : itemRefs.value.get(getOptionKey(key))\n}\n\nfunction focus(): void {\n  rovingElement()?.focus()\n}\n\nfunction blur(): void {\n  rovingElement()?.blur()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n  if (isDisabled.value || isReadonly.value) {\n    return\n  }\n\n  if (roving.handleNavigationKeys(event)) {\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    const option = props.options[index]\n    if (option) {\n      emitValue(option)\n    }\n  }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(resolvedVariant, () => scheduleMeasure())\nwatch(resolvedSize, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n// Смена ориентации переставляет сегменты: без пересчёта индикатор остался бы в\n// координатах прежней раскладки.\nwatch(() => props.orientation, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  observedRoot = null\n  observedItem = null\n})\n</script>\n\n<template>\n  <div\n    :id=\"fieldId\"\n    ref=\"rootRef\"\n    data-gr-segmented\n    :data-variant=\"resolvedVariant\"\n    role=\"radiogroup\"\n    :aria-orientation=\"orientation\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :aria-invalid=\"isInvalid ? 'true' : undefined\"\n    :aria-required=\"isRequired ? 'true' : undefined\"\n    :aria-readonly=\"isReadonly ? 'true' : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :class=\"rootClassName\"\n    :style=\"rootStyle\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Значение для нативной формы уходит одним скрытым полем рядом с\n         сегментами, а не вложенным в каждый `role=\"radio\"`: роль объявляет своих\n         потомков презентационными, и вложенный интерактивный контрол ломает\n         виджет для скринридеров (axe: `nested-interactive`). Скрытое поле не\n         фокусируется и интерактивным не считается. -->\n    <input\n      v-if=\"selectedOption && !resolveOptionDisabled(selectedOption)\"\n      type=\"hidden\"\n      :name=\"resolvedName\"\n      :value=\"String(selectedOption.value)\"\n    >\n\n    <span\n      v-if=\"hasIndicator\"\n      data-gr-segmented-indicator\n      aria-hidden=\"true\"\n      :class=\"indicatorClassName\"\n      :style=\"indicatorStyle\"\n    />\n\n    <button\n      v-for=\"(option, index) in options\"\n      :key=\"option.value\"\n      :ref=\"element => setItemRef(option.value, element)\"\n      data-gr-segmented-item\n      :data-value=\"String(option.value)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-label=\"option.ariaLabel\"\n      :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n      :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n      :aria-busy=\"isOptionBusy(option) ? 'true' : undefined\"\n      :disabled=\"resolveOptionDisabled(option)\"\n      :tabindex=\"roving.tabindexFor(option.value)\"\n      :class=\"grSegmentedItemClass({\n        variant: resolvedVariant,\n        selected: isOptionSelected(option),\n        disabled: resolveOptionDisabled(option),\n        iconOnly: isIconOnlyOption(option),\n      })\"\n      @click=\"onItemClick(option)\"\n      @keydown=\"onKeydown($event, index)\"\n    >\n      <slot\n        :option=\"option\"\n        :selected=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n        :loading=\"isOptionBusy(option)\"\n      >\n        <!-- Спиннер занимает место иконки: две крутилки рядом читались бы как ошибка. -->\n        <IconLoader\n          v-if=\"isOptionBusy(option)\"\n          data-gr-segmented-spinner\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemSpinnerClass\"\n        />\n        <component\n          :is=\"option.icon\"\n          v-else-if=\"option.icon\"\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemIconClass\"\n        />\n        <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n          {{ option.label }}\n        </span>\n      </slot>\n    </button>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\n\nimport type { ComponentPublicInstance } from 'vue'\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport {\n  grSegmentedIndicatorClass,\n  grSegmentedItemClass,\n  grSegmentedItemIconClass,\n  grSegmentedItemLabelClass,\n  grSegmentedItemSpinnerClass,\n  grSegmentedRootClass,\n  grSegmentedRootStyle,\n  type GrSegmentedOption,\n  type GrSegmentedOrientation,\n  type GrSegmentedSize,\n  type GrSegmentedValue,\n  type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\ntype IndicatorGeometry = {\n  width: number\n  height: number\n  x: number\n  y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n  modelValue: GrSegmentedValue\n  options: GrSegmentedOption[]\n  variant?: GrSegmentedVariant\n  size?: GrSegmentedSize\n  /**\n   * Направление ряда. Вертикаль — боковые фильтры; индикатор к ней готов по\n   * построению, он двумерный.\n   */\n  orientation?: GrSegmentedOrientation\n  /** Длительность анимации индикатора в мс. */\n  indicatorDuration?: number\n  /** Растягивать сегмент на всю ширину контейнера. */\n  block?: boolean\n  disabled?: boolean\n  /** Только для чтения: выбор видно, но он не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  /** Имя скрытого поля, которым выбранное значение уходит в нативную форму. */\n  name?: string\n  ariaLabel?: string\n}\n\nexport interface GrSegmentedEmits {\n  (e: 'update:modelValue', value: GrSegmentedValue): void\n  (e: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrSegmentedProps>(),\n  {\n    variant: undefined,\n    size: undefined,\n    orientation: 'horizontal',\n    indicatorDuration: 300,\n    block: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    name: undefined,\n    ariaLabel: undefined,\n  },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrSegmented' })\nconst resolvedVariant = useGrComponentProp('GrSegmented', 'variant', () => props.variant, 'pills')\n\nconst emit = defineEmits<GrSegmentedEmits>()\ndefineSlots<{\n  /** Содержимое сегмента вместо подписи из `options`. */\n  default?: (props: {\n    option: GrSegmentedOption\n    selected: boolean\n    disabled: boolean\n    loading: boolean\n  }) => any\n}>()\n\n\n// `useId()` стабилен между сервером и клиентом, в отличие от `instance.uid`.\nconst fallbackName = `gr-segmented-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst labelledBy = computed(() => (props.ariaLabel ? undefined : field?.labelId.value))\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\n\nconst rootRef = ref<HTMLElement | null>(null)\n\n// Фокус ходит между сегментами: без границы каждая стрелка давала бы\n// потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootRef, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\ndefineExpose({ focus, blur })\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst isVertical = computed(() => props.orientation === 'vertical')\nconst rootClassName = computed(() => grSegmentedRootClass({\n  variant: resolvedVariant.value,\n  orientation: props.orientation,\n  block: props.block,\n  disabled: isDisabled.value,\n}))\n\n/**\n * Раскладка задаётся треками, а не классами: число сегментов известно только в\n * рантайме. По вертикали колонка одна — сегменты одинаковой ширины по\n * построению, и `block` решает лишь, занимать ли ширину контейнера.\n */\nconst rootStyle = computed<Record<string, string>>(() => {\n  const empty = props.options.length === 0\n  const track = () => props.block && !isVertical.value ? 'minmax(0,1fr)' : 'minmax(0,max-content)'\n\n  return {\n    ...grSegmentedRootStyle({\n      variant: resolvedVariant.value,\n      size: resolvedSize.value,\n      orientation: props.orientation,\n    }),\n    gridTemplateColumns: isVertical.value\n      ? 'minmax(0,1fr)'\n      : empty ? 'none' : props.options.map(track).join(' '),\n    ...(isVertical.value\n      ? { gridTemplateRows: empty ? 'none' : props.options.map(track).join(' ') }\n      : {}),\n  }\n})\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n  const geometry = indicatorGeometry.value\n  if (!geometry) {\n    return {\n      opacity: '0',\n      width: '0px',\n      height: '0px',\n      transitionDuration: `${indicatorDuration.value}ms`,\n      transform: 'translate3d(0px, 0px, 0px)',\n    }\n  }\n\n  return {\n    opacity: indicatorReady.value ? '1' : '0',\n    width: `${geometry.width}px`,\n    height: `${geometry.height}px`,\n    transitionDuration: `${indicatorDuration.value}ms`,\n    transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n  }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n  return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n  return isDisabled.value || Boolean(option.disabled)\n}\n\n/**\n * Занятый сегмент не «недоступен», а работает: нативный `disabled` и\n * `aria-disabled` ему не ставим — состояние несёт `aria-busy`. Но выбор он не\n * принимает, поэтому блокировка считается отдельно от `disabled`.\n */\nfunction isOptionBusy(option: GrSegmentedOption): boolean {\n  return Boolean(option.loading)\n}\n\nfunction isOptionBlocked(option: GrSegmentedOption): boolean {\n  return resolveOptionDisabled(option) || isOptionBusy(option)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n  return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n  return Boolean(option.icon) && !option.label\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n  const key = getOptionKey(value)\n\n  if (!(element instanceof HTMLElement)) {\n    itemRefs.value.delete(key)\n    return\n  }\n\n  itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n  if (left === right) {\n    return true\n  }\n\n  if (!left || !right) {\n    return false\n  }\n\n  return left.width === right.width\n    && left.height === right.height\n    && left.x === right.x\n    && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n  const root = rootRef.value\n  const option = selectedOption.value\n  if (!root || !option) {\n    if (indicatorGeometry.value !== null)\n      indicatorGeometry.value = null\n\n    if (indicatorReady.value)\n      indicatorReady.value = false\n\n    return\n  }\n\n  const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n  if (!selectedItem) {\n    return\n  }\n\n  const rootRect = root.getBoundingClientRect()\n  const itemRect = selectedItem.getBoundingClientRect()\n\n  const nextGeometry = {\n    width: Math.max(Math.round(itemRect.width), 0),\n    height: Math.max(Math.round(itemRect.height), 0),\n    x: Math.round(itemRect.left - rootRect.left),\n    y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n  } satisfies IndicatorGeometry\n\n  if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n    indicatorGeometry.value = nextGeometry\n  }\n\n  const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n  if (indicatorReady.value !== nextReady) {\n    indicatorReady.value = nextReady\n  }\n}\n\nfunction refreshObserver(): void {\n  if (typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  const root = rootRef.value\n  const option = selectedOption.value\n  const selectedItem = option\n    ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n    : null\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => scheduleMeasure())\n  }\n\n  if (!root) {\n    resizeObserver.disconnect()\n    observedRoot = null\n    observedItem = null\n    return\n  }\n\n  if (observedRoot === root && observedItem === selectedItem) {\n    return\n  }\n\n  resizeObserver.disconnect()\n  resizeObserver.observe(root)\n\n  if (selectedItem) {\n    resizeObserver.observe(selectedItem)\n  }\n\n  observedRoot = root\n  observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled) {\n    return\n  }\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureIndicator()\n    refreshObserver()\n  })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n  // Один guard на все пути: проверяй `readonly` только клавиатура, и клик по\n  // сегменту менял бы значение вопреки заявленному контракту.\n  if (isReadonly.value || isOptionBlocked(option) || option.value === props.modelValue) {\n    return\n  }\n\n  emit('update:modelValue', option.value)\n  emit('change', option.value, option)\n}\n\nfunction optionOf(value: GrSegmentedValue): GrSegmentedOption | undefined {\n  return props.options.find(option => option.value === value)\n}\n\n/**\n * Кольцо roving-фокуса. Обе оси работают всегда: `orientation` у сегмента\n * описывает раскладку и уходит в `aria-orientation`, а не сужает клавиатуру —\n * вертикальный набор листается и стрелками влево/вправо.\n */\nconst roving = useRovingFocus<GrSegmentedValue>({\n  items: () => props.options.map(option => option.value),\n  elementFor: value => itemRefs.value.get(getOptionKey(value)),\n  isDisabled: (value) => {\n    const option = optionOf(value)\n    return option ? isOptionBlocked(option) : true\n  },\n  orientation: () => 'both',\n  skipDisabled: () => true,\n  /**\n   * Выбранный сегмент держит остановку `Tab` — кроме выключенного: на нём\n   * стоит нативный `disabled`, и фокус на него не встанет вовсе. Загружающийся\n   * остановку сохраняет: он не «недоступен», а занят.\n   */\n  initialKey: () => {\n    const selected = selectedOption.value\n    return selected && !resolveOptionDisabled(selected) ? selected.value : undefined\n  },\n  // Стрелка в `radiogroup` переносит и выбор, а не только фокус.\n  onMove: (value) => {\n    const option = optionOf(value)\n    if (option) emitValue(option)\n  },\n})\n\nfunction onItemClick(option: GrSegmentedOption): void {\n  emitValue(option)\n  // Клик тоже переносит остановку `Tab`: иначе она осталась бы там, куда её\n  // увела последняя стрелка.\n  if (!isOptionBlocked(option)) roving.setActive(option.value)\n}\n\n/** Императивный фокус ведёт на текущую остановку `Tab`, а не на первый сегмент. */\nfunction rovingElement(): HTMLElement | undefined {\n  const key = roving.rovingKey.value\n  return key === undefined ? undefined : itemRefs.value.get(getOptionKey(key))\n}\n\nfunction focus(): void {\n  rovingElement()?.focus()\n}\n\nfunction blur(): void {\n  rovingElement()?.blur()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n  if (isDisabled.value || isReadonly.value) {\n    return\n  }\n\n  if (roving.handleNavigationKeys(event)) {\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    const option = props.options[index]\n    if (option) {\n      emitValue(option)\n    }\n  }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(resolvedVariant, () => scheduleMeasure())\nwatch(resolvedSize, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n// Смена ориентации переставляет сегменты: без пересчёта индикатор остался бы в\n// координатах прежней раскладки.\nwatch(() => props.orientation, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  observedRoot = null\n  observedItem = null\n})\n</script>\n\n<template>\n  <div\n    :id=\"fieldId\"\n    ref=\"rootRef\"\n    data-gr-segmented\n    :data-variant=\"resolvedVariant\"\n    role=\"radiogroup\"\n    :aria-orientation=\"orientation\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :aria-invalid=\"isInvalid ? 'true' : undefined\"\n    :aria-required=\"isRequired ? 'true' : undefined\"\n    :aria-readonly=\"isReadonly ? 'true' : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :class=\"rootClassName\"\n    :style=\"rootStyle\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Значение для нативной формы уходит одним скрытым полем рядом с\n         сегментами, а не вложенным в каждый `role=\"radio\"`: роль объявляет своих\n         потомков презентационными, и вложенный интерактивный контрол ломает\n         виджет для скринридеров (axe: `nested-interactive`). Скрытое поле не\n         фокусируется и интерактивным не считается. -->\n    <input\n      v-if=\"selectedOption && !resolveOptionDisabled(selectedOption)\"\n      type=\"hidden\"\n      :name=\"resolvedName\"\n      :value=\"String(selectedOption.value)\"\n    >\n\n    <span\n      v-if=\"hasIndicator\"\n      data-gr-segmented-indicator\n      aria-hidden=\"true\"\n      :class=\"indicatorClassName\"\n      :style=\"indicatorStyle\"\n    />\n\n    <button\n      v-for=\"(option, index) in options\"\n      :key=\"option.value\"\n      :ref=\"element => setItemRef(option.value, element)\"\n      data-gr-segmented-item\n      :data-value=\"String(option.value)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-label=\"option.ariaLabel\"\n      :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n      :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n      :aria-busy=\"isOptionBusy(option) ? 'true' : undefined\"\n      :disabled=\"resolveOptionDisabled(option)\"\n      :tabindex=\"roving.tabindexFor(option.value)\"\n      :class=\"grSegmentedItemClass({\n        variant: resolvedVariant,\n        selected: isOptionSelected(option),\n        disabled: resolveOptionDisabled(option),\n        iconOnly: isIconOnlyOption(option),\n      })\"\n      @click=\"onItemClick(option)\"\n      @keydown=\"onKeydown($event, index)\"\n    >\n      <slot\n        :option=\"option\"\n        :selected=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n        :loading=\"isOptionBusy(option)\"\n      >\n        <!-- Спиннер занимает место иконки: две крутилки рядом читались бы как ошибка. -->\n        <IconLoader\n          v-if=\"isOptionBusy(option)\"\n          data-gr-segmented-spinner\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemSpinnerClass\"\n        />\n        <component\n          :is=\"option.icon\"\n          v-else-if=\"option.icon\"\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemIconClass\"\n        />\n        <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n          {{ option.label }}\n        </span>\n      </slot>\n    </button>\n  </div>\n</template>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,QAAQ;EAkBd,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,cAAc,CAAC;EACtF,MAAM,kBAAkB,mBAAmB,eAAe,iBAAiB,MAAM,SAAS,OAAO;EAEjG,MAAM,OAAO;EAab,MAAM,eAAe,gBAAgB,MAAM;EAG3C,MAAM,QAAQ,sBAAsB;EACpC,MAAM,UAAU,eAAe,OAAO,GAAG,KAAK;EAC9C,MAAM,cAAc,eAAe,OAAO,cAAc,KAAK;EAC7D,MAAM,aAAa,eAAgB,MAAM,YAAY,KAAA,IAAY,OAAO,QAAQ,KAAM;EACtF,MAAM,EACJ,UAAU,YACV,SAAS,WAAW,UAAU,YAAY,UAAU,eAAe,uBAAuB,KAAK;EAEjG,MAAM,UAAU,IAAwB,IAAI;EAI5C,MAAM,EAAE,WAAW,eAAe,eAAe,SAAS;GACxD,QAAO,UAAS,KAAK,SAAS,KAAK;GACnC,QAAO,UAAS,KAAK,QAAQ,KAAK;EACpC,CAAC;EAED,SAAa;GAAE;GAAO;EAAK,CAAC;EAC5B,MAAM,WAAW,oBAAI,IAAI,IAAyB,CAAC;EACnD,MAAM,oBAAoB,IAA8B,IAAI;EAC5D,MAAM,iBAAiB,IAAI,KAAK;EAEhC,IAAI,iBAAwC;EAC5C,IAAI,eAAmC;EACvC,IAAI,eAAmC;EACvC,IAAI,YAAY;EAEhB,MAAM,gBAAgB,eAAe,MAAM,QAAQ,WAAU,WAAU,OAAO,UAAU,MAAM,UAAU,CAAC;EACzG,MAAM,iBAAiB,eAAe,MAAM,QAAQ,cAAc,UAAU,IAAI;EAChF,MAAM,oBAAoB,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,iBAAiB,CAAC,CAAC;EACzF,MAAM,aAAa,eAAe,MAAM,gBAAgB,UAAU;EAClE,MAAM,gBAAgB,eAAe,qBAAqB;GACxD,SAAS,gBAAgB;GACzB,aAAa,MAAM;GACnB,OAAO,MAAM;GACb,UAAU,WAAW;EACvB,CAAC,CAAC;;;;;;EAOF,MAAM,YAAY,eAAuC;GACvD,MAAM,QAAQ,MAAM,QAAQ,WAAW;GACvC,MAAM,cAAc,MAAM,SAAS,CAAC,WAAW,QAAQ,kBAAkB;GAEzE,OAAO;IACL,GAAG,qBAAqB;KACtB,SAAS,gBAAgB;KACzB,MAAM,aAAa;KACnB,aAAa,MAAM;IACrB,CAAC;IACD,qBAAqB,WAAW,QAC5B,kBACA,QAAQ,SAAS,MAAM,QAAQ,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG;IACtD,GAAI,WAAW,QACX,EAAE,kBAAkB,QAAQ,SAAS,MAAM,QAAQ,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG,EAAE,IACxE,CAAC;GACP;EACF,CAAC;EACD,MAAM,qBAAqB,eAAe,0BAA0B,gBAAgB,KAAK,CAAC;EAC1F,MAAM,eAAe,eAAe,MAAM,QAAQ,YAAY;EAC9D,MAAM,eAAe,eAAe,cAAc,UAAU,MAAM,kBAAkB,UAAU,IAAI;EAElG,MAAM,iBAAiB,eAAuC;GAC5D,MAAM,WAAW,kBAAkB;GACnC,IAAI,CAAC,UACH,OAAO;IACL,SAAS;IACT,OAAO;IACP,QAAQ;IACR,oBAAoB,GAAG,kBAAkB,MAAM;IAC/C,WAAW;GACb;GAGF,OAAO;IACL,SAAS,eAAe,QAAQ,MAAM;IACtC,OAAO,GAAG,SAAS,MAAM;IACzB,QAAQ,GAAG,SAAS,OAAO;IAC3B,oBAAoB,GAAG,kBAAkB,MAAM;IAC/C,WAAW,eAAe,SAAS,EAAE,MAAM,SAAS,EAAE;GACxD;EACF,CAAC;EAED,SAAS,aAAa,OAAiC;GACrD,OAAO,OAAO,KAAK;EACrB;EAEA,SAAS,sBAAsB,QAAoC;GACjE,OAAO,WAAW,SAAS,QAAQ,OAAO,QAAQ;EACpD;;;;;;EAOA,SAAS,aAAa,QAAoC;GACxD,OAAO,QAAQ,OAAO,OAAO;EAC/B;EAEA,SAAS,gBAAgB,QAAoC;GAC3D,OAAO,sBAAsB,MAAM,KAAK,aAAa,MAAM;EAC7D;EAEA,SAAS,iBAAiB,QAAoC;GAC5D,OAAO,OAAO,UAAU,MAAM;EAChC;EAEA,SAAS,iBAAiB,QAAoC;GAC5D,OAAO,QAAQ,OAAO,IAAI,KAAK,CAAC,OAAO;EACzC;EAEA,SAAS,WAAW,OAAyB,SAAyD;GACpG,MAAM,MAAM,aAAa,KAAK;GAE9B,IAAI,EAAE,mBAAmB,cAAc;IACrC,SAAS,MAAM,OAAO,GAAG;IACzB;GACF;GAEA,SAAS,MAAM,IAAI,KAAK,OAAO;EACjC;EAEA,SAAS,eAAe,MAAgC,OAA0C;GAChG,IAAI,SAAS,OACX,OAAO;GAGT,IAAI,CAAC,QAAQ,CAAC,OACZ,OAAO;GAGT,OAAO,KAAK,UAAU,MAAM,SACvB,KAAK,WAAW,MAAM,UACtB,KAAK,MAAM,MAAM,KACjB,KAAK,MAAM,MAAM;EACxB;EAEA,SAAS,mBAAyB;GAChC,MAAM,OAAO,QAAQ;GACrB,MAAM,SAAS,eAAe;GAC9B,IAAI,CAAC,QAAQ,CAAC,QAAQ;IACpB,IAAI,kBAAkB,UAAU,MAC9B,kBAAkB,QAAQ;IAE5B,IAAI,eAAe,OACjB,eAAe,QAAQ;IAEzB;GACF;GAEA,MAAM,eAAe,SAAS,MAAM,IAAI,aAAa,OAAO,KAAK,CAAC;GAClE,IAAI,CAAC,cACH;GAGF,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,WAAW,aAAa,sBAAsB;GAEpD,MAAM,eAAe;IACnB,OAAO,KAAK,IAAI,KAAK,MAAM,SAAS,KAAK,GAAG,CAAC;IAC7C,QAAQ,KAAK,IAAI,KAAK,MAAM,SAAS,MAAM,GAAG,CAAC;IAC/C,GAAG,KAAK,MAAM,SAAS,OAAO,SAAS,IAAI;IAC3C,GAAG,KAAK,IAAI,KAAK,MAAM,SAAS,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC;GAC5D;GAEA,IAAI,CAAC,eAAe,kBAAkB,OAAO,YAAY,GACvD,kBAAkB,QAAQ;GAG5B,MAAM,YAAY,aAAa,QAAQ,KAAK,aAAa,SAAS;GAClE,IAAI,eAAe,UAAU,WAC3B,eAAe,QAAQ;EAE3B;EAEA,SAAS,kBAAwB;GAC/B,IAAI,OAAO,mBAAmB,aAC5B;GAGF,MAAM,OAAO,QAAQ;GACrB,MAAM,SAAS,eAAe;GAC9B,MAAM,eAAe,SACjB,SAAS,MAAM,IAAI,aAAa,OAAO,KAAK,CAAC,KAAK,OAClD;GAEJ,IAAI,CAAC,gBACH,iBAAiB,IAAI,qBAAqB,gBAAgB,CAAC;GAG7D,IAAI,CAAC,MAAM;IACT,eAAe,WAAW;IAC1B,eAAe;IACf,eAAe;IACf;GACF;GAEA,IAAI,iBAAiB,QAAQ,iBAAiB,cAC5C;GAGF,eAAe,WAAW;GAC1B,eAAe,QAAQ,IAAI;GAE3B,IAAI,cACF,eAAe,QAAQ,YAAY;GAGrC,eAAe;GACf,eAAe;EACjB;EAEA,SAAS,kBAAwB;GAC/B,IAAI,WACF;GAGF,YAAY;GACZ,eAAoB;IAClB,YAAY;IACZ,iBAAiB;IACjB,gBAAgB;GAClB,CAAC;EACH;EAEA,SAAS,UAAU,QAAiC;GAGlD,IAAI,WAAW,SAAS,gBAAgB,MAAM,KAAK,OAAO,UAAU,MAAM,YACxE;GAGF,KAAK,qBAAqB,OAAO,KAAK;GACtC,KAAK,UAAU,OAAO,OAAO,MAAM;EACrC;EAEA,SAAS,SAAS,OAAwD;GACxE,OAAO,MAAM,QAAQ,MAAK,WAAU,OAAO,UAAU,KAAK;EAC5D;;;;;;EAOA,MAAM,SAAS,eAAiC;GAC9C,aAAa,MAAM,QAAQ,KAAI,WAAU,OAAO,KAAK;GACrD,aAAY,UAAS,SAAS,MAAM,IAAI,aAAa,KAAK,CAAC;GAC3D,aAAa,UAAU;IACrB,MAAM,SAAS,SAAS,KAAK;IAC7B,OAAO,SAAS,gBAAgB,MAAM,IAAI;GAC5C;GACA,mBAAmB;GACnB,oBAAoB;;;;;;GAMpB,kBAAkB;IAChB,MAAM,WAAW,eAAe;IAChC,OAAO,YAAY,CAAC,sBAAsB,QAAQ,IAAI,SAAS,QAAQ,KAAA;GACzE;GAEA,SAAS,UAAU;IACjB,MAAM,SAAS,SAAS,KAAK;IAC7B,IAAI,QAAQ,UAAU,MAAM;GAC9B;EACF,CAAC;EAED,SAAS,YAAY,QAAiC;GACpD,UAAU,MAAM;GAGhB,IAAI,CAAC,gBAAgB,MAAM,GAAG,OAAO,UAAU,OAAO,KAAK;EAC7D;;EAGA,SAAS,gBAAyC;GAChD,MAAM,MAAM,OAAO,UAAU;GAC7B,OAAO,QAAQ,KAAA,IAAY,KAAA,IAAY,SAAS,MAAM,IAAI,aAAa,GAAG,CAAC;EAC7E;EAEA,SAAS,QAAc;GACrB,cAAc,CAAC,EAAE,MAAM;EACzB;EAEA,SAAS,OAAa;GACpB,cAAc,CAAC,EAAE,KAAK;EACxB;EAEA,SAAS,UAAU,OAAsB,OAAqB;GAC5D,IAAI,WAAW,SAAS,WAAW,OACjC;GAGF,IAAI,OAAO,qBAAqB,KAAK,GACnC;GAGF,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;IAC9C,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM,QAAQ;IAC7B,IAAI,QACF,UAAU,MAAM;GAEpB;EACF;EAEA,YAAY,MAAM,kBAAkB,gBAAgB,CAAC;EACrD,YAAY,MAAM,eAAe,gBAAgB,GAAG,EAAE,MAAM,KAAK,CAAC;EAClE,MAAM,uBAAuB,gBAAgB,CAAC;EAC9C,MAAM,oBAAoB,gBAAgB,CAAC;EAC3C,YAAY,MAAM,aAAa,gBAAgB,CAAC;EAGhD,YAAY,MAAM,mBAAmB,gBAAgB,CAAC;EAEtD,gBAAgB,gBAAgB,CAAC;EACjC,sBAAsB;GACpB,gBAAgB,WAAW;GAC3B,eAAe;GACf,eAAe;EACjB,CAAC;;uBAIC,mBAsFM,OAAA;IArFH,IAAI,QAAA;aACD;IAAJ,KAAI;IACJ,qBAAA;IACC,gBAAc,MAAA,eAAA;IACf,MAAK;IACJ,oBAAkB,QAAA;IAClB,cAAY,QAAA;IACZ,mBAAiB,WAAA;IACjB,oBAAkB,YAAA;IAClB,gBAAc,MAAA,SAAA,IAAS,SAAY,KAAA;IACnC,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;IACrC,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;IACrC,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;IACrC,OAAK,eAAE,cAAA,KAAa;IACpB,OAAK,eAAE,UAAA,KAAS;IAChB,WAAO,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,SAAA,KAAA,MAAA,SAAA,CAAA,CAAA,GAAA,IAAA;IACT,YAAQ,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,UAAA,KAAA,MAAA,UAAA,CAAA,CAAA,GAAA,IAAA;;IAQH,eAAA,SAAc,CAAK,sBAAsB,eAAA,KAAc,KAAA,UAAA,GAD/D,mBAKC,SAAA;;KAHC,MAAK;KACJ,MAAM,aAAA;KACN,OAAO,OAAO,eAAA,MAAe,KAAK;;IAI7B,aAAA,SAAA,UAAA,GADR,mBAME,QAAA;;KAJA,+BAAA;KACA,eAAY;KACX,OAAK,eAAE,mBAAA,KAAkB;KACzB,OAAK,eAAE,eAAA,KAAc;;sBAGxB,mBA8CS,UAAA,MAAA,WA7CmB,QAAA,UAAlB,QAAQ,UAAK;yBADvB,mBA8CS,UAAA;MA5CN,KAAK,OAAO;;MACZ,MAAK,YAAW,WAAW,OAAO,OAAO,OAAO;MACjD,0BAAA;MACC,cAAY,OAAO,OAAO,KAAK;MAChC,MAAK;MACL,MAAK;MACJ,cAAY,OAAO;MACnB,gBAAc,iBAAiB,MAAM,IAAA,SAAA;MACrC,iBAAe,sBAAsB,MAAM,IAAA,SAAa,KAAA;MACxD,aAAW,aAAa,MAAM,IAAA,SAAa,KAAA;MAC3C,UAAU,sBAAsB,MAAM;MACtC,UAAU,MAAA,MAAA,CAAM,CAAC,YAAY,OAAO,KAAK;MACzC,OAAK,eAAE,MAAA,oBAAA,CAAoB,CAAA;gBAAoB,MAAA,eAAA;iBAAmC,iBAAiB,MAAM;iBAAqB,sBAAsB,MAAM;iBAAqB,iBAAiB,MAAM;;MAMtM,UAAK,WAAE,YAAY,MAAM;MACzB,YAAO,WAAE,UAAU,QAAQ,KAAK;SAEjC,WAsBO,KAAA,QAAA,WAAA;MArBI;MACR,UAAU,iBAAiB,MAAM;MACjC,UAAU,sBAAsB,MAAM;MACtC,SAAS,aAAa,MAAM;cAkBxB,CAdG,aAAa,MAAM,KAAA,UAAA,GAD3B,YAKE,MAAA,qBAAA,GAAA;;MAHA,6BAAA;MACA,eAAY;MACX,OAAK,eAAE,MAAA,2BAAA,CAA2B;+BAIxB,OAAO,QAAA,UAAA,GAFpB,YAKE,wBAJK,OAAO,IAAI,GAAA;;MAEhB,eAAY;MACX,OAAK,eAAE,MAAA,wBAAA,CAAwB;6DAEtB,OAAO,SAAA,UAAA,GAAnB,mBAEO,QAAA;;MAFoB,OAAK,eAAE,MAAA,yBAAA,CAAyB;wBACtD,OAAO,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/GrSegmented/index.js

@@ -1,3 +1,3 @@
-import { n as grSegmentedSafelist, r as GR_SEGMENTED_ORIENTATIONS, t as grSegmentedConfig } from "../../chunks/config-B-iNaGdw.js";
-import { t as GrSegmented_default } from "./chunks/GrSegmented-CQw3ijqa.js";
-export { GR_SEGMENTED_ORIENTATIONS, GrSegmented_default as GrSegmented, GrSegmented_default as default, grSegmentedConfig, grSegmentedSafelist };
+import { n as grSegmentedSafelist, t as grSegmentedConfig } from "../../chunks/config-BEVBsvni2.js";
+import { t as GrSegmented_default } from "./chunks/GrSegmented-D1mjxF_O.js";
+export { GrSegmented_default as GrSegmented, GrSegmented_default as default, grSegmentedConfig, grSegmentedSafelist };