@feugene/granularity 0.19.0 → 0.21.0

package/dist/components/GrCheckbox/chunks/GrCheckbox-CEcHIsXM.js

@@ -0,0 +1,262 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
+import { t as minus_default } from "../../../chunks/minus-oxdbHF33.js";
+import { d as grCheckboxIndeterminateIconClass, f as grCheckboxLabelClass, l as grCheckboxCheckIconClass, p as grCheckboxRootClass, u as grCheckboxControlClass } from "../../../chunks/grCheckboxStyles-hOAgURZG.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, onMounted, openBlock, ref, renderSlot, unref, useId, useSlots, watch, withKeys, withModifiers } from "vue";
+//#region src/components/GrCheckbox/grCheckboxGroupContext.ts
+var GR_CHECKBOX_GROUP_CONTEXT = Symbol("GR_CHECKBOX_GROUP_CONTEXT");
+//#endregion
+//#region src/components/GrCheckbox/GrCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"checked",
+	"disabled",
+	"name",
+	"value",
+	"form"
+];
+var _hoisted_2 = [
+	"id",
+	"aria-checked",
+	"aria-disabled",
+	"aria-required",
+	"aria-readonly",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-label",
+	"aria-labelledby",
+	"tabindex",
+	"onKeydown"
+];
+var _hoisted_3 = ["id"];
+//#endregion
+//#region src/components/GrCheckbox/GrCheckbox.vue
+var GrCheckbox_default = /* @__PURE__ */ defineComponent({
+	__name: "GrCheckbox",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		value: { default: "on" },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		form: { default: void 0 },
+		id: { default: void 0 },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		labelPosition: { default: "end" },
+		size: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* GrCheckbox — GR-примитив чекбокса с нативным скрытым `<input type="checkbox">`
+		* для интеграции с HTML-формами (`FormData`, `form`).
+		*
+		* Источник истины — нативный input: клик по нему (в т.ч. по внешнему
+		* `<label for="...">`) слушается через `@change` и эмитит модель. Клик по видимой
+		* части компонента переключает через корневой обработчик.
+		*
+		* Клавиатура: `Space` переключает значение (Enter — намеренно нет, это нестандартно
+		* для чекбоксов). Фокус — на самом контроле (квадратике), как у нативного чекбокса.
+		*
+		* A11y: `role="checkbox"` + `aria-checked` (`true`/`false`/`mixed`) + `aria-disabled`.
+		* Роль висит **только на контроле**, а не на всей строке с подписью — по двум причинам:
+		*  - роль объявляет своих потомков презентационными, поэтому ни нативный input, ни
+		*    интерактивная подпись (ссылка на политику, кнопка «показать изменения») не могут
+		*    жить внутри: скринридер теряет их, axe падает на `nested-interactive`;
+		*  - имя виджета берётся из подписи через `aria-labelledby`, что и позволяет держать
+		*    её снаружи вместе со всем её интерактивным содержимым.
+		*
+		* `required` объявляется только через `aria-required`, на скрытый input он не уходит.
+		* Нативная проверка потребовала бы фокуса на невалидном контроле, а он невидим и
+		* `aria-hidden` — Chrome в таком случае молча отменяет сабмит всей формы
+		* («An invalid form control … is not focusable»). Обязательность проверяет
+		* `GrForm` правилом `required` — см. `docs/components/GrCheckbox.md`.
+		*
+		* Внутри `GrCheckboxGroup` значение приходит из группы: свой `modelValue` не
+		* задаётся, а `value` сравнивается с массивом выбранных.
+		*/
+		const hiddenInputStyle = {
+			position: "absolute",
+			opacity: "0",
+			width: "0",
+			height: "0",
+			pointerEvents: "none"
+		};
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const labelId = useId();
+		const hasLabel = computed(() => Boolean(slots.default));
+		const group = inject(GR_CHECKBOX_GROUP_CONTEXT, null);
+		const checked = computed(() => {
+			if (props.modelValue !== void 0) return props.modelValue;
+			if (group) return group.modelValue.value.includes(props.value);
+			return false;
+		});
+		const resolvedName = computed(() => props.name ?? group?.name.value);
+		const { disabled: isDisabled, id: fieldControlId, labelId: fieldLabelId, describedBy, invalid: fieldInvalid, required: fieldRequired, readonly: fieldReadonly } = useGrFormControl(() => props);
+		const resolvedDisabled = computed(() => isDisabled.value || Boolean(group?.disabled.value));
+		const isRequired = computed(() => fieldRequired.value || Boolean(group?.required.value));
+		const isReadonly = computed(() => fieldReadonly.value || Boolean(group?.readonly.value));
+		const isInvalid = computed(() => fieldInvalid.value);
+		const showsInvalid = computed(() => isInvalid.value || Boolean(group?.invalid.value));
+		const labelledBy = computed(() => {
+			if (props.ariaLabel) return void 0;
+			if (hasLabel.value) return labelId;
+			return fieldLabelId.value;
+		});
+		const resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: "GrCheckbox" });
+		const rootClassName = computed(() => grCheckboxRootClass({
+			size: resolvedSize.value,
+			disabled: resolvedDisabled.value,
+			labelPosition: props.labelPosition
+		}));
+		const controlClassName = computed(() => grCheckboxControlClass({
+			size: resolvedSize.value,
+			active: checked.value || props.indeterminate,
+			disabled: resolvedDisabled.value,
+			invalid: showsInvalid.value
+		}));
+		const indeterminateIconClassName = computed(() => grCheckboxIndeterminateIconClass(resolvedSize.value));
+		const checkIconClassName = computed(() => grCheckboxCheckIconClass({
+			size: resolvedSize.value,
+			checked: checked.value
+		}));
+		const labelClassName = computed(() => grCheckboxLabelClass(resolvedSize.value));
+		const nativeInput = ref(null);
+		const control = ref(null);
+		watch(checked, (value) => {
+			if (nativeInput.value && nativeInput.value.checked !== value) nativeInput.value.checked = value;
+		});
+		function syncIndeterminate() {
+			if (nativeInput.value) nativeInput.value.indeterminate = props.indeterminate;
+		}
+		watch(() => props.indeterminate, syncIndeterminate);
+		onMounted(syncIndeterminate);
+		function setChecked(next) {
+			if (resolvedDisabled.value || isReadonly.value) {
+				if (nativeInput.value) nativeInput.value.checked = checked.value;
+				return;
+			}
+			if (props.modelValue !== void 0 || !group) {
+				emit("update:modelValue", next);
+				emit("change", next);
+				return;
+			}
+			group.toggle(props.value, next);
+			emit("change", next);
+		}
+		function toggle() {
+			setChecked(props.indeterminate ? true : !checked.value);
+		}
+		function onNativeChange(e) {
+			setChecked(e.target.checked);
+		}
+		function onNativeFocus() {
+			control.value?.focus();
+		}
+		function focus() {
+			control.value?.focus();
+		}
+		function blur() {
+			control.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		function isInteractiveTarget(target) {
+			const el = target;
+			if (!el) return false;
+			return !!el.closest("a,button,input,select,textarea,label,[role=\"button\"],[role=\"link\"]");
+		}
+		function onClick(e) {
+			if (isInteractiveTarget(e.target)) return;
+			toggle();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-checkbox": "",
+				class: normalizeClass(rootClassName.value),
+				onClick
+			}, [
+				createElementVNode("input", {
+					id: __props.id,
+					ref_key: "nativeInput",
+					ref: nativeInput,
+					type: "checkbox",
+					checked: checked.value,
+					disabled: resolvedDisabled.value,
+					name: resolvedName.value,
+					value: __props.value,
+					form: __props.form,
+					tabindex: "-1",
+					"aria-hidden": "true",
+					style: hiddenInputStyle,
+					onChange: onNativeChange,
+					onFocus: onNativeFocus
+				}, null, 40, _hoisted_1),
+				createElementVNode("span", {
+					id: unref(fieldControlId),
+					ref_key: "control",
+					ref: control,
+					"data-gr-checkbox-indicator": "",
+					role: "checkbox",
+					"aria-checked": __props.indeterminate ? "mixed" : checked.value ? "true" : "false",
+					"aria-disabled": resolvedDisabled.value ? "true" : void 0,
+					"aria-required": isRequired.value ? "true" : void 0,
+					"aria-readonly": isReadonly.value ? "true" : void 0,
+					"aria-invalid": isInvalid.value ? "true" : void 0,
+					"aria-describedby": unref(describedBy),
+					"aria-label": __props.ariaLabel,
+					"aria-labelledby": labelledBy.value,
+					tabindex: resolvedDisabled.value ? -1 : 0,
+					class: normalizeClass(controlClassName.value),
+					onKeydown: withKeys(withModifiers(toggle, ["prevent"]), ["space"]),
+					onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
+					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
+				}, [__props.indeterminate ? (openBlock(), createBlock(unref(minus_default), {
+					key: 0,
+					class: normalizeClass(indeterminateIconClassName.value)
+				}, null, 8, ["class"])) : (openBlock(), createBlock(unref(check_default), {
+					key: 1,
+					class: normalizeClass(checkIconClassName.value)
+				}, null, 8, ["class"]))], 42, _hoisted_2),
+				hasLabel.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					id: unref(labelId),
+					class: normalizeClass(labelClassName.value)
+				}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_3)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { GR_CHECKBOX_GROUP_CONTEXT as n, GrCheckbox_default as t };

package/dist/components/GrCheckbox/chunks/GrCheckbox-CEcHIsXM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrCheckbox-CEcHIsXM.js","names":[],"sources":["../../../../src/components/GrCheckbox/grCheckboxGroupContext.ts","../../../../src/components/GrCheckbox/GrCheckbox.vue","../../../../src/components/GrCheckbox/GrCheckbox.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrCheckboxSize } from './grCheckboxStyles'\n\nexport type GrCheckboxGroupContext = {\n  /** Выбранные значения группы. Чекбокс сравнивает с ними свой `value`. */\n  modelValue: ComputedRef<string[]>\n  name: ComputedRef<string | undefined>\n  disabled: ComputedRef<boolean>\n  readonly: ComputedRef<boolean>\n  invalid: ComputedRef<boolean>\n  /**\n   * Обязательность группы объявляют её чекбоксы: `role=\"group\"` не поддерживает\n   * `aria-required` (axe: `aria-allowed-attr`), а `role=\"checkbox\"` — да.\n   */\n  required: ComputedRef<boolean>\n  size: ComputedRef<GrCheckboxSize>\n  /** Добавляет или убирает значение из выбранных. */\n  toggle: (value: string, checked: boolean) => void\n}\n\nexport const GR_CHECKBOX_GROUP_CONTEXT: InjectionKey<GrCheckboxGroupContext> = Symbol('GR_CHECKBOX_GROUP_CONTEXT')\n","<script setup lang=\"ts\">\n/**\n * GrCheckbox — GR-примитив чекбокса с нативным скрытым `<input type=\"checkbox\">`\n * для интеграции с HTML-формами (`FormData`, `form`).\n *\n * Источник истины — нативный input: клик по нему (в т.ч. по внешнему\n * `<label for=\"...\">`) слушается через `@change` и эмитит модель. Клик по видимой\n * части компонента переключает через корневой обработчик.\n *\n * Клавиатура: `Space` переключает значение (Enter — намеренно нет, это нестандартно\n * для чекбоксов). Фокус — на самом контроле (квадратике), как у нативного чекбокса.\n *\n * A11y: `role=\"checkbox\"` + `aria-checked` (`true`/`false`/`mixed`) + `aria-disabled`.\n * Роль висит **только на контроле**, а не на всей строке с подписью — по двум причинам:\n *  - роль объявляет своих потомков презентационными, поэтому ни нативный input, ни\n *    интерактивная подпись (ссылка на политику, кнопка «показать изменения») не могут\n *    жить внутри: скринридер теряет их, axe падает на `nested-interactive`;\n *  - имя виджета берётся из подписи через `aria-labelledby`, что и позволяет держать\n *    её снаружи вместе со всем её интерактивным содержимым.\n *\n * `required` объявляется только через `aria-required`, на скрытый input он не уходит.\n * Нативная проверка потребовала бы фокуса на невалидном контроле, а он невидим и\n * `aria-hidden` — Chrome в таком случае молча отменяет сабмит всей формы\n * («An invalid form control … is not focusable»). Обязательность проверяет\n * `GrForm` правилом `required` — см. `docs/components/GrCheckbox.md`.\n *\n * Внутри `GrCheckboxGroup` значение приходит из группы: свой `modelValue` не\n * задаётся, а `value` сравнивается с массивом выбранных.\n */\nimport { computed, inject, onMounted, ref, useId, useSlots, watch } from 'vue'\nimport IconCheck from '~icons/lucide/check'\nimport IconMinus from '~icons/lucide/minus'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\n\nimport { GR_CHECKBOX_GROUP_CONTEXT } from './grCheckboxGroupContext'\nimport {\n  grCheckboxCheckIconClass,\n  grCheckboxControlClass,\n  grCheckboxIndeterminateIconClass,\n  grCheckboxLabelClass,\n  grCheckboxRootClass,\n  type GrCheckboxLabelPosition,\n  type GrCheckboxSize,\n} from './grCheckboxStyles'\n\nexport type { GrCheckboxLabelPosition, GrCheckboxSize } from './grCheckboxStyles'\n\nexport interface GrCheckboxProps {\n  /** Не задан внутри `GrCheckboxGroup` — состояние берётся из группы. */\n  modelValue?: boolean\n  disabled?: boolean\n  name?: string\n  value?: string\n  /** Обязательное поле: объявляется как `aria-required`, нативной проверки нет. */\n  required?: boolean\n  /** Только для чтения: состояние видно, но не переключается. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  form?: string\n  /** Пробрасывается на скрытый нативный `<input>`, чтобы работал `<label for=\"...\">`. */\n  id?: string\n  /** Промежуточное («смешанное») состояние: `aria-checked=\"mixed\"`, индикатор — тире. */\n  indeterminate?: boolean\n  /** Имя контрола, когда подписи в слоте нет (или она чисто визуальная). */\n  ariaLabel?: string\n  /** Сторона подписи относительно контрола. */\n  labelPosition?: GrCheckboxLabelPosition\n  /** Размер контрола. Не задан — берётся из группы, затем из `GrConfigProvider`, иначе `md`. */\n  size?: GrCheckboxSize\n}\n\nexport interface GrCheckboxEmits {\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'change', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst hiddenInputStyle = {\n  position: 'absolute',\n  opacity: '0',\n  width: '0',\n  height: '0',\n  pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrCheckboxProps>(), {\n  modelValue: undefined,\n  disabled: undefined,\n  name: undefined,\n  value: 'on',\n  required: false,\n  readonly: false,\n  invalid: false,\n  form: undefined,\n  id: undefined,\n  indeterminate: false,\n  ariaLabel: undefined,\n  labelPosition: 'end',\n  size: undefined,\n})\n\nconst emit = defineEmits<GrCheckboxEmits>()\ndefineSlots<{\n  /** Подпись флажка. Может содержать ссылки: роль остаётся на самом контроле. */\n  default?: () => any\n}>()\n\n\nconst slots = useSlots()\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(slots.default))\n\nconst group = inject(GR_CHECKBOX_GROUP_CONTEXT, null)\n\nconst checked = computed(() => {\n  if (props.modelValue !== undefined)\n    return props.modelValue\n\n  if (group)\n    return group.modelValue.value.includes(props.value)\n\n  return false\n})\n\nconst resolvedName = computed(() => props.name ?? group?.name.value)\n\n// Контекст `GrFormField`. Id поля вешается на `span[role=\"checkbox\"]` — именно он\n// виджет и держит фокус; на скрытом `aria-hidden`-инпуте он был бы бесполезен\n// (клик по подписи уводил бы фокус в невидимый элемент). Роль-виджет не является\n// labelable-элементом, поэтому имя от подписи поля приходит через `aria-labelledby`.\nconst {\n  disabled: isDisabled,\n  id: fieldControlId,\n  labelId: fieldLabelId,\n  describedBy,\n  invalid: fieldInvalid,\n  required: fieldRequired,\n  readonly: fieldReadonly,\n} = useGrFormControl(() => props)\n\n// «Или», а не `??`: `isDisabled` уже сведён к булеву (свой проп + контекст\n// поля и формы), и `??` до группы просто не дошёл бы.\nconst resolvedDisabled = computed(() => isDisabled.value || Boolean(group?.disabled.value))\n\n// `role=\"group\"` не поддерживает `aria-required` и `aria-readonly` — объявлять\n// обязательность и режим чтения группы обязаны сами чекбоксы.\nconst isRequired = computed(() => fieldRequired.value || Boolean(group?.required.value))\n\nconst isReadonly = computed(() => fieldReadonly.value || Boolean(group?.readonly.value))\n\n// Ошибка группы красит чекбоксы, но не объявляется на каждом из них: `aria-invalid`\n// уже висит на самой группе, и дублировать его на всех пунктах — значит заставить\n// диктор повторить «неверное значение» столько раз, сколько в группе чекбоксов.\nconst isInvalid = computed(() => fieldInvalid.value)\nconst showsInvalid = computed(() => isInvalid.value || Boolean(group?.invalid.value))\n\nconst labelledBy = computed(() => {\n  if (props.ariaLabel) return undefined\n  if (hasLabel.value) return labelId\n  return fieldLabelId.value\n})\n\n// Эффективный размер: локальный проп → группа → `GrConfigProvider` → `md`.\nconst resolvedSize = useGrComponentSize(\n  () => props.size ?? group?.size.value,\n  { component: 'GrCheckbox' },\n)\n\nconst rootClassName = computed(() => grCheckboxRootClass({\n  size: resolvedSize.value,\n  disabled: resolvedDisabled.value,\n  labelPosition: props.labelPosition,\n}))\n\nconst controlClassName = computed(() => grCheckboxControlClass({\n  size: resolvedSize.value,\n  active: checked.value || props.indeterminate,\n  disabled: resolvedDisabled.value,\n  invalid: showsInvalid.value,\n}))\n\nconst indeterminateIconClassName = computed(() => grCheckboxIndeterminateIconClass(resolvedSize.value))\n\nconst checkIconClassName = computed(() => grCheckboxCheckIconClass({\n  size: resolvedSize.value,\n  checked: checked.value,\n}))\n\nconst labelClassName = computed(() => grCheckboxLabelClass(resolvedSize.value))\n\n// Держим `.checked` на нативном input синхронно с состоянием — `:checked`-биндинг\n// на скрытом элементе иногда отстаёт при программных обновлениях.\nconst nativeInput = ref<HTMLInputElement | null>(null)\nconst control = ref<HTMLElement | null>(null)\nwatch(\n  checked,\n  (value) => {\n    if (nativeInput.value && nativeInput.value.checked !== value)\n      nativeInput.value.checked = value\n  },\n)\n\n// `indeterminate` можно выставить только через JS-свойство (не атрибут).\nfunction syncIndeterminate(): void {\n  if (nativeInput.value)\n    nativeInput.value.indeterminate = props.indeterminate\n}\nwatch(() => props.indeterminate, syncIndeterminate)\nonMounted(syncIndeterminate)\n\nfunction setChecked(next: boolean): void {\n  if (resolvedDisabled.value || isReadonly.value) {\n    // Нативный input мог уже переключиться от клика по внешнему `<label for>` —\n    // возвращаем его к состоянию модели, иначе форма отправит непринятое значение.\n    if (nativeInput.value)\n      nativeInput.value.checked = checked.value\n    return\n  }\n\n  if (props.modelValue !== undefined || !group) {\n    emit('update:modelValue', next)\n    emit('change', next)\n    return\n  }\n\n  group.toggle(props.value, next)\n  emit('change', next)\n}\n\nfunction toggle(): void {\n  // Из промежуточного состояния переключаемся во «включено» (стандартное поведение).\n  setChecked(props.indeterminate ? true : !checked.value)\n}\n\n// Клик по нативному input (в т.ч. по внешнему `<label for=\"...\">`) уже переключил его\n// `.checked` — берём значение как источник истины и эмитим модель.\nfunction onNativeChange(e: Event): void {\n  setChecked((e.target as HTMLInputElement).checked)\n}\n\n// `<label for>` уводит фокус на скрытый input — визуально фокус пропадает. Возвращаем\n// его на контрол, который этот фокус и показывает.\nfunction onNativeFocus(): void {\n  control.value?.focus()\n}\n\nfunction focus(): void {\n  control.value?.focus()\n}\n\nfunction blur(): void {\n  control.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Подпись держится снаружи роли-виджета именно для того, чтобы могла содержать\n// ссылки и кнопки, — поэтому клик по её интерактивному содержимому чекбокс не\n// переключает. Вложенный `<label>` считается интерактивным: он адресует\n// собственный контрол, и переключение чекбокса «заодно» было бы сюрпризом.\nfunction isInteractiveTarget(target: EventTarget | null): boolean {\n  const el = target as HTMLElement | null\n  if (!el)\n    return false\n  return !!el.closest('a,button,input,select,textarea,label,[role=\"button\"],[role=\"link\"]')\n}\n\nfunction onClick(e: MouseEvent): void {\n  if (isInteractiveTarget(e.target))\n    return\n  toggle()\n}\n</script>\n<template>\n  <div\n    data-gr-checkbox\n    :class=\"rootClassName\"\n    @click=\"onClick\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"nativeInput\"\n      type=\"checkbox\"\n      :checked=\"checked\"\n      :disabled=\"resolvedDisabled\"\n      :name=\"resolvedName\"\n      :value=\"value\"\n      :form=\"form\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      :style=\"hiddenInputStyle\"\n      @change=\"onNativeChange\"\n      @focus=\"onNativeFocus\"\n    >\n    <span\n      :id=\"fieldControlId\"\n      ref=\"control\"\n      data-gr-checkbox-indicator\n      role=\"checkbox\"\n      :aria-checked=\"indeterminate ? 'mixed' : (checked ? 'true' : 'false')\"\n      :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n      :aria-required=\"isRequired ? 'true' : undefined\"\n      :aria-readonly=\"isReadonly ? 'true' : undefined\"\n      :aria-invalid=\"isInvalid ? 'true' : undefined\"\n      :aria-describedby=\"describedBy\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"labelledBy\"\n      :tabindex=\"resolvedDisabled ? -1 : 0\"\n      :class=\"controlClassName\"\n      @keydown.space.prevent=\"toggle\"\n      @focus=\"emit('focus', $event)\"\n      @blur=\"emit('blur', $event)\"\n    >\n      <IconMinus\n        v-if=\"indeterminate\"\n        :class=\"indeterminateIconClassName\"\n      />\n      <IconCheck\n        v-else\n        :class=\"checkIconClassName\"\n      />\n    </span>\n    <span\n      v-if=\"hasLabel\"\n      :id=\"labelId\"\n      :class=\"labelClassName\"\n    >\n      <slot />\n    </span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrCheckbox — GR-примитив чекбокса с нативным скрытым `<input type=\"checkbox\">`\n * для интеграции с HTML-формами (`FormData`, `form`).\n *\n * Источник истины — нативный input: клик по нему (в т.ч. по внешнему\n * `<label for=\"...\">`) слушается через `@change` и эмитит модель. Клик по видимой\n * части компонента переключает через корневой обработчик.\n *\n * Клавиатура: `Space` переключает значение (Enter — намеренно нет, это нестандартно\n * для чекбоксов). Фокус — на самом контроле (квадратике), как у нативного чекбокса.\n *\n * A11y: `role=\"checkbox\"` + `aria-checked` (`true`/`false`/`mixed`) + `aria-disabled`.\n * Роль висит **только на контроле**, а не на всей строке с подписью — по двум причинам:\n *  - роль объявляет своих потомков презентационными, поэтому ни нативный input, ни\n *    интерактивная подпись (ссылка на политику, кнопка «показать изменения») не могут\n *    жить внутри: скринридер теряет их, axe падает на `nested-interactive`;\n *  - имя виджета берётся из подписи через `aria-labelledby`, что и позволяет держать\n *    её снаружи вместе со всем её интерактивным содержимым.\n *\n * `required` объявляется только через `aria-required`, на скрытый input он не уходит.\n * Нативная проверка потребовала бы фокуса на невалидном контроле, а он невидим и\n * `aria-hidden` — Chrome в таком случае молча отменяет сабмит всей формы\n * («An invalid form control … is not focusable»). Обязательность проверяет\n * `GrForm` правилом `required` — см. `docs/components/GrCheckbox.md`.\n *\n * Внутри `GrCheckboxGroup` значение приходит из группы: свой `modelValue` не\n * задаётся, а `value` сравнивается с массивом выбранных.\n */\nimport { computed, inject, onMounted, ref, useId, useSlots, watch } from 'vue'\nimport IconCheck from '~icons/lucide/check'\nimport IconMinus from '~icons/lucide/minus'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\n\nimport { GR_CHECKBOX_GROUP_CONTEXT } from './grCheckboxGroupContext'\nimport {\n  grCheckboxCheckIconClass,\n  grCheckboxControlClass,\n  grCheckboxIndeterminateIconClass,\n  grCheckboxLabelClass,\n  grCheckboxRootClass,\n  type GrCheckboxLabelPosition,\n  type GrCheckboxSize,\n} from './grCheckboxStyles'\n\nexport type { GrCheckboxLabelPosition, GrCheckboxSize } from './grCheckboxStyles'\n\nexport interface GrCheckboxProps {\n  /** Не задан внутри `GrCheckboxGroup` — состояние берётся из группы. */\n  modelValue?: boolean\n  disabled?: boolean\n  name?: string\n  value?: string\n  /** Обязательное поле: объявляется как `aria-required`, нативной проверки нет. */\n  required?: boolean\n  /** Только для чтения: состояние видно, но не переключается. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  form?: string\n  /** Пробрасывается на скрытый нативный `<input>`, чтобы работал `<label for=\"...\">`. */\n  id?: string\n  /** Промежуточное («смешанное») состояние: `aria-checked=\"mixed\"`, индикатор — тире. */\n  indeterminate?: boolean\n  /** Имя контрола, когда подписи в слоте нет (или она чисто визуальная). */\n  ariaLabel?: string\n  /** Сторона подписи относительно контрола. */\n  labelPosition?: GrCheckboxLabelPosition\n  /** Размер контрола. Не задан — берётся из группы, затем из `GrConfigProvider`, иначе `md`. */\n  size?: GrCheckboxSize\n}\n\nexport interface GrCheckboxEmits {\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'change', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst hiddenInputStyle = {\n  position: 'absolute',\n  opacity: '0',\n  width: '0',\n  height: '0',\n  pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrCheckboxProps>(), {\n  modelValue: undefined,\n  disabled: undefined,\n  name: undefined,\n  value: 'on',\n  required: false,\n  readonly: false,\n  invalid: false,\n  form: undefined,\n  id: undefined,\n  indeterminate: false,\n  ariaLabel: undefined,\n  labelPosition: 'end',\n  size: undefined,\n})\n\nconst emit = defineEmits<GrCheckboxEmits>()\ndefineSlots<{\n  /** Подпись флажка. Может содержать ссылки: роль остаётся на самом контроле. */\n  default?: () => any\n}>()\n\n\nconst slots = useSlots()\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(slots.default))\n\nconst group = inject(GR_CHECKBOX_GROUP_CONTEXT, null)\n\nconst checked = computed(() => {\n  if (props.modelValue !== undefined)\n    return props.modelValue\n\n  if (group)\n    return group.modelValue.value.includes(props.value)\n\n  return false\n})\n\nconst resolvedName = computed(() => props.name ?? group?.name.value)\n\n// Контекст `GrFormField`. Id поля вешается на `span[role=\"checkbox\"]` — именно он\n// виджет и держит фокус; на скрытом `aria-hidden`-инпуте он был бы бесполезен\n// (клик по подписи уводил бы фокус в невидимый элемент). Роль-виджет не является\n// labelable-элементом, поэтому имя от подписи поля приходит через `aria-labelledby`.\nconst {\n  disabled: isDisabled,\n  id: fieldControlId,\n  labelId: fieldLabelId,\n  describedBy,\n  invalid: fieldInvalid,\n  required: fieldRequired,\n  readonly: fieldReadonly,\n} = useGrFormControl(() => props)\n\n// «Или», а не `??`: `isDisabled` уже сведён к булеву (свой проп + контекст\n// поля и формы), и `??` до группы просто не дошёл бы.\nconst resolvedDisabled = computed(() => isDisabled.value || Boolean(group?.disabled.value))\n\n// `role=\"group\"` не поддерживает `aria-required` и `aria-readonly` — объявлять\n// обязательность и режим чтения группы обязаны сами чекбоксы.\nconst isRequired = computed(() => fieldRequired.value || Boolean(group?.required.value))\n\nconst isReadonly = computed(() => fieldReadonly.value || Boolean(group?.readonly.value))\n\n// Ошибка группы красит чекбоксы, но не объявляется на каждом из них: `aria-invalid`\n// уже висит на самой группе, и дублировать его на всех пунктах — значит заставить\n// диктор повторить «неверное значение» столько раз, сколько в группе чекбоксов.\nconst isInvalid = computed(() => fieldInvalid.value)\nconst showsInvalid = computed(() => isInvalid.value || Boolean(group?.invalid.value))\n\nconst labelledBy = computed(() => {\n  if (props.ariaLabel) return undefined\n  if (hasLabel.value) return labelId\n  return fieldLabelId.value\n})\n\n// Эффективный размер: локальный проп → группа → `GrConfigProvider` → `md`.\nconst resolvedSize = useGrComponentSize(\n  () => props.size ?? group?.size.value,\n  { component: 'GrCheckbox' },\n)\n\nconst rootClassName = computed(() => grCheckboxRootClass({\n  size: resolvedSize.value,\n  disabled: resolvedDisabled.value,\n  labelPosition: props.labelPosition,\n}))\n\nconst controlClassName = computed(() => grCheckboxControlClass({\n  size: resolvedSize.value,\n  active: checked.value || props.indeterminate,\n  disabled: resolvedDisabled.value,\n  invalid: showsInvalid.value,\n}))\n\nconst indeterminateIconClassName = computed(() => grCheckboxIndeterminateIconClass(resolvedSize.value))\n\nconst checkIconClassName = computed(() => grCheckboxCheckIconClass({\n  size: resolvedSize.value,\n  checked: checked.value,\n}))\n\nconst labelClassName = computed(() => grCheckboxLabelClass(resolvedSize.value))\n\n// Держим `.checked` на нативном input синхронно с состоянием — `:checked`-биндинг\n// на скрытом элементе иногда отстаёт при программных обновлениях.\nconst nativeInput = ref<HTMLInputElement | null>(null)\nconst control = ref<HTMLElement | null>(null)\nwatch(\n  checked,\n  (value) => {\n    if (nativeInput.value && nativeInput.value.checked !== value)\n      nativeInput.value.checked = value\n  },\n)\n\n// `indeterminate` можно выставить только через JS-свойство (не атрибут).\nfunction syncIndeterminate(): void {\n  if (nativeInput.value)\n    nativeInput.value.indeterminate = props.indeterminate\n}\nwatch(() => props.indeterminate, syncIndeterminate)\nonMounted(syncIndeterminate)\n\nfunction setChecked(next: boolean): void {\n  if (resolvedDisabled.value || isReadonly.value) {\n    // Нативный input мог уже переключиться от клика по внешнему `<label for>` —\n    // возвращаем его к состоянию модели, иначе форма отправит непринятое значение.\n    if (nativeInput.value)\n      nativeInput.value.checked = checked.value\n    return\n  }\n\n  if (props.modelValue !== undefined || !group) {\n    emit('update:modelValue', next)\n    emit('change', next)\n    return\n  }\n\n  group.toggle(props.value, next)\n  emit('change', next)\n}\n\nfunction toggle(): void {\n  // Из промежуточного состояния переключаемся во «включено» (стандартное поведение).\n  setChecked(props.indeterminate ? true : !checked.value)\n}\n\n// Клик по нативному input (в т.ч. по внешнему `<label for=\"...\">`) уже переключил его\n// `.checked` — берём значение как источник истины и эмитим модель.\nfunction onNativeChange(e: Event): void {\n  setChecked((e.target as HTMLInputElement).checked)\n}\n\n// `<label for>` уводит фокус на скрытый input — визуально фокус пропадает. Возвращаем\n// его на контрол, который этот фокус и показывает.\nfunction onNativeFocus(): void {\n  control.value?.focus()\n}\n\nfunction focus(): void {\n  control.value?.focus()\n}\n\nfunction blur(): void {\n  control.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Подпись держится снаружи роли-виджета именно для того, чтобы могла содержать\n// ссылки и кнопки, — поэтому клик по её интерактивному содержимому чекбокс не\n// переключает. Вложенный `<label>` считается интерактивным: он адресует\n// собственный контрол, и переключение чекбокса «заодно» было бы сюрпризом.\nfunction isInteractiveTarget(target: EventTarget | null): boolean {\n  const el = target as HTMLElement | null\n  if (!el)\n    return false\n  return !!el.closest('a,button,input,select,textarea,label,[role=\"button\"],[role=\"link\"]')\n}\n\nfunction onClick(e: MouseEvent): void {\n  if (isInteractiveTarget(e.target))\n    return\n  toggle()\n}\n</script>\n<template>\n  <div\n    data-gr-checkbox\n    :class=\"rootClassName\"\n    @click=\"onClick\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"nativeInput\"\n      type=\"checkbox\"\n      :checked=\"checked\"\n      :disabled=\"resolvedDisabled\"\n      :name=\"resolvedName\"\n      :value=\"value\"\n      :form=\"form\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      :style=\"hiddenInputStyle\"\n      @change=\"onNativeChange\"\n      @focus=\"onNativeFocus\"\n    >\n    <span\n      :id=\"fieldControlId\"\n      ref=\"control\"\n      data-gr-checkbox-indicator\n      role=\"checkbox\"\n      :aria-checked=\"indeterminate ? 'mixed' : (checked ? 'true' : 'false')\"\n      :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n      :aria-required=\"isRequired ? 'true' : undefined\"\n      :aria-readonly=\"isReadonly ? 'true' : undefined\"\n      :aria-invalid=\"isInvalid ? 'true' : undefined\"\n      :aria-describedby=\"describedBy\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"labelledBy\"\n      :tabindex=\"resolvedDisabled ? -1 : 0\"\n      :class=\"controlClassName\"\n      @keydown.space.prevent=\"toggle\"\n      @focus=\"emit('focus', $event)\"\n      @blur=\"emit('blur', $event)\"\n    >\n      <IconMinus\n        v-if=\"indeterminate\"\n        :class=\"indeterminateIconClassName\"\n      />\n      <IconCheck\n        v-else\n        :class=\"checkIconClassName\"\n      />\n    </span>\n    <span\n      v-if=\"hasLabel\"\n      :id=\"labelId\"\n      :class=\"labelClassName\"\n    >\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrCheckbox/index.js

@@ -1,3 +1,3 @@
-import { n as GR_CHECKBOX_GROUP_CONTEXT, t as GrCheckbox_default } from "./chunks/GrCheckbox-BLOp8452.js";
+import { t as GrCheckbox_default } from "./chunks/GrCheckbox-CEcHIsXM.js";
 import { n as grCheckboxSafelist, t as grCheckboxConfig } from "../../chunks/config-esdviAPL.js";
-export { GR_CHECKBOX_GROUP_CONTEXT, GrCheckbox_default as GrCheckbox, GrCheckbox_default as default, grCheckboxConfig, grCheckboxSafelist };
+export { GrCheckbox_default as GrCheckbox, GrCheckbox_default as default, grCheckboxConfig, grCheckboxSafelist };

package/dist/components/GrCheckboxGroup/chunks/GrCheckboxGroup-BOwrVcFr.js

@@ -0,0 +1,140 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { n as GR_CHECKBOX_GROUP_CONTEXT, t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-CEcHIsXM.js";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/GrCheckboxGroup/GrCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-disabled"
+];
+//#endregion
+//#region src/components/GrCheckboxGroup/GrCheckboxGroup.vue
+var GrCheckboxGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "GrCheckboxGroup",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		name: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		direction: { default: "vertical" },
+		size: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* GrCheckboxGroup — контейнер группы `GrCheckbox` с общей моделью `string[]`.
+		*
+		* Работает и через слот (ручной рендер `GrCheckbox` с собственными подписями),
+		* и через проп `options`. Дочерние чекбоксы получают из контекста выбранные
+		* значения, `name`, `size` и состояния `disabled`/`readonly`/`invalid`, поэтому
+		* свой `v-model` им не нужен.
+		*
+		* A11y: `role="group"` — не `radiogroup`. У группы чекбоксов нет roving tabindex
+		* и переезда выбора стрелками: каждый чекбокс независим и остаётся собственной
+		* остановкой `Tab`, ровно как набор нативных `<input type="checkbox">`.
+		* `role="group"` не поддерживает `aria-required` и `aria-readonly` (axe:
+		* `aria-allowed-attr`), поэтому оба состояния объявляют чекбоксы группы.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrCheckboxGroup" });
+		const { disabled: isDisabled, id: fieldId, labelId: fieldLabelId, describedBy, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const labelledBy = computed(() => props.ariaLabel ? void 0 : fieldLabelId.value);
+		const layoutClass = computed(() => props.direction === "horizontal" ? "flex flex-wrap items-center gap-4" : "grid gap-2");
+		function toggle(value, checked) {
+			if (isDisabled.value || isReadonly.value) return;
+			if (checked) {
+				if (props.modelValue.includes(value)) return;
+				commit([...props.modelValue, value]);
+				return;
+			}
+			commit(props.modelValue.filter((item) => item !== value));
+		}
+		function commit(next) {
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		const rootEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		function firstCheckbox() {
+			return rootEl.value?.querySelector("[role=\"checkbox\"]:not([aria-disabled=\"true\"])");
+		}
+		function focus() {
+			firstCheckbox()?.focus();
+		}
+		function blur() {
+			firstCheckbox()?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		provide(GR_CHECKBOX_GROUP_CONTEXT, {
+			modelValue: computed(() => props.modelValue),
+			name: computed(() => props.name),
+			disabled: computed(() => isDisabled.value),
+			readonly: isReadonly,
+			invalid: isInvalid,
+			size: resolvedSize,
+			required: isRequired,
+			toggle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(fieldId),
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-checkbox-group": "",
+				role: "group",
+				class: normalizeClass(layoutClass.value),
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": labelledBy.value,
+				"aria-describedby": unref(describedBy),
+				"aria-invalid": unref(isInvalid) ? "true" : void 0,
+				"aria-disabled": unref(isDisabled) ? "true" : void 0,
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options ?? [], (option) => {
+				return openBlock(), createBlock(GrCheckbox_default, {
+					key: option.value,
+					value: option.value,
+					disabled: option.disabled
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+					_: 2
+				}, 1032, ["value", "disabled"]);
+			}), 128))])], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrCheckboxGroup_default as t };

package/dist/components/GrCheckboxGroup/chunks/GrCheckboxGroup-BOwrVcFr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrCheckboxGroup-BOwrVcFr.js","names":[],"sources":["../../../../src/components/GrCheckboxGroup/GrCheckboxGroup.vue","../../../../src/components/GrCheckboxGroup/GrCheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrCheckboxGroup — контейнер группы `GrCheckbox` с общей моделью `string[]`.\n *\n * Работает и через слот (ручной рендер `GrCheckbox` с собственными подписями),\n * и через проп `options`. Дочерние чекбоксы получают из контекста выбранные\n * значения, `name`, `size` и состояния `disabled`/`readonly`/`invalid`, поэтому\n * свой `v-model` им не нужен.\n *\n * A11y: `role=\"group\"` — не `radiogroup`. У группы чекбоксов нет roving tabindex\n * и переезда выбора стрелками: каждый чекбокс независим и остаётся собственной\n * остановкой `Tab`, ровно как набор нативных `<input type=\"checkbox\">`.\n * `role=\"group\"` не поддерживает `aria-required` и `aria-readonly` (axe:\n * `aria-allowed-attr`), поэтому оба состояния объявляют чекбоксы группы.\n */\nimport { computed, provide, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\n\nimport GrCheckbox from '../GrCheckbox/GrCheckbox.vue'\nimport { GR_CHECKBOX_GROUP_CONTEXT } from '../GrCheckbox/grCheckboxGroupContext'\nimport type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles'\n\nexport type GrCheckboxGroupDirection = 'vertical' | 'horizontal'\n\nexport interface GrCheckboxGroupOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface GrCheckboxGroupProps {\n  modelValue: string[]\n  options?: GrCheckboxGroupOption[]\n  /** Общее имя для нативной формы: значения уйдут как повторяющиеся поля. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: выбор видно, но он не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки для всей группы. */\n  invalid?: boolean\n  /** Обязательная группа: `aria-required` объявляют сами чекбоксы. */\n  required?: boolean\n  direction?: GrCheckboxGroupDirection\n  size?: GrCheckboxSize\n  ariaLabel?: string\n}\n\nexport interface GrCheckboxGroupEmits {\n  (e: 'update:modelValue', value: string[]): void\n  (e: 'change', value: string[]): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCheckboxGroupProps>(), {\n  options: undefined,\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  direction: 'vertical',\n  size: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrCheckboxGroupEmits>()\ndefineSlots<{\n  /** Собственная разметка флажков вместо генерации из `options`. */\n  default?: () => any\n}>()\n\n\n// Эффективный размер группы: локальный проп → `GrConfigProvider` → `md`.\n// Дочерние чекбоксы получают уже разрешённое значение через контекст.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCheckboxGroup' })\n\n// Контекст `GrFormField`. Группа — не labelable-элемент, поэтому имя приходит\n// через `aria-labelledby` на подпись поля, а не через `<label for>`.\nconst {\n  disabled: isDisabled,\n  id: fieldId,\n  labelId: fieldLabelId,\n  describedBy,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst labelledBy = computed(() => (props.ariaLabel ? undefined : fieldLabelId.value))\n\nconst layoutClass = computed(() =>\n  props.direction === 'horizontal' ? 'flex flex-wrap items-center gap-4' : 'grid gap-2',\n)\n\nfunction toggle(value: string, checked: boolean): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (checked) {\n    if (props.modelValue.includes(value))\n      return\n    commit([...props.modelValue, value])\n    return\n  }\n\n  commit(props.modelValue.filter(item => item !== value))\n}\n\nfunction commit(next: string[]): void {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Фокус ходит между чекбоксами группы: без границы каждый переход давал бы\n// потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\nfunction firstCheckbox(): HTMLElement | null | undefined {\n  return rootEl.value?.querySelector<HTMLElement>('[role=\"checkbox\"]:not([aria-disabled=\"true\"])')\n}\n\nfunction focus(): void {\n  firstCheckbox()?.focus()\n}\n\nfunction blur(): void {\n  firstCheckbox()?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nprovide(GR_CHECKBOX_GROUP_CONTEXT, {\n  modelValue: computed(() => props.modelValue),\n  name: computed(() => props.name),\n  disabled: computed(() => isDisabled.value),\n  readonly: isReadonly,\n  invalid: isInvalid,\n  size: resolvedSize,\n  required: isRequired,\n  toggle,\n})\n</script>\n\n<template>\n  <div\n    :id=\"fieldId\"\n    ref=\"rootEl\"\n    data-gr-checkbox-group\n    role=\"group\"\n    :class=\"layoutClass\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :aria-invalid=\"isInvalid ? 'true' : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <slot>\n      <GrCheckbox\n        v-for=\"option in options ?? []\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </GrCheckbox>\n    </slot>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrCheckboxGroup — контейнер группы `GrCheckbox` с общей моделью `string[]`.\n *\n * Работает и через слот (ручной рендер `GrCheckbox` с собственными подписями),\n * и через проп `options`. Дочерние чекбоксы получают из контекста выбранные\n * значения, `name`, `size` и состояния `disabled`/`readonly`/`invalid`, поэтому\n * свой `v-model` им не нужен.\n *\n * A11y: `role=\"group\"` — не `radiogroup`. У группы чекбоксов нет roving tabindex\n * и переезда выбора стрелками: каждый чекбокс независим и остаётся собственной\n * остановкой `Tab`, ровно как набор нативных `<input type=\"checkbox\">`.\n * `role=\"group\"` не поддерживает `aria-required` и `aria-readonly` (axe:\n * `aria-allowed-attr`), поэтому оба состояния объявляют чекбоксы группы.\n */\nimport { computed, provide, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\n\nimport GrCheckbox from '../GrCheckbox/GrCheckbox.vue'\nimport { GR_CHECKBOX_GROUP_CONTEXT } from '../GrCheckbox/grCheckboxGroupContext'\nimport type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles'\n\nexport type GrCheckboxGroupDirection = 'vertical' | 'horizontal'\n\nexport interface GrCheckboxGroupOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface GrCheckboxGroupProps {\n  modelValue: string[]\n  options?: GrCheckboxGroupOption[]\n  /** Общее имя для нативной формы: значения уйдут как повторяющиеся поля. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: выбор видно, но он не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки для всей группы. */\n  invalid?: boolean\n  /** Обязательная группа: `aria-required` объявляют сами чекбоксы. */\n  required?: boolean\n  direction?: GrCheckboxGroupDirection\n  size?: GrCheckboxSize\n  ariaLabel?: string\n}\n\nexport interface GrCheckboxGroupEmits {\n  (e: 'update:modelValue', value: string[]): void\n  (e: 'change', value: string[]): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCheckboxGroupProps>(), {\n  options: undefined,\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  direction: 'vertical',\n  size: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrCheckboxGroupEmits>()\ndefineSlots<{\n  /** Собственная разметка флажков вместо генерации из `options`. */\n  default?: () => any\n}>()\n\n\n// Эффективный размер группы: локальный проп → `GrConfigProvider` → `md`.\n// Дочерние чекбоксы получают уже разрешённое значение через контекст.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCheckboxGroup' })\n\n// Контекст `GrFormField`. Группа — не labelable-элемент, поэтому имя приходит\n// через `aria-labelledby` на подпись поля, а не через `<label for>`.\nconst {\n  disabled: isDisabled,\n  id: fieldId,\n  labelId: fieldLabelId,\n  describedBy,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst labelledBy = computed(() => (props.ariaLabel ? undefined : fieldLabelId.value))\n\nconst layoutClass = computed(() =>\n  props.direction === 'horizontal' ? 'flex flex-wrap items-center gap-4' : 'grid gap-2',\n)\n\nfunction toggle(value: string, checked: boolean): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (checked) {\n    if (props.modelValue.includes(value))\n      return\n    commit([...props.modelValue, value])\n    return\n  }\n\n  commit(props.modelValue.filter(item => item !== value))\n}\n\nfunction commit(next: string[]): void {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Фокус ходит между чекбоксами группы: без границы каждый переход давал бы\n// потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\nfunction firstCheckbox(): HTMLElement | null | undefined {\n  return rootEl.value?.querySelector<HTMLElement>('[role=\"checkbox\"]:not([aria-disabled=\"true\"])')\n}\n\nfunction focus(): void {\n  firstCheckbox()?.focus()\n}\n\nfunction blur(): void {\n  firstCheckbox()?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nprovide(GR_CHECKBOX_GROUP_CONTEXT, {\n  modelValue: computed(() => props.modelValue),\n  name: computed(() => props.name),\n  disabled: computed(() => isDisabled.value),\n  readonly: isReadonly,\n  invalid: isInvalid,\n  size: resolvedSize,\n  required: isRequired,\n  toggle,\n})\n</script>\n\n<template>\n  <div\n    :id=\"fieldId\"\n    ref=\"rootEl\"\n    data-gr-checkbox-group\n    role=\"group\"\n    :class=\"layoutClass\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n    :aria-invalid=\"isInvalid ? 'true' : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <slot>\n      <GrCheckbox\n        v-for=\"option in options ?? []\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </GrCheckbox>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,MAAM,QAAQ;EAYd,MAAM,OAAO;EASb,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,kBAAkB,CAAC;EAI1F,MAAM,EACJ,UAAU,YACV,IAAI,SACJ,SAAS,cACT,aACA,SAAS,WACT,UAAU,YACV,UAAU,eACR,uBAAuB,KAAK;EAEhC,MAAM,aAAa,eAAgB,MAAM,YAAY,KAAA,IAAY,aAAa,KAAM;EAEpF,MAAM,cAAc,eAClB,MAAM,cAAc,eAAe,sCAAsC,YAC3E;EAEA,SAAS,OAAO,OAAe,SAAwB;GACrD,IAAI,WAAW,SAAS,WAAW,OACjC;GAEF,IAAI,SAAS;IACX,IAAI,MAAM,WAAW,SAAS,KAAK,GACjC;IACF,OAAO,CAAC,GAAG,MAAM,YAAY,KAAK,CAAC;IACnC;GACF;GAEA,OAAO,MAAM,WAAW,QAAO,SAAQ,SAAS,KAAK,CAAC;EACxD;EAEA,SAAS,OAAO,MAAsB;GACpC,KAAK,qBAAqB,IAAI;GAC9B,KAAK,UAAU,IAAI;EACrB;EAEA,MAAM,SAAS,IAAwB,IAAI;EAI3C,MAAM,EAAE,WAAW,eAAe,eAAe,QAAQ;GACvD,QAAO,UAAS,KAAK,SAAS,KAAK;GACnC,QAAO,UAAS,KAAK,QAAQ,KAAK;EACpC,CAAC;EAED,SAAS,gBAAgD;GACvD,OAAO,OAAO,OAAO,cAA2B,mDAA+C;EACjG;EAEA,SAAS,QAAc;GACrB,cAAc,CAAC,EAAE,MAAM;EACzB;EAEA,SAAS,OAAa;GACpB,cAAc,CAAC,EAAE,KAAK;EACxB;EAEA,SAAa;GAAE;GAAO;EAAK,CAAC;EAE5B,QAAQ,2BAA2B;GACjC,YAAY,eAAe,MAAM,UAAU;GAC3C,MAAM,eAAe,MAAM,IAAI;GAC/B,UAAU,eAAe,WAAW,KAAK;GACzC,UAAU;GACV,SAAS;GACT,MAAM;GACN,UAAU;GACV;EACF,CAAC;;uBAIC,mBAwBM,OAAA;IAvBH,IAAI,MAAA,OAAA;aACD;IAAJ,KAAI;IACJ,0BAAA;IACA,MAAK;IACJ,OAAK,eAAE,YAAA,KAAW;IAClB,cAAY,QAAA;IACZ,mBAAiB,WAAA;IACjB,oBAAkB,MAAA,WAAA;IAClB,gBAAc,MAAA,SAAA,IAAS,SAAY,KAAA;IACnC,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;IACrC,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;OAEX,WASO,KAAA,QAAA,WAAA,CAAA,SAAA,EAAA,UAAA,IAAA,GARL,mBAOa,UAAA,MAAA,WANM,QAAA,WAAO,CAAA,IAAjB,WAAM;wBADf,YAOa,oBAAA;KALV,KAAK,OAAO;KACZ,OAAO,OAAO;KACd,UAAU,OAAO;;4BAEA,CAAA,gBAAA,gBAAf,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/GrCheckboxGroup/index.js

@@ -1,3 +1,3 @@
-import { t as GrCheckboxGroup_default } from "./chunks/GrCheckboxGroup-CXTx2Z5H.js";
+import { t as GrCheckboxGroup_default } from "./chunks/GrCheckboxGroup-BOwrVcFr.js";
 import { t as grCheckboxGroupConfig } from "../../chunks/config-BuGlNPE9.js";
 export { GrCheckboxGroup_default as GrCheckboxGroup, GrCheckboxGroup_default as default, grCheckboxGroupConfig };