@feugene/granularity 0.48.0 → 0.50.0

package/dist/components/GrSwitch/chunks/{GrSwitch-CriHWT2A.js → GrSwitch-D7X42uIA.js}

@@ -1,10 +1,10 @@
-import { a as useGrComponentSize } from "../../../chunks/context-CPMRfwVr.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.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 { a as grSwitchSpinnerClass, i as grSwitchRootClass, o as grSwitchThumbClass, r as grSwitchLabelClass, s as grSwitchTrackClass } from "../../../chunks/config-Yy67uWHY.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref } from "vue";
+import { a as grSwitchSpinnerClass, c as grSwitchThumbIconClass, d as stateTextGhostClass, f as stateTextRoom, i as grSwitchRootClass, l as grSwitchTrackClass, o as grSwitchStateTextClass, p as stateTextStackClass, r as grSwitchLabelClass, s as grSwitchThumbClass, u as isGrSwitchStateTextSize } from "../../../chunks/config-MUkhktTP.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watchEffect } from "vue";
 //#region src/components/GrSwitch/GrSwitch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"name",
@@ -65,7 +65,17 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 		value: { default: "on" },
 		form: { default: void 0 },
 		activeBackgroundColor: { default: void 0 },
-		inactiveBackgroundColor: { default: void 0 }
+		inactiveBackgroundColor: { default: void 0 },
+		showStateText: {
+			type: Boolean,
+			default: void 0
+		},
+		checkedText: { default: void 0 },
+		uncheckedText: { default: void 0 },
+		autoWidth: {
+			type: Boolean,
+			default: void 0
+		}
 	},
 	emits: [
 		"update:modelValue",
@@ -76,6 +86,7 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const getCustomColor = (value) => value?.trim() || void 0;
 		const props = __props;
+		const slots = useSlots();
 		const field = useGrFormFieldContext();
 		const fieldId = computed(() => field?.id.value);
 		const describedBy = computed(() => field?.describedById.value);
@@ -102,8 +113,15 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 			]
 		});
 		const emit = __emit;
+		const resolvedShowStateText = useGrComponentProp("GrSwitch", "showStateText", () => props.showStateText, false);
+		const resolvedAutoWidth = useGrComponentProp("GrSwitch", "autoWidth", () => props.autoWidth, false);
+		const stateTextSize = computed(() => {
+			if (!resolvedShowStateText.value) return void 0;
+			return isGrSwitchStateTextSize(resolvedSize.value) ? resolvedSize.value : void 0;
+		});
+		const hasStateText = computed(() => stateTextSize.value !== void 0);
 		const rootClass = computed(() => grSwitchRootClass(props.labelPosition));
-		const trackClass = computed(() => grSwitchTrackClass(resolvedSize.value));
+		const trackClass = computed(() => grSwitchTrackClass(resolvedSize.value, hasStateText.value && resolvedAutoWidth.value));
 		const trackStyle = computed(() => {
 			const isChecked = props.modelValue;
 			const defaultBackgroundColor = isChecked ? "var(--gr-primary)" : "var(--gr-muted)";
@@ -120,8 +138,29 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 			checked: props.modelValue
 		}));
 		const spinnerClass = computed(() => grSwitchSpinnerClass(resolvedSize.value));
+		const thumbIconSlot = computed(() => props.modelValue ? slots["checked-icon"] : slots["unchecked-icon"]);
+		const thumbIconClass = computed(() => grSwitchThumbIconClass(resolvedSize.value));
 		const labelClass = computed(() => grSwitchLabelClass(resolvedSize.value, isDisabled.value));
 		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.switch.loading", "Saving…"));
+		const stateTextClass = computed(() => stateTextSize.value ? grSwitchStateTextClass({
+			size: stateTextSize.value,
+			checked: props.modelValue,
+			disabled: isDisabled.value,
+			autoWidth: resolvedAutoWidth.value
+		}) : "");
+		const checkedStateText = computed(() => props.checkedText ?? t("gr.switch.on", "ON"));
+		const uncheckedStateText = computed(() => props.uncheckedText ?? t("gr.switch.off", "OFF"));
+		const resolvedStateText = computed(() => props.modelValue ? checkedStateText.value : uncheckedStateText.value);
+		const ghostStateText = computed(() => props.modelValue ? uncheckedStateText.value : checkedStateText.value);
+		if (process.env.NODE_ENV !== "production") {
+			watchEffect(() => {
+				if (resolvedAutoWidth.value && !resolvedShowStateText.value) console.warn("[granularity] GrSwitch: `autoWidth` без `showStateText` ничего не делает — дорожке не подо что растягиваться.");
+			});
+			watchEffect(() => {
+				if (!resolvedShowStateText.value || isGrSwitchStateTextSize(resolvedSize.value)) return;
+				console.warn(`[granularity] GrSwitch: подпись состояния не нарисована на ступени \`${resolvedSize.value}\`: рядом с бегунком ${stateTextRoom[resolvedSize.value]}px, а минимально читаемой подписи нужен ${stateTextRoom.md}px. Подписи живут на \`md\` и \`lg\`.`);
+			});
+		}
 		const submitsValue = computed(() => props.modelValue && !isDisabled.value && Boolean(props.name));
 		function toggle() {
 			if (isDisabled.value || isReadonly.value || props.loading) return;
@@ -162,7 +201,17 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 					"data-gr-switch-track": "",
 					class: normalizeClass(trackClass.value),
 					style: normalizeStyle(trackStyle.value)
-				}, [createElementVNode("span", {
+				}, [stateTextSize.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-testid": "gr-switch-state-text",
+					"data-gr-switch-state-text": "",
+					class: normalizeClass(stateTextClass.value),
+					"aria-hidden": "true"
+				}, [createElementVNode("span", { class: normalizeClass(unref(stateTextStackClass)) }, toDisplayString(resolvedStateText.value), 3), unref(resolvedAutoWidth) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-switch-state-text-ghost": "",
+					class: normalizeClass(unref(stateTextGhostClass))
+				}, toDisplayString(ghostStateText.value), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("span", {
 					"data-testid": "gr-switch-thumb",
 					"data-gr-switch-thumb": "",
 					class: normalizeClass(thumbClass.value),
@@ -171,7 +220,12 @@ var GrSwitch_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					"data-gr-switch-spinner": "",
 					class: normalizeClass(spinnerClass.value)
-				}, null, 8, ["class"])) : createCommentVNode("", true)], 2)], 6),
+				}, null, 8, ["class"])) : thumbIconSlot.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					"data-testid": "gr-switch-thumb-icon",
+					"data-gr-switch-thumb-icon": "",
+					class: normalizeClass(thumbIconClass.value)
+				}, [__props.modelValue ? renderSlot(_ctx.$slots, "checked-icon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "unchecked-icon", {}, void 0, void 0, 1)], 2)) : createCommentVNode("", true)], 2)], 6),
 				_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					"data-gr-switch-label": "",

package/dist/components/GrSwitch/chunks/GrSwitch-D7X42uIA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSwitch-D7X42uIA.js","names":["$attrs","$slots"],"sources":["../../../../src/components/GrSwitch/GrSwitch.vue","../../../../src/components/GrSwitch/GrSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watchEffect } from 'vue'\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrComponentProp } from '../../composables/useGrComponentConfig'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grSwitchLabelClass,\n  grSwitchRootClass,\n  grSwitchSpinnerClass,\n  grSwitchStateTextClass,\n  grSwitchThumbClass,\n  grSwitchThumbIconClass,\n  grSwitchTrackClass,\n  isGrSwitchStateTextSize,\n  stateTextGhostClass,\n  stateTextRoom,\n  stateTextStackClass,\n  type GrSwitchLabelPosition,\n  type GrSwitchSize,\n  type GrSwitchStateTextSize,\n} from './grSwitchStyles'\n\nexport type {\n  GrSwitchLabelPosition,\n  GrSwitchSize,\n  GrSwitchStateTextSize,\n} from './grSwitchStyles'\n\n/**\n * Пропсы публичного GR-примитива «Switch».\n */\nexport interface GrSwitchProps {\n  /**\n   * Значение переключателя. Необязательное: без `v-model` контрол рисуется\n   * выключенным — так же, как `GrCheckbox`. Обязательный проп заставлял бы\n   * заводить `ref` даже там, где переключатель presentational.\n   */\n  modelValue?: boolean\n  disabled?: boolean\n  /** Только для чтения: состояние видно, но не переключается. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  ariaLabel?: string\n  size?: GrSwitchSize\n  /** Сторона подписи относительно дорожки. */\n  labelPosition?: GrSwitchLabelPosition\n  /** Идёт сохранение: бегунок показывает спиннер, переключение заблокировано. */\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  /** Имя поля для нативной отправки формы. Без него скрытое поле не рендерится. */\n  name?: string\n  /** Значение, уходящее в форму во включённом состоянии. */\n  value?: string\n  /** `id` формы, если переключатель лежит вне неё. */\n  form?: string\n  /** Кастомный цвет фона в активном состоянии. Если не задан — `var(--gr-primary)`. */\n  activeBackgroundColor?: string\n  /** Кастомный цвет фона в неактивном состоянии. Если не задан — `var(--gr-muted)`. */\n  inactiveBackgroundColor?: string\n  /**\n   * Подпись состояния внутри дорожки — на свободной от бегунка стороне.\n   * Помещается только на `md` и `lg`; на мелких ступенях не рисуется.\n   */\n  showStateText?: boolean\n  /** Текст включённого состояния. Без него — `gr.switch.on` из локали. */\n  checkedText?: string\n  /** Текст выключенного состояния. Без него — `gr.switch.off` из локали. */\n  uncheckedText?: string\n  /**\n   * Дорожка растягивается под подпись, а ступень размера становится нижней\n   * границей ширины. Без `showStateText` смысла не имеет: тянуться не под что.\n   */\n  autoWidth?: boolean\n}\n\nexport interface GrSwitchEmits {\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 getCustomColor = (value?: string) => value?.trim() || undefined\n\n// Скрытое поле — сосед кнопки, а не её потомок: интерактивный контент внутри\n// `<button>` невалиден. Из-за этого корень компонента — фрагмент, и атрибуты\n// потребителя надо донести до кнопки руками.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(\n  defineProps<GrSwitchProps>(),\n  {\n    modelValue: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    size: undefined,\n    labelPosition: 'end',\n    loading: false,\n    loadingText: undefined,\n    name: undefined,\n    value: 'on',\n    form: undefined,\n    activeBackgroundColor: undefined,\n    inactiveBackgroundColor: undefined,\n    // `undefined`, а не `false`: Vue приводит отсутствующий boolean к `false`,\n    // и дефолт из `GrConfigProvider` до компонента бы не доехал.\n    showStateText: undefined,\n    checkedText: undefined,\n    uncheckedText: undefined,\n    autoWidth: undefined,\n  },\n)\n\n// Контекст `GrFormField`: id для `<label for>`, описание ошибкой, невалидность.\n// `<button>` — labelable-элемент, поэтому клик по подписи фокусирует переключатель.\nconst slots = defineSlots<{\n  /** Подпись переключателя. */\n  'default'?: () => any\n  /**\n   * Знак на бегунке во включённом состоянии — галочка, замок, что угодно.\n   *\n   * Размер задаёт обёртка по ступени `size`, поэтому содержимое слота тянется\n   * до неё: `class=\"h-full w-full\"`, как у `GrBadge` и `GrChip`.\n   *\n   * Знак декоративен — бегунок целиком `aria-hidden`, а состояние диктор берёт\n   * из `aria-checked`. Смысла, которого нет больше нигде, сюда класть нельзя.\n   */\n  'checked-icon'?: () => any\n  /** То же для выключенного состояния. Слоты независимы. */\n  'unchecked-icon'?: () => any\n}>()\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst { t } = useGranularityTranslations()\n\nconst rootEl = ref<HTMLButtonElement | null>(null)\n\nfunction focus(): void {\n  rootEl.value?.focus()\n}\n\nfunction blur(): void {\n  rootEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n  component: 'GrSwitch',\n  supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrSwitchEmits>()\n\nconst resolvedShowStateText = useGrComponentProp(\n  'GrSwitch',\n  'showStateText',\n  () => props.showStateText,\n  false,\n)\n\nconst resolvedAutoWidth = useGrComponentProp(\n  'GrSwitch',\n  'autoWidth',\n  () => props.autoWidth,\n  false,\n)\n\n// Ступень, на которой подпись помещается в дорожку, — иначе её нет вовсе.\nconst stateTextSize = computed<GrSwitchStateTextSize | undefined>(() => {\n  if (!resolvedShowStateText.value)\n    return undefined\n\n  return isGrSwitchStateTextSize(resolvedSize.value) ? resolvedSize.value : undefined\n})\n\nconst hasStateText = computed(() => stateTextSize.value !== undefined)\n\nconst rootClass = computed(() => grSwitchRootClass(props.labelPosition))\n\nconst trackClass = computed(() => grSwitchTrackClass(resolvedSize.value, hasStateText.value && resolvedAutoWidth.value))\n\nconst trackStyle = computed(() => {\n  const isChecked = props.modelValue\n  const defaultBackgroundColor = isChecked ? 'var(--gr-primary)' : 'var(--gr-muted)'\n  const customBackgroundColor = getCustomColor(\n    isChecked ? props.activeBackgroundColor : props.inactiveBackgroundColor,\n  )\n  // Недоступность гасится токеном и перебивает кастомный цвет: иначе выключенный\n  // переключатель остался бы таким же ярким, как рабочий.\n  const backgroundColor = isDisabled.value\n    ? 'var(--gr-disabled-bg)'\n    : customBackgroundColor ?? defaultBackgroundColor\n\n  return {\n    '--gr-switch-track-bg': backgroundColor,\n    '--gr-switch-track-brd': isDisabled.value\n      ? 'var(--gr-disabled-brd)'\n      : customBackgroundColor\n        ? backgroundColor\n        : isChecked\n          ? 'var(--gr-primary)'\n          : 'var(--gr-brd)',\n    'backgroundColor': 'var(--gr-switch-track-bg)',\n  }\n})\n\nconst thumbClass = computed(() => grSwitchThumbClass({ size: resolvedSize.value, checked: props.modelValue }))\n\nconst spinnerClass = computed(() => grSwitchSpinnerClass(resolvedSize.value))\n\n// Спиннер и иконка занимают центр бегунка: пока идёт запрос, важнее «состояние\n// меняется», чем «каким оно стало».\nconst thumbIconSlot = computed(() => (props.modelValue ? slots['checked-icon'] : slots['unchecked-icon']))\n\nconst thumbIconClass = computed(() => grSwitchThumbIconClass(resolvedSize.value))\n\nconst labelClass = computed(() => grSwitchLabelClass(resolvedSize.value, isDisabled.value))\n\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.switch.loading', 'Saving…'))\n\nconst stateTextClass = computed(() => (stateTextSize.value\n  ? grSwitchStateTextClass({\n      size: stateTextSize.value,\n      checked: props.modelValue,\n      disabled: isDisabled.value,\n      autoWidth: resolvedAutoWidth.value,\n    })\n  : ''))\n\nconst checkedStateText = computed(() => props.checkedText ?? t('gr.switch.on', 'ON'))\nconst uncheckedStateText = computed(() => props.uncheckedText ?? t('gr.switch.off', 'OFF'))\n\nconst resolvedStateText = computed(() => (\n  props.modelValue ? checkedStateText.value : uncheckedStateText.value\n))\n\n// Невидимый дубль держит ширину: без него дорожка меняла бы размер на каждом\n// щелчке, потому что «вкл» и «выкл» почти никогда не равны по ширине.\nconst ghostStateText = computed(() => (\n  props.modelValue ? uncheckedStateText.value : checkedStateText.value\n))\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (resolvedAutoWidth.value && !resolvedShowStateText.value) {\n      console.warn(\n        '[granularity] GrSwitch: `autoWidth` без `showStateText` ничего не делает — '\n        + 'дорожке не подо что растягиваться.',\n      )\n    }\n  })\n\n  watchEffect(() => {\n    if (!resolvedShowStateText.value || isGrSwitchStateTextSize(resolvedSize.value))\n      return\n\n    console.warn(\n      `[granularity] GrSwitch: подпись состояния не нарисована на ступени \\`${resolvedSize.value}\\`: `\n      + `рядом с бегунком ${stateTextRoom[resolvedSize.value]}px, а минимально читаемой подписи нужен `\n      + `${stateTextRoom.md}px. Подписи живут на \\`md\\` и \\`lg\\`.`,\n    )\n  })\n}\n\n// Выключенный переключатель не отправляется вовсе — так устроен чекбокс в HTML,\n// и сервер отличает «выкл» по отсутствию ключа.\nconst submitsValue = computed(\n  () => props.modelValue && !isDisabled.value && Boolean(props.name),\n)\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value || props.loading) {\n    return\n  }\n\n  const next = !props.modelValue\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n</script>\n\n<template>\n  <input\n      v-if=\"submitsValue\"\n      type=\"hidden\"\n      :name=\"name\"\n      :value=\"value\"\n      :form=\"form\"\n  >\n\n  <button\n      :id=\"fieldId\"\n      ref=\"rootEl\"\n      v-bind=\"$attrs\"\n      type=\"button\"\n      role=\"switch\"\n      data-gr-switch\n      :aria-checked=\"modelValue ? 'true' : 'false'\"\n      :aria-label=\"ariaLabel\"\n      :aria-describedby=\"describedBy\"\n      :aria-invalid=\"isInvalid ? 'true' : undefined\"\n      :aria-required=\"isRequired ? 'true' : undefined\"\n      :aria-readonly=\"isReadonly ? 'true' : undefined\"\n      :aria-busy=\"loading ? 'true' : undefined\"\n      :disabled=\"isDisabled\"\n      :class=\"rootClass\"\n      @click=\"toggle\"\n      @focus=\"emit('focus', $event)\"\n      @blur=\"emit('blur', $event)\"\n  >\n    <span\n        data-testid=\"gr-switch-track\"\n        data-gr-switch-track\n        :class=\"trackClass\"\n        :style=\"trackStyle\"\n    >\n      <span\n          v-if=\"stateTextSize\"\n          data-testid=\"gr-switch-state-text\"\n          data-gr-switch-state-text\n          :class=\"stateTextClass\"\n          aria-hidden=\"true\"\n      >\n        <span :class=\"stateTextStackClass\">{{ resolvedStateText }}</span>\n        <span\n            v-if=\"resolvedAutoWidth\"\n            data-gr-switch-state-text-ghost\n            :class=\"stateTextGhostClass\"\n        >{{ ghostStateText }}</span>\n      </span>\n      <span\n          data-testid=\"gr-switch-thumb\"\n          data-gr-switch-thumb\n          :class=\"thumbClass\"\n          aria-hidden=\"true\"\n      >\n        <IconLoader v-if=\"loading\" data-gr-switch-spinner :class=\"spinnerClass\" />\n        <span\n            v-else-if=\"thumbIconSlot\"\n            data-testid=\"gr-switch-thumb-icon\"\n            data-gr-switch-thumb-icon\n            :class=\"thumbIconClass\"\n        >\n          <slot v-if=\"modelValue\" name=\"checked-icon\" />\n          <slot v-else name=\"unchecked-icon\" />\n        </span>\n      </span>\n    </span>\n    <span\n        v-if=\"$slots.default\"\n        data-gr-switch-label\n        :class=\"labelClass\"\n    >\n      <slot />\n    </span>\n    <span v-if=\"loading\" data-gr-switch-loading-text class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watchEffect } from 'vue'\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrComponentProp } from '../../composables/useGrComponentConfig'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grSwitchLabelClass,\n  grSwitchRootClass,\n  grSwitchSpinnerClass,\n  grSwitchStateTextClass,\n  grSwitchThumbClass,\n  grSwitchThumbIconClass,\n  grSwitchTrackClass,\n  isGrSwitchStateTextSize,\n  stateTextGhostClass,\n  stateTextRoom,\n  stateTextStackClass,\n  type GrSwitchLabelPosition,\n  type GrSwitchSize,\n  type GrSwitchStateTextSize,\n} from './grSwitchStyles'\n\nexport type {\n  GrSwitchLabelPosition,\n  GrSwitchSize,\n  GrSwitchStateTextSize,\n} from './grSwitchStyles'\n\n/**\n * Пропсы публичного GR-примитива «Switch».\n */\nexport interface GrSwitchProps {\n  /**\n   * Значение переключателя. Необязательное: без `v-model` контрол рисуется\n   * выключенным — так же, как `GrCheckbox`. Обязательный проп заставлял бы\n   * заводить `ref` даже там, где переключатель presentational.\n   */\n  modelValue?: boolean\n  disabled?: boolean\n  /** Только для чтения: состояние видно, но не переключается. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  ariaLabel?: string\n  size?: GrSwitchSize\n  /** Сторона подписи относительно дорожки. */\n  labelPosition?: GrSwitchLabelPosition\n  /** Идёт сохранение: бегунок показывает спиннер, переключение заблокировано. */\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  /** Имя поля для нативной отправки формы. Без него скрытое поле не рендерится. */\n  name?: string\n  /** Значение, уходящее в форму во включённом состоянии. */\n  value?: string\n  /** `id` формы, если переключатель лежит вне неё. */\n  form?: string\n  /** Кастомный цвет фона в активном состоянии. Если не задан — `var(--gr-primary)`. */\n  activeBackgroundColor?: string\n  /** Кастомный цвет фона в неактивном состоянии. Если не задан — `var(--gr-muted)`. */\n  inactiveBackgroundColor?: string\n  /**\n   * Подпись состояния внутри дорожки — на свободной от бегунка стороне.\n   * Помещается только на `md` и `lg`; на мелких ступенях не рисуется.\n   */\n  showStateText?: boolean\n  /** Текст включённого состояния. Без него — `gr.switch.on` из локали. */\n  checkedText?: string\n  /** Текст выключенного состояния. Без него — `gr.switch.off` из локали. */\n  uncheckedText?: string\n  /**\n   * Дорожка растягивается под подпись, а ступень размера становится нижней\n   * границей ширины. Без `showStateText` смысла не имеет: тянуться не под что.\n   */\n  autoWidth?: boolean\n}\n\nexport interface GrSwitchEmits {\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 getCustomColor = (value?: string) => value?.trim() || undefined\n\n// Скрытое поле — сосед кнопки, а не её потомок: интерактивный контент внутри\n// `<button>` невалиден. Из-за этого корень компонента — фрагмент, и атрибуты\n// потребителя надо донести до кнопки руками.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(\n  defineProps<GrSwitchProps>(),\n  {\n    modelValue: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    size: undefined,\n    labelPosition: 'end',\n    loading: false,\n    loadingText: undefined,\n    name: undefined,\n    value: 'on',\n    form: undefined,\n    activeBackgroundColor: undefined,\n    inactiveBackgroundColor: undefined,\n    // `undefined`, а не `false`: Vue приводит отсутствующий boolean к `false`,\n    // и дефолт из `GrConfigProvider` до компонента бы не доехал.\n    showStateText: undefined,\n    checkedText: undefined,\n    uncheckedText: undefined,\n    autoWidth: undefined,\n  },\n)\n\n// Контекст `GrFormField`: id для `<label for>`, описание ошибкой, невалидность.\n// `<button>` — labelable-элемент, поэтому клик по подписи фокусирует переключатель.\nconst slots = defineSlots<{\n  /** Подпись переключателя. */\n  'default'?: () => any\n  /**\n   * Знак на бегунке во включённом состоянии — галочка, замок, что угодно.\n   *\n   * Размер задаёт обёртка по ступени `size`, поэтому содержимое слота тянется\n   * до неё: `class=\"h-full w-full\"`, как у `GrBadge` и `GrChip`.\n   *\n   * Знак декоративен — бегунок целиком `aria-hidden`, а состояние диктор берёт\n   * из `aria-checked`. Смысла, которого нет больше нигде, сюда класть нельзя.\n   */\n  'checked-icon'?: () => any\n  /** То же для выключенного состояния. Слоты независимы. */\n  'unchecked-icon'?: () => any\n}>()\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst { t } = useGranularityTranslations()\n\nconst rootEl = ref<HTMLButtonElement | null>(null)\n\nfunction focus(): void {\n  rootEl.value?.focus()\n}\n\nfunction blur(): void {\n  rootEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n  component: 'GrSwitch',\n  supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrSwitchEmits>()\n\nconst resolvedShowStateText = useGrComponentProp(\n  'GrSwitch',\n  'showStateText',\n  () => props.showStateText,\n  false,\n)\n\nconst resolvedAutoWidth = useGrComponentProp(\n  'GrSwitch',\n  'autoWidth',\n  () => props.autoWidth,\n  false,\n)\n\n// Ступень, на которой подпись помещается в дорожку, — иначе её нет вовсе.\nconst stateTextSize = computed<GrSwitchStateTextSize | undefined>(() => {\n  if (!resolvedShowStateText.value)\n    return undefined\n\n  return isGrSwitchStateTextSize(resolvedSize.value) ? resolvedSize.value : undefined\n})\n\nconst hasStateText = computed(() => stateTextSize.value !== undefined)\n\nconst rootClass = computed(() => grSwitchRootClass(props.labelPosition))\n\nconst trackClass = computed(() => grSwitchTrackClass(resolvedSize.value, hasStateText.value && resolvedAutoWidth.value))\n\nconst trackStyle = computed(() => {\n  const isChecked = props.modelValue\n  const defaultBackgroundColor = isChecked ? 'var(--gr-primary)' : 'var(--gr-muted)'\n  const customBackgroundColor = getCustomColor(\n    isChecked ? props.activeBackgroundColor : props.inactiveBackgroundColor,\n  )\n  // Недоступность гасится токеном и перебивает кастомный цвет: иначе выключенный\n  // переключатель остался бы таким же ярким, как рабочий.\n  const backgroundColor = isDisabled.value\n    ? 'var(--gr-disabled-bg)'\n    : customBackgroundColor ?? defaultBackgroundColor\n\n  return {\n    '--gr-switch-track-bg': backgroundColor,\n    '--gr-switch-track-brd': isDisabled.value\n      ? 'var(--gr-disabled-brd)'\n      : customBackgroundColor\n        ? backgroundColor\n        : isChecked\n          ? 'var(--gr-primary)'\n          : 'var(--gr-brd)',\n    'backgroundColor': 'var(--gr-switch-track-bg)',\n  }\n})\n\nconst thumbClass = computed(() => grSwitchThumbClass({ size: resolvedSize.value, checked: props.modelValue }))\n\nconst spinnerClass = computed(() => grSwitchSpinnerClass(resolvedSize.value))\n\n// Спиннер и иконка занимают центр бегунка: пока идёт запрос, важнее «состояние\n// меняется», чем «каким оно стало».\nconst thumbIconSlot = computed(() => (props.modelValue ? slots['checked-icon'] : slots['unchecked-icon']))\n\nconst thumbIconClass = computed(() => grSwitchThumbIconClass(resolvedSize.value))\n\nconst labelClass = computed(() => grSwitchLabelClass(resolvedSize.value, isDisabled.value))\n\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.switch.loading', 'Saving…'))\n\nconst stateTextClass = computed(() => (stateTextSize.value\n  ? grSwitchStateTextClass({\n      size: stateTextSize.value,\n      checked: props.modelValue,\n      disabled: isDisabled.value,\n      autoWidth: resolvedAutoWidth.value,\n    })\n  : ''))\n\nconst checkedStateText = computed(() => props.checkedText ?? t('gr.switch.on', 'ON'))\nconst uncheckedStateText = computed(() => props.uncheckedText ?? t('gr.switch.off', 'OFF'))\n\nconst resolvedStateText = computed(() => (\n  props.modelValue ? checkedStateText.value : uncheckedStateText.value\n))\n\n// Невидимый дубль держит ширину: без него дорожка меняла бы размер на каждом\n// щелчке, потому что «вкл» и «выкл» почти никогда не равны по ширине.\nconst ghostStateText = computed(() => (\n  props.modelValue ? uncheckedStateText.value : checkedStateText.value\n))\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (resolvedAutoWidth.value && !resolvedShowStateText.value) {\n      console.warn(\n        '[granularity] GrSwitch: `autoWidth` без `showStateText` ничего не делает — '\n        + 'дорожке не подо что растягиваться.',\n      )\n    }\n  })\n\n  watchEffect(() => {\n    if (!resolvedShowStateText.value || isGrSwitchStateTextSize(resolvedSize.value))\n      return\n\n    console.warn(\n      `[granularity] GrSwitch: подпись состояния не нарисована на ступени \\`${resolvedSize.value}\\`: `\n      + `рядом с бегунком ${stateTextRoom[resolvedSize.value]}px, а минимально читаемой подписи нужен `\n      + `${stateTextRoom.md}px. Подписи живут на \\`md\\` и \\`lg\\`.`,\n    )\n  })\n}\n\n// Выключенный переключатель не отправляется вовсе — так устроен чекбокс в HTML,\n// и сервер отличает «выкл» по отсутствию ключа.\nconst submitsValue = computed(\n  () => props.modelValue && !isDisabled.value && Boolean(props.name),\n)\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value || props.loading) {\n    return\n  }\n\n  const next = !props.modelValue\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n</script>\n\n<template>\n  <input\n      v-if=\"submitsValue\"\n      type=\"hidden\"\n      :name=\"name\"\n      :value=\"value\"\n      :form=\"form\"\n  >\n\n  <button\n      :id=\"fieldId\"\n      ref=\"rootEl\"\n      v-bind=\"$attrs\"\n      type=\"button\"\n      role=\"switch\"\n      data-gr-switch\n      :aria-checked=\"modelValue ? 'true' : 'false'\"\n      :aria-label=\"ariaLabel\"\n      :aria-describedby=\"describedBy\"\n      :aria-invalid=\"isInvalid ? 'true' : undefined\"\n      :aria-required=\"isRequired ? 'true' : undefined\"\n      :aria-readonly=\"isReadonly ? 'true' : undefined\"\n      :aria-busy=\"loading ? 'true' : undefined\"\n      :disabled=\"isDisabled\"\n      :class=\"rootClass\"\n      @click=\"toggle\"\n      @focus=\"emit('focus', $event)\"\n      @blur=\"emit('blur', $event)\"\n  >\n    <span\n        data-testid=\"gr-switch-track\"\n        data-gr-switch-track\n        :class=\"trackClass\"\n        :style=\"trackStyle\"\n    >\n      <span\n          v-if=\"stateTextSize\"\n          data-testid=\"gr-switch-state-text\"\n          data-gr-switch-state-text\n          :class=\"stateTextClass\"\n          aria-hidden=\"true\"\n      >\n        <span :class=\"stateTextStackClass\">{{ resolvedStateText }}</span>\n        <span\n            v-if=\"resolvedAutoWidth\"\n            data-gr-switch-state-text-ghost\n            :class=\"stateTextGhostClass\"\n        >{{ ghostStateText }}</span>\n      </span>\n      <span\n          data-testid=\"gr-switch-thumb\"\n          data-gr-switch-thumb\n          :class=\"thumbClass\"\n          aria-hidden=\"true\"\n      >\n        <IconLoader v-if=\"loading\" data-gr-switch-spinner :class=\"spinnerClass\" />\n        <span\n            v-else-if=\"thumbIconSlot\"\n            data-testid=\"gr-switch-thumb-icon\"\n            data-gr-switch-thumb-icon\n            :class=\"thumbIconClass\"\n        >\n          <slot v-if=\"modelValue\" name=\"checked-icon\" />\n          <slot v-else name=\"unchecked-icon\" />\n        </span>\n      </span>\n    </span>\n    <span\n        v-if=\"$slots.default\"\n        data-gr-switch-label\n        :class=\"labelClass\"\n    >\n      <slot />\n    </span>\n    <span v-if=\"loading\" data-gr-switch-loading-text class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </button>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSwitch/index.js

@@ -1,3 +1,3 @@
-import { n as grSwitchSafelist, t as grSwitchConfig } from "../../chunks/config-Yy67uWHY.js";
-import { t as GrSwitch_default } from "./chunks/GrSwitch-CriHWT2A.js";
+import { n as grSwitchSafelist, t as grSwitchConfig } from "../../chunks/config-MUkhktTP.js";
+import { t as GrSwitch_default } from "./chunks/GrSwitch-D7X42uIA.js";
 export { GrSwitch_default as GrSwitch, GrSwitch_default as default, grSwitchConfig, grSwitchSafelist };

package/dist/components/GrTabPanels/chunks/GrTabPanels-BDt5oVdd.js

@@ -0,0 +1,30 @@
+import { computed, createElementBlock, defineComponent, openBlock, provide, renderSlot, useId } from "vue";
+//#region src/components/GrTabPanels/context.ts
+var GR_TAB_PANELS_KEY = Symbol("gr-tab-panels");
+//#endregion
+//#region src/components/GrTabPanels/GrTabPanels.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-gr-tab-panels": "" };
+//#endregion
+//#region src/components/GrTabPanels/GrTabPanels.vue
+var GrTabPanels_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTabPanels",
+	props: {
+		modelValue: {},
+		idBase: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const generatedIdBase = useId();
+		const resolvedIdBase = computed(() => props.idBase ?? generatedIdBase);
+		provide(GR_TAB_PANELS_KEY, {
+			activeValue: computed(() => props.modelValue),
+			idBase: resolvedIdBase,
+			tabsLinked: computed(() => props.idBase != null)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+export { GR_TAB_PANELS_KEY as n, GrTabPanels_default as t };

package/dist/components/GrTabPanels/chunks/GrTabPanels-BDt5oVdd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTabPanels-BDt5oVdd.js","names":[],"sources":["../../../../src/components/GrTabPanels/context.ts","../../../../src/components/GrTabPanels/GrTabPanels.vue","../../../../src/components/GrTabPanels/GrTabPanels.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\n/** Контекст, который `GrTabPanels` предоставляет своим `GrTabPanel`. */\nexport interface GrTabPanelsContext {\n  /** Значение активной вкладки (совпадает с `modelValue` у `GrTabs`). */\n  activeValue: ComputedRef<string>\n  /** Общая база id для связки `tab`↔`tabpanel` (см. проп `idBase` у `GrTabs`). */\n  idBase: ComputedRef<string>\n  /**\n   * Задал ли `idBase` потребитель. Без него вкладок с подходящими id не\n   * существует: `GrTabs` проставляет их **только** при явном `idBase`, — и\n   * ссылаться на них панели нечем.\n   */\n  tabsLinked: ComputedRef<boolean>\n}\n\nexport const GR_TAB_PANELS_KEY: InjectionKey<GrTabPanelsContext> = Symbol('gr-tab-panels')\n","<script setup lang=\"ts\">\nimport { computed, provide, useId } from 'vue'\n\nimport { GR_TAB_PANELS_KEY } from './context'\n\nexport interface GrTabPanelsProps {\n  modelValue: string\n  idBase?: string\n}\n\n/**\n * GrTabPanels — контейнер `tabpanel`-ов, companion к `GrTabs`.\n *\n * Показывает панель, чьё `value` совпадает с `modelValue`, и связывает её с\n * соответствующей вкладкой по ARIA (`role=\"tabpanel\"`, `aria-labelledby`).\n *\n * Для полной связки `tab`↔`tabpanel` передайте **одинаковый `idBase`** и в\n * `GrTabs`, и в `GrTabPanels` — тогда id вкладок и панелей совпадут\n * (`aria-controls` ↔ `aria-labelledby`).\n */\nconst props = withDefaults(\n  defineProps<GrTabPanelsProps>(),\n  {\n    idBase: undefined,\n  },\n)\n\nconst generatedIdBase = useId()\n// `computed`, а не значение: `idBase` — реактивный проп, и вычисленный один раз\n// при setup он оставил бы панели со старыми id, пока `GrTabs` уехал бы на новые.\n// Связка `aria-controls` ↔ `aria-labelledby` разъезжается молча.\nconst resolvedIdBase = computed(() => props.idBase ?? generatedIdBase)\n\nprovide(GR_TAB_PANELS_KEY, {\n  activeValue: computed(() => props.modelValue),\n  idBase: resolvedIdBase,\n  tabsLinked: computed(() => props.idBase != null),\n})\n\ndefineSlots<{\n  /** Панели (`GrTabPanel`). */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <div data-gr-tab-panels>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, useId } from 'vue'\n\nimport { GR_TAB_PANELS_KEY } from './context'\n\nexport interface GrTabPanelsProps {\n  modelValue: string\n  idBase?: string\n}\n\n/**\n * GrTabPanels — контейнер `tabpanel`-ов, companion к `GrTabs`.\n *\n * Показывает панель, чьё `value` совпадает с `modelValue`, и связывает её с\n * соответствующей вкладкой по ARIA (`role=\"tabpanel\"`, `aria-labelledby`).\n *\n * Для полной связки `tab`↔`tabpanel` передайте **одинаковый `idBase`** и в\n * `GrTabs`, и в `GrTabPanels` — тогда id вкладок и панелей совпадут\n * (`aria-controls` ↔ `aria-labelledby`).\n */\nconst props = withDefaults(\n  defineProps<GrTabPanelsProps>(),\n  {\n    idBase: undefined,\n  },\n)\n\nconst generatedIdBase = useId()\n// `computed`, а не значение: `idBase` — реактивный проп, и вычисленный один раз\n// при setup он оставил бы панели со старыми id, пока `GrTabs` уехал бы на новые.\n// Связка `aria-controls` ↔ `aria-labelledby` разъезжается молча.\nconst resolvedIdBase = computed(() => props.idBase ?? generatedIdBase)\n\nprovide(GR_TAB_PANELS_KEY, {\n  activeValue: computed(() => props.modelValue),\n  idBase: resolvedIdBase,\n  tabsLinked: computed(() => props.idBase != null),\n})\n\ndefineSlots<{\n  /** Панели (`GrTabPanel`). */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <div data-gr-tab-panels>\n    <slot />\n  </div>\n</template>\n"],"mappings":";;AAgBA,IAAa,oBAAsD,OAAO,eAAe;;;;;;;;;;;;;ECIzF,MAAM,QAAQ;EAOd,MAAM,kBAAkB,MAAM;EAI9B,MAAM,iBAAiB,eAAe,MAAM,UAAU,eAAe;EAErE,QAAQ,mBAAmB;GACzB,aAAa,eAAe,MAAM,UAAU;GAC5C,QAAQ;GACR,YAAY,eAAe,MAAM,UAAU,IAAI;EACjD,CAAC;;GASC,OAAA,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/GrTabPanels/chunks/GrTabPanels-BJvAflnA.js

@@ -0,0 +1,83 @@
+import { n as GR_TAB_PANELS_KEY } from "./GrTabPanels-BDt5oVdd.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, onMounted, openBlock, ref, renderSlot, watch, withCtx } from "vue";
+//#region src/components/GrTabPanels/GrTabPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-labelledby",
+	"hidden",
+	"tabindex"
+];
+//#endregion
+//#region src/components/GrTabPanels/GrTabPanel.vue
+var GrTabPanel_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTabPanel",
+	props: {
+		value: {},
+		keepAlive: {
+			type: Boolean,
+			default: false
+		},
+		lazy: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ctx = inject(GR_TAB_PANELS_KEY, null);
+		const isActive = computed(() => ctx ? ctx.activeValue.value === props.value : true);
+		const panelId = computed(() => ctx ? `${ctx.idBase.value}-panel-${props.value}` : void 0);
+		const tabId = computed(() => ctx ? `${ctx.idBase.value}-tab-${props.value}` : void 0);
+		/**
+		* Без общего `idBase` вкладки с таким id не существует, и `aria-labelledby`
+		* указывал бы в пустоту. Панель без имени — потеря, а ссылка в никуда — ложь:
+		* диктор объявляет её пустой строкой вместо «нет подписи», и починить это
+		* потребитель уже не может.
+		*/
+		const labelledBy = computed(() => ctx?.tabsLinked.value ? tabId.value : void 0);
+		const wasActive = ref(isActive.value);
+		watch(isActive, (active) => {
+			if (active) wasActive.value = true;
+		});
+		const shouldRender = computed(() => {
+			if (isActive.value) return true;
+			if (!props.keepAlive) return false;
+			return props.lazy ? wasActive.value : true;
+		});
+		/**
+		* Панель ссылается на вкладку по id, а существует ли вкладка — знает только
+		* приложение: `GrTabs` с другим (или отсутствующим) `idBase` оставит
+		* `aria-labelledby` висеть в пустоту. Проверяем это в dev, как `GrFormField`
+		* проверяет забытый контрол.
+		*/
+		if (process.env.NODE_ENV !== "production") onMounted(() => {
+			if (!ctx || !isActive.value) return;
+			if (!ctx.tabsLinked.value) {
+				console.warn("[GrTabPanel] Панель не связана с вкладкой: у неё нет доступного имени. Передайте один и тот же `idBase` в `GrTabs` и `GrTabPanels`.");
+				return;
+			}
+			if (tabId.value && !document.getElementById(tabId.value)) console.warn(`[GrTabPanel] Вкладки с id "${tabId.value}" нет в документе: \`aria-labelledby\` ссылается в пустоту. Передайте один и тот же \`idBase\` в \`GrTabs\` и \`GrTabPanels\`.`);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
+				"enter-from-class": "transform opacity-0 translate-y-1",
+				"enter-to-class": "transform opacity-100 translate-y-0"
+			}, {
+				default: withCtx(() => [shouldRender.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: panelId.value,
+					role: "tabpanel",
+					"data-gr-tab-panel": "",
+					"aria-labelledby": labelledBy.value,
+					hidden: __props.keepAlive && !isActive.value ? true : void 0,
+					tabindex: isActive.value ? 0 : void 0,
+					class: "rounded-[var(--gr-radius-md)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]"
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { GrTabPanel_default as t };

package/dist/components/GrTabPanels/chunks/GrTabPanels-BJvAflnA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTabPanels-BJvAflnA.js","names":[],"sources":["../../../../src/components/GrTabPanels/GrTabPanel.vue","../../../../src/components/GrTabPanels/GrTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, ref, watch } from 'vue'\n\nimport { GR_TAB_PANELS_KEY } from './context'\n\nexport interface GrTabPanelProps {\n  value: string\n  keepAlive?: boolean\n  /**\n     * Не монтировать содержимое, пока панель не показали впервые. Имеет смысл\n     * вместе с `keepAlive`: без него неактивная панель и так не в DOM.\n     */\n  lazy?: boolean\n}\n\n/**\n * GrTabPanel — одна панель внутри `GrTabPanels`. Показывается, когда её `value`\n * равно активной вкладке. `keepAlive` оставляет неактивные панели в DOM\n * (скрытыми через `hidden`) — полезно, чтобы не терять состояние форм.\n */\nconst props = withDefaults(\n  defineProps<GrTabPanelProps>(),\n  {\n    keepAlive: false,\n    lazy: false,\n  },\n)\n\nconst ctx = inject(GR_TAB_PANELS_KEY, null)\n\nconst isActive = computed(() => (ctx ? ctx.activeValue.value === props.value : true))\n// id совпадают с id вкладок `GrTabs` при одинаковом `idBase` → корректная ARIA-связка.\nconst panelId = computed(() => (ctx ? `${ctx.idBase.value}-panel-${props.value}` : undefined))\nconst tabId = computed(() => (ctx ? `${ctx.idBase.value}-tab-${props.value}` : undefined))\n\n/**\n * Без общего `idBase` вкладки с таким id не существует, и `aria-labelledby`\n * указывал бы в пустоту. Панель без имени — потеря, а ссылка в никуда — ложь:\n * диктор объявляет её пустой строкой вместо «нет подписи», и починить это\n * потребитель уже не может.\n */\nconst labelledBy = computed(() => (ctx?.tabsLinked.value ? tabId.value : undefined))\n\nconst wasActive = ref(isActive.value)\nwatch(isActive, (active) => {\n  if (active)\n    wasActive.value = true\n})\n\nconst shouldRender = computed(() => {\n  if (isActive.value)\n    return true\n  if (!props.keepAlive)\n    return false\n  return props.lazy ? wasActive.value : true\n})\n\n/**\n * Панель ссылается на вкладку по id, а существует ли вкладка — знает только\n * приложение: `GrTabs` с другим (или отсутствующим) `idBase` оставит\n * `aria-labelledby` висеть в пустоту. Проверяем это в dev, как `GrFormField`\n * проверяет забытый контрол.\n */\nif (__GR_DEV__) {\n  onMounted(() => {\n    if (!ctx || !isActive.value)\n      return\n\n    if (!ctx.tabsLinked.value) {\n      console.warn(\n        '[GrTabPanel] Панель не связана с вкладкой: у неё нет доступного имени. '\n        + 'Передайте один и тот же `idBase` в `GrTabs` и `GrTabPanels`.',\n      )\n      return\n    }\n\n    if (tabId.value && !document.getElementById(tabId.value)) {\n      console.warn(\n        `[GrTabPanel] Вкладки с id \"${tabId.value}\" нет в документе: `\n        + '`aria-labelledby` ссылается в пустоту. Передайте один и тот же `idBase` в `GrTabs` и `GrTabPanels`.',\n      )\n    }\n  })\n}\n\n/*\n * Появление панели — `<Transition>` в шаблоне, и у него есть только фаза входа.\n * Уходящая панель обязана исчезать мгновенно: две панели одновременно\n * растянули бы контейнер на высоту обеих, и смена вкладки дёргала бы страницу.\n * При `keepAlive` перехода не будет вовсе — панель из DOM не уходит, а `hidden`\n * это `display: none`, который не анимируется в принципе.\n */\n\ndefineSlots<{\n  /** Содержимое панели. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n    enter-from-class=\"transform opacity-0 translate-y-1\"\n    enter-to-class=\"transform opacity-100 translate-y-0\"\n  >\n    <div\n      v-if=\"shouldRender\"\n      :id=\"panelId\"\n      role=\"tabpanel\"\n      data-gr-tab-panel\n      :aria-labelledby=\"labelledBy\"\n      :hidden=\"keepAlive && !isActive ? true : undefined\"\n      :tabindex=\"isActive ? 0 : undefined\"\n      class=\"rounded-[var(--gr-radius-md)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n    >\n      <slot />\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, onMounted, ref, watch } from 'vue'\n\nimport { GR_TAB_PANELS_KEY } from './context'\n\nexport interface GrTabPanelProps {\n  value: string\n  keepAlive?: boolean\n  /**\n     * Не монтировать содержимое, пока панель не показали впервые. Имеет смысл\n     * вместе с `keepAlive`: без него неактивная панель и так не в DOM.\n     */\n  lazy?: boolean\n}\n\n/**\n * GrTabPanel — одна панель внутри `GrTabPanels`. Показывается, когда её `value`\n * равно активной вкладке. `keepAlive` оставляет неактивные панели в DOM\n * (скрытыми через `hidden`) — полезно, чтобы не терять состояние форм.\n */\nconst props = withDefaults(\n  defineProps<GrTabPanelProps>(),\n  {\n    keepAlive: false,\n    lazy: false,\n  },\n)\n\nconst ctx = inject(GR_TAB_PANELS_KEY, null)\n\nconst isActive = computed(() => (ctx ? ctx.activeValue.value === props.value : true))\n// id совпадают с id вкладок `GrTabs` при одинаковом `idBase` → корректная ARIA-связка.\nconst panelId = computed(() => (ctx ? `${ctx.idBase.value}-panel-${props.value}` : undefined))\nconst tabId = computed(() => (ctx ? `${ctx.idBase.value}-tab-${props.value}` : undefined))\n\n/**\n * Без общего `idBase` вкладки с таким id не существует, и `aria-labelledby`\n * указывал бы в пустоту. Панель без имени — потеря, а ссылка в никуда — ложь:\n * диктор объявляет её пустой строкой вместо «нет подписи», и починить это\n * потребитель уже не может.\n */\nconst labelledBy = computed(() => (ctx?.tabsLinked.value ? tabId.value : undefined))\n\nconst wasActive = ref(isActive.value)\nwatch(isActive, (active) => {\n  if (active)\n    wasActive.value = true\n})\n\nconst shouldRender = computed(() => {\n  if (isActive.value)\n    return true\n  if (!props.keepAlive)\n    return false\n  return props.lazy ? wasActive.value : true\n})\n\n/**\n * Панель ссылается на вкладку по id, а существует ли вкладка — знает только\n * приложение: `GrTabs` с другим (или отсутствующим) `idBase` оставит\n * `aria-labelledby` висеть в пустоту. Проверяем это в dev, как `GrFormField`\n * проверяет забытый контрол.\n */\nif (__GR_DEV__) {\n  onMounted(() => {\n    if (!ctx || !isActive.value)\n      return\n\n    if (!ctx.tabsLinked.value) {\n      console.warn(\n        '[GrTabPanel] Панель не связана с вкладкой: у неё нет доступного имени. '\n        + 'Передайте один и тот же `idBase` в `GrTabs` и `GrTabPanels`.',\n      )\n      return\n    }\n\n    if (tabId.value && !document.getElementById(tabId.value)) {\n      console.warn(\n        `[GrTabPanel] Вкладки с id \"${tabId.value}\" нет в документе: `\n        + '`aria-labelledby` ссылается в пустоту. Передайте один и тот же `idBase` в `GrTabs` и `GrTabPanels`.',\n      )\n    }\n  })\n}\n\n/*\n * Появление панели — `<Transition>` в шаблоне, и у него есть только фаза входа.\n * Уходящая панель обязана исчезать мгновенно: две панели одновременно\n * растянули бы контейнер на высоту обеих, и смена вкладки дёргала бы страницу.\n * При `keepAlive` перехода не будет вовсе — панель из DOM не уходит, а `hidden`\n * это `display: none`, который не анимируется в принципе.\n */\n\ndefineSlots<{\n  /** Содержимое панели. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n    enter-from-class=\"transform opacity-0 translate-y-1\"\n    enter-to-class=\"transform opacity-100 translate-y-0\"\n  >\n    <div\n      v-if=\"shouldRender\"\n      :id=\"panelId\"\n      role=\"tabpanel\"\n      data-gr-tab-panel\n      :aria-labelledby=\"labelledBy\"\n      :hidden=\"keepAlive && !isActive ? true : undefined\"\n      :tabindex=\"isActive ? 0 : undefined\"\n      class=\"rounded-[var(--gr-radius-md)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n    >\n      <slot />\n    </div>\n  </Transition>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAQd,MAAM,MAAM,OAAO,mBAAmB,IAAI;EAE1C,MAAM,WAAW,eAAgB,MAAM,IAAI,YAAY,UAAU,MAAM,QAAQ,IAAK;EAEpF,MAAM,UAAU,eAAgB,MAAM,GAAG,IAAI,OAAO,MAAM,SAAS,MAAM,UAAU,KAAA,CAAU;EAC7F,MAAM,QAAQ,eAAgB,MAAM,GAAG,IAAI,OAAO,MAAM,OAAO,MAAM,UAAU,KAAA,CAAU;;;;;;;EAQzF,MAAM,aAAa,eAAgB,KAAK,WAAW,QAAQ,MAAM,QAAQ,KAAA,CAAU;EAEnF,MAAM,YAAY,IAAI,SAAS,KAAK;EACpC,MAAM,WAAW,WAAW;GAC1B,IAAI,QACF,UAAU,QAAQ;EACtB,CAAC;EAED,MAAM,eAAe,eAAe;GAClC,IAAI,SAAS,OACX,OAAO;GACT,IAAI,CAAC,MAAM,WACT,OAAO;GACT,OAAO,MAAM,OAAO,UAAU,QAAQ;EACxC,CAAC;;;;;;;EAQD,IAAA,QAAA,IAAA,aAAA,cACE,gBAAgB;GACd,IAAI,CAAC,OAAO,CAAC,SAAS,OACpB;GAEF,IAAI,CAAC,IAAI,WAAW,OAAO;IACzB,QAAQ,KACN,qIAEF;IACA;GACF;GAEA,IAAI,MAAM,SAAS,CAAC,SAAS,eAAe,MAAM,KAAK,GACrD,QAAQ,KACN,8BAA8B,MAAM,MAAM,+HAE5C;EAEJ,CAAC;;GAkBD,OAAA,UAAA,GAAA,YAiBa,YAAA;IAhBX,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;IAEf,SAAA,cAWM,CAVE,aAAA,SADR,UAAA,GAAA,mBAWM,OAAA;;KATH,IAAI,QAAA;KACL,MAAK;KACL,qBAAA;KACC,mBAAiB,WAAA;KACjB,QAAQ,QAAA,aAAS,CAAK,SAAA,QAAQ,OAAU,KAAA;KACxC,UAAU,SAAA,QAAQ,IAAO,KAAA;KAC1B,OAAM;IAEN,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/GrTabPanels/index.js

@@ -1,3 +1,4 @@
-import { n as GrTabPanels_default, t as GrTabPanel_default } from "./chunks/GrTabPanels-5zsbqS1v.js";
+import { t as GrTabPanels_default } from "./chunks/GrTabPanels-BDt5oVdd.js";
+import { t as GrTabPanel_default } from "./chunks/GrTabPanels-BJvAflnA.js";
 import { t as grTabPanelsConfig } from "../../chunks/config-eXB87DOi.js";
 export { GrTabPanel_default as GrTabPanel, GrTabPanels_default as GrTabPanels, GrTabPanels_default as default, grTabPanelsConfig };

package/dist/components/GrTable/chunks/{GrTable-CKJ-HrsN.js → GrTable-BQitSDep.js}

@@ -2,7 +2,7 @@ import { a as useGrComponentSize } from "../../../chunks/context-CPMRfwVr.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as GrSkeleton_default } from "../../GrSkeleton/chunks/GrSkeleton-CgfXxPQ2.js";
 import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
-import { a as tableSizes, i as stripedClass, n as hoverableClass, r as loadingRowCellClass, t as emptyCellClass } from "../../../chunks/grTableStyles-DkQPMfx9.js";
+import { a as stickyColumnStripedClass, i as stickyColumnHoverableClass, n as hoverableClass, o as stripedClass, r as loadingRowCellClass, s as tableSizes, t as emptyCellClass } from "../../../chunks/grTableStyles-CPSxDTOW.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useSlots } from "vue";
 //#region src/components/GrTable/GrTable.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -11,6 +11,7 @@ var _hoisted_1 = [
 	"aria-busy"
 ];
 var _hoisted_2 = [
+	"role",
 	"aria-label",
 	"aria-labelledby",
 	"aria-rowcount"
@@ -19,14 +20,14 @@ var _hoisted_3 = {
 	key: 0,
 	class: "sr-only"
 };
-var _hoisted_4 = ["colspan"];
-var _hoisted_5 = {
-	key: 1,
-	"data-gr-table-empty": ""
-};
-var _hoisted_6 = ["colspan"];
-var _hoisted_7 = {
-	key: 1,
+var _hoisted_4 = { key: 1 };
+var _hoisted_5 = ["colspan"];
+var _hoisted_6 = { key: 2 };
+var _hoisted_7 = { "data-gr-table-empty": "" };
+var _hoisted_8 = ["colspan"];
+var _hoisted_9 = { key: 4 };
+var _hoisted_10 = {
+	key: 5,
 	class: "text-[var(--gr-fg)]"
 };
 //#endregion
@@ -58,10 +59,19 @@ var GrTable_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		rowGroups: {
+			type: Boolean,
+			default: false
+		},
+		role: { default: "table" },
 		stickyHeader: {
 			type: Boolean,
 			default: false
 		},
+		stickyColumn: {
+			type: Boolean,
+			default: false
+		},
 		rowCount: { default: void 0 },
 		fixedLayout: {
 			type: Boolean,
@@ -85,11 +95,31 @@ var GrTable_default = /* @__PURE__ */ defineComponent({
 		const showRows = computed(() => !props.loading && !isEmpty.value);
 		const loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)));
 		const serviceColSpan = computed(() => Math.max(1, Math.trunc(props.columnCount)));
-		const tbodyClass = computed(() => [
+		/**
+		* Цвет текста, полосатость и подсветка висят на таблице, а не на теле: групп у
+		* тела может быть много (`rowGroups`), и рисует их потребитель — правило,
+		* привязанное к одной группе, до остальных не дотянулось бы, а цвет и вовсе
+		* не достался бы ни одной.
+		*/
+		const bodyClass = computed(() => [
 			"text-[var(--gr-fg)]",
 			props.striped && showRows.value ? stripedClass : "",
 			props.hoverable && showRows.value ? hoverableClass : ""
 		].filter(Boolean).join(" "));
+		const stickyColumnClass = computed(() => {
+			if (!props.stickyColumn) return "";
+			return [
+				"[&_tr>*:first-child]:sticky",
+				"[&_tr>*:first-child]:left-0",
+				"[&_tr>*:first-child]:z-[2]",
+				"[&_tr>*:first-child]:shadow-[var(--gr-table-sticky-column-shadow,4px_0_6px_-4px_rgba(0,0,0,0.25))]",
+				"[&>tbody>tr>*:first-child]:bg-[var(--gr-card)]",
+				"[&>tfoot>tr>*:first-child]:bg-[var(--gr-card)]",
+				"[&>thead>tr>*:first-child]:bg-[var(--gr-muted)]",
+				props.striped && showRows.value ? stickyColumnStripedClass : "",
+				props.hoverable && showRows.value ? stickyColumnHoverableClass : ""
+			].filter(Boolean).join(" ");
+		});
 		const scrollStyle = computed(() => {
 			const anchor = props.rowCount === void 0 ? void 0 : { overflowAnchor: "none" };
 			if (props.maxHeight === void 0) return anchor;
@@ -151,7 +181,13 @@ var GrTable_default = /* @__PURE__ */ defineComponent({
 				style: normalizeStyle(scrollStyle.value)
 			}, [createElementVNode("table", {
 				"data-gr-table": "",
-				class: normalizeClass(["min-w-full", [tableTextClass.value, __props.fixedLayout ? "[table-layout:fixed]" : ""]]),
+				role: __props.role === "grid" ? "grid" : void 0,
+				class: normalizeClass(["min-w-full", [
+					tableTextClass.value,
+					bodyClass.value,
+					stickyColumnClass.value,
+					__props.fixedLayout ? "[table-layout:fixed]" : ""
+				]]),
 				style: normalizeStyle(tableStyle.value),
 				"aria-label": __props.ariaLabelledby ? void 0 : __props.ariaLabel,
 				"aria-labelledby": __props.ariaLabelledby,
@@ -159,19 +195,19 @@ var GrTable_default = /* @__PURE__ */ defineComponent({
 			}, [
 				hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_3, [renderSlot(_ctx.$slots, "caption", {}, () => [createTextVNode(toDisplayString(__props.caption), 1)])])) : createCommentVNode("", true),
 				createElementVNode("thead", { class: normalizeClass(theadClass.value) }, [renderSlot(_ctx.$slots, "header")], 2),
-				createElementVNode("tbody", { class: normalizeClass(tbodyClass.value) }, [__props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(loadingRowCount.value, (row) => {
+				__props.loading ? (openBlock(), createElementBlock("tbody", _hoisted_4, [renderSlot(_ctx.$slots, "loading", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(loadingRowCount.value, (row) => {
 					return openBlock(), createElementBlock("tr", {
 						key: row,
 						"data-gr-table-loading-row": ""
 					}, [createElementVNode("td", {
 						colspan: serviceColSpan.value,
 						class: normalizeClass(unref(loadingRowCellClass))
-					}, [createVNode(GrSkeleton_default)], 10, _hoisted_4)]);
-				}), 128))], void 0, 0) : isEmpty.value ? (openBlock(), createElementBlock("tr", _hoisted_5, [createElementVNode("td", {
+					}, [createVNode(GrSkeleton_default)], 10, _hoisted_5)]);
+				}), 128))])])) : isEmpty.value ? (openBlock(), createElementBlock("tbody", _hoisted_6, [createElementVNode("tr", _hoisted_7, [createElementVNode("td", {
 					colspan: serviceColSpan.value,
 					class: normalizeClass(unref(emptyCellClass))
-				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 10, _hoisted_6)])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2)], 2),
-				unref(slots).footer ? (openBlock(), createElementBlock("tfoot", _hoisted_7, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 10, _hoisted_8)])])) : __props.rowGroups ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 3) : (openBlock(), createElementBlock("tbody", _hoisted_9, [renderSlot(_ctx.$slots, "default")])),
+				unref(slots).footer ? (openBlock(), createElementBlock("tfoot", _hoisted_10, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
 			], 14, _hoisted_2)], 12, _hoisted_1);
 		};
 	}

package/dist/components/GrTable/chunks/GrTable-BQitSDep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTable-BQitSDep.js","names":[],"sources":["../../../../src/components/GrTable/GrTable.vue","../../../../src/components/GrTable/GrTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  emptyCellClass,\n  hoverableClass,\n  loadingRowCellClass,\n  stickyColumnHoverableClass,\n  stickyColumnStripedClass,\n  stripedClass,\n  tableSizes,\n  type GrTableSize,\n} from './grTableStyles'\n\nexport interface GrTableProps {\n  /**\n   * Размер таблицы — базовый кегль текста. Паддинги ячеек оставлены за\n   * консьюмером (GrTable — «тонкий» контейнер).\n   */\n  size?: GrTableSize\n  /**\n   * Текст caption для screen reader'ов. Рендерится как `<caption class=\"sr-only\">`,\n   * если не передан слот `#caption`.\n   */\n  caption?: string\n  /** Прямой ARIA-label для `<table>`. Игнорируется, если задан `ariaLabelledby`. */\n  ariaLabel?: string\n  /** ID элемента-заголовка, связанного с `<table>` через `aria-labelledby`. */\n  ariaLabelledby?: string\n  /**\n   * ARIA-label для скролл-контейнера. Включает `role=\"region\"`; сам скролл\n   * достижим с клавиатуры всегда, независимо от метки.\n   */\n  regionLabel?: string\n  /** Идёт загрузка: вместо строк — скелетоны, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /** Сколько колонок занимает служебная строка (пустое состояние и скелетоны). */\n  columnCount?: number\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Таблица пуста. По умолчанию определяется по содержимому слота. */\n  empty?: boolean\n  /** Чередование строк. */\n  striped?: boolean\n  /** Подсветка строки под курсором. */\n  hoverable?: boolean\n  /**\n   * Тело собрано группами строк, и рисует их потребитель: слот по умолчанию\n   * встаёт прямо в таблицу, без обёртки в `<tbody>`.\n   *\n   * Нужно там, где пара строк обязана мериться и жить вместе — второй ярус\n   * `GrDataTable` рядом со своей строкой. Обернуть две `<tr>` в таблице больше\n   * не во что: группа строк — единственный контейнер, который для них\n   * существует.\n   */\n  rowGroups?: boolean\n  /**\n   * Роль таблицы. `grid` — интерактивная сетка с клавиатурой по ячейкам\n   * (паттерн WAI-ARIA `grid`): она объявляет диктору, что по таблице ходят\n   * стрелками, а не читают её как статичную.\n   *\n   * Роль ставит тот, кто клавиатуру и реализует, — сама по себе она обещание,\n   * которое таблица не выполняет.\n   */\n  role?: 'table' | 'grid'\n  /**\n   * Прилипающий заголовок: `<thead>` остаётся видимым при вертикальном скролле.\n   * Осмысленно вместе с `maxHeight` (иначе таблица не скроллится вертикально).\n   */\n  stickyHeader?: boolean\n  /**\n   * Прилипающая первая колонка: остаётся видимой при горизонтальном скролле.\n   *\n   * Только первая, и это не упрощение: `left` со второй колонки равен сумме\n   * ширин предыдущих, а ячейки принадлежат потребителю — мерить их «тонкому»\n   * контейнеру нечем. Многоколоночное закрепление есть у `GrDataTable`: он\n   * знает свои колонки и меряет смещения сам.\n   */\n  stickyColumn?: boolean\n  /**\n   * Полное число строк набора, включая строки заголовка (`aria-rowcount`).\n   *\n   * Нужен, когда в DOM не весь набор — например, при виртуализации: диктор\n   * считает строки по разметке и объявил бы «5 из 20» на таблице в десять\n   * тысяч. Строки при этом обязаны нести `aria-rowindex`.\n   */\n  rowCount?: number\n  /**\n   * Фиксированная раскладка (`table-layout: fixed`): ширины колонок берутся из\n   * первой строки, а не из содержимого всех.\n   *\n   * Обязателен, если в DOM не весь набор: иначе ширины считаются по\n   * отрисованному окну и прыгают на каждой прокрутке.\n   *\n   * Класс — arbitrary-значение, а не `table-fixed`: такого правила в\n   * `presetMini` нет, и класс молча не превратился бы в CSS.\n   */\n  fixedLayout?: boolean\n  /**\n   * Минимальная ширина самой таблицы (число — пиксели).\n   *\n   * Нужна при `fixedLayout`: с фиксированной раскладкой и шириной `auto`\n   * браузер вписывает таблицу в контейнер и делит место между колонками\n   * пропорционально — то есть заданные ширины молча ужимаются, а\n   * горизонтальной прокрутки, на которой держатся закреплённые колонки, не\n   * возникает вовсе.\n   */\n  tableMinWidth?: string | number\n  /**\n   * Максимальная высота скролл-контейнера (включает вертикальный скролл).\n   * Число трактуется как пиксели. Нужен для работы `stickyHeader`.\n   */\n  maxHeight?: string | number\n}\n\n/**\n * `GrTable` — «тонкий» GR-контейнер для табличных данных.\n *\n * Рендерит `<table>` внутри скролл-обёртки и даёт слоты `#caption`, `#header`,\n * default (tbody) и `#footer`. Стили ячеек (`<th>`/`<td>` паддинги, выравнивание)\n * оставлены на консьюмере.\n *\n * ВАЖНО: `min-w-full` сам по себе не даст горизонтального скролла. Для него\n * консьюмеру нужны `white-space: nowrap` на ячейках или явные ширины колонок.\n */\nconst props = withDefaults(defineProps<GrTableProps>(), {\n  size: undefined,\n  caption: undefined,\n  ariaLabel: undefined,\n  ariaLabelledby: undefined,\n  regionLabel: undefined,\n  loading: false,\n  loadingRows: 3,\n  columnCount: 1,\n  emptyText: undefined,\n  empty: undefined,\n  striped: false,\n  hoverable: false,\n  rowGroups: false,\n  role: 'table',\n  stickyHeader: false,\n  stickyColumn: false,\n  maxHeight: undefined,\n  rowCount: undefined,\n  fixedLayout: false,\n  tableMinWidth: undefined,\n})\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTable' })\nconst tableTextClass = computed(() => tableSizes[resolvedSize.value])\nconst hasCaption = computed(() => Boolean(slots.caption) || Boolean(props.caption))\n\nconst { t } = useGranularityTranslations()\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.table.empty', 'Nothing here yet'))\n\n// Пустоту видно по слоту: `v-for` по пустому массиву оставляет фрагмент без\n// узлов, `v-if` — комментарий, и ни то ни другое строкой не является.\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst showRows = computed(() => !props.loading && !isEmpty.value)\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\nconst serviceColSpan = computed(() => Math.max(1, Math.trunc(props.columnCount)))\n\n/**\n * Цвет текста, полосатость и подсветка висят на таблице, а не на теле: групп у\n * тела может быть много (`rowGroups`), и рисует их потребитель — правило,\n * привязанное к одной группе, до остальных не дотянулось бы, а цвет и вовсе\n * не достался бы ни одной.\n */\nconst bodyClass = computed(() => [\n  'text-[var(--gr-fg)]',\n  props.striped && showRows.value ? stripedClass : '',\n  props.hoverable && showRows.value ? hoverableClass : '',\n].filter(Boolean).join(' '))\n\n/*\n * Прилипающая первая колонка.\n *\n * Липкая ячейка обязана быть непрозрачной, иначе уезжающее просвечивает\n * насквозь. Наследовать фон строки нельзя, хотя это и просится: оттенки полосы\n * и подсветки полупрозрачны, и сквозь такую ячейку числа видно. Поэтому фон у\n * неё свой, а полоса и подсветка собираются заново поверх карточки —\n * `stickyColumn*Class` в `grTableStyles.ts`.\n *\n * Правила позиционирования — литералами здесь, а не в хелпере: литерал `.vue`\n * уезжает в чанк самого компонента, то есть всегда в области скана UnoCSS.\n * Тем же путём живёт `stickyHeader`. В хелпер вынесено только то, чему нужны\n * общие оттенки, — и оно объявлено в safelist.\n */\nconst stickyColumnClass = computed(() => {\n  if (!props.stickyColumn)\n    return ''\n\n  return [\n    '[&_tr>*:first-child]:sticky',\n    '[&_tr>*:first-child]:left-0',\n    '[&_tr>*:first-child]:z-[2]',\n    '[&_tr>*:first-child]:shadow-[var(--gr-table-sticky-column-shadow,4px_0_6px_-4px_rgba(0,0,0,0.25))]',\n    '[&>tbody>tr>*:first-child]:bg-[var(--gr-card)]',\n    '[&>tfoot>tr>*:first-child]:bg-[var(--gr-card)]',\n    // Шапке фон уже задан на `<thead>`, но он скроллится вместе с ней:\n    // липкой ячейке нужен свой.\n    '[&>thead>tr>*:first-child]:bg-[var(--gr-muted)]',\n    props.striped && showRows.value ? stickyColumnStripedClass : '',\n    props.hoverable && showRows.value ? stickyColumnHoverableClass : '',\n  ].filter(Boolean).join(' ')\n})\n\nconst scrollStyle = computed(() => {\n  // Неполный набор в DOM (`rowCount`) означает виртуализацию, а с ней обязан\n  // быть выключен браузерный scroll anchoring: он подправляет `scrollTop`,\n  // когда меняется высота содержимого выше видимого узла, — а окно меняет её\n  // на каждом кадре прокрутки, и список уезжает.\n  const anchor = props.rowCount === undefined ? undefined : { overflowAnchor: 'none' as const }\n\n  if (props.maxHeight === undefined)\n    return anchor\n\n  const value = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight\n  return { ...anchor, maxHeight: value, overflowY: 'auto' as const }\n})\n\n// Прилипающий заголовок: `<thead>` на `position: sticky`; фон обязателен, иначе\n// сквозь него будут просвечивать строки при скролле.\nconst theadClass = computed(() => [\n  'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]',\n  props.stickyHeader ? 'sticky top-0 z-[1]' : '',\n].filter(Boolean).join(' '))\n\nconst tableStyle = computed(() => {\n  if (props.tableMinWidth === undefined)\n    return undefined\n\n  const value = typeof props.tableMinWidth === 'number' ? `${props.tableMinWidth}px` : props.tableMinWidth\n\n  return { minWidth: value }\n})\n\nconst scrollEl = ref<HTMLElement | null>(null)\n\nfunction scrollTo(options: ScrollToOptions): void {\n  scrollEl.value?.scrollTo(options)\n}\n\n// Только верхний уровень собственного tbody: вложенная таблица в ячейке не\n// должна сдвигать индексацию строк.\nfunction contentRows(): HTMLElement[] {\n  if (!showRows.value)\n    return []\n  const el = scrollEl.value\n  if (!el)\n    return []\n  return Array.from(el.querySelectorAll<HTMLElement>(':scope > table > tbody > tr'))\n}\n\nfunction scrollToRow(index: number, options?: ScrollIntoViewOptions): boolean {\n  const row = contentRows()[index]\n  if (!row)\n    return false\n  row.scrollIntoView(options ?? { block: 'nearest' })\n  return true\n}\n\ndefineExpose({\n  /** Прокрутить скролл-контейнер таблицы — тот же контракт, что у `GrDataTable`. */\n  scrollTo,\n  /** Прокрутить к строке содержимого по её индексу в разметке. `false` — строки нет в DOM. */\n  scrollToRow,\n})\n\ndefineSlots<{\n  /** Строки таблицы, когда разметка пишется руками вместо `data`. */\n  default?: () => any\n  /** Подпись таблицы — `<caption>`, читается диктором первой. */\n  caption?: () => any\n  /** Шапка вместо построенной по `columns`. */\n  header?: () => any\n  /** Содержимое, пока едут данные, — вместо строк-заглушек. */\n  loading?: () => any\n  /** Пустое состояние вместо текста по умолчанию. */\n  empty?: () => any\n  /** Итоговая строка под таблицей. */\n  footer?: () => any\n}>()\n\n/**\n * `relative` на скроллере — не для потомков с координатами, а чтобы он стал\n * containing block. Без него абсолютные потомки (`sr-only`-подсказка у кнопки\n * сортировки — единственный такой в самой таблице, но разметка ячеек чужая)\n * считают позицию от документа и выпадают из прокрутки наружу: на узком экране\n * широкая таблица начинает тащить вбок всю страницу, а не только себя.\n *\n * Живёт здесь, а не над `<div>`: комментарий в корне `<template>` делает\n * компонент фрагментом, и `$el` у потребителя становится Comment-нодой —\n * `GrDataTable` падает на `root.matches` ещё до первого рендера.\n */\n</script>\n\n<template>\n  <div\n    ref=\"scrollEl\"\n    data-gr-table-scroll\n    :role=\"regionLabel ? 'region' : undefined\"\n    :aria-label=\"regionLabel\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n    tabindex=\"0\"\n    class=\"relative overflow-x-auto rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n    :style=\"scrollStyle\"\n  >\n    <table\n      data-gr-table\n      :role=\"role === 'grid' ? 'grid' : undefined\"\n      class=\"min-w-full\" :class=\"[tableTextClass, bodyClass, stickyColumnClass, fixedLayout ? '[table-layout:fixed]' : '']\"\n      :style=\"tableStyle\"\n      :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n      :aria-labelledby=\"ariaLabelledby\"\n      :aria-rowcount=\"rowCount\"\n    >\n      <caption v-if=\"hasCaption\" class=\"sr-only\">\n        <slot name=\"caption\">\n{{ caption }}\n</slot>\n      </caption>\n      <thead :class=\"theadClass\">\n        <slot name=\"header\" />\n      </thead>\n      <tbody v-if=\"loading\">\n        <slot name=\"loading\">\n          <tr v-for=\"row in loadingRowCount\" :key=\"row\" data-gr-table-loading-row>\n            <td :colspan=\"serviceColSpan\" :class=\"loadingRowCellClass\">\n              <GrSkeleton />\n            </td>\n          </tr>\n        </slot>\n      </tbody>\n\n      <tbody v-else-if=\"isEmpty\">\n        <tr data-gr-table-empty>\n          <td :colspan=\"serviceColSpan\" :class=\"emptyCellClass\">\n            <slot name=\"empty\">\n              {{ resolvedEmptyText }}\n            </slot>\n          </td>\n        </tr>\n      </tbody>\n\n      <!-- Группы рисует потребитель: своя обёртка разделила бы пару строк. -->\n      <slot v-else-if=\"rowGroups\" />\n\n      <tbody v-else>\n        <slot />\n      </tbody>\n      <tfoot v-if=\"slots.footer\" class=\"text-[var(--gr-fg)]\">\n        <slot name=\"footer\" />\n      </tfoot>\n    </table>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useSlots } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  emptyCellClass,\n  hoverableClass,\n  loadingRowCellClass,\n  stickyColumnHoverableClass,\n  stickyColumnStripedClass,\n  stripedClass,\n  tableSizes,\n  type GrTableSize,\n} from './grTableStyles'\n\nexport interface GrTableProps {\n  /**\n   * Размер таблицы — базовый кегль текста. Паддинги ячеек оставлены за\n   * консьюмером (GrTable — «тонкий» контейнер).\n   */\n  size?: GrTableSize\n  /**\n   * Текст caption для screen reader'ов. Рендерится как `<caption class=\"sr-only\">`,\n   * если не передан слот `#caption`.\n   */\n  caption?: string\n  /** Прямой ARIA-label для `<table>`. Игнорируется, если задан `ariaLabelledby`. */\n  ariaLabel?: string\n  /** ID элемента-заголовка, связанного с `<table>` через `aria-labelledby`. */\n  ariaLabelledby?: string\n  /**\n   * ARIA-label для скролл-контейнера. Включает `role=\"region\"`; сам скролл\n   * достижим с клавиатуры всегда, независимо от метки.\n   */\n  regionLabel?: string\n  /** Идёт загрузка: вместо строк — скелетоны, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /** Сколько колонок занимает служебная строка (пустое состояние и скелетоны). */\n  columnCount?: number\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Таблица пуста. По умолчанию определяется по содержимому слота. */\n  empty?: boolean\n  /** Чередование строк. */\n  striped?: boolean\n  /** Подсветка строки под курсором. */\n  hoverable?: boolean\n  /**\n   * Тело собрано группами строк, и рисует их потребитель: слот по умолчанию\n   * встаёт прямо в таблицу, без обёртки в `<tbody>`.\n   *\n   * Нужно там, где пара строк обязана мериться и жить вместе — второй ярус\n   * `GrDataTable` рядом со своей строкой. Обернуть две `<tr>` в таблице больше\n   * не во что: группа строк — единственный контейнер, который для них\n   * существует.\n   */\n  rowGroups?: boolean\n  /**\n   * Роль таблицы. `grid` — интерактивная сетка с клавиатурой по ячейкам\n   * (паттерн WAI-ARIA `grid`): она объявляет диктору, что по таблице ходят\n   * стрелками, а не читают её как статичную.\n   *\n   * Роль ставит тот, кто клавиатуру и реализует, — сама по себе она обещание,\n   * которое таблица не выполняет.\n   */\n  role?: 'table' | 'grid'\n  /**\n   * Прилипающий заголовок: `<thead>` остаётся видимым при вертикальном скролле.\n   * Осмысленно вместе с `maxHeight` (иначе таблица не скроллится вертикально).\n   */\n  stickyHeader?: boolean\n  /**\n   * Прилипающая первая колонка: остаётся видимой при горизонтальном скролле.\n   *\n   * Только первая, и это не упрощение: `left` со второй колонки равен сумме\n   * ширин предыдущих, а ячейки принадлежат потребителю — мерить их «тонкому»\n   * контейнеру нечем. Многоколоночное закрепление есть у `GrDataTable`: он\n   * знает свои колонки и меряет смещения сам.\n   */\n  stickyColumn?: boolean\n  /**\n   * Полное число строк набора, включая строки заголовка (`aria-rowcount`).\n   *\n   * Нужен, когда в DOM не весь набор — например, при виртуализации: диктор\n   * считает строки по разметке и объявил бы «5 из 20» на таблице в десять\n   * тысяч. Строки при этом обязаны нести `aria-rowindex`.\n   */\n  rowCount?: number\n  /**\n   * Фиксированная раскладка (`table-layout: fixed`): ширины колонок берутся из\n   * первой строки, а не из содержимого всех.\n   *\n   * Обязателен, если в DOM не весь набор: иначе ширины считаются по\n   * отрисованному окну и прыгают на каждой прокрутке.\n   *\n   * Класс — arbitrary-значение, а не `table-fixed`: такого правила в\n   * `presetMini` нет, и класс молча не превратился бы в CSS.\n   */\n  fixedLayout?: boolean\n  /**\n   * Минимальная ширина самой таблицы (число — пиксели).\n   *\n   * Нужна при `fixedLayout`: с фиксированной раскладкой и шириной `auto`\n   * браузер вписывает таблицу в контейнер и делит место между колонками\n   * пропорционально — то есть заданные ширины молча ужимаются, а\n   * горизонтальной прокрутки, на которой держатся закреплённые колонки, не\n   * возникает вовсе.\n   */\n  tableMinWidth?: string | number\n  /**\n   * Максимальная высота скролл-контейнера (включает вертикальный скролл).\n   * Число трактуется как пиксели. Нужен для работы `stickyHeader`.\n   */\n  maxHeight?: string | number\n}\n\n/**\n * `GrTable` — «тонкий» GR-контейнер для табличных данных.\n *\n * Рендерит `<table>` внутри скролл-обёртки и даёт слоты `#caption`, `#header`,\n * default (tbody) и `#footer`. Стили ячеек (`<th>`/`<td>` паддинги, выравнивание)\n * оставлены на консьюмере.\n *\n * ВАЖНО: `min-w-full` сам по себе не даст горизонтального скролла. Для него\n * консьюмеру нужны `white-space: nowrap` на ячейках или явные ширины колонок.\n */\nconst props = withDefaults(defineProps<GrTableProps>(), {\n  size: undefined,\n  caption: undefined,\n  ariaLabel: undefined,\n  ariaLabelledby: undefined,\n  regionLabel: undefined,\n  loading: false,\n  loadingRows: 3,\n  columnCount: 1,\n  emptyText: undefined,\n  empty: undefined,\n  striped: false,\n  hoverable: false,\n  rowGroups: false,\n  role: 'table',\n  stickyHeader: false,\n  stickyColumn: false,\n  maxHeight: undefined,\n  rowCount: undefined,\n  fixedLayout: false,\n  tableMinWidth: undefined,\n})\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTable' })\nconst tableTextClass = computed(() => tableSizes[resolvedSize.value])\nconst hasCaption = computed(() => Boolean(slots.caption) || Boolean(props.caption))\n\nconst { t } = useGranularityTranslations()\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.table.empty', 'Nothing here yet'))\n\n// Пустоту видно по слоту: `v-for` по пустому массиву оставляет фрагмент без\n// узлов, `v-if` — комментарий, и ни то ни другое строкой не является.\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst showRows = computed(() => !props.loading && !isEmpty.value)\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\nconst serviceColSpan = computed(() => Math.max(1, Math.trunc(props.columnCount)))\n\n/**\n * Цвет текста, полосатость и подсветка висят на таблице, а не на теле: групп у\n * тела может быть много (`rowGroups`), и рисует их потребитель — правило,\n * привязанное к одной группе, до остальных не дотянулось бы, а цвет и вовсе\n * не достался бы ни одной.\n */\nconst bodyClass = computed(() => [\n  'text-[var(--gr-fg)]',\n  props.striped && showRows.value ? stripedClass : '',\n  props.hoverable && showRows.value ? hoverableClass : '',\n].filter(Boolean).join(' '))\n\n/*\n * Прилипающая первая колонка.\n *\n * Липкая ячейка обязана быть непрозрачной, иначе уезжающее просвечивает\n * насквозь. Наследовать фон строки нельзя, хотя это и просится: оттенки полосы\n * и подсветки полупрозрачны, и сквозь такую ячейку числа видно. Поэтому фон у\n * неё свой, а полоса и подсветка собираются заново поверх карточки —\n * `stickyColumn*Class` в `grTableStyles.ts`.\n *\n * Правила позиционирования — литералами здесь, а не в хелпере: литерал `.vue`\n * уезжает в чанк самого компонента, то есть всегда в области скана UnoCSS.\n * Тем же путём живёт `stickyHeader`. В хелпер вынесено только то, чему нужны\n * общие оттенки, — и оно объявлено в safelist.\n */\nconst stickyColumnClass = computed(() => {\n  if (!props.stickyColumn)\n    return ''\n\n  return [\n    '[&_tr>*:first-child]:sticky',\n    '[&_tr>*:first-child]:left-0',\n    '[&_tr>*:first-child]:z-[2]',\n    '[&_tr>*:first-child]:shadow-[var(--gr-table-sticky-column-shadow,4px_0_6px_-4px_rgba(0,0,0,0.25))]',\n    '[&>tbody>tr>*:first-child]:bg-[var(--gr-card)]',\n    '[&>tfoot>tr>*:first-child]:bg-[var(--gr-card)]',\n    // Шапке фон уже задан на `<thead>`, но он скроллится вместе с ней:\n    // липкой ячейке нужен свой.\n    '[&>thead>tr>*:first-child]:bg-[var(--gr-muted)]',\n    props.striped && showRows.value ? stickyColumnStripedClass : '',\n    props.hoverable && showRows.value ? stickyColumnHoverableClass : '',\n  ].filter(Boolean).join(' ')\n})\n\nconst scrollStyle = computed(() => {\n  // Неполный набор в DOM (`rowCount`) означает виртуализацию, а с ней обязан\n  // быть выключен браузерный scroll anchoring: он подправляет `scrollTop`,\n  // когда меняется высота содержимого выше видимого узла, — а окно меняет её\n  // на каждом кадре прокрутки, и список уезжает.\n  const anchor = props.rowCount === undefined ? undefined : { overflowAnchor: 'none' as const }\n\n  if (props.maxHeight === undefined)\n    return anchor\n\n  const value = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight\n  return { ...anchor, maxHeight: value, overflowY: 'auto' as const }\n})\n\n// Прилипающий заголовок: `<thead>` на `position: sticky`; фон обязателен, иначе\n// сквозь него будут просвечивать строки при скролле.\nconst theadClass = computed(() => [\n  'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]',\n  props.stickyHeader ? 'sticky top-0 z-[1]' : '',\n].filter(Boolean).join(' '))\n\nconst tableStyle = computed(() => {\n  if (props.tableMinWidth === undefined)\n    return undefined\n\n  const value = typeof props.tableMinWidth === 'number' ? `${props.tableMinWidth}px` : props.tableMinWidth\n\n  return { minWidth: value }\n})\n\nconst scrollEl = ref<HTMLElement | null>(null)\n\nfunction scrollTo(options: ScrollToOptions): void {\n  scrollEl.value?.scrollTo(options)\n}\n\n// Только верхний уровень собственного tbody: вложенная таблица в ячейке не\n// должна сдвигать индексацию строк.\nfunction contentRows(): HTMLElement[] {\n  if (!showRows.value)\n    return []\n  const el = scrollEl.value\n  if (!el)\n    return []\n  return Array.from(el.querySelectorAll<HTMLElement>(':scope > table > tbody > tr'))\n}\n\nfunction scrollToRow(index: number, options?: ScrollIntoViewOptions): boolean {\n  const row = contentRows()[index]\n  if (!row)\n    return false\n  row.scrollIntoView(options ?? { block: 'nearest' })\n  return true\n}\n\ndefineExpose({\n  /** Прокрутить скролл-контейнер таблицы — тот же контракт, что у `GrDataTable`. */\n  scrollTo,\n  /** Прокрутить к строке содержимого по её индексу в разметке. `false` — строки нет в DOM. */\n  scrollToRow,\n})\n\ndefineSlots<{\n  /** Строки таблицы, когда разметка пишется руками вместо `data`. */\n  default?: () => any\n  /** Подпись таблицы — `<caption>`, читается диктором первой. */\n  caption?: () => any\n  /** Шапка вместо построенной по `columns`. */\n  header?: () => any\n  /** Содержимое, пока едут данные, — вместо строк-заглушек. */\n  loading?: () => any\n  /** Пустое состояние вместо текста по умолчанию. */\n  empty?: () => any\n  /** Итоговая строка под таблицей. */\n  footer?: () => any\n}>()\n\n/**\n * `relative` на скроллере — не для потомков с координатами, а чтобы он стал\n * containing block. Без него абсолютные потомки (`sr-only`-подсказка у кнопки\n * сортировки — единственный такой в самой таблице, но разметка ячеек чужая)\n * считают позицию от документа и выпадают из прокрутки наружу: на узком экране\n * широкая таблица начинает тащить вбок всю страницу, а не только себя.\n *\n * Живёт здесь, а не над `<div>`: комментарий в корне `<template>` делает\n * компонент фрагментом, и `$el` у потребителя становится Comment-нодой —\n * `GrDataTable` падает на `root.matches` ещё до первого рендера.\n */\n</script>\n\n<template>\n  <div\n    ref=\"scrollEl\"\n    data-gr-table-scroll\n    :role=\"regionLabel ? 'region' : undefined\"\n    :aria-label=\"regionLabel\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n    tabindex=\"0\"\n    class=\"relative overflow-x-auto rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n    :style=\"scrollStyle\"\n  >\n    <table\n      data-gr-table\n      :role=\"role === 'grid' ? 'grid' : undefined\"\n      class=\"min-w-full\" :class=\"[tableTextClass, bodyClass, stickyColumnClass, fixedLayout ? '[table-layout:fixed]' : '']\"\n      :style=\"tableStyle\"\n      :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n      :aria-labelledby=\"ariaLabelledby\"\n      :aria-rowcount=\"rowCount\"\n    >\n      <caption v-if=\"hasCaption\" class=\"sr-only\">\n        <slot name=\"caption\">\n{{ caption }}\n</slot>\n      </caption>\n      <thead :class=\"theadClass\">\n        <slot name=\"header\" />\n      </thead>\n      <tbody v-if=\"loading\">\n        <slot name=\"loading\">\n          <tr v-for=\"row in loadingRowCount\" :key=\"row\" data-gr-table-loading-row>\n            <td :colspan=\"serviceColSpan\" :class=\"loadingRowCellClass\">\n              <GrSkeleton />\n            </td>\n          </tr>\n        </slot>\n      </tbody>\n\n      <tbody v-else-if=\"isEmpty\">\n        <tr data-gr-table-empty>\n          <td :colspan=\"serviceColSpan\" :class=\"emptyCellClass\">\n            <slot name=\"empty\">\n              {{ resolvedEmptyText }}\n            </slot>\n          </td>\n        </tr>\n      </tbody>\n\n      <!-- Группы рисует потребитель: своя обёртка разделила бы пару строк. -->\n      <slot v-else-if=\"rowGroups\" />\n\n      <tbody v-else>\n        <slot />\n      </tbody>\n      <tfoot v-if=\"slots.footer\" class=\"text-[var(--gr-fg)]\">\n        <slot name=\"footer\" />\n      </tfoot>\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIA,MAAM,QAAQ;EAuBd,MAAM,QAAQ,SAAS;EAEvB,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,UAAU,CAAC;EAClF,MAAM,iBAAiB,eAAe,WAAW,aAAa,MAAM;EACpE,MAAM,aAAa,eAAe,QAAQ,MAAM,OAAO,KAAK,QAAQ,MAAM,OAAO,CAAC;EAElF,MAAM,EAAE,MAAM,2BAA2B;EACzC,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,kBAAkB,kBAAkB,CAAC;EAInG,MAAM,UAAU,eAAe;GAC7B,IAAI,MAAM,UAAU,KAAA,GAClB,OAAO,MAAM;GAEf,OAAO,CAAC,yBAAyB,MAAM,UAAU,KAAK,CAAC,CAAC;EAC1D,CAAC;EAED,MAAM,WAAW,eAAe,CAAC,MAAM,WAAW,CAAC,QAAQ,KAAK;EAChE,MAAM,kBAAkB,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,WAAW,CAAC,CAAC;EACjF,MAAM,iBAAiB,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,WAAW,CAAC,CAAC;;;;;;;EAQhF,MAAM,YAAY,eAAe;GAC/B;GACA,MAAM,WAAW,SAAS,QAAQ,eAAe;GACjD,MAAM,aAAa,SAAS,QAAQ,iBAAiB;EACvD,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;EAgB3B,MAAM,oBAAoB,eAAe;GACvC,IAAI,CAAC,MAAM,cACT,OAAO;GAET,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IAGA;IACA,MAAM,WAAW,SAAS,QAAQ,2BAA2B;IAC7D,MAAM,aAAa,SAAS,QAAQ,6BAA6B;GACnE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5B,CAAC;EAED,MAAM,cAAc,eAAe;GAKjC,MAAM,SAAS,MAAM,aAAa,KAAA,IAAY,KAAA,IAAY,EAAE,gBAAgB,OAAgB;GAE5F,IAAI,MAAM,cAAc,KAAA,GACtB,OAAO;GAET,MAAM,QAAQ,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,UAAU,MAAM,MAAM;GACnF,OAAO;IAAE,GAAG;IAAQ,WAAW;IAAO,WAAW;GAAgB;EACnE,CAAC;EAID,MAAM,aAAa,eAAe,CAChC,kDACA,MAAM,eAAe,uBAAuB,EAC9C,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;EAE3B,MAAM,aAAa,eAAe;GAChC,IAAI,MAAM,kBAAkB,KAAA,GAC1B,OAAO,KAAA;GAIT,OAAO,EAAE,UAFK,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,cAAc,MAAM,MAAM,cAElE;EAC3B,CAAC;EAED,MAAM,WAAW,IAAwB,IAAI;EAE7C,SAAS,SAAS,SAAgC;GAChD,SAAS,OAAO,SAAS,OAAO;EAClC;EAIA,SAAS,cAA6B;GACpC,IAAI,CAAC,SAAS,OACZ,OAAO,CAAC;GACV,MAAM,KAAK,SAAS;GACpB,IAAI,CAAC,IACH,OAAO,CAAC;GACV,OAAO,MAAM,KAAK,GAAG,iBAA8B,6BAA6B,CAAC;EACnF;EAEA,SAAS,YAAY,OAAe,SAA0C;GAC5E,MAAM,MAAM,YAAY,CAAC,CAAC;GAC1B,IAAI,CAAC,KACH,OAAO;GACT,IAAI,eAAe,WAAW,EAAE,OAAO,UAAU,CAAC;GAClD,OAAO;EACT;EAEA,SAAa;;GAEX;;GAEA;EACF,CAAC;;;;;;;;;;;;;GA+BC,OAAA,UAAA,GAAA,mBAyDM,OAAA;IAxDA,SAAA;IAAJ,KAAI;IACJ,wBAAA;IACC,MAAM,QAAA,cAAW,WAAc,KAAA;IAC/B,cAAY,QAAA;IACZ,aAAW,QAAA,UAAO,SAAY,KAAA;IAC/B,UAAS;IACT,OAAM;IACL,OAAK,eAAE,YAAA,KAAW;GAEnB,GAAA,CAAA,mBA8CQ,SAAA;IA7CN,iBAAA;IACC,MAAM,QAAA,SAAI,SAAA,SAAuB,KAAA;IAClC,OAAK,eAAA,CAAC,cAAY;KAAU,eAAA;KAAgB,UAAA;KAAW,kBAAA;KAAmB,QAAA,cAAW,yBAAA;IAAA,CAAA,CAAA;IACpF,OAAK,eAAE,WAAA,KAAU;IACjB,cAAY,QAAA,iBAAiB,KAAA,IAAY,QAAA;IACzC,mBAAiB,QAAA;IACjB,iBAAe,QAAA;;IAED,WAAA,SAAf,UAAA,GAAA,mBAIU,WAJV,YAIU,CAHR,WAED,KAAA,QAAA,WAAA,CAAA,SAAA,CADJ,gBAAA,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAGJ,mBAEQ,SAAA,EAFA,OAAK,eAAE,WAAA,KAAU,EAAA,GAAA,CACvB,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA;IAEX,QAAA,WAAb,UAAA,GAAA,mBAQQ,SAAA,YAAA,CAPN,WAMO,KAAA,QAAA,WAAA,CAAA,SAAA,EALL,UAAA,IAAA,GAAA,mBAIK,UAAA,MAAA,WAJa,gBAAA,QAAP,QAAG;KAAd,OAAA,UAAA,GAAA,mBAIK,MAAA;MAJ+B,KAAK;MAAK,6BAAA;KAC5C,GAAA,CAAA,mBAEK,MAAA;MAFA,SAAS,eAAA;MAAiB,OAAK,eAAE,MAAA,mBAAA,CAAmB;KACvD,GAAA,CAAA,YAAc,kBAAA,CAAA,GAAA,IAAA,UAAA,CAAA,CAAA;IAMJ,CAAA,GAAA,GAAA,EAAA,CAAA,CAAA,CAAA,KAAA,QAAA,SAAlB,UAAA,GAAA,mBAQQ,SAAA,YAAA,CAPN,mBAMK,MANL,YAMK,CALH,mBAIK,MAAA;KAJA,SAAS,eAAA;KAAiB,OAAK,eAAE,MAAA,cAAA,CAAc;IAClD,GAAA,CAAA,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CADF,gBAAA,gBAAA,kBAAA,KAAiB,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,CAAA,CAAA,CAAA,CAAA,KAOX,QAAA,YAAjB,WAA8B,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,KAE9B,UAAA,GAAA,mBAEQ,SAAA,YAAA,CADN,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;IAEG,MAAA,KAAA,CAAK,CAAC,UAAnB,UAAA,GAAA,mBAEQ,SAFR,aAEQ,CADN,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}