@feugene/granularity 0.31.1 → 0.33.0

package/dist/components/GrAutocomplete/index.js

@@ -1,3 +1,3 @@
 import { n as grAutocompleteSafelist, t as grAutocompleteConfig } from "../../chunks/config-vYMJ3Cr1.js";
-import { t as GrAutocomplete_default } from "./chunks/GrAutocomplete-rYEY15UI.js";
+import { t as GrAutocomplete_default } from "./chunks/GrAutocomplete-CoQjEF8h.js";
 export { GrAutocomplete_default as GrAutocomplete, GrAutocomplete_default as default, grAutocompleteConfig, grAutocompleteSafelist };

package/dist/components/GrBadge/chunks/{GrBadge-D2MfThPz.js → GrBadge-DpUDXKbq.js}

@@ -1,8 +1,8 @@
 import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
 import { t as warnRenamedProp } from "../../../chunks/renamedProp-BwcN-SJg.js";
-import { n as grBadgeClass } from "../../../chunks/grBadgeStyles-D8Mz73B5.js";
+import { i as grBadgeClass, n as badgeIconSizeClassBySize, t as badgeIconClass } from "../../../chunks/grBadgeStyles-DV0DrAew.js";
 import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, useAttrs } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useAttrs } from "vue";
 import '../styles.css';//#region src/components/GrBadge/GrBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "gr-badge__label" };
 var _hoisted_2 = { class: "gr-badge__text" };
@@ -33,10 +33,15 @@ var GrBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				radius: resolvedRadius.value
 			});
 		});
+		const iconSizeClass = computed(() => badgeIconSizeClassBySize[resolvedSize.value]);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", { class: normalizeClass(["gr-badge inline-block border whitespace-nowrap leading-none", className.value]) }, [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["gr-badge inline-block border whitespace-nowrap leading-none", className.value]) }, [createElementVNode("span", _hoisted_1, [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-gr-badge-icon": "",
+				class: normalizeClass([unref(badgeIconClass), iconSizeClass.value])
+			}, [renderSlot(_ctx.$slots, "icon", {}, void 0, true)], 2)) : createCommentVNode("", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-bc95969b"]]);
+}), [["__scopeId", "data-v-78f3036a"]]);
 //#endregion
 export { GrBadge_default as t };

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

@@ -0,0 +1 @@
+{"version":3,"file":"GrBadge-DpUDXKbq.js","names":["$slots"],"sources":["../../../../src/components/GrBadge/GrBadge.vue","../../../../src/components/GrBadge/GrBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n  badgeIconClass,\n  badgeIconSizeClassBySize,\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n  tone?: GrBadgeTone\n  dark?: boolean\n  size?: GrBadgeSize\n  radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n  defineProps<GrBadgeProps>(),\n  {\n    // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n    // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    tone: undefined,\n    dark: false,\n    size: undefined,\n    radius: undefined,\n  },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n\nconst iconSizeClass = computed(() => badgeIconSizeClassBySize[resolvedSize.value])\n\ndefineSlots<{\n  /** Содержимое метки. */\n  default?: () => any\n  /**\n   * Иконка перед подписью: статус со спиннером, флаг, значок типа.\n   *\n   * Размер задаёт обёртка по ступени `size`, поэтому содержимое слота тянется\n   * до неё — `class=\"h-full w-full\"`, как у `GrChip`. Вращение спиннера —\n   * `animate-spin` на самой иконке.\n   *\n   * `GrProgressCircle` сюда не кладут: у кругового индикатора шкала виджетная,\n   * нижняя ступень — `2rem`, и в строку бейджа он не помещается.\n   */\n  icon?: () => any\n}>()\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span\n        v-if=\"$slots.icon\"\n        data-gr-badge-icon\n        :class=\"[badgeIconClass, iconSizeClass]\"\n      >\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n *\n * `gap` задан в `em`, чтобы просвет перед иконкой шёл за кеглем ступени, а не\n * за корневым размером. Бейджа без иконки он не касается: у flex-контейнера с\n * единственным ребёнком просветов нет.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  gap: 0.25em;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n  badgeIconClass,\n  badgeIconSizeClassBySize,\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n  tone?: GrBadgeTone\n  dark?: boolean\n  size?: GrBadgeSize\n  radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n  defineProps<GrBadgeProps>(),\n  {\n    // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n    // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    tone: undefined,\n    dark: false,\n    size: undefined,\n    radius: undefined,\n  },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n\nconst iconSizeClass = computed(() => badgeIconSizeClassBySize[resolvedSize.value])\n\ndefineSlots<{\n  /** Содержимое метки. */\n  default?: () => any\n  /**\n   * Иконка перед подписью: статус со спиннером, флаг, значок типа.\n   *\n   * Размер задаёт обёртка по ступени `size`, поэтому содержимое слота тянется\n   * до неё — `class=\"h-full w-full\"`, как у `GrChip`. Вращение спиннера —\n   * `animate-spin` на самой иконке.\n   *\n   * `GrProgressCircle` сюда не кладут: у кругового индикатора шкала виджетная,\n   * нижняя ступень — `2rem`, и в строку бейджа он не помещается.\n   */\n  icon?: () => any\n}>()\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span\n        v-if=\"$slots.icon\"\n        data-gr-badge-icon\n        :class=\"[badgeIconClass, iconSizeClass]\"\n      >\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n *\n * `gap` задан в `em`, чтобы просвет перед иконкой шёл за кеглем ступени, а не\n * за корневым размером. Бейджа без иконки он не касается: у flex-контейнера с\n * единственным ребёнком просветов нет.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  gap: 0.25em;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQ;EAad,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,SAAS;EACtF,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,IAAI;EACjF,MAAM,iBAAiB,mBAAmB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;EAK1F,gBAAgB,WAAW,SAAS,GAAG,EAAE,SAAS,OAAO,CAAC;EAE1D,MAAM,YAAY,eAAe;GAC/B,OAAO,aAAa;IAClB,MAAM,aAAa;IACnB,MAAM,MAAM;IACZ,MAAM,aAAa;IACnB,QAAQ,eAAe;GACzB,CAAC;EACH,CAAC;EAED,MAAM,gBAAgB,eAAe,yBAAyB,aAAa,MAAM;;uBAoB/E,mBAgBO,QAAA,EAfH,OAAK,eAAA,CAAC,+DACE,UAAA,KAAS,CAAA,EAAA,GAAA,CAEnB,mBAWO,QAXP,YAWO,CATGA,KAAAA,OAAO,QAAA,UAAA,GADf,mBAMO,QAAA;;IAJL,sBAAA;IACC,OAAK,eAAA,CAAG,MAAA,cAAA,GAAgB,cAAA,KAAa,CAAA;OAEtC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEtB,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrBadge/index.js

@@ -1,4 +1,4 @@
-import { t as GrBadge_default } from "./chunks/GrBadge-D2MfThPz.js";
-import { t as grBadgeSafelist } from "../../chunks/safelist-CtiHPgrj.js";
-import { t as grBadgeConfig } from "../../chunks/config-g8-JGZ_Y.js";
+import { t as GrBadge_default } from "./chunks/GrBadge-DpUDXKbq.js";
+import { t as grBadgeSafelist } from "../../chunks/safelist-x8USecK8.js";
+import { t as grBadgeConfig } from "../../chunks/config-BscVxZR3.js";
 export { GrBadge_default as GrBadge, GrBadge_default as default, grBadgeConfig, grBadgeSafelist };

package/dist/components/GrBadge/styles.css

@@ -1 +1 @@
-.gr-badge__label[data-v-bc95969b]{align-items:center;min-height:1lh;display:flex}.gr-badge__text[data-v-bc95969b]{text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:block}
+.gr-badge__label[data-v-78f3036a]{align-items:center;gap:.25em;min-height:1lh;display:flex}.gr-badge__text[data-v-78f3036a]{text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:block}

package/dist/components/GrChip/chunks/{GrChip-C0vU69tf.js → GrChip-BTivtwff.js}

@@ -3,7 +3,7 @@ import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunk
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as warnRenamedProp } from "../../../chunks/renamedProp-BwcN-SJg.js";
 import { t as GR_CHIP_GROUP_CONTEXT } from "../../../chunks/grChipGroupContext-DZXkACap.js";
-import { a as chipIconSizeClassBySize, f as grChipClass, i as chipIconClass, n as chipCloseClass, s as chipLabelClass, t as chipCloseButtonClass } from "../../../chunks/grChipStyles-3JZApw03.js";
+import { a as chipIconSizeClassBySize, f as grChipClass, i as chipIconClass, n as chipCloseClass, s as chipLabelClass, t as chipCloseButtonClass } from "../../../chunks/grChipStyles-DcDyxAL0.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, withCtx, withModifiers } from "vue";
 //#region src/components/GrChip/GrChip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["title"];

package/dist/components/GrChip/chunks/{GrChip-C0vU69tf.js.map → GrChip-BTivtwff.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrChip-C0vU69tf.js","names":["$slots"],"sources":["../../../../src/components/GrChip/GrChip.vue","../../../../src/components/GrChip/GrChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined)\n    return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value)\n    return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel)\n    return props.removeLabel\n  if (props.label)\n    return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value)\n    return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value)\n    return undefined\n  if (isDisabled.value)\n    return -1\n  if (!inGroup.value || props.value === undefined)\n    return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable)\n    emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value)\n    return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined)\n    group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event))\n    return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value)\n      return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined)\n    return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value)\n    return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel)\n    return props.removeLabel\n  if (props.label)\n    return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value)\n    return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value)\n    return undefined\n  if (isDisabled.value)\n    return -1\n  if (!inGroup.value || props.value === undefined)\n    return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable)\n    emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value)\n    return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined)\n    group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event))\n    return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value)\n      return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrChip-BTivtwff.js","names":["$slots"],"sources":["../../../../src/components/GrChip/GrChip.vue","../../../../src/components/GrChip/GrChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined)\n    return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value)\n    return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel)\n    return props.removeLabel\n  if (props.label)\n    return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value)\n    return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value)\n    return undefined\n  if (isDisabled.value)\n    return -1\n  if (!inGroup.value || props.value === undefined)\n    return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable)\n    emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value)\n    return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined)\n    group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event))\n    return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value)\n      return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined)\n    return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value)\n    return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel)\n    return props.removeLabel\n  if (props.label)\n    return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value)\n    return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value)\n    return undefined\n  if (isDisabled.value)\n    return -1\n  if (!inGroup.value || props.value === undefined)\n    return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable)\n    emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value)\n    return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined)\n    group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event))\n    return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value)\n      return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/GrChip/index.js

@@ -1,3 +1,3 @@
-import { t as GrChip_default } from "./chunks/GrChip-C0vU69tf.js";
-import { n as grChipSafelist, t as grChipConfig } from "../../chunks/config-Dv_r92GL.js";
+import { t as GrChip_default } from "./chunks/GrChip-BTivtwff.js";
+import { n as grChipSafelist, t as grChipConfig } from "../../chunks/config-2vrOFn2f.js";
 export { GrChip_default as GrChip, GrChip_default as default, grChipConfig, grChipSafelist };

package/dist/components/GrColorPicker/chunks/{GrColorPicker-B20gQ6AR.js → GrColorPicker-p2XH_8cE.js}

@@ -3,7 +3,7 @@ import { n as useGranularityTranslations } from "../../../chunks/granularityI18n
 import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
 import { useGrFormControl } from "../../../composables/useGrFormControl.js";
 import { t as GrInput_default } from "../../GrInput/chunks/GrInput-BLywRZUN.js";
-import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-CofG-Tfe.js";
+import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-faJanmGs.js";
 import { t as GrSlider_default } from "../../GrSlider/chunks/GrSlider-DTTrZTHK.js";
 import { a as grColorPickerPresetClass, c as previewClass, d as rowValueClass, f as swatchBaseClass, h as triggerValueClass, i as grColorPickerPanelClass, l as rowClass, m as triggerSwatchSizeBySize, o as grColorPickerTriggerClass, p as swatchFillClass, r as checkerClass, s as presetsGridClass, u as rowLabelClass } from "../../../chunks/config-DIDz_E5m.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx, withKeys } from "vue";

package/dist/components/GrColorPicker/chunks/{GrColorPicker-B20gQ6AR.js.map → GrColorPicker-p2XH_8cE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrColorPicker-B20gQ6AR.js","names":[],"sources":["../../../../src/components/GrColorPicker/color.ts","../../../../src/components/GrColorPicker/GrColorPicker.vue","../../../../src/components/GrColorPicker/GrColorPicker.vue"],"sourcesContent":["/**\n * Арифметика цвета для `GrColorPicker` — чистый модуль без Vue.\n *\n * Модель компонента — hex-строка (в такой форме цвет лежит в токенах темы),\n * а панель работает в HSL: у оттенка, насыщенности и светлоты есть шкала, по\n * которой можно вести слайдер, а у каналов RGB её нет.\n *\n * Свой парсер, а не `__tests__/cssContrast.ts`: тот — инфраструктура гейтов, и\n * тянуть тестовый модуль в поставляемый код нельзя.\n */\n\nexport type GrHsla = {\n  /** Оттенок, 0…359 (круговой: 360 — это 0). */\n  h: number\n  /** Насыщенность, 0…100. */\n  s: number\n  /** Светлота, 0…100. */\n  l: number\n  /** Непрозрачность, 0…1. */\n  a: number\n}\n\ntype Rgb = { r: number, g: number, b: number }\n\nconst HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Оттенок цикличен: 360° — тот же цвет, что 0°.\n *\n * Округления здесь нет намеренно: `#3b82f6` даёт 217.22°, и округлив его до\n * целого, обратное преобразование вернуло бы `#3b83f6` — компонент молча\n * переписывал бы чужой цвет при первом же открытии панели. Целые градусы\n * появляются там, где они и нужны, — на шкале слайдера (`normalizeHsla`).\n */\nfunction normalizeHue(hue: number): number {\n  if (!Number.isFinite(hue))\n    return 0\n  return ((hue % 360) + 360) % 360\n}\n\n/** Короткая форма `#abc` разворачивается в `#aabbcc` — так её читает и CSS. */\nfunction expandShorthand(hex: string): string | null {\n  if (hex.length === 3 || hex.length === 4)\n    return [...hex].map(char => char + char).join('')\n\n  if (hex.length === 6 || hex.length === 8)\n    return hex\n\n  return null\n}\n\nfunction rgbToHsl({ r, g, b }: Rgb): { h: number, s: number, l: number } {\n  const red = r / 255\n  const green = g / 255\n  const blue = b / 255\n\n  const max = Math.max(red, green, blue)\n  const min = Math.min(red, green, blue)\n  const delta = max - min\n  const lightness = (max + min) / 2\n\n  if (delta === 0)\n    return { h: 0, s: 0, l: lightness * 100 }\n\n  const saturation = delta / (1 - Math.abs(2 * lightness - 1))\n\n  let hue: number\n  if (max === red)\n    hue = ((green - blue) / delta) % 6\n  else if (max === green)\n    hue = (blue - red) / delta + 2\n  else hue = (red - green) / delta + 4\n\n  return { h: normalizeHue(hue * 60), s: saturation * 100, l: lightness * 100 }\n}\n\nfunction hslToRgb({ h, s, l }: Omit<GrHsla, 'a'>): Rgb {\n  const saturation = clamp(s, 0, 100) / 100\n  const lightness = clamp(l, 0, 100) / 100\n  const hue = normalizeHue(h)\n\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation\n  const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1))\n  const match = lightness - chroma / 2\n\n  const [red, green, blue] = ((): [number, number, number] => {\n    if (hue < 60)\n      return [chroma, second, 0]\n    if (hue < 120)\n      return [second, chroma, 0]\n    if (hue < 180)\n      return [0, chroma, second]\n    if (hue < 240)\n      return [0, second, chroma]\n    if (hue < 300)\n      return [second, 0, chroma]\n    return [chroma, 0, second]\n  })()\n\n  return {\n    r: Math.round((red + match) * 255),\n    g: Math.round((green + match) * 255),\n    b: Math.round((blue + match) * 255),\n  }\n}\n\nfunction toHexPair(value: number): string {\n  return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0')\n}\n\n/**\n * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),\n * регистр и решётка необязательны.\n *\n * Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и\n * из поля ввода, и упавший компонент — худший ответ на опечатку.\n */\nexport function parseHexColor(value: unknown): GrHsla | null {\n  if (typeof value !== 'string')\n    return null\n\n  const match = HEX_PATTERN.exec(value.trim())\n  if (!match)\n    return null\n\n  const hex = expandShorthand(match[1])\n  if (!hex)\n    return null\n\n  const rgb: Rgb = {\n    r: Number.parseInt(hex.slice(0, 2), 16),\n    g: Number.parseInt(hex.slice(2, 4), 16),\n    b: Number.parseInt(hex.slice(4, 6), 16),\n  }\n\n  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1\n\n  return { ...rgbToHsl(rgb), a: alpha }\n}\n\n/**\n * Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до\n * непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную\n * форму, которую потребитель не ждёт.\n */\nexport function formatHexColor(color: GrHsla, withAlpha = false): string {\n  const { r, g, b } = hslToRgb(color)\n  const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`\n\n  if (!withAlpha)\n    return base\n\n  return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`\n}\n\n/** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */\nfunction trim(value: number): number {\n  return Math.round(value * 100) / 100\n}\n\n/** CSS-запись цвета для превью и градиентов. */\nexport function hslaToCss(color: GrHsla): string {\n  const h = trim(normalizeHue(color.h))\n  const s = trim(clamp(color.s, 0, 100))\n  const l = trim(clamp(color.l, 0, 100))\n\n  return `hsl(${h} ${s}% ${l}% / ${trim(clamp(color.a, 0, 1))})`\n}\n\n/** Приводит произвольный объект к валидному диапазону каналов. */\nexport function normalizeHsla(color: GrHsla): GrHsla {\n  return {\n    h: Math.round(normalizeHue(color.h)) % 360,\n    s: clamp(Math.round(color.s), 0, 100),\n    l: clamp(Math.round(color.l), 0, 100),\n    a: clamp(color.a, 0, 1),\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted)\n    return\n\n  const parsed = parseHexColor(next)\n  if (parsed)\n    state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value)\n    return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => {\n      hexDraft.value = hexValue.value\n    })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed)\n    commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted)\n    return\n\n  const parsed = parseHexColor(next)\n  if (parsed)\n    state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value)\n    return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => {\n      hexDraft.value = hexValue.value\n    })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed)\n    commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"GrColorPicker-p2XH_8cE.js","names":[],"sources":["../../../../src/components/GrColorPicker/color.ts","../../../../src/components/GrColorPicker/GrColorPicker.vue","../../../../src/components/GrColorPicker/GrColorPicker.vue"],"sourcesContent":["/**\n * Арифметика цвета для `GrColorPicker` — чистый модуль без Vue.\n *\n * Модель компонента — hex-строка (в такой форме цвет лежит в токенах темы),\n * а панель работает в HSL: у оттенка, насыщенности и светлоты есть шкала, по\n * которой можно вести слайдер, а у каналов RGB её нет.\n *\n * Свой парсер, а не `__tests__/cssContrast.ts`: тот — инфраструктура гейтов, и\n * тянуть тестовый модуль в поставляемый код нельзя.\n */\n\nexport type GrHsla = {\n  /** Оттенок, 0…359 (круговой: 360 — это 0). */\n  h: number\n  /** Насыщенность, 0…100. */\n  s: number\n  /** Светлота, 0…100. */\n  l: number\n  /** Непрозрачность, 0…1. */\n  a: number\n}\n\ntype Rgb = { r: number, g: number, b: number }\n\nconst HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Оттенок цикличен: 360° — тот же цвет, что 0°.\n *\n * Округления здесь нет намеренно: `#3b82f6` даёт 217.22°, и округлив его до\n * целого, обратное преобразование вернуло бы `#3b83f6` — компонент молча\n * переписывал бы чужой цвет при первом же открытии панели. Целые градусы\n * появляются там, где они и нужны, — на шкале слайдера (`normalizeHsla`).\n */\nfunction normalizeHue(hue: number): number {\n  if (!Number.isFinite(hue))\n    return 0\n  return ((hue % 360) + 360) % 360\n}\n\n/** Короткая форма `#abc` разворачивается в `#aabbcc` — так её читает и CSS. */\nfunction expandShorthand(hex: string): string | null {\n  if (hex.length === 3 || hex.length === 4)\n    return [...hex].map(char => char + char).join('')\n\n  if (hex.length === 6 || hex.length === 8)\n    return hex\n\n  return null\n}\n\nfunction rgbToHsl({ r, g, b }: Rgb): { h: number, s: number, l: number } {\n  const red = r / 255\n  const green = g / 255\n  const blue = b / 255\n\n  const max = Math.max(red, green, blue)\n  const min = Math.min(red, green, blue)\n  const delta = max - min\n  const lightness = (max + min) / 2\n\n  if (delta === 0)\n    return { h: 0, s: 0, l: lightness * 100 }\n\n  const saturation = delta / (1 - Math.abs(2 * lightness - 1))\n\n  let hue: number\n  if (max === red)\n    hue = ((green - blue) / delta) % 6\n  else if (max === green)\n    hue = (blue - red) / delta + 2\n  else hue = (red - green) / delta + 4\n\n  return { h: normalizeHue(hue * 60), s: saturation * 100, l: lightness * 100 }\n}\n\nfunction hslToRgb({ h, s, l }: Omit<GrHsla, 'a'>): Rgb {\n  const saturation = clamp(s, 0, 100) / 100\n  const lightness = clamp(l, 0, 100) / 100\n  const hue = normalizeHue(h)\n\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation\n  const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1))\n  const match = lightness - chroma / 2\n\n  const [red, green, blue] = ((): [number, number, number] => {\n    if (hue < 60)\n      return [chroma, second, 0]\n    if (hue < 120)\n      return [second, chroma, 0]\n    if (hue < 180)\n      return [0, chroma, second]\n    if (hue < 240)\n      return [0, second, chroma]\n    if (hue < 300)\n      return [second, 0, chroma]\n    return [chroma, 0, second]\n  })()\n\n  return {\n    r: Math.round((red + match) * 255),\n    g: Math.round((green + match) * 255),\n    b: Math.round((blue + match) * 255),\n  }\n}\n\nfunction toHexPair(value: number): string {\n  return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0')\n}\n\n/**\n * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),\n * регистр и решётка необязательны.\n *\n * Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и\n * из поля ввода, и упавший компонент — худший ответ на опечатку.\n */\nexport function parseHexColor(value: unknown): GrHsla | null {\n  if (typeof value !== 'string')\n    return null\n\n  const match = HEX_PATTERN.exec(value.trim())\n  if (!match)\n    return null\n\n  const hex = expandShorthand(match[1])\n  if (!hex)\n    return null\n\n  const rgb: Rgb = {\n    r: Number.parseInt(hex.slice(0, 2), 16),\n    g: Number.parseInt(hex.slice(2, 4), 16),\n    b: Number.parseInt(hex.slice(4, 6), 16),\n  }\n\n  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1\n\n  return { ...rgbToHsl(rgb), a: alpha }\n}\n\n/**\n * Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до\n * непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную\n * форму, которую потребитель не ждёт.\n */\nexport function formatHexColor(color: GrHsla, withAlpha = false): string {\n  const { r, g, b } = hslToRgb(color)\n  const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`\n\n  if (!withAlpha)\n    return base\n\n  return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`\n}\n\n/** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */\nfunction trim(value: number): number {\n  return Math.round(value * 100) / 100\n}\n\n/** CSS-запись цвета для превью и градиентов. */\nexport function hslaToCss(color: GrHsla): string {\n  const h = trim(normalizeHue(color.h))\n  const s = trim(clamp(color.s, 0, 100))\n  const l = trim(clamp(color.l, 0, 100))\n\n  return `hsl(${h} ${s}% ${l}% / ${trim(clamp(color.a, 0, 1))})`\n}\n\n/** Приводит произвольный объект к валидному диапазону каналов. */\nexport function normalizeHsla(color: GrHsla): GrHsla {\n  return {\n    h: Math.round(normalizeHue(color.h)) % 360,\n    s: clamp(Math.round(color.s), 0, 100),\n    l: clamp(Math.round(color.l), 0, 100),\n    a: clamp(color.a, 0, 1),\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted)\n    return\n\n  const parsed = parseHexColor(next)\n  if (parsed)\n    state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value)\n    return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => {\n      hexDraft.value = hexValue.value\n    })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed)\n    commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted)\n    return\n\n  const parsed = parseHexColor(next)\n  if (parsed)\n    state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value)\n    return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => {\n      hexDraft.value = hexValue.value\n    })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed)\n    commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrColorPicker/index.js

@@ -1,3 +1,3 @@
-import { t as GrColorPicker_default } from "./chunks/GrColorPicker-B20gQ6AR.js";
+import { t as GrColorPicker_default } from "./chunks/GrColorPicker-p2XH_8cE.js";
 import { n as grColorPickerSafelist, t as grColorPickerConfig } from "../../chunks/config-DIDz_E5m.js";
 export { GrColorPicker_default as GrColorPicker, GrColorPicker_default as default, grColorPickerConfig, grColorPickerSafelist };

package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-Cd0Yo3Dw.js → GrCommandPalette-BXbh3q7O.js}

@@ -8,7 +8,7 @@ import { i as normalizeOptionQuery, r as matchesQueryParts } from "../../../chun
 import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
 import { n as iconTag, t as iconClass } from "../../../chunks/icon-Dag2tIMs.js";
 import { i as parseCommandHotkey, n as formatCommandHotkey, r as matchesCommandHotkey, t as GrKbd_default } from "../../GrKbd/chunks/GrKbd-D2ga1H9i.js";
-import { t as GrModal_default } from "../../GrModal/chunks/GrModal-CCoWZuIl.js";
+import { t as GrModal_default } from "../../GrModal/chunks/GrModal-D0mf1SAx.js";
 import { a as commandGroupLabelClass, c as commandItemMutedClass, d as commandSearchInputClass, f as commandSearchRowClass, i as commandFooterClass, l as commandMatchClass, o as commandItemClass, r as commandEmptyClass, s as commandItemDescriptionClass, u as commandPaletteModalSizeBySize } from "../../../chunks/config-D0NzGYaE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, watch, withCtx } from "vue";
 import '../styles.css';//#region src/components/GrCommandPalette/filtering.ts