@feugene/granularity 0.34.0 → 0.34.1

package/dist/chunks/{grPopoverStyles-DKwigt7b.js → grPopoverStyles-CYAeO3Ov.js}

@@ -78,7 +78,26 @@ var panelSizesFlush = {
 	md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]",
 	lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]"
 };
-var popoverPanelBaseClass = `${overlayPanelSurfaceClass} max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] focus:outline-none`;
+/**
+* Высота — тоже `min()` из двух пределов, но устроена иначе, чем ширина.
+*
+* Потолок ширины статичен: `calc(100vw-1rem)` не зависит от того, где стоит
+* триггер. Потолок высоты статичным быть не может — доступное место есть
+* расстояние до края вьюпорта на той стороне, куда панель встала, и меняется
+* оно на каждом скролле. Поэтому второй операнд здесь — не константа, а замер
+* слоя (`--gr-floating-available-height`, см. `useFloating`), и он пересчитан
+* уже **после** `flip`: сторона окончательная.
+*
+* `overflow-y: auto` идёт с потолком одной строкой намеренно. Потолок без
+* скролла не ограничивает, а обрезает: содержимое молча уходит под нижний край
+* панели, и добраться до него нельзя ничем. Пока потолок не упёрся, полоса не
+* рисуется, так что для коротких панелей не меняется ничего.
+*
+* Хук `--gr-popover-max-height` по умолчанию `100vh` — то есть «мнения нет»,
+* и высоту диктует замер. Он же служит фолбэком, пока позиция не посчитана
+* (первый кадр, SSR): панель не схлопывается в ноль, а просто не ограничена.
+*/
+var popoverPanelBaseClass = `${overlayPanelSurfaceClass} max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] max-h-[min(var(--gr-popover-max-height,100vh),var(--gr-floating-available-height,100vh))] overflow-y-auto focus:outline-none`;
 function grPopoverPanelClass(size, placement, extra, padding = "default") {
 	return [
 		popoverPanelBaseClass,

package/dist/chunks/{grPopoverStyles-DKwigt7b.js.map → grPopoverStyles-CYAeO3Ov.js.map}

@@ -1 +1 @@
-{"version":3,"file":"grPopoverStyles-DKwigt7b.js","names":[],"sources":["../../src/components/shared/overlayOrigin.ts","../../src/components/GrPopover/grPopoverStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\n/**\n * `transform-origin` для scale-анимации всплывающей панели.\n *\n * Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не\n * хватило места и панель перевернуло вверх, origin переворачивается вместе с\n * ней. Координаты панели к этому моменту уже посчитал `useFloating`, здесь\n * остаётся только направление роста относительно триггера.\n *\n * До выноса карта существовала копиями в `GrPopover` и `GrDropdown` — двенадцать\n * записей, совпадавших дословно, вместе с комментарием об одном и том же.\n *\n * Отдельным модулем от поверхности намеренно: списки выбора берут поверхность,\n * но своей анимации роста не имеют, и импорт соседа затащил бы им в чанк восемь\n * классов, которыми они не пользуются. Гейт `src/__tests__/safelist.test.ts`\n * назвал бы их поимённо — и был бы прав.\n *\n * Модуль безадресный: в `dist` он уезжает в общий чанк, который пресет не\n * сканирует, поэтому каждый потребитель объявляет эти классы в своём `safelist.ts`.\n */\nexport const overlayOriginClassByPlacement: Record<Placement, string> = {\n  'bottom-start': 'origin-top-left',\n  'bottom-end': 'origin-top-right',\n  'bottom': 'origin-top',\n  'top-start': 'origin-bottom-left',\n  'top-end': 'origin-bottom-right',\n  'top': 'origin-bottom',\n  'left-start': 'origin-top-right',\n  'left-end': 'origin-bottom-right',\n  'left': 'origin-right',\n  'right-start': 'origin-top-left',\n  'right-end': 'origin-bottom-left',\n  'right': 'origin-left',\n}\n\nexport function overlayOriginClass(placement: Placement): string {\n  return overlayOriginClassByPlacement[placement] ?? 'origin-top'\n}\n","import type { Placement } from '@floating-ui/dom'\n\nimport { overlayOriginClass } from '../shared/overlayOrigin'\nimport { overlayPanelSurfaceClass } from '../shared/overlayPanelSurface'\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrPopoverSize = GrComponentSize\n\n/**\n * Роль панели.\n *\n * `dialog` — произвольный интерактивный контент (значение по умолчанию).\n * Остальные нужны компонентам, которые строятся поверх этого примитива:\n * меню (`GrMenu`, `GrContextMenu`), списки, палитры. Роль задаёт потребитель,\n * потому что клавиатурный паттерн принадлежит ему, а не поповеру.\n */\nexport type GrPopoverRole = 'dialog' | 'menu' | 'listbox' | 'grid' | 'group' | 'none'\n\n/** Поле панели. `none` — поле рисует содержимое (меню, список опций). */\nexport type GrPopoverPadding = 'default' | 'none'\n\nexport const panelSizes: Record<GrPopoverSize, string> = {\n  xs: 'p-2 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n  sm: 'p-2.5 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n  md: 'p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n  lg: 'p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/**\n * Поверхность панели.\n *\n * Ширина — `min()` из двух пределов, и они разной природы. Первый, `22rem`, —\n * потолок содержимого: читаемая ширина колонки текста. Он **дефолт**, а не\n * закон, и снимается хуком `--gr-popover-max-width` — примитив объявил, что\n * содержимое панели дело потребителя, и навязывать ему форму не вправе.\n * Тулбар, палитра и сетка шире прозы законно.\n *\n * Второй, `calc(100vw-1rem)`, — инвариант слоя: `useFloating` смещает панель в\n * пределах вьюпорта, но не сужает её. Он не настраивается ничем и снаружи не\n * отключается, потому что стоит вторым операндом `min()`: даже\n * `--gr-popover-max-width: 100vw` его не снимает, а лишь уступает ему место.\n *\n * Хуком, а не пропом, — по трём причинам. Спор специфичности не возникает\n * вовсе: кастомное свойство разрешается каскадом на самом элементе, а не\n * порядком правил в сгенерированном CSS (та же ловушка, что описана у\n * `panelSizesFlush`). Потолок можно менять по брейкпоинту и по теме — пропом\n * этого не сделать. И словарь компонента не растёт: значение остаётся\n * значением. Так же устроена высота списка у `GrCommandPalette`.\n */\n/**\n * Кегль без поля.\n *\n * Отдельная мапа, а не `contentClass=\"p-0\"`: поле и кегль приезжают одной\n * строкой равной специфичности, и кто победит — решал бы порядок правил в\n * сгенерированном CSS. Меню внутри поповера с `p-3` — визуально не меню.\n */\nexport const panelSizesFlush: Record<GrPopoverSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n  sm: 'text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n  md: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n  lg: 'text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\nexport const popoverPanelBaseClass = `${overlayPanelSurfaceClass} max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] focus:outline-none`\n\nexport function grPopoverPanelClass(\n  size: GrPopoverSize,\n  placement: Placement,\n  extra?: string,\n  padding: GrPopoverPadding = 'default',\n): string {\n  return [\n    popoverPanelBaseClass,\n    padding === 'none' ? panelSizesFlush[size] : panelSizes[size],\n    overlayOriginClass(placement),\n    extra ?? '',\n  ].filter(Boolean).join(' ')\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,gCAA2D;CACtE,gBAAgB;CAChB,cAAc;CACd,UAAU;CACV,aAAa;CACb,WAAW;CACX,OAAO;CACP,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,aAAa;CACb,SAAS;AACX;AAEA,SAAgB,mBAAmB,WAA8B;CAC/D,OAAO,8BAA8B,cAAc;AACrD;;;ACjBA,IAAa,aAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,kBAAiD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBAAwB,GAAG,yBAAyB;AAEjE,SAAgB,oBACd,MACA,WACA,OACA,UAA4B,WACpB;CACR,OAAO;EACL;EACA,YAAY,SAAS,gBAAgB,QAAQ,WAAW;EACxD,mBAAmB,SAAS;EAC5B,SAAS;CACX,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}
+{"version":3,"file":"grPopoverStyles-CYAeO3Ov.js","names":[],"sources":["../../src/components/shared/overlayOrigin.ts","../../src/components/GrPopover/grPopoverStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\n/**\n * `transform-origin` для scale-анимации всплывающей панели.\n *\n * Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не\n * хватило места и панель перевернуло вверх, origin переворачивается вместе с\n * ней. Координаты панели к этому моменту уже посчитал `useFloating`, здесь\n * остаётся только направление роста относительно триггера.\n *\n * До выноса карта существовала копиями в `GrPopover` и `GrDropdown` — двенадцать\n * записей, совпадавших дословно, вместе с комментарием об одном и том же.\n *\n * Отдельным модулем от поверхности намеренно: списки выбора берут поверхность,\n * но своей анимации роста не имеют, и импорт соседа затащил бы им в чанк восемь\n * классов, которыми они не пользуются. Гейт `src/__tests__/safelist.test.ts`\n * назвал бы их поимённо — и был бы прав.\n *\n * Модуль безадресный: в `dist` он уезжает в общий чанк, который пресет не\n * сканирует, поэтому каждый потребитель объявляет эти классы в своём `safelist.ts`.\n */\nexport const overlayOriginClassByPlacement: Record<Placement, string> = {\n  'bottom-start': 'origin-top-left',\n  'bottom-end': 'origin-top-right',\n  'bottom': 'origin-top',\n  'top-start': 'origin-bottom-left',\n  'top-end': 'origin-bottom-right',\n  'top': 'origin-bottom',\n  'left-start': 'origin-top-right',\n  'left-end': 'origin-bottom-right',\n  'left': 'origin-right',\n  'right-start': 'origin-top-left',\n  'right-end': 'origin-bottom-left',\n  'right': 'origin-left',\n}\n\nexport function overlayOriginClass(placement: Placement): string {\n  return overlayOriginClassByPlacement[placement] ?? 'origin-top'\n}\n","import type { Placement } from '@floating-ui/dom'\n\nimport { overlayOriginClass } from '../shared/overlayOrigin'\nimport { overlayPanelSurfaceClass } from '../shared/overlayPanelSurface'\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrPopoverSize = GrComponentSize\n\n/**\n * Роль панели.\n *\n * `dialog` — произвольный интерактивный контент (значение по умолчанию).\n * Остальные нужны компонентам, которые строятся поверх этого примитива:\n * меню (`GrMenu`, `GrContextMenu`), списки, палитры. Роль задаёт потребитель,\n * потому что клавиатурный паттерн принадлежит ему, а не поповеру.\n */\nexport type GrPopoverRole = 'dialog' | 'menu' | 'listbox' | 'grid' | 'group' | 'none'\n\n/** Поле панели. `none` — поле рисует содержимое (меню, список опций). */\nexport type GrPopoverPadding = 'default' | 'none'\n\nexport const panelSizes: Record<GrPopoverSize, string> = {\n  xs: 'p-2 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n  sm: 'p-2.5 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n  md: 'p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n  lg: 'p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/**\n * Поверхность панели.\n *\n * Ширина — `min()` из двух пределов, и они разной природы. Первый, `22rem`, —\n * потолок содержимого: читаемая ширина колонки текста. Он **дефолт**, а не\n * закон, и снимается хуком `--gr-popover-max-width` — примитив объявил, что\n * содержимое панели дело потребителя, и навязывать ему форму не вправе.\n * Тулбар, палитра и сетка шире прозы законно.\n *\n * Второй, `calc(100vw-1rem)`, — инвариант слоя: `useFloating` смещает панель в\n * пределах вьюпорта, но не сужает её. Он не настраивается ничем и снаружи не\n * отключается, потому что стоит вторым операндом `min()`: даже\n * `--gr-popover-max-width: 100vw` его не снимает, а лишь уступает ему место.\n *\n * Хуком, а не пропом, — по трём причинам. Спор специфичности не возникает\n * вовсе: кастомное свойство разрешается каскадом на самом элементе, а не\n * порядком правил в сгенерированном CSS (та же ловушка, что описана у\n * `panelSizesFlush`). Потолок можно менять по брейкпоинту и по теме — пропом\n * этого не сделать. И словарь компонента не растёт: значение остаётся\n * значением. Так же устроена высота списка у `GrCommandPalette`.\n */\n/**\n * Кегль без поля.\n *\n * Отдельная мапа, а не `contentClass=\"p-0\"`: поле и кегль приезжают одной\n * строкой равной специфичности, и кто победит — решал бы порядок правил в\n * сгенерированном CSS. Меню внутри поповера с `p-3` — визуально не меню.\n */\nexport const panelSizesFlush: Record<GrPopoverSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n  sm: 'text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n  md: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n  lg: 'text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/**\n * Высота — тоже `min()` из двух пределов, но устроена иначе, чем ширина.\n *\n * Потолок ширины статичен: `calc(100vw-1rem)` не зависит от того, где стоит\n * триггер. Потолок высоты статичным быть не может — доступное место есть\n * расстояние до края вьюпорта на той стороне, куда панель встала, и меняется\n * оно на каждом скролле. Поэтому второй операнд здесь — не константа, а замер\n * слоя (`--gr-floating-available-height`, см. `useFloating`), и он пересчитан\n * уже **после** `flip`: сторона окончательная.\n *\n * `overflow-y: auto` идёт с потолком одной строкой намеренно. Потолок без\n * скролла не ограничивает, а обрезает: содержимое молча уходит под нижний край\n * панели, и добраться до него нельзя ничем. Пока потолок не упёрся, полоса не\n * рисуется, так что для коротких панелей не меняется ничего.\n *\n * Хук `--gr-popover-max-height` по умолчанию `100vh` — то есть «мнения нет»,\n * и высоту диктует замер. Он же служит фолбэком, пока позиция не посчитана\n * (первый кадр, SSR): панель не схлопывается в ноль, а просто не ограничена.\n */\nexport const popoverPanelBaseClass = `${overlayPanelSurfaceClass} max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] max-h-[min(var(--gr-popover-max-height,100vh),var(--gr-floating-available-height,100vh))] overflow-y-auto focus:outline-none`\n\nexport function grPopoverPanelClass(\n  size: GrPopoverSize,\n  placement: Placement,\n  extra?: string,\n  padding: GrPopoverPadding = 'default',\n): string {\n  return [\n    popoverPanelBaseClass,\n    padding === 'none' ? panelSizesFlush[size] : panelSizes[size],\n    overlayOriginClass(placement),\n    extra ?? '',\n  ].filter(Boolean).join(' ')\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,gCAA2D;CACtE,gBAAgB;CAChB,cAAc;CACd,UAAU;CACV,aAAa;CACb,WAAW;CACX,OAAO;CACP,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,aAAa;CACb,SAAS;AACX;AAEA,SAAgB,mBAAmB,WAA8B;CAC/D,OAAO,8BAA8B,cAAc;AACrD;;;ACjBA,IAAa,aAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,kBAAiD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,wBAAwB,GAAG,yBAAyB;AAEjE,SAAgB,oBACd,MACA,WACA,OACA,UAA4B,WACpB;CACR,OAAO;EACL;EACA,YAAY,SAAS,gBAAgB,QAAQ,WAAW;EACxD,mBAAmB,SAAS;EAC5B,SAAS;CACX,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}

package/dist/chunks/{granular-provider-3LUawDPh.js → granular-provider-BAy4APOX.js}

@@ -28,7 +28,7 @@ import { t as grDialogSafelist } from "./safelist-Y3zrlhOa.js";
 import { t as grDialogServiceConfig } from "./config-CjXjhphs.js";
 import { t as grDividerConfig } from "./config-D82r782v.js";
 import { t as grDrawerConfig } from "./config-ChPg-BQv.js";
-import { t as grDropdownConfig } from "./config-DGGaKf4R.js";
+import { t as grDropdownConfig } from "./config-CT4lP6S4.js";
 import { t as grDropdownMenuConfig } from "./config-_jbgsFpw.js";
 import { t as grEmptyStateConfig } from "./config-CWtfxkM9.js";
 import { t as grFilePreviewConfig } from "./config-BaWANzzB.js";
@@ -49,7 +49,7 @@ import { t as grModalConfig } from "./config-mlheIMtV.js";
 import { t as grNavbarConfig } from "./config-2ZHRsdOc.js";
 import { t as grNumberInputConfig } from "./config-MmPym-Z72.js";
 import { t as grPaginationConfig } from "./config-CjKpUcmy.js";
-import { t as grPopoverConfig } from "./config-DBXCIb6r2.js";
+import { t as grPopoverConfig } from "./config-DVCNvhIG2.js";
 import { t as grProgressBarConfig } from "./config-DWL81-aM.js";
 import { t as grProgressCircleConfig } from "./config-CJzmDHfI.js";
 import { t as grPromptDialogConfig } from "./config-C0Ea9ePP.js";

package/dist/chunks/{granular-provider-3LUawDPh.js.map → granular-provider-BAy4APOX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"granular-provider-3LUawDPh.js","names":[],"sources":["../../src/components/GrDialog/config.ts","../../src/components/GrResponseErrorBanner/config.ts","../../src/granular-provider/shared.ts","../../src/granular-provider/index.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grDialogSafelist } from './safelist'\n\nexport const grDialogConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDialog',\n  dependencies: ['GrButton', 'GrModal'],\n  safelist: grDialogSafelist,\n})\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grResponseErrorBannerConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrResponseErrorBanner',\n  dependencies: ['GrAlert', 'GrButton'],\n})\n","// `id`, `theme.*`, `packageBaseUrl` и реестр компонентов провайдера.\n//\n// Все `new URL('../styles/...', import.meta.url)` обязаны лежать именно здесь:\n// `shared.ts` в одной директории с `index.ts` / `node.ts`, поэтому\n// относительные пути совпадают. Для браузера безопасно — бандлеры\n// транслируют такие литералы в статические asset-URL.\n//\n// `apps/showcase/scripts/generate-component-api.mjs` читает список компонентов\n// из `Object.keys(granularityComponentConfigs)` через vite SSR.\nimport {\n  defineGranularProvider,\n  type GranularComponentDescriptor,\n  type GranularProvider,\n  resolvePackageBaseUrl,\n} from '@feugene/unocss-preset-granular/contract'\n// <granularity:components:imports> — блок генерируется `yarn generate:registry`\nimport { grAlertConfig } from '../components/GrAlert/config'\nimport { grAutocompleteConfig } from '../components/GrAutocomplete/config'\nimport { grAvatarConfig } from '../components/GrAvatar/config'\nimport { grBadgeConfig } from '../components/GrBadge/config'\nimport { grBadgeWrapConfig } from '../components/GrBadgeWrap/config'\nimport { grBottomNavConfig } from '../components/GrBottomNav/config'\nimport { grBreadcrumbsConfig } from '../components/GrBreadcrumbs/config'\nimport { grButtonConfig } from '../components/GrButton/config'\nimport { grButtonGroupConfig } from '../components/GrButtonGroup/config'\nimport { grCardConfig } from '../components/GrCard/config'\nimport { grCheckboxConfig } from '../components/GrCheckbox/config'\nimport { grCheckboxGroupConfig } from '../components/GrCheckboxGroup/config'\nimport { grChipConfig } from '../components/GrChip/config'\nimport { grChipGroupConfig } from '../components/GrChipGroup/config'\nimport { grCodeBlockConfig } from '../components/GrCodeBlock/config'\nimport { grCollapseConfig } from '../components/GrCollapse/config'\nimport { grColorPickerConfig } from '../components/GrColorPicker/config'\nimport { grCommandPaletteConfig } from '../components/GrCommandPalette/config'\nimport { grConfigProviderConfig } from '../components/GrConfigProvider/config'\nimport { grConfirmDialogConfig } from '../components/GrConfirmDialog/config'\nimport { grContextMenuConfig } from '../components/GrContextMenu/config'\nimport { grDataTableConfig } from '../components/GrDataTable/config'\nimport { grDeltaConfig } from '../components/GrDelta/config'\nimport { grDescriptionListConfig } from '../components/GrDescriptionList/config'\nimport { grDialogConfig } from '../components/GrDialog/config'\nimport { grDialogServiceConfig } from '../components/GrDialogService/config'\nimport { grDividerConfig } from '../components/GrDivider/config'\nimport { grDrawerConfig } from '../components/GrDrawer/config'\nimport { grDropdownConfig } from '../components/GrDropdown/config'\nimport { grDropdownMenuConfig } from '../components/GrDropdownMenu/config'\nimport { grEmptyStateConfig } from '../components/GrEmptyState/config'\nimport { grFilePreviewConfig } from '../components/GrFilePreview/config'\nimport { grFileUploadConfig } from '../components/GrFileUpload/config'\nimport { grFormConfig } from '../components/GrForm/config'\nimport { grFormFieldConfig } from '../components/GrFormField/config'\nimport { grFormFileConfig } from '../components/GrFormFile/config'\nimport { grFormSectionConfig } from '../components/GrFormSection/config'\nimport { grIconConfig } from '../components/GrIcon/config'\nimport { grImageViewerConfig } from '../components/GrImageViewer/config'\nimport { grInputConfig } from '../components/GrInput/config'\nimport { grInputTagConfig } from '../components/GrInputTag/config'\nimport { grJsonViewerConfig } from '../components/GrJsonViewer/config'\nimport { grKbdConfig } from '../components/GrKbd/config'\nimport { grLinkConfig } from '../components/GrLink/config'\nimport { grListConfig } from '../components/GrList/config'\nimport { grLoadingConfig } from '../components/GrLoading/config'\nimport { grModalConfig } from '../components/GrModal/config'\nimport { grNavbarConfig } from '../components/GrNavbar/config'\nimport { grNumberInputConfig } from '../components/GrNumberInput/config'\nimport { grPaginationConfig } from '../components/GrPagination/config'\nimport { grPopoverConfig } from '../components/GrPopover/config'\nimport { grProgressBarConfig } from '../components/GrProgressBar/config'\nimport { grProgressCircleConfig } from '../components/GrProgressCircle/config'\nimport { grPromptDialogConfig } from '../components/GrPromptDialog/config'\nimport { grRadioConfig } from '../components/GrRadio/config'\nimport { grRadioGroupConfig } from '../components/GrRadioGroup/config'\nimport { grRatingConfig } from '../components/GrRating/config'\nimport { grResponseErrorBannerConfig } from '../components/GrResponseErrorBanner/config'\nimport { grSegmentedConfig } from '../components/GrSegmented/config'\nimport { grSelectConfig } from '../components/GrSelect/config'\nimport { grSidebarConfig } from '../components/GrSidebar/config'\nimport { grSkeletonConfig } from '../components/GrSkeleton/config'\nimport { grSliderConfig } from '../components/GrSlider/config'\nimport { grSortableListConfig } from '../components/GrSortableList/config'\nimport { grSplitterConfig } from '../components/GrSplitter/config'\nimport { grStatisticConfig } from '../components/GrStatistic/config'\nimport { grStepsConfig } from '../components/GrSteps/config'\nimport { grSwitchConfig } from '../components/GrSwitch/config'\nimport { grTableConfig } from '../components/GrTable/config'\nimport { grTabPanelsConfig } from '../components/GrTabPanels/config'\nimport { grTabsConfig } from '../components/GrTabs/config'\nimport { grTextareaConfig } from '../components/GrTextarea/config'\nimport { grTimelineConfig } from '../components/GrTimeline/config'\nimport { grToasterConfig } from '../components/GrToaster/config'\nimport { grTooltipConfig } from '../components/GrTooltip/config'\nimport { grTreeConfig } from '../components/GrTree/config'\nimport { grTreeSelectConfig } from '../components/GrTreeSelect/config'\nimport { grValueConfig } from '../components/GrValue/config'\n// </granularity:components:imports>\n\n/** Идентификатор провайдера — совпадает с именем пакета. */\nexport const GRANULARITY_PROVIDER_ID = '@feugene/granularity'\n\n// Не заменять на `new URL('..', import.meta.url)`: Vite и rolldown распознают\n// этот литерал и подставляют `data:`-URL, после чего scan-директории пустеют.\nconst packageBaseUrl = resolvePackageBaseUrl(import.meta.url)\n\n/** Встроенные темы пакета. Единственный источник правды о списке тем. */\nexport const granularityThemeNames = ['light', 'dark'] as const\nexport type GranularityThemeName = (typeof granularityThemeNames)[number]\n\n/** Темы, активные по умолчанию, если окружение не переопределяет выбор. */\nexport const granularityDefaultThemes: readonly GranularityThemeName[] = ['light']\n\nconst theme = {\n  baseCssUrl: new URL('../styles/base.css', import.meta.url).href,\n  tokensCssUrl: new URL('../styles/tokens.css', import.meta.url).href,\n  themes: {\n    light: new URL('../styles/themes/light.css', import.meta.url).href,\n    dark: new URL('../styles/themes/dark.css', import.meta.url).href,\n  },\n  defaultThemes: granularityDefaultThemes,\n} as const\n\n/**\n * Реестр публичных компонентов. Ключи совпадают с subpath-экспортом\n * `@feugene/granularity/components/<Name>`.\n */\nexport const granularityComponentConfigs = {\n  // <granularity:components:registry> — блок генерируется `yarn generate:registry`\n  GrAlert: grAlertConfig,\n  GrAutocomplete: grAutocompleteConfig,\n  GrAvatar: grAvatarConfig,\n  GrBadge: grBadgeConfig,\n  GrBadgeWrap: grBadgeWrapConfig,\n  GrBottomNav: grBottomNavConfig,\n  GrBreadcrumbs: grBreadcrumbsConfig,\n  GrButton: grButtonConfig,\n  GrButtonGroup: grButtonGroupConfig,\n  GrCard: grCardConfig,\n  GrCheckbox: grCheckboxConfig,\n  GrCheckboxGroup: grCheckboxGroupConfig,\n  GrChip: grChipConfig,\n  GrChipGroup: grChipGroupConfig,\n  GrCodeBlock: grCodeBlockConfig,\n  GrCollapse: grCollapseConfig,\n  GrColorPicker: grColorPickerConfig,\n  GrCommandPalette: grCommandPaletteConfig,\n  GrConfigProvider: grConfigProviderConfig,\n  GrConfirmDialog: grConfirmDialogConfig,\n  GrContextMenu: grContextMenuConfig,\n  GrDataTable: grDataTableConfig,\n  GrDelta: grDeltaConfig,\n  GrDescriptionList: grDescriptionListConfig,\n  GrDialog: grDialogConfig,\n  GrDialogService: grDialogServiceConfig,\n  GrDivider: grDividerConfig,\n  GrDrawer: grDrawerConfig,\n  GrDropdown: grDropdownConfig,\n  GrDropdownMenu: grDropdownMenuConfig,\n  GrEmptyState: grEmptyStateConfig,\n  GrFilePreview: grFilePreviewConfig,\n  GrFileUpload: grFileUploadConfig,\n  GrForm: grFormConfig,\n  GrFormField: grFormFieldConfig,\n  GrFormFile: grFormFileConfig,\n  GrFormSection: grFormSectionConfig,\n  GrIcon: grIconConfig,\n  GrImageViewer: grImageViewerConfig,\n  GrInput: grInputConfig,\n  GrInputTag: grInputTagConfig,\n  GrJsonViewer: grJsonViewerConfig,\n  GrKbd: grKbdConfig,\n  GrLink: grLinkConfig,\n  GrList: grListConfig,\n  GrLoading: grLoadingConfig,\n  GrModal: grModalConfig,\n  GrNavbar: grNavbarConfig,\n  GrNumberInput: grNumberInputConfig,\n  GrPagination: grPaginationConfig,\n  GrPopover: grPopoverConfig,\n  GrProgressBar: grProgressBarConfig,\n  GrProgressCircle: grProgressCircleConfig,\n  GrPromptDialog: grPromptDialogConfig,\n  GrRadio: grRadioConfig,\n  GrRadioGroup: grRadioGroupConfig,\n  GrRating: grRatingConfig,\n  GrResponseErrorBanner: grResponseErrorBannerConfig,\n  GrSegmented: grSegmentedConfig,\n  GrSelect: grSelectConfig,\n  GrSidebar: grSidebarConfig,\n  GrSkeleton: grSkeletonConfig,\n  GrSlider: grSliderConfig,\n  GrSortableList: grSortableListConfig,\n  GrSplitter: grSplitterConfig,\n  GrStatistic: grStatisticConfig,\n  GrSteps: grStepsConfig,\n  GrSwitch: grSwitchConfig,\n  GrTable: grTableConfig,\n  GrTabPanels: grTabPanelsConfig,\n  GrTabs: grTabsConfig,\n  GrTextarea: grTextareaConfig,\n  GrTimeline: grTimelineConfig,\n  GrToaster: grToasterConfig,\n  GrTooltip: grTooltipConfig,\n  GrTree: grTreeConfig,\n  GrTreeSelect: grTreeSelectConfig,\n  GrValue: grValueConfig,\n  // </granularity:components:registry>\n}\n\nexport type GranularityComponentName = keyof typeof granularityComponentConfigs\n\n/** Базовый набор компонентов в порядке реестра. */\nconst baseComponents: readonly GranularComponentDescriptor[] = Object.values(\n  granularityComponentConfigs,\n)\n\n/**\n * Собирает granular-provider пакета.\n *\n * `overrides` — точка расширения для потребителя: дескриптор с именем из\n * базового реестра заменяет его, остальные дописываются в конец.\n */\nexport function createGranularityProvider(\n  overrides: readonly GranularComponentDescriptor[] = [],\n): GranularProvider {\n  const overrideByName = new Map(\n    overrides.map(component => [component.name, component]),\n  )\n  const components: GranularComponentDescriptor[] = [\n    ...baseComponents.map(component => overrideByName.get(component.name) ?? component),\n    ...overrides.filter(component => !baseComponents.some(base => base.name === component.name)),\n  ]\n\n  return defineGranularProvider({\n    id: GRANULARITY_PROVIDER_ID,\n    contractVersion: 1,\n    packageBaseUrl,\n    components,\n    theme,\n  })\n}\n","import { createGranularityProvider } from './shared'\n\nexport * from './shared'\n\nexport const granularityProvider = createGranularityProvider()\n\nexport default granularityProvider\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAa,iBAAiB,wBAAwB,OAAO,KAAK,KAAK;CACrE,MAAM;CACN,cAAc,CAAC,YAAY,SAAS;CACpC,UAAU;AACZ,CAAC;;;ACND,IAAa,8BAA8B,wBAAwB,OAAO,KAAK,KAAK;CAClF,MAAM;CACN,cAAc,CAAC,WAAW,UAAU;AACtC,CAAC;;;;AC4FD,IAAa,0BAA0B;AAIvC,IAAM,iBAAiB,sBAAsB,OAAO,KAAK,GAAG;;AAG5D,IAAa,wBAAwB,CAAC,SAAS,MAAM;;AAIrD,IAAa,2BAA4D,CAAC,OAAO;AAEjF,IAAM,QAAQ;CACZ,YAAY,IAAA,IAAA,q5KAAA,KAAA,OAAA,KAAA,GAAA,CAA8C,CAAC;CAC3D,cAAc,IAAA,IAAA,65YAAA,KAAA,OAAA,KAAA,GAAA,CAAgD,CAAC;CAC/D,QAAQ;EACN,OAAO,IAAA,IAAA,iyYAAA,KAAA,OAAA,KAAA,GAAA,CAAsD,CAAC;EAC9D,MAAM,IAAA,IAAA,y/SAAA,KAAA,OAAA,KAAA,GAAA,CAAqD,CAAC;CAC9D;CACA,eAAe;AACjB;;;;;AAMA,IAAa,8BAA8B;CAEzC,SAAS;CACT,gBAAgB;CAChB,UAAU;CACV,SAAS;CACT,aAAa;CACb,aAAa;CACb,eAAe;CACf,UAAU;CACV,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,iBAAiB;CACjB,QAAQ;CACR,aAAa;CACb,aAAa;CACb,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,iBAAiB;CACjB,eAAe;CACf,aAAa;CACb,SAAS;CACT,mBAAmB;CACnB,UAAU;CACV,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,cAAc;CACd,QAAQ;CACR,aAAa;CACb,YAAY;CACZ,eAAe;CACf,QAAQ;CACR,eAAe;CACf,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,SAAS;CACT,UAAU;CACV,eAAe;CACf,cAAc;CACd,WAAW;CACX,eAAe;CACf,kBAAkB;CAClB,gBAAgB;CAChB,SAAS;CACT,cAAc;CACd,UAAU;CACV,uBAAuB;CACvB,aAAa;CACb,UAAU;CACV,WAAW;CACX,YAAY;CACZ,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,SAAS;CACT,UAAU;CACV,SAAS;CACT,aAAa;CACb,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,WAAW;CACX,QAAQ;CACR,cAAc;CACd,SAAS;AAEX;;AAKA,IAAM,iBAAyD,OAAO,OACpE,2BACF;;;;;;;AAQA,SAAgB,0BACd,YAAoD,CAAC,GACnC;CAClB,MAAM,iBAAiB,IAAI,IACzB,UAAU,KAAI,cAAa,CAAC,UAAU,MAAM,SAAS,CAAC,CACxD;CAMA,OAAO,uBAAuB;EAC5B,IAAI;EACJ,iBAAiB;EACjB;EACA,aARA,GAAG,eAAe,KAAI,cAAa,eAAe,IAAI,UAAU,IAAI,KAAK,SAAS,GAClF,GAAG,UAAU,QAAO,cAAa,CAAC,eAAe,MAAK,SAAQ,KAAK,SAAS,UAAU,IAAI,CAAC,CAO3F;EACA;CACF,CAAC;AACH;;;AC1OA,IAAa,sBAAsB,0BAA0B"}
+{"version":3,"file":"granular-provider-BAy4APOX.js","names":[],"sources":["../../src/components/GrDialog/config.ts","../../src/components/GrResponseErrorBanner/config.ts","../../src/granular-provider/shared.ts","../../src/granular-provider/index.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grDialogSafelist } from './safelist'\n\nexport const grDialogConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDialog',\n  dependencies: ['GrButton', 'GrModal'],\n  safelist: grDialogSafelist,\n})\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grResponseErrorBannerConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrResponseErrorBanner',\n  dependencies: ['GrAlert', 'GrButton'],\n})\n","// `id`, `theme.*`, `packageBaseUrl` и реестр компонентов провайдера.\n//\n// Все `new URL('../styles/...', import.meta.url)` обязаны лежать именно здесь:\n// `shared.ts` в одной директории с `index.ts` / `node.ts`, поэтому\n// относительные пути совпадают. Для браузера безопасно — бандлеры\n// транслируют такие литералы в статические asset-URL.\n//\n// `apps/showcase/scripts/generate-component-api.mjs` читает список компонентов\n// из `Object.keys(granularityComponentConfigs)` через vite SSR.\nimport {\n  defineGranularProvider,\n  type GranularComponentDescriptor,\n  type GranularProvider,\n  resolvePackageBaseUrl,\n} from '@feugene/unocss-preset-granular/contract'\n// <granularity:components:imports> — блок генерируется `yarn generate:registry`\nimport { grAlertConfig } from '../components/GrAlert/config'\nimport { grAutocompleteConfig } from '../components/GrAutocomplete/config'\nimport { grAvatarConfig } from '../components/GrAvatar/config'\nimport { grBadgeConfig } from '../components/GrBadge/config'\nimport { grBadgeWrapConfig } from '../components/GrBadgeWrap/config'\nimport { grBottomNavConfig } from '../components/GrBottomNav/config'\nimport { grBreadcrumbsConfig } from '../components/GrBreadcrumbs/config'\nimport { grButtonConfig } from '../components/GrButton/config'\nimport { grButtonGroupConfig } from '../components/GrButtonGroup/config'\nimport { grCardConfig } from '../components/GrCard/config'\nimport { grCheckboxConfig } from '../components/GrCheckbox/config'\nimport { grCheckboxGroupConfig } from '../components/GrCheckboxGroup/config'\nimport { grChipConfig } from '../components/GrChip/config'\nimport { grChipGroupConfig } from '../components/GrChipGroup/config'\nimport { grCodeBlockConfig } from '../components/GrCodeBlock/config'\nimport { grCollapseConfig } from '../components/GrCollapse/config'\nimport { grColorPickerConfig } from '../components/GrColorPicker/config'\nimport { grCommandPaletteConfig } from '../components/GrCommandPalette/config'\nimport { grConfigProviderConfig } from '../components/GrConfigProvider/config'\nimport { grConfirmDialogConfig } from '../components/GrConfirmDialog/config'\nimport { grContextMenuConfig } from '../components/GrContextMenu/config'\nimport { grDataTableConfig } from '../components/GrDataTable/config'\nimport { grDeltaConfig } from '../components/GrDelta/config'\nimport { grDescriptionListConfig } from '../components/GrDescriptionList/config'\nimport { grDialogConfig } from '../components/GrDialog/config'\nimport { grDialogServiceConfig } from '../components/GrDialogService/config'\nimport { grDividerConfig } from '../components/GrDivider/config'\nimport { grDrawerConfig } from '../components/GrDrawer/config'\nimport { grDropdownConfig } from '../components/GrDropdown/config'\nimport { grDropdownMenuConfig } from '../components/GrDropdownMenu/config'\nimport { grEmptyStateConfig } from '../components/GrEmptyState/config'\nimport { grFilePreviewConfig } from '../components/GrFilePreview/config'\nimport { grFileUploadConfig } from '../components/GrFileUpload/config'\nimport { grFormConfig } from '../components/GrForm/config'\nimport { grFormFieldConfig } from '../components/GrFormField/config'\nimport { grFormFileConfig } from '../components/GrFormFile/config'\nimport { grFormSectionConfig } from '../components/GrFormSection/config'\nimport { grIconConfig } from '../components/GrIcon/config'\nimport { grImageViewerConfig } from '../components/GrImageViewer/config'\nimport { grInputConfig } from '../components/GrInput/config'\nimport { grInputTagConfig } from '../components/GrInputTag/config'\nimport { grJsonViewerConfig } from '../components/GrJsonViewer/config'\nimport { grKbdConfig } from '../components/GrKbd/config'\nimport { grLinkConfig } from '../components/GrLink/config'\nimport { grListConfig } from '../components/GrList/config'\nimport { grLoadingConfig } from '../components/GrLoading/config'\nimport { grModalConfig } from '../components/GrModal/config'\nimport { grNavbarConfig } from '../components/GrNavbar/config'\nimport { grNumberInputConfig } from '../components/GrNumberInput/config'\nimport { grPaginationConfig } from '../components/GrPagination/config'\nimport { grPopoverConfig } from '../components/GrPopover/config'\nimport { grProgressBarConfig } from '../components/GrProgressBar/config'\nimport { grProgressCircleConfig } from '../components/GrProgressCircle/config'\nimport { grPromptDialogConfig } from '../components/GrPromptDialog/config'\nimport { grRadioConfig } from '../components/GrRadio/config'\nimport { grRadioGroupConfig } from '../components/GrRadioGroup/config'\nimport { grRatingConfig } from '../components/GrRating/config'\nimport { grResponseErrorBannerConfig } from '../components/GrResponseErrorBanner/config'\nimport { grSegmentedConfig } from '../components/GrSegmented/config'\nimport { grSelectConfig } from '../components/GrSelect/config'\nimport { grSidebarConfig } from '../components/GrSidebar/config'\nimport { grSkeletonConfig } from '../components/GrSkeleton/config'\nimport { grSliderConfig } from '../components/GrSlider/config'\nimport { grSortableListConfig } from '../components/GrSortableList/config'\nimport { grSplitterConfig } from '../components/GrSplitter/config'\nimport { grStatisticConfig } from '../components/GrStatistic/config'\nimport { grStepsConfig } from '../components/GrSteps/config'\nimport { grSwitchConfig } from '../components/GrSwitch/config'\nimport { grTableConfig } from '../components/GrTable/config'\nimport { grTabPanelsConfig } from '../components/GrTabPanels/config'\nimport { grTabsConfig } from '../components/GrTabs/config'\nimport { grTextareaConfig } from '../components/GrTextarea/config'\nimport { grTimelineConfig } from '../components/GrTimeline/config'\nimport { grToasterConfig } from '../components/GrToaster/config'\nimport { grTooltipConfig } from '../components/GrTooltip/config'\nimport { grTreeConfig } from '../components/GrTree/config'\nimport { grTreeSelectConfig } from '../components/GrTreeSelect/config'\nimport { grValueConfig } from '../components/GrValue/config'\n// </granularity:components:imports>\n\n/** Идентификатор провайдера — совпадает с именем пакета. */\nexport const GRANULARITY_PROVIDER_ID = '@feugene/granularity'\n\n// Не заменять на `new URL('..', import.meta.url)`: Vite и rolldown распознают\n// этот литерал и подставляют `data:`-URL, после чего scan-директории пустеют.\nconst packageBaseUrl = resolvePackageBaseUrl(import.meta.url)\n\n/** Встроенные темы пакета. Единственный источник правды о списке тем. */\nexport const granularityThemeNames = ['light', 'dark'] as const\nexport type GranularityThemeName = (typeof granularityThemeNames)[number]\n\n/** Темы, активные по умолчанию, если окружение не переопределяет выбор. */\nexport const granularityDefaultThemes: readonly GranularityThemeName[] = ['light']\n\nconst theme = {\n  baseCssUrl: new URL('../styles/base.css', import.meta.url).href,\n  tokensCssUrl: new URL('../styles/tokens.css', import.meta.url).href,\n  themes: {\n    light: new URL('../styles/themes/light.css', import.meta.url).href,\n    dark: new URL('../styles/themes/dark.css', import.meta.url).href,\n  },\n  defaultThemes: granularityDefaultThemes,\n} as const\n\n/**\n * Реестр публичных компонентов. Ключи совпадают с subpath-экспортом\n * `@feugene/granularity/components/<Name>`.\n */\nexport const granularityComponentConfigs = {\n  // <granularity:components:registry> — блок генерируется `yarn generate:registry`\n  GrAlert: grAlertConfig,\n  GrAutocomplete: grAutocompleteConfig,\n  GrAvatar: grAvatarConfig,\n  GrBadge: grBadgeConfig,\n  GrBadgeWrap: grBadgeWrapConfig,\n  GrBottomNav: grBottomNavConfig,\n  GrBreadcrumbs: grBreadcrumbsConfig,\n  GrButton: grButtonConfig,\n  GrButtonGroup: grButtonGroupConfig,\n  GrCard: grCardConfig,\n  GrCheckbox: grCheckboxConfig,\n  GrCheckboxGroup: grCheckboxGroupConfig,\n  GrChip: grChipConfig,\n  GrChipGroup: grChipGroupConfig,\n  GrCodeBlock: grCodeBlockConfig,\n  GrCollapse: grCollapseConfig,\n  GrColorPicker: grColorPickerConfig,\n  GrCommandPalette: grCommandPaletteConfig,\n  GrConfigProvider: grConfigProviderConfig,\n  GrConfirmDialog: grConfirmDialogConfig,\n  GrContextMenu: grContextMenuConfig,\n  GrDataTable: grDataTableConfig,\n  GrDelta: grDeltaConfig,\n  GrDescriptionList: grDescriptionListConfig,\n  GrDialog: grDialogConfig,\n  GrDialogService: grDialogServiceConfig,\n  GrDivider: grDividerConfig,\n  GrDrawer: grDrawerConfig,\n  GrDropdown: grDropdownConfig,\n  GrDropdownMenu: grDropdownMenuConfig,\n  GrEmptyState: grEmptyStateConfig,\n  GrFilePreview: grFilePreviewConfig,\n  GrFileUpload: grFileUploadConfig,\n  GrForm: grFormConfig,\n  GrFormField: grFormFieldConfig,\n  GrFormFile: grFormFileConfig,\n  GrFormSection: grFormSectionConfig,\n  GrIcon: grIconConfig,\n  GrImageViewer: grImageViewerConfig,\n  GrInput: grInputConfig,\n  GrInputTag: grInputTagConfig,\n  GrJsonViewer: grJsonViewerConfig,\n  GrKbd: grKbdConfig,\n  GrLink: grLinkConfig,\n  GrList: grListConfig,\n  GrLoading: grLoadingConfig,\n  GrModal: grModalConfig,\n  GrNavbar: grNavbarConfig,\n  GrNumberInput: grNumberInputConfig,\n  GrPagination: grPaginationConfig,\n  GrPopover: grPopoverConfig,\n  GrProgressBar: grProgressBarConfig,\n  GrProgressCircle: grProgressCircleConfig,\n  GrPromptDialog: grPromptDialogConfig,\n  GrRadio: grRadioConfig,\n  GrRadioGroup: grRadioGroupConfig,\n  GrRating: grRatingConfig,\n  GrResponseErrorBanner: grResponseErrorBannerConfig,\n  GrSegmented: grSegmentedConfig,\n  GrSelect: grSelectConfig,\n  GrSidebar: grSidebarConfig,\n  GrSkeleton: grSkeletonConfig,\n  GrSlider: grSliderConfig,\n  GrSortableList: grSortableListConfig,\n  GrSplitter: grSplitterConfig,\n  GrStatistic: grStatisticConfig,\n  GrSteps: grStepsConfig,\n  GrSwitch: grSwitchConfig,\n  GrTable: grTableConfig,\n  GrTabPanels: grTabPanelsConfig,\n  GrTabs: grTabsConfig,\n  GrTextarea: grTextareaConfig,\n  GrTimeline: grTimelineConfig,\n  GrToaster: grToasterConfig,\n  GrTooltip: grTooltipConfig,\n  GrTree: grTreeConfig,\n  GrTreeSelect: grTreeSelectConfig,\n  GrValue: grValueConfig,\n  // </granularity:components:registry>\n}\n\nexport type GranularityComponentName = keyof typeof granularityComponentConfigs\n\n/** Базовый набор компонентов в порядке реестра. */\nconst baseComponents: readonly GranularComponentDescriptor[] = Object.values(\n  granularityComponentConfigs,\n)\n\n/**\n * Собирает granular-provider пакета.\n *\n * `overrides` — точка расширения для потребителя: дескриптор с именем из\n * базового реестра заменяет его, остальные дописываются в конец.\n */\nexport function createGranularityProvider(\n  overrides: readonly GranularComponentDescriptor[] = [],\n): GranularProvider {\n  const overrideByName = new Map(\n    overrides.map(component => [component.name, component]),\n  )\n  const components: GranularComponentDescriptor[] = [\n    ...baseComponents.map(component => overrideByName.get(component.name) ?? component),\n    ...overrides.filter(component => !baseComponents.some(base => base.name === component.name)),\n  ]\n\n  return defineGranularProvider({\n    id: GRANULARITY_PROVIDER_ID,\n    contractVersion: 1,\n    packageBaseUrl,\n    components,\n    theme,\n  })\n}\n","import { createGranularityProvider } from './shared'\n\nexport * from './shared'\n\nexport const granularityProvider = createGranularityProvider()\n\nexport default granularityProvider\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAa,iBAAiB,wBAAwB,OAAO,KAAK,KAAK;CACrE,MAAM;CACN,cAAc,CAAC,YAAY,SAAS;CACpC,UAAU;AACZ,CAAC;;;ACND,IAAa,8BAA8B,wBAAwB,OAAO,KAAK,KAAK;CAClF,MAAM;CACN,cAAc,CAAC,WAAW,UAAU;AACtC,CAAC;;;;AC4FD,IAAa,0BAA0B;AAIvC,IAAM,iBAAiB,sBAAsB,OAAO,KAAK,GAAG;;AAG5D,IAAa,wBAAwB,CAAC,SAAS,MAAM;;AAIrD,IAAa,2BAA4D,CAAC,OAAO;AAEjF,IAAM,QAAQ;CACZ,YAAY,IAAA,IAAA,q5KAAA,KAAA,OAAA,KAAA,GAAA,CAA8C,CAAC;CAC3D,cAAc,IAAA,IAAA,65YAAA,KAAA,OAAA,KAAA,GAAA,CAAgD,CAAC;CAC/D,QAAQ;EACN,OAAO,IAAA,IAAA,iyYAAA,KAAA,OAAA,KAAA,GAAA,CAAsD,CAAC;EAC9D,MAAM,IAAA,IAAA,y/SAAA,KAAA,OAAA,KAAA,GAAA,CAAqD,CAAC;CAC9D;CACA,eAAe;AACjB;;;;;AAMA,IAAa,8BAA8B;CAEzC,SAAS;CACT,gBAAgB;CAChB,UAAU;CACV,SAAS;CACT,aAAa;CACb,aAAa;CACb,eAAe;CACf,UAAU;CACV,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,iBAAiB;CACjB,QAAQ;CACR,aAAa;CACb,aAAa;CACb,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,iBAAiB;CACjB,eAAe;CACf,aAAa;CACb,SAAS;CACT,mBAAmB;CACnB,UAAU;CACV,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,cAAc;CACd,QAAQ;CACR,aAAa;CACb,YAAY;CACZ,eAAe;CACf,QAAQ;CACR,eAAe;CACf,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,SAAS;CACT,UAAU;CACV,eAAe;CACf,cAAc;CACd,WAAW;CACX,eAAe;CACf,kBAAkB;CAClB,gBAAgB;CAChB,SAAS;CACT,cAAc;CACd,UAAU;CACV,uBAAuB;CACvB,aAAa;CACb,UAAU;CACV,WAAW;CACX,YAAY;CACZ,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,SAAS;CACT,UAAU;CACV,SAAS;CACT,aAAa;CACb,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,WAAW;CACX,QAAQ;CACR,cAAc;CACd,SAAS;AAEX;;AAKA,IAAM,iBAAyD,OAAO,OACpE,2BACF;;;;;;;AAQA,SAAgB,0BACd,YAAoD,CAAC,GACnC;CAClB,MAAM,iBAAiB,IAAI,IACzB,UAAU,KAAI,cAAa,CAAC,UAAU,MAAM,SAAS,CAAC,CACxD;CAMA,OAAO,uBAAuB;EAC5B,IAAI;EACJ,iBAAiB;EACjB;EACA,aARA,GAAG,eAAe,KAAI,cAAa,eAAe,IAAI,UAAU,IAAI,KAAK,SAAS,GAClF,GAAG,UAAU,QAAO,cAAa,CAAC,eAAe,MAAK,SAAQ,KAAK,SAAS,UAAU,IAAI,CAAC,CAO3F;EACA;CACF,CAAC;AACH;;;AC1OA,IAAa,sBAAsB,0BAA0B"}

package/dist/components/GrColorPicker/chunks/{GrColorPicker-D1Iis7jf.js → GrColorPicker-CIgdPXHn.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-CzeXMcvh.js";
+import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-DEFxDffj.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-D1Iis7jf.js.map → GrColorPicker-CIgdPXHn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrColorPicker-D1Iis7jf.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      block\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      block\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-CIgdPXHn.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      block\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      block\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-D1Iis7jf.js";
+import { t as GrColorPicker_default } from "./chunks/GrColorPicker-CIgdPXHn.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/GrContextMenu/chunks/{GrContextMenu-CWmgrzpi.js → GrContextMenu-DlFWm0eW.js}

@@ -1,7 +1,7 @@
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { i as isEditableTarget } from "../../../chunks/keyboard-DE2yhz_b.js";
 import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
-import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-CzeXMcvh.js";
+import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-DEFxDffj.js";
 import { t as useMenuItemsFocus } from "../../../chunks/useMenuItemsFocus-B7Bl_aFA.js";
 import { i as isMenuSection, n as GrDropdownMenuEntries_default, r as isMenuAction, t as GrDropdownMenuList_default } from "../../GrDropdownMenu/chunks/GrDropdownMenuList-B33ZzwfB.js";
 import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, useSlots, watch, withCtx } from "vue";