@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrDrawer/chunks/GrDrawer-C3zAg2tG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrDrawer-C3zAg2tG.js","names":["$slots"],"sources":["../../../../src/components/GrDrawer/GrDrawer.vue","../../../../src/components/GrDrawer/GrDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Модальный слой целиком: стек (Esc верхнему, `inert` нижним модалкам), ловушка\n// фокуса, скролл-лок, портал. Немодальная панель регистрируется в стеке как\n// обычный dismissible-слой и страницу под собой не трогает.\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport {\n  DEFAULT_GR_DRAWER_BODY_CONFIG,\n  DEFAULT_GR_DRAWER_FOOTER_CONFIG,\n  DEFAULT_GR_DRAWER_HEADER_CONFIG,\n  footerBorderClass,\n  grDrawerAxis,\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  headerBorderClass,\n  overlayClass,\n  resolveGrDrawerSectionConfig,\n  rootClass,\n  rootPassThroughClass,\n  srOnlyTitleClass,\n  titleClass,\n  type GrDrawerSectionConfig,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nimport './defaults'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /**\n   * Модальная панель: подложка, блокировка скролла, `inert` остальной странице\n   * и ловушка фокуса. `false` — панель живёт рядом со страницей: с ней работают,\n   * не закрывая, а Tab уходит наружу.\n   */\n  modal?: boolean\n  /** Закрывать при клике по бэкдропу. В немодальном режиме подложки нет. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /**\n   * Запрет закрытия «мягкими» способами (бэкдроп, Esc) — на время операции,\n   * которую нельзя бросить на полпути. Кнопка закрытия при этом остаётся:\n   * панель без единого выхода — ловушка.\n   */\n  persistent?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели по её оси: ширина у боковых, высота у верхней и нижней. */\n  size?: GrDrawerSize\n  /** Произвольная ширина боковой панели. Число трактуется как пиксели; сильнее `size`. */\n  width?: string | number\n  /** Произвольная высота верхней или нижней панели. Число трактуется как пиксели. */\n  height?: string | number\n  /** Рендерить ли хедер (заголовок + кнопка закрытия). */\n  showHeader?: boolean\n  /** Рендерить ли кнопку закрытия в хедере. */\n  showCloseButton?: boolean\n  /** Паддинги и рамка секций — как у `GrDialog`. */\n  headerConfig?: GrDrawerSectionConfig\n  bodyConfig?: GrDrawerSectionConfig\n  footerConfig?: GrDrawerSectionConfig\n  /** Элемент, получающий фокус при открытии. По умолчанию — сама панель. */\n  initialFocus?: HTMLElement | null\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nexport interface GrDrawerEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Панель выехала и анимация закончилась. */\n  (e: 'opened'): void\n  /** Панель уехала и анимация закончилась. */\n  (e: 'closed'): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный\n// пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  modal: true,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  persistent: false,\n  side: undefined,\n  size: undefined,\n  width: undefined,\n  height: undefined,\n  showHeader: true,\n  showCloseButton: true,\n  headerConfig: undefined,\n  bodyConfig: undefined,\n  footerConfig: undefined,\n  initialFocus: null,\n  closeLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\n\nconst emit = defineEmits<GrDrawerEmits>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  title?: () => any\n  /** Своя шапка целиком: заголовок, кнопка закрытия и всё, что нужно рядом. */\n  header?: (props: { title?: string, close: () => void }) => any\n  footer?: () => any\n}>()\n\nconst titleId = useId()\n\nconst size = useGrComponentProp('GrDrawer', 'size', () => props.size, 'md')\nconst side = useGrComponentProp('GrDrawer', 'side', () => props.side, 'right')\n\nconst axis = computed(() => grDrawerAxis(side.value))\n\n// Пустой/пробельный заголовок считается отсутствующим — иначе хедер занимал бы\n// место ради строки-заглушки.\nconst resolvedTitle = computed(() => props.title?.trim() || undefined)\nconst hasTitle = computed(() => Boolean(resolvedTitle.value) || Boolean(slots.title))\nconst hasCustomHeader = computed(() => Boolean(slots.header))\nconst hasHeader = computed(() =>\n  props.showHeader && (hasCustomHeader.value || hasTitle.value || props.showCloseButton),\n)\n\n/**\n * Видимый заголовок рисуется только в стандартной шапке. Со своей шапкой и без\n * шапки вовсе заголовок всё равно нужен — но скрытым: имя слоя обязано остаться\n * осмысленным, а не свалиться на обобщённое «Drawer» из локали.\n */\nconst showVisibleTitle = computed(() =>\n  props.showHeader && !hasCustomHeader.value && hasTitle.value,\n)\nconst showSrOnlyTitle = computed(() => hasTitle.value && !showVisibleTitle.value)\n\n// Имя модального слоя обязательно: без него axe роняет `aria-dialog-name`.\n// Есть заголовок — связываем `aria-labelledby`, иначе даём `aria-label` из i18n.\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst ariaLabel = computed(() => (labelledBy.value ? undefined : t('gr.drawer.title', 'Drawer')))\n\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Произвольный размер — только по оси панели: у боковой ширина, у нижней высота. */\nconst customLength = computed(() => (axis.value === 'horizontal' ? props.width : props.height))\n\nconst panelClass = computed(() => grDrawerPanelClass({\n  side: side.value,\n  size: size.value,\n  hasCustomLength: customLength.value !== undefined,\n}))\n\nconst panelStyle = computed(() => {\n  const length = customLength.value\n  if (length === undefined) return undefined\n\n  const value = typeof length === 'number' ? `${length}px` : length\n  return axis.value === 'horizontal' ? { width: value } : { height: value }\n})\n\n// Проп не своей оси молча не работал бы — а выглядит это как баг компонента.\nif (process.env.NODE_ENV !== 'production') {\n  watch(\n    [axis, () => props.width, () => props.height],\n    ([currentAxis, width, height]) => {\n      const ignored = currentAxis === 'horizontal' ? 'height' : 'width'\n      const value = currentAxis === 'horizontal' ? height : width\n      if (value === undefined) return\n\n      console.warn(\n        `[GrDrawer] Проп \\`${ignored}\\` не применяется к стороне \"${side.value}\": `\n        + `панель по этой оси растянута. Задайте \\`${ignored === 'height' ? 'width' : 'height'}\\`.`,\n      )\n    },\n    { immediate: true },\n  )\n}\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(side.value))\n\nconst headerSection = computed(() => resolveGrDrawerSectionConfig(props.headerConfig, DEFAULT_GR_DRAWER_HEADER_CONFIG))\nconst bodySection = computed(() => resolveGrDrawerSectionConfig(props.bodyConfig, DEFAULT_GR_DRAWER_BODY_CONFIG))\nconst footerSection = computed(() => resolveGrDrawerSectionConfig(props.footerConfig, DEFAULT_GR_DRAWER_FOOTER_CONFIG))\n\nfunction sectionClass(\n  section: { paddingX: string, paddingY: string, bordered: boolean },\n  borderClass: string,\n): string[] {\n  return [section.paddingX, section.paddingY, section.bordered ? borderClass : '']\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\n/** Закрытие «мягким» способом: бэкдроп или Esc. `persistent` их и запрещает. */\nfunction closeSoftly(): void {\n  if (props.persistent)\n    return\n\n  close()\n}\n\nconst rootClasses = computed(() => [rootClass, props.modal ? '' : rootPassThroughClass].filter(Boolean))\n\n// Немодальная панель остаётся в очереди Esc, но модалки под собой в `inert` не\n// отправляет и скролл не блокирует: она существует ровно ради работы со\n// страницей под ней, и Tab обязан уводить фокус туда.\nconst {\n  rootEl,\n  isMounted,\n  isVisible,\n  inertAttr,\n  portalTarget,\n  teleportEnabled,\n  themeAttrs,\n  onPanelAfterLeave: releasePresence,\n  backdrop,\n} = useModalOverlay(computed(() => props.modelValue), closeSoftly, {\n  panel: panelEl,\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc && !props.persistent,\n  closeOnBackdrop: () => props.closeOnBackdrop,\n  initialFocus: () => props.initialFocus ?? panelEl.value,\n})\n\nfunction onPanelAfterLeave(): void {\n  releasePresence()\n  emit('closed')\n}\n\ndefineExpose({\n  /** Закрыть панель (эквивалент `v-model = false`), минуя `persistent`. */\n  close,\n  /** Вернуть фокус на панель — например после операции, уведшей его наружу. */\n  focus: () => panelEl.value?.focus(),\n})\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n      v-if=\"teleportEnabled && isMounted\"\n      ref=\"rootEl\"\n      data-gr-drawer\n      data-gr-overlay-root\n      role=\"dialog\"\n      :aria-modal=\"modal ? 'true' : undefined\"\n      :class=\"rootClasses\"\n      :inert=\"inertAttr\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n    >\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isVisible && modal\"\n          data-gr-drawer-overlay\n          :class=\"overlayClass\"\n          aria-hidden=\"true\"\n          v-on=\"backdrop\"\n        />\n      </Transition>\n\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        :enter-from-class=\"panelEnterFrom\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        :leave-to-class=\"panelEnterFrom\"\n        @after-enter=\"emit('opened')\"\n        @after-leave=\"onPanelAfterLeave\"\n      >\n        <div\n          v-if=\"isVisible\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-drawer-panel\n          tabindex=\"-1\"\n          :class=\"panelClass\"\n          :style=\"panelStyle\"\n        >\n          <!-- Заголовок без видимой шапки: имя слоя обязано остаться своим. -->\n          <div\n            v-if=\"showSrOnlyTitle\"\n            :id=\"titleId\"\n            data-gr-drawer-title\n            :class=\"srOnlyTitleClass\"\n          >\n            <slot name=\"title\">\n              {{ resolvedTitle }}\n            </slot>\n          </div>\n\n          <div\n            v-if=\"hasHeader\"\n            data-gr-drawer-header\n            :class=\"[hasCustomHeader ? '' : 'flex items-center justify-between gap-4', sectionClass(headerSection, headerBorderClass)]\"\n          >\n            <slot name=\"header\" :title=\"resolvedTitle\" :close=\"close\">\n              <div\n                v-if=\"showVisibleTitle\"\n                :id=\"titleId\"\n                data-gr-drawer-title\n                :class=\"titleClass\"\n              >\n                <slot name=\"title\">\n                  {{ resolvedTitle }}\n                </slot>\n              </div>\n              <div v-else class=\"min-w-0 flex-1\" />\n\n              <GrButton\n                v-if=\"showCloseButton\"\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                data-gr-drawer-close\n                :aria-label=\"resolvedCloseLabel\"\n                @click=\"close\"\n              >\n                <GrIcon size=\"sm\">\n                  <IconClose />\n                </GrIcon>\n              </GrButton>\n            </slot>\n          </div>\n\n          <!-- Тело скроллится, поэтому обязано попадать в таб-порядок: длинный\n               текст без единого фокусируемого элемента иначе не прокрутить с\n               клавиатуры (axe: `scrollable-region-focusable`). -->\n          <div\n            data-gr-drawer-body\n            tabindex=\"0\"\n            class=\"min-h-0 flex-1 overflow-y-auto\"\n          >\n            <div :class=\"sectionClass(bodySection, '')\">\n              <slot />\n            </div>\n          </div>\n\n          <div\n            v-if=\"$slots.footer\"\n            data-gr-drawer-footer\n            :class=\"sectionClass(footerSection, footerBorderClass)\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Модальный слой целиком: стек (Esc верхнему, `inert` нижним модалкам), ловушка\n// фокуса, скролл-лок, портал. Немодальная панель регистрируется в стеке как\n// обычный dismissible-слой и страницу под собой не трогает.\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport {\n  DEFAULT_GR_DRAWER_BODY_CONFIG,\n  DEFAULT_GR_DRAWER_FOOTER_CONFIG,\n  DEFAULT_GR_DRAWER_HEADER_CONFIG,\n  footerBorderClass,\n  grDrawerAxis,\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  headerBorderClass,\n  overlayClass,\n  resolveGrDrawerSectionConfig,\n  rootClass,\n  rootPassThroughClass,\n  srOnlyTitleClass,\n  titleClass,\n  type GrDrawerSectionConfig,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nimport './defaults'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /**\n   * Модальная панель: подложка, блокировка скролла, `inert` остальной странице\n   * и ловушка фокуса. `false` — панель живёт рядом со страницей: с ней работают,\n   * не закрывая, а Tab уходит наружу.\n   */\n  modal?: boolean\n  /** Закрывать при клике по бэкдропу. В немодальном режиме подложки нет. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /**\n   * Запрет закрытия «мягкими» способами (бэкдроп, Esc) — на время операции,\n   * которую нельзя бросить на полпути. Кнопка закрытия при этом остаётся:\n   * панель без единого выхода — ловушка.\n   */\n  persistent?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели по её оси: ширина у боковых, высота у верхней и нижней. */\n  size?: GrDrawerSize\n  /** Произвольная ширина боковой панели. Число трактуется как пиксели; сильнее `size`. */\n  width?: string | number\n  /** Произвольная высота верхней или нижней панели. Число трактуется как пиксели. */\n  height?: string | number\n  /** Рендерить ли хедер (заголовок + кнопка закрытия). */\n  showHeader?: boolean\n  /** Рендерить ли кнопку закрытия в хедере. */\n  showCloseButton?: boolean\n  /** Паддинги и рамка секций — как у `GrDialog`. */\n  headerConfig?: GrDrawerSectionConfig\n  bodyConfig?: GrDrawerSectionConfig\n  footerConfig?: GrDrawerSectionConfig\n  /** Элемент, получающий фокус при открытии. По умолчанию — сама панель. */\n  initialFocus?: HTMLElement | null\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nexport interface GrDrawerEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Панель выехала и анимация закончилась. */\n  (e: 'opened'): void\n  /** Панель уехала и анимация закончилась. */\n  (e: 'closed'): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный\n// пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  modal: true,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  persistent: false,\n  side: undefined,\n  size: undefined,\n  width: undefined,\n  height: undefined,\n  showHeader: true,\n  showCloseButton: true,\n  headerConfig: undefined,\n  bodyConfig: undefined,\n  footerConfig: undefined,\n  initialFocus: null,\n  closeLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\n\nconst emit = defineEmits<GrDrawerEmits>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  title?: () => any\n  /** Своя шапка целиком: заголовок, кнопка закрытия и всё, что нужно рядом. */\n  header?: (props: { title?: string, close: () => void }) => any\n  footer?: () => any\n}>()\n\nconst titleId = useId()\n\nconst size = useGrComponentProp('GrDrawer', 'size', () => props.size, 'md')\nconst side = useGrComponentProp('GrDrawer', 'side', () => props.side, 'right')\n\nconst axis = computed(() => grDrawerAxis(side.value))\n\n// Пустой/пробельный заголовок считается отсутствующим — иначе хедер занимал бы\n// место ради строки-заглушки.\nconst resolvedTitle = computed(() => props.title?.trim() || undefined)\nconst hasTitle = computed(() => Boolean(resolvedTitle.value) || Boolean(slots.title))\nconst hasCustomHeader = computed(() => Boolean(slots.header))\nconst hasHeader = computed(() =>\n  props.showHeader && (hasCustomHeader.value || hasTitle.value || props.showCloseButton),\n)\n\n/**\n * Видимый заголовок рисуется только в стандартной шапке. Со своей шапкой и без\n * шапки вовсе заголовок всё равно нужен — но скрытым: имя слоя обязано остаться\n * осмысленным, а не свалиться на обобщённое «Drawer» из локали.\n */\nconst showVisibleTitle = computed(() =>\n  props.showHeader && !hasCustomHeader.value && hasTitle.value,\n)\nconst showSrOnlyTitle = computed(() => hasTitle.value && !showVisibleTitle.value)\n\n// Имя модального слоя обязательно: без него axe роняет `aria-dialog-name`.\n// Есть заголовок — связываем `aria-labelledby`, иначе даём `aria-label` из i18n.\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst ariaLabel = computed(() => (labelledBy.value ? undefined : t('gr.drawer.title', 'Drawer')))\n\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Произвольный размер — только по оси панели: у боковой ширина, у нижней высота. */\nconst customLength = computed(() => (axis.value === 'horizontal' ? props.width : props.height))\n\nconst panelClass = computed(() => grDrawerPanelClass({\n  side: side.value,\n  size: size.value,\n  hasCustomLength: customLength.value !== undefined,\n}))\n\nconst panelStyle = computed(() => {\n  const length = customLength.value\n  if (length === undefined) return undefined\n\n  const value = typeof length === 'number' ? `${length}px` : length\n  return axis.value === 'horizontal' ? { width: value } : { height: value }\n})\n\n// Проп не своей оси молча не работал бы — а выглядит это как баг компонента.\nif (process.env.NODE_ENV !== 'production') {\n  watch(\n    [axis, () => props.width, () => props.height],\n    ([currentAxis, width, height]) => {\n      const ignored = currentAxis === 'horizontal' ? 'height' : 'width'\n      const value = currentAxis === 'horizontal' ? height : width\n      if (value === undefined) return\n\n      console.warn(\n        `[GrDrawer] Проп \\`${ignored}\\` не применяется к стороне \"${side.value}\": `\n        + `панель по этой оси растянута. Задайте \\`${ignored === 'height' ? 'width' : 'height'}\\`.`,\n      )\n    },\n    { immediate: true },\n  )\n}\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(side.value))\n\nconst headerSection = computed(() => resolveGrDrawerSectionConfig(props.headerConfig, DEFAULT_GR_DRAWER_HEADER_CONFIG))\nconst bodySection = computed(() => resolveGrDrawerSectionConfig(props.bodyConfig, DEFAULT_GR_DRAWER_BODY_CONFIG))\nconst footerSection = computed(() => resolveGrDrawerSectionConfig(props.footerConfig, DEFAULT_GR_DRAWER_FOOTER_CONFIG))\n\nfunction sectionClass(\n  section: { paddingX: string, paddingY: string, bordered: boolean },\n  borderClass: string,\n): string[] {\n  return [section.paddingX, section.paddingY, section.bordered ? borderClass : '']\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\n/** Закрытие «мягким» способом: бэкдроп или Esc. `persistent` их и запрещает. */\nfunction closeSoftly(): void {\n  if (props.persistent)\n    return\n\n  close()\n}\n\nconst rootClasses = computed(() => [rootClass, props.modal ? '' : rootPassThroughClass].filter(Boolean))\n\n// Немодальная панель остаётся в очереди Esc, но модалки под собой в `inert` не\n// отправляет и скролл не блокирует: она существует ровно ради работы со\n// страницей под ней, и Tab обязан уводить фокус туда.\nconst {\n  rootEl,\n  isMounted,\n  isVisible,\n  inertAttr,\n  portalTarget,\n  teleportEnabled,\n  themeAttrs,\n  onPanelAfterLeave: releasePresence,\n  backdrop,\n} = useModalOverlay(computed(() => props.modelValue), closeSoftly, {\n  panel: panelEl,\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc && !props.persistent,\n  closeOnBackdrop: () => props.closeOnBackdrop,\n  initialFocus: () => props.initialFocus ?? panelEl.value,\n})\n\nfunction onPanelAfterLeave(): void {\n  releasePresence()\n  emit('closed')\n}\n\ndefineExpose({\n  /** Закрыть панель (эквивалент `v-model = false`), минуя `persistent`. */\n  close,\n  /** Вернуть фокус на панель — например после операции, уведшей его наружу. */\n  focus: () => panelEl.value?.focus(),\n})\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n      v-if=\"teleportEnabled && isMounted\"\n      ref=\"rootEl\"\n      data-gr-drawer\n      data-gr-overlay-root\n      role=\"dialog\"\n      :aria-modal=\"modal ? 'true' : undefined\"\n      :class=\"rootClasses\"\n      :inert=\"inertAttr\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n    >\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isVisible && modal\"\n          data-gr-drawer-overlay\n          :class=\"overlayClass\"\n          aria-hidden=\"true\"\n          v-on=\"backdrop\"\n        />\n      </Transition>\n\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        :enter-from-class=\"panelEnterFrom\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        :leave-to-class=\"panelEnterFrom\"\n        @after-enter=\"emit('opened')\"\n        @after-leave=\"onPanelAfterLeave\"\n      >\n        <div\n          v-if=\"isVisible\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-drawer-panel\n          tabindex=\"-1\"\n          :class=\"panelClass\"\n          :style=\"panelStyle\"\n        >\n          <!-- Заголовок без видимой шапки: имя слоя обязано остаться своим. -->\n          <div\n            v-if=\"showSrOnlyTitle\"\n            :id=\"titleId\"\n            data-gr-drawer-title\n            :class=\"srOnlyTitleClass\"\n          >\n            <slot name=\"title\">\n              {{ resolvedTitle }}\n            </slot>\n          </div>\n\n          <div\n            v-if=\"hasHeader\"\n            data-gr-drawer-header\n            :class=\"[hasCustomHeader ? '' : 'flex items-center justify-between gap-4', sectionClass(headerSection, headerBorderClass)]\"\n          >\n            <slot name=\"header\" :title=\"resolvedTitle\" :close=\"close\">\n              <div\n                v-if=\"showVisibleTitle\"\n                :id=\"titleId\"\n                data-gr-drawer-title\n                :class=\"titleClass\"\n              >\n                <slot name=\"title\">\n                  {{ resolvedTitle }}\n                </slot>\n              </div>\n              <div v-else class=\"min-w-0 flex-1\" />\n\n              <GrButton\n                v-if=\"showCloseButton\"\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                data-gr-drawer-close\n                :aria-label=\"resolvedCloseLabel\"\n                @click=\"close\"\n              >\n                <GrIcon size=\"sm\">\n                  <IconClose />\n                </GrIcon>\n              </GrButton>\n            </slot>\n          </div>\n\n          <!-- Тело скроллится, поэтому обязано попадать в таб-порядок: длинный\n               текст без единого фокусируемого элемента иначе не прокрутить с\n               клавиатуры (axe: `scrollable-region-focusable`). -->\n          <div\n            data-gr-drawer-body\n            tabindex=\"0\"\n            class=\"min-h-0 flex-1 overflow-y-auto\"\n          >\n            <div :class=\"sectionClass(bodySection, '')\">\n              <slot />\n            </div>\n          </div>\n\n          <div\n            v-if=\"$slots.footer\"\n            data-gr-drawer-footer\n            :class=\"sectionClass(footerSection, footerBorderClass)\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </teleport>\n</template>\n"],"mappings":"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"}

package/dist/components/GrDrawer/index.js

@@ -1,3 +1,3 @@
 import { n as grDrawerSafelist, t as grDrawerConfig } from "../../chunks/config-D94Z9po5.js";
-import { t as GrDrawer_default } from "./chunks/GrDrawer-DWHdZZzW.js";
+import { t as GrDrawer_default } from "./chunks/GrDrawer-C3zAg2tG.js";
 export { GrDrawer_default as GrDrawer, GrDrawer_default as default, grDrawerConfig, grDrawerSafelist };

package/dist/components/GrDropdown/chunks/GrDropdown-BSfFOcDx.js

@@ -0,0 +1,300 @@
+import { s as useGrThemeAttrs } from "../../../chunks/context-CTbuwcYs.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-C0p-mhaM.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { i as isEditableTarget } from "../../../chunks/keyboard-DE2yhz_b.js";
+import { useFloating } from "../../../composables/useFloating.js";
+import { useOverlayLayer } from "../../../composables/useOverlayLayer.js";
+import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
+import { t as getFocusableElements } from "../../../chunks/focusables-BkzK42SQ.js";
+import { n as grDropdownContentClass, r as grDropdownOriginClass } from "../../../chunks/grDropdownStyles-V7TRiCXn.js";
+import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+//#region src/components/GrDropdown/GrDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-gr-dropdown": "" };
+var _hoisted_2 = ["id"];
+var TYPEAHEAD_RESET_MS = 600;
+//#endregion
+//#region src/components/GrDropdown/GrDropdown.vue
+var GrDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDropdown",
+	props: {
+		placement: { default: "bottom-end" },
+		offset: { default: 8 },
+		width: { default: "12rem" },
+		trigger: { default: "click" },
+		openDelay: { default: 120 },
+		closeDelay: { default: 160 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		closeOnContentClick: {
+			type: Boolean,
+			default: true
+		},
+		contentClass: { default: "" },
+		teleportTo: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { open: isOpen, setOpen } = useControlledOpen(() => props.open, (next) => emit("update:open", next));
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const clickOutsideExclude = [() => panelEl.value];
+		const panelId = useId();
+		/**
+		* Кольцо roving-фокуса.
+		*
+		* `tabbableOnly: false` — не оплошность: пункты меню намеренно `tabindex="-1"`
+		* (см. `GrDropdownMenuItem`), и список участников таб-порядка был бы пуст.
+		*/
+		function panelItems() {
+			return getFocusableElements(panelEl.value, { tabbableOnly: false });
+		}
+		function focusItemAt(index) {
+			const items = panelItems();
+			if (items.length === 0) return;
+			items[(index + items.length) % items.length]?.focus();
+		}
+		async function openWithFocus(first) {
+			if (props.disabled) return;
+			setOpen(true);
+			await nextTick();
+			focusItemAt(first ? 0 : -1);
+		}
+		/**
+		* Пропсы для реального фокусируемого триггера (кнопки). Консьюмер биндит их на
+		* элемент внутри слота `#trigger`: `<GrButton v-bind="triggerProps">`. Даёт
+		* `aria-haspopup`/`aria-expanded`/`aria-controls`, клавиатуру и **клик**.
+		*
+		* Клик живёт здесь, а не на обёртке слота: обёртка ловила бы и клики по
+		* вложенным кнопкам и ссылкам, переключая панель мимо намерения пользователя.
+		*/
+		const triggerProps = computed(() => ({
+			"aria-haspopup": "menu",
+			"aria-expanded": isOpen.value,
+			"aria-controls": isOpen.value ? panelId : void 0,
+			"aria-disabled": props.disabled ? true : void 0,
+			"onClick": toggle,
+			"onKeydown": onTriggerKeydown
+		}));
+		function onTriggerKeydown(event) {
+			if (props.disabled) return;
+			switch (event.key) {
+				case "Enter":
+				case " ":
+				case "ArrowDown":
+					event.preventDefault();
+					openWithFocus(true);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					openWithFocus(false);
+					break;
+				case "Escape":
+					if (isOpen.value) {
+						event.preventDefault();
+						close();
+					}
+					break;
+			}
+		}
+		/**
+		* Typeahead паттерна menu: печатные символы копятся в буфер и переводят фокус
+		* на первый подходящий пункт, начиная со следующего за текущим.
+		*/
+		let typeaheadBuffer = "";
+		let typeaheadTimer;
+		function onTypeahead(char) {
+			clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+			}, TYPEAHEAD_RESET_MS);
+			typeaheadBuffer = typeaheadBuffer.length === 1 && typeaheadBuffer === char ? char : typeaheadBuffer + char;
+			const query = typeaheadBuffer.toLowerCase();
+			const items = panelItems();
+			if (items.length === 0) return;
+			const currentIndex = items.indexOf(document.activeElement);
+			for (let step = 1; step <= items.length; step += 1) {
+				const item = items[(currentIndex + step + items.length) % items.length];
+				if ((item.textContent ?? "").trim().toLowerCase().startsWith(query)) {
+					item.focus();
+					return;
+				}
+			}
+		}
+		function onPanelKeydown(event) {
+			const currentIndex = panelItems().indexOf(document.activeElement);
+			const editable = isEditableTarget(event.target);
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					focusItemAt(currentIndex + 1);
+					return;
+				case "ArrowUp":
+					event.preventDefault();
+					focusItemAt(currentIndex - 1);
+					return;
+				case "Home":
+					if (editable) return;
+					event.preventDefault();
+					focusItemAt(0);
+					return;
+				case "End":
+					if (editable) return;
+					event.preventDefault();
+					focusItemAt(-1);
+					return;
+				case "Tab":
+					close();
+					return;
+			}
+			if (editable) return;
+			if (event.key === " " && typeaheadBuffer === "") return;
+			if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+				event.preventDefault();
+				onTypeahead(event.key);
+			}
+		}
+		const { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(rootEl, panelEl, isOpen, {
+			placement: () => props.placement,
+			get offsetPx() {
+				return props.offset;
+			},
+			zIndexVar: "--gr-z-dropdown"
+		});
+		let hoverTimer;
+		function open() {
+			if (props.disabled) return;
+			clearTimeout(hoverTimer);
+			setOpen(true);
+		}
+		function toggle() {
+			if (props.disabled) return;
+			clearTimeout(hoverTimer);
+			setOpen(!isOpen.value);
+		}
+		function close() {
+			clearTimeout(hoverTimer);
+			setOpen(false);
+		}
+		function scheduleHover(next, delayMs) {
+			clearTimeout(hoverTimer);
+			if (delayMs <= 0) {
+				setOpen(next);
+				return;
+			}
+			hoverTimer = setTimeout(setOpen, delayMs, next);
+		}
+		function onHoverEnter() {
+			if (props.disabled || props.trigger !== "hover") return;
+			scheduleHover(true, props.openDelay);
+		}
+		function onHoverLeave() {
+			if (props.trigger !== "hover") return;
+			scheduleHover(false, props.closeDelay);
+		}
+		useOverlayLayer(isOpen, close, { root: panelEl });
+		watch(() => [props.placement, props.offset], () => {
+			if (isOpen.value) updateFloatingPosition();
+		});
+		watch(() => props.disabled, (value) => {
+			if (value) close();
+		});
+		function toCssLength(value) {
+			if (value === "auto") return void 0;
+			if (typeof value === "number") return `${value}px`;
+			const bare = value.trim();
+			if (/^\d+$/.test(bare)) {
+				if (process.env.NODE_ENV !== "production") console.warn(`[GrDropdown] width="${value}" трактуется как ${bare}px. Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: width="${bare}px" или :width="${bare}".`);
+				return `${bare}px`;
+			}
+			return value;
+		}
+		const panelStyle = computed(() => {
+			const width = toCssLength(props.width);
+			return width ? {
+				...floatingStyle.value,
+				width
+			} : floatingStyle.value;
+		});
+		const contentClasses = computed(() => grDropdownContentClass(props.contentClass));
+		const panelClasses = computed(() => grDropdownOriginClass(resolvedPlacement.value));
+		function onContentClick() {
+			if (props.closeOnContentClick) close();
+		}
+		onMounted(() => {
+			if (process.env.NODE_ENV === "production") return;
+			if (rootEl.value?.querySelector("[aria-haspopup]")) return;
+			console.warn("[GrDropdown] триггер не привязан: добавьте `v-bind=\"triggerProps\"` на элемент внутри слота #trigger — <template #trigger=\"{ triggerProps }\"><GrButton v-bind=\"triggerProps\">…</GrButton></template>. Без этого у триггера нет ни клика, ни клавиатуры, ни aria-haspopup/aria-expanded.");
+		});
+		onBeforeUnmount(() => {
+			clearTimeout(typeaheadTimer);
+			clearTimeout(hoverTimer);
+		});
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(() => props.teleportTo);
+		const themeAttrs = useGrThemeAttrs();
+		__expose({
+			open,
+			close,
+			toggle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-dropdown-trigger": "",
+				class: "inline-block max-w-full",
+				onMouseenter: onHoverEnter,
+				onMouseleave: onHoverLeave
+			}, [renderSlot(_ctx.$slots, "trigger", {
+				open: unref(isOpen),
+				toggle,
+				close,
+				triggerProps: triggerProps.value
+			})], 32)), [[unref(vClickOutside), {
+				handler: close,
+				enabled: unref(isOpen),
+				exclude: clickOutsideExclude
+			}]]), (openBlock(), createBlock(Teleport, {
+				to: unref(portalTarget),
+				disabled: !unref(teleportEnabled)
+			}, [createVNode(Transition, {
+				"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
+				"enter-from-class": "transform opacity-0 scale-95",
+				"enter-to-class": "transform opacity-100 scale-100",
+				"leave-active-class": "transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]",
+				"leave-from-class": "transform opacity-100 scale-100",
+				"leave-to-class": "transform opacity-0 scale-95"
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+					id: unref(panelId),
+					ref_key: "panelEl",
+					ref: panelEl
+				}, unref(themeAttrs), {
+					"data-gr-dropdown-panel": "",
+					"data-gr-overlay-root": "",
+					role: "menu",
+					tabindex: "-1",
+					class: panelClasses.value,
+					style: panelStyle.value,
+					onClick: onContentClick,
+					onKeydown: onPanelKeydown,
+					onMouseenter: onHoverEnter,
+					onMouseleave: onHoverLeave
+				}), [createElementVNode("div", {
+					"data-gr-dropdown-content": "",
+					class: normalizeClass(contentClasses.value)
+				}, [renderSlot(_ctx.$slots, "content", { close })], 2)], 16, _hoisted_2), [[vShow, unref(isOpen)]])]),
+				_: 3
+			})], 8, ["to", "disabled"]))]);
+		};
+	}
+});
+//#endregion
+export { GrDropdown_default as t };

package/dist/components/GrDropdown/chunks/GrDropdown-BSfFOcDx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrDropdown-BSfFOcDx.js","names":[],"sources":["../../../../src/components/GrDropdown/GrDropdown.vue","../../../../src/components/GrDropdown/GrDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { getFocusableElements } from '../../composables/internal/focusables'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport {\n  grDropdownContentClass,\n  grDropdownOriginClass,\n  type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n  /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offset?: number\n  /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n  width?: GrDropdownWidth\n  /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n  trigger?: GrDropdownTrigger\n  /** Задержка открытия по наведению, мс. */\n  openDelay?: number\n  /** Задержка закрытия после ухода курсора, мс. */\n  closeDelay?: number\n  /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n  disabled?: boolean\n  /** Закрывать панель по клику внутри content. */\n  closeOnContentClick?: boolean\n  /** Дополнительные классы контейнера content. */\n  contentClass?: string\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  /**\n   * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n   * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n   */\n  open?: boolean\n}\n\nexport interface GrDropdownEmits {\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n  placement: 'bottom-end',\n  offset: 8,\n  width: '12rem',\n  trigger: 'click',\n  openDelay: 120,\n  closeDelay: 160,\n  disabled: false,\n  closeOnContentClick: true,\n  contentClass: '',\n  teleportTo: undefined,\n  open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst clickOutsideExclude = [() => panelEl.value]\n\nconst panelId = useId()\n\n/**\n * Кольцо roving-фокуса.\n *\n * `tabbableOnly: false` — не оплошность: пункты меню намеренно `tabindex=\"-1\"`\n * (см. `GrDropdownMenuItem`), и список участников таб-порядка был бы пуст.\n */\nfunction panelItems(): HTMLElement[] {\n  return getFocusableElements(panelEl.value, { tabbableOnly: false })\n}\n\nfunction focusItemAt(index: number): void {\n  const items = panelItems()\n  if (items.length === 0)\n    return\n  const clamped = (index + items.length) % items.length\n  items[clamped]?.focus()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n  if (props.disabled)\n    return\n\n  setOpen(true)\n  await nextTick()\n  focusItemAt(first ? 0 : -1)\n}\n\n/**\n * Пропсы для реального фокусируемого триггера (кнопки). Консьюмер биндит их на\n * элемент внутри слота `#trigger`: `<GrButton v-bind=\"triggerProps\">`. Даёт\n * `aria-haspopup`/`aria-expanded`/`aria-controls`, клавиатуру и **клик**.\n *\n * Клик живёт здесь, а не на обёртке слота: обёртка ловила бы и клики по\n * вложенным кнопкам и ссылкам, переключая панель мимо намерения пользователя.\n */\nconst triggerProps = computed(() => ({\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'aria-disabled': props.disabled ? true : undefined,\n  'onClick': toggle,\n  'onKeydown': onTriggerKeydown,\n}))\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n  if (props.disabled)\n    return\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault()\n      void openWithFocus(true)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      void openWithFocus(false)\n      break\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault()\n        close()\n      }\n      break\n  }\n}\n\n/**\n * Typeahead паттерна menu: печатные символы копятся в буфер и переводят фокус\n * на первый подходящий пункт, начиная со следующего за текущим.\n */\nconst TYPEAHEAD_RESET_MS = 600\nlet typeaheadBuffer = ''\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction onTypeahead(char: string): void {\n  clearTimeout(typeaheadTimer)\n  typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, TYPEAHEAD_RESET_MS)\n\n  // Повтор одной буквы — это «следующий на ту же букву», а не поиск «аа».\n  const repeat = typeaheadBuffer.length === 1 && typeaheadBuffer === char\n  typeaheadBuffer = repeat ? char : typeaheadBuffer + char\n\n  const query = typeaheadBuffer.toLowerCase()\n  const items = panelItems()\n  if (items.length === 0)\n    return\n\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement)\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const item = items[(currentIndex + step + items.length) % items.length]\n    if ((item.textContent ?? '').trim().toLowerCase().startsWith(query)) {\n      item.focus()\n      return\n    }\n  }\n}\n\nfunction onPanelKeydown(event: KeyboardEvent): void {\n  const items = panelItems()\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement)\n\n  // Панель бывает не только меню из кнопок: с `closeOnContentClick={false}` в\n  // ней живут поля и чекбоксы. Клавиши, которые сфокусированный контрол умеет\n  // сам, остаются ему — иначе в поле не напечатать, а чекбокс не переключить.\n  const editable = isEditableTarget(event.target)\n\n  switch (event.key) {\n    // Стрелки — исключение: они за меню даже в поле. `Tab` панель закрывает, и\n    // без них из поля внутри панели не было бы выхода вовсе.\n    case 'ArrowDown':\n      event.preventDefault()\n      focusItemAt(currentIndex + 1)\n      return\n    case 'ArrowUp':\n      event.preventDefault()\n      focusItemAt(currentIndex - 1)\n      return\n    case 'Home':\n      if (editable)\n        return\n      event.preventDefault()\n      focusItemAt(0)\n      return\n    case 'End':\n      if (editable)\n        return\n      event.preventDefault()\n      focusItemAt(-1)\n      return\n    case 'Tab':\n      close()\n      return\n  }\n\n  if (editable)\n    return\n\n  // Пробел при пустом буфере — активация сфокусированного пункта, а не поиск:\n  // пункты меню это кнопки, и пробел для них родная клавиша. В буфер он входит,\n  // только когда поиск уже идёт (правило typeahead из WAI-ARIA APG).\n  if (event.key === ' ' && typeaheadBuffer === '')\n    return\n\n  // Печатный символ без модификаторов — поиск по пунктам, а не команда.\n  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n    event.preventDefault()\n    onTypeahead(event.key)\n  }\n}\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  rootEl,\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    // Геттер, а не значение: иначе проп замрёт на моменте `setup`.\n    get offsetPx() { return props.offset },\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\n// ————— Открытие по наведению. Задержки нужны обе: без `openDelay` панель\n// выпрыгивает на любое пересечение курсором, без `closeDelay` её не удержать\n// при переходе с триггера на панель — между ними зазор `offset`.\nlet hoverTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction open(): void {\n  if (props.disabled)\n    return\n\n  clearTimeout(hoverTimer)\n  setOpen(true)\n}\n\nfunction toggle(): void {\n  if (props.disabled)\n    return\n\n  clearTimeout(hoverTimer)\n  setOpen(!isOpen.value)\n}\n\nfunction close(): void {\n  clearTimeout(hoverTimer)\n  setOpen(false)\n}\n\nfunction scheduleHover(next: boolean, delayMs: number): void {\n  clearTimeout(hoverTimer)\n\n  if (delayMs <= 0) {\n    setOpen(next)\n    return\n  }\n\n  hoverTimer = setTimeout(setOpen, delayMs, next)\n}\n\nfunction onHoverEnter(): void {\n  if (props.disabled || props.trigger !== 'hover')\n    return\n  scheduleHover(true, props.openDelay)\n}\n\nfunction onHoverLeave(): void {\n  if (props.trigger !== 'hover')\n    return\n  scheduleHover(false, props.closeDelay)\n}\n\n// Возврат фокуса — из контракта слоя: он запоминает активный элемент при\n// открытии и возвращает фокус, только если на момент закрытия тот всё ещё\n// внутри панели. Прежняя эвристика «возвращать, если открыли с клавиатуры»\n// промахивалась в обе стороны.\nuseOverlayLayer(isOpen, close, { root: panelEl })\n\nwatch(\n  () => [props.placement, props.offset],\n  () => {\n    if (isOpen.value) updateFloatingPosition()\n  },\n)\n\nwatch(\n  () => props.disabled,\n  (value) => {\n    if (value) close()\n  },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n  if (value === 'auto')\n    return undefined\n  if (typeof value === 'number')\n    return `${value}px`\n\n  // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n  // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n  const bare = value.trim()\n  if (/^\\d+$/.test(bare)) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n        + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n        + `width=\"${bare}px\" или :width=\"${bare}\".`,\n      )\n    }\n    return `${bare}px`\n  }\n\n  return value\n}\n\nconst panelStyle = computed(() => {\n  const width = toCssLength(props.width)\n  return width ? { ...floatingStyle.value, width } : floatingStyle.value\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\nconst panelClasses = computed(() => grDropdownOriginClass(resolvedPlacement.value))\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick) {\n    close()\n  }\n}\n\n// Триггер без `v-bind=\"triggerProps\"` — это триггер без клика, без клавиатуры и\n// без ARIA. Молчать об этом нельзя: панель просто не открывалась бы, и искать\n// причину пришлось бы в чужом коде.\nonMounted(() => {\n  if (process.env.NODE_ENV === 'production')\n    return\n  if (rootEl.value?.querySelector('[aria-haspopup]'))\n    return\n\n  console.warn(\n    '[GrDropdown] триггер не привязан: добавьте `v-bind=\"triggerProps\"` на элемент '\n    + 'внутри слота #trigger — <template #trigger=\"{ triggerProps }\">'\n    + '<GrButton v-bind=\"triggerProps\">…</GrButton></template>. '\n    + 'Без этого у триггера нет ни клика, ни клавиатуры, ни aria-haspopup/aria-expanded.',\n  )\n})\n\nonBeforeUnmount(() => {\n  clearTimeout(typeaheadTimer)\n  clearTimeout(hoverTimer)\n})\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(() => props.teleportTo)\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\ndefineExpose({ open, close, toggle })\n</script>\n\n<template>\n  <div data-gr-dropdown>\n    <div\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen, exclude: clickOutsideExclude }\"\n      data-gr-dropdown-trigger\n      class=\"inline-block max-w-full\"\n      @mouseenter=\"onHoverEnter\"\n      @mouseleave=\"onHoverLeave\"\n    >\n      <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggle\" :close=\"close\" :trigger-props=\"triggerProps\" />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-dropdown-panel\n          data-gr-overlay-root\n          role=\"menu\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"panelStyle\"\n          @click=\"onContentClick\"\n          @keydown=\"onPanelKeydown\"\n          @mouseenter=\"onHoverEnter\"\n          @mouseleave=\"onHoverLeave\"\n        >\n          <div data-gr-dropdown-content :class=\"contentClasses\">\n            <slot name=\"content\" :close=\"close\" />\n          </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { getFocusableElements } from '../../composables/internal/focusables'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport {\n  grDropdownContentClass,\n  grDropdownOriginClass,\n  type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n  /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offset?: number\n  /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n  width?: GrDropdownWidth\n  /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n  trigger?: GrDropdownTrigger\n  /** Задержка открытия по наведению, мс. */\n  openDelay?: number\n  /** Задержка закрытия после ухода курсора, мс. */\n  closeDelay?: number\n  /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n  disabled?: boolean\n  /** Закрывать панель по клику внутри content. */\n  closeOnContentClick?: boolean\n  /** Дополнительные классы контейнера content. */\n  contentClass?: string\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  /**\n   * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n   * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n   */\n  open?: boolean\n}\n\nexport interface GrDropdownEmits {\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n  placement: 'bottom-end',\n  offset: 8,\n  width: '12rem',\n  trigger: 'click',\n  openDelay: 120,\n  closeDelay: 160,\n  disabled: false,\n  closeOnContentClick: true,\n  contentClass: '',\n  teleportTo: undefined,\n  open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst clickOutsideExclude = [() => panelEl.value]\n\nconst panelId = useId()\n\n/**\n * Кольцо roving-фокуса.\n *\n * `tabbableOnly: false` — не оплошность: пункты меню намеренно `tabindex=\"-1\"`\n * (см. `GrDropdownMenuItem`), и список участников таб-порядка был бы пуст.\n */\nfunction panelItems(): HTMLElement[] {\n  return getFocusableElements(panelEl.value, { tabbableOnly: false })\n}\n\nfunction focusItemAt(index: number): void {\n  const items = panelItems()\n  if (items.length === 0)\n    return\n  const clamped = (index + items.length) % items.length\n  items[clamped]?.focus()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n  if (props.disabled)\n    return\n\n  setOpen(true)\n  await nextTick()\n  focusItemAt(first ? 0 : -1)\n}\n\n/**\n * Пропсы для реального фокусируемого триггера (кнопки). Консьюмер биндит их на\n * элемент внутри слота `#trigger`: `<GrButton v-bind=\"triggerProps\">`. Даёт\n * `aria-haspopup`/`aria-expanded`/`aria-controls`, клавиатуру и **клик**.\n *\n * Клик живёт здесь, а не на обёртке слота: обёртка ловила бы и клики по\n * вложенным кнопкам и ссылкам, переключая панель мимо намерения пользователя.\n */\nconst triggerProps = computed(() => ({\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'aria-disabled': props.disabled ? true : undefined,\n  'onClick': toggle,\n  'onKeydown': onTriggerKeydown,\n}))\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n  if (props.disabled)\n    return\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault()\n      void openWithFocus(true)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      void openWithFocus(false)\n      break\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault()\n        close()\n      }\n      break\n  }\n}\n\n/**\n * Typeahead паттерна menu: печатные символы копятся в буфер и переводят фокус\n * на первый подходящий пункт, начиная со следующего за текущим.\n */\nconst TYPEAHEAD_RESET_MS = 600\nlet typeaheadBuffer = ''\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction onTypeahead(char: string): void {\n  clearTimeout(typeaheadTimer)\n  typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, TYPEAHEAD_RESET_MS)\n\n  // Повтор одной буквы — это «следующий на ту же букву», а не поиск «аа».\n  const repeat = typeaheadBuffer.length === 1 && typeaheadBuffer === char\n  typeaheadBuffer = repeat ? char : typeaheadBuffer + char\n\n  const query = typeaheadBuffer.toLowerCase()\n  const items = panelItems()\n  if (items.length === 0)\n    return\n\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement)\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const item = items[(currentIndex + step + items.length) % items.length]\n    if ((item.textContent ?? '').trim().toLowerCase().startsWith(query)) {\n      item.focus()\n      return\n    }\n  }\n}\n\nfunction onPanelKeydown(event: KeyboardEvent): void {\n  const items = panelItems()\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement)\n\n  // Панель бывает не только меню из кнопок: с `closeOnContentClick={false}` в\n  // ней живут поля и чекбоксы. Клавиши, которые сфокусированный контрол умеет\n  // сам, остаются ему — иначе в поле не напечатать, а чекбокс не переключить.\n  const editable = isEditableTarget(event.target)\n\n  switch (event.key) {\n    // Стрелки — исключение: они за меню даже в поле. `Tab` панель закрывает, и\n    // без них из поля внутри панели не было бы выхода вовсе.\n    case 'ArrowDown':\n      event.preventDefault()\n      focusItemAt(currentIndex + 1)\n      return\n    case 'ArrowUp':\n      event.preventDefault()\n      focusItemAt(currentIndex - 1)\n      return\n    case 'Home':\n      if (editable)\n        return\n      event.preventDefault()\n      focusItemAt(0)\n      return\n    case 'End':\n      if (editable)\n        return\n      event.preventDefault()\n      focusItemAt(-1)\n      return\n    case 'Tab':\n      close()\n      return\n  }\n\n  if (editable)\n    return\n\n  // Пробел при пустом буфере — активация сфокусированного пункта, а не поиск:\n  // пункты меню это кнопки, и пробел для них родная клавиша. В буфер он входит,\n  // только когда поиск уже идёт (правило typeahead из WAI-ARIA APG).\n  if (event.key === ' ' && typeaheadBuffer === '')\n    return\n\n  // Печатный символ без модификаторов — поиск по пунктам, а не команда.\n  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n    event.preventDefault()\n    onTypeahead(event.key)\n  }\n}\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  rootEl,\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    // Геттер, а не значение: иначе проп замрёт на моменте `setup`.\n    get offsetPx() { return props.offset },\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\n// ————— Открытие по наведению. Задержки нужны обе: без `openDelay` панель\n// выпрыгивает на любое пересечение курсором, без `closeDelay` её не удержать\n// при переходе с триггера на панель — между ними зазор `offset`.\nlet hoverTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction open(): void {\n  if (props.disabled)\n    return\n\n  clearTimeout(hoverTimer)\n  setOpen(true)\n}\n\nfunction toggle(): void {\n  if (props.disabled)\n    return\n\n  clearTimeout(hoverTimer)\n  setOpen(!isOpen.value)\n}\n\nfunction close(): void {\n  clearTimeout(hoverTimer)\n  setOpen(false)\n}\n\nfunction scheduleHover(next: boolean, delayMs: number): void {\n  clearTimeout(hoverTimer)\n\n  if (delayMs <= 0) {\n    setOpen(next)\n    return\n  }\n\n  hoverTimer = setTimeout(setOpen, delayMs, next)\n}\n\nfunction onHoverEnter(): void {\n  if (props.disabled || props.trigger !== 'hover')\n    return\n  scheduleHover(true, props.openDelay)\n}\n\nfunction onHoverLeave(): void {\n  if (props.trigger !== 'hover')\n    return\n  scheduleHover(false, props.closeDelay)\n}\n\n// Возврат фокуса — из контракта слоя: он запоминает активный элемент при\n// открытии и возвращает фокус, только если на момент закрытия тот всё ещё\n// внутри панели. Прежняя эвристика «возвращать, если открыли с клавиатуры»\n// промахивалась в обе стороны.\nuseOverlayLayer(isOpen, close, { root: panelEl })\n\nwatch(\n  () => [props.placement, props.offset],\n  () => {\n    if (isOpen.value) updateFloatingPosition()\n  },\n)\n\nwatch(\n  () => props.disabled,\n  (value) => {\n    if (value) close()\n  },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n  if (value === 'auto')\n    return undefined\n  if (typeof value === 'number')\n    return `${value}px`\n\n  // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n  // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n  const bare = value.trim()\n  if (/^\\d+$/.test(bare)) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n        + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n        + `width=\"${bare}px\" или :width=\"${bare}\".`,\n      )\n    }\n    return `${bare}px`\n  }\n\n  return value\n}\n\nconst panelStyle = computed(() => {\n  const width = toCssLength(props.width)\n  return width ? { ...floatingStyle.value, width } : floatingStyle.value\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\nconst panelClasses = computed(() => grDropdownOriginClass(resolvedPlacement.value))\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick) {\n    close()\n  }\n}\n\n// Триггер без `v-bind=\"triggerProps\"` — это триггер без клика, без клавиатуры и\n// без ARIA. Молчать об этом нельзя: панель просто не открывалась бы, и искать\n// причину пришлось бы в чужом коде.\nonMounted(() => {\n  if (process.env.NODE_ENV === 'production')\n    return\n  if (rootEl.value?.querySelector('[aria-haspopup]'))\n    return\n\n  console.warn(\n    '[GrDropdown] триггер не привязан: добавьте `v-bind=\"triggerProps\"` на элемент '\n    + 'внутри слота #trigger — <template #trigger=\"{ triggerProps }\">'\n    + '<GrButton v-bind=\"triggerProps\">…</GrButton></template>. '\n    + 'Без этого у триггера нет ни клика, ни клавиатуры, ни aria-haspopup/aria-expanded.',\n  )\n})\n\nonBeforeUnmount(() => {\n  clearTimeout(typeaheadTimer)\n  clearTimeout(hoverTimer)\n})\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(() => props.teleportTo)\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\ndefineExpose({ open, close, toggle })\n</script>\n\n<template>\n  <div data-gr-dropdown>\n    <div\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen, exclude: clickOutsideExclude }\"\n      data-gr-dropdown-trigger\n      class=\"inline-block max-w-full\"\n      @mouseenter=\"onHoverEnter\"\n      @mouseleave=\"onHoverLeave\"\n    >\n      <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggle\" :close=\"close\" :trigger-props=\"triggerProps\" />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-dropdown-panel\n          data-gr-overlay-root\n          role=\"menu\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"panelStyle\"\n          @click=\"onContentClick\"\n          @keydown=\"onPanelKeydown\"\n          @mouseenter=\"onHoverEnter\"\n          @mouseleave=\"onHoverLeave\"\n        >\n          <div data-gr-dropdown-content :class=\"contentClasses\">\n            <slot name=\"content\" :close=\"close\" />\n          </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrDropdown/index.js

@@ -1,3 +1,3 @@
-import { t as GrDropdown_default } from "./chunks/GrDropdown-0tJK01Kq.js";
+import { t as GrDropdown_default } from "./chunks/GrDropdown-BSfFOcDx.js";
 import { n as grDropdownSafelist, t as grDropdownConfig } from "../../chunks/config-BViooYNv.js";
 export { GrDropdown_default as GrDropdown, GrDropdown_default as default, grDropdownConfig, grDropdownSafelist };