@feugene/granularity 0.48.0 → 0.50.0

package/dist/components/GrChip/chunks/{GrChip-CKqyzYcv.js.map → GrChip-DoyS1Dr4.js.map}

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

package/dist/components/GrChip/index.js

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