@feugene/granularity 0.12.0 → 0.13.0

package/dist/components/GrSegmented/chunks/{GrSegmented-C1y0UXpQ.js → GrSegmented-CTd3n4PA.js}

@@ -1,4 +1,5 @@
-import { a as grSegmentedItemIconClass, c as grSegmentedRootStyle, i as grSegmentedItemClass, o as grSegmentedItemLabelClass, r as grSegmentedIndicatorClass, s as grSegmentedRootClass } from "../../../chunks/config-eYLZYOUS2.js";
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-DfWYCBB-.js";
+import { a as grSegmentedItemIconClass, c as grSegmentedRootStyle, i as grSegmentedItemClass, o as grSegmentedItemLabelClass, r as grSegmentedIndicatorClass, s as grSegmentedRootClass } from "../../../chunks/config-BMKNHFMD2.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch } from "vue";
 //#region src/components/GrSegmented/GrSegmented.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -28,8 +29,8 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 	props: {
 		modelValue: {},
 		options: {},
-		variant: { default: "pills" },
-		size: { default: "md" },
+		variant: { default: void 0 },
+		size: { default: void 0 },
 		indicatorDuration: { default: 300 },
 		block: {
 			type: Boolean,
@@ -52,6 +53,8 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 			pointerEvents: "none"
 		};
 		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrSegmented" });
+		const resolvedVariant = useGrComponentProp("GrSegmented", "variant", () => props.variant, "pills");
 		const emit = __emit;
 		const fallbackName = `gr-segmented-${getCurrentInstance()?.uid ?? Math.random()}`;
 		const rootRef = ref(null);
@@ -67,18 +70,18 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 		const enabledOptions = computed(() => props.options.filter((option) => !resolveOptionDisabled(option)));
 		const indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)));
 		const rootClassName = computed(() => grSegmentedRootClass({
-			variant: props.variant,
+			variant: resolvedVariant.value,
 			block: props.block,
 			disabled: props.disabled
 		}));
 		const rootStyle = computed(() => ({
 			...grSegmentedRootStyle({
-				variant: props.variant,
-				size: props.size
+				variant: resolvedVariant.value,
+				size: resolvedSize.value
 			}),
 			gridTemplateColumns: props.options.length > 0 ? props.options.map(() => props.block ? "minmax(0,1fr)" : "minmax(0,max-content)").join(" ") : "none"
 		}));
-		const indicatorClassName = computed(() => grSegmentedIndicatorClass(props.variant));
+		const indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value));
 		const resolvedName = computed(() => props.name ?? fallbackName);
 		const hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null);
 		const indicatorStyle = computed(() => {
@@ -247,8 +250,8 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 		}
 		watch(() => props.modelValue, () => scheduleMeasure());
 		watch(() => props.options, () => scheduleMeasure(), { deep: true });
-		watch(() => props.variant, () => scheduleMeasure());
-		watch(() => props.size, () => scheduleMeasure());
+		watch(resolvedVariant, () => scheduleMeasure());
+		watch(resolvedSize, () => scheduleMeasure());
 		watch(() => props.block, () => scheduleMeasure());
 		onMounted(() => scheduleMeasure());
 		onBeforeUnmount(() => {
@@ -261,7 +264,7 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 				ref_key: "rootRef",
 				ref: rootRef,
 				"data-gr-segmented": "",
-				"data-variant": __props.variant,
+				"data-variant": unref(resolvedVariant),
 				role: "radiogroup",
 				"aria-label": __props.ariaLabel,
 				"aria-disabled": __props.disabled ? "true" : void 0,
@@ -287,7 +290,7 @@ var GrSegmented_default = /* @__PURE__ */ defineComponent({
 					disabled: resolveOptionDisabled(option),
 					tabindex: isFocusableOption(option, index) ? 0 : -1,
 					class: normalizeClass(unref(grSegmentedItemClass)({
-						variant: __props.variant,
+						variant: unref(resolvedVariant),
 						selected: isOptionSelected(option),
 						disabled: resolveOptionDisabled(option),
 						iconOnly: isIconOnlyOption(option)

package/dist/components/GrSegmented/chunks/GrSegmented-CTd3n4PA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSegmented-CTd3n4PA.js","names":[],"sources":["../../../../src/components/GrSegmented/GrSegmented.vue","../../../../src/components/GrSegmented/GrSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { ComponentPublicInstance } from 'vue'\n\nimport {\n  grSegmentedIndicatorClass,\n  grSegmentedItemClass,\n  grSegmentedItemIconClass,\n  grSegmentedItemLabelClass,\n  grSegmentedRootClass,\n  grSegmentedRootStyle,\n  type GrSegmentedOption,\n  type GrSegmentedSize,\n  type GrSegmentedValue,\n  type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\nconst hiddenInputStyle = {\n  position: 'absolute',\n  opacity: '0',\n  width: '0',\n  height: '0',\n  pointerEvents: 'none',\n} as const\n\ntype IndicatorGeometry = {\n  width: number\n  height: number\n  x: number\n  y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n  modelValue: GrSegmentedValue\n  options: GrSegmentedOption[]\n  variant?: GrSegmentedVariant\n  size?: GrSegmentedSize\n  /** Длительность анимации индикатора в мс. */\n  indicatorDuration?: number\n  /** Растягивать сегмент на всю ширину контейнера. */\n  block?: boolean\n  disabled?: boolean\n  /** Имя скрытых radio-inputs для интеграции с нативной формой. */\n  name?: string\n  ariaLabel?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrSegmentedProps>(),\n  {\n    variant: undefined,\n    size: undefined,\n    indicatorDuration: 300,\n    block: false,\n    disabled: false,\n    name: undefined,\n    ariaLabel: undefined,\n  },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrSegmented' })\nconst resolvedVariant = useGrComponentProp('GrSegmented', 'variant', () => props.variant, 'pills')\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: GrSegmentedValue): void\n  (event: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n}>()\n\nconst instance = getCurrentInstance()\nconst fallbackName = `gr-segmented-${instance?.uid ?? Math.random()}`\n\nconst rootRef = ref<HTMLElement | null>(null)\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst enabledOptions = computed(() => props.options.filter(option => !resolveOptionDisabled(option)))\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst rootClassName = computed(() => grSegmentedRootClass({\n  variant: resolvedVariant.value,\n  block: props.block,\n  disabled: props.disabled,\n}))\nconst rootStyle = computed<Record<string, string>>(() => ({\n  ...grSegmentedRootStyle({\n    variant: resolvedVariant.value,\n    size: resolvedSize.value,\n  }),\n  gridTemplateColumns: props.options.length > 0\n    ? props.options.map(() => props.block ? 'minmax(0,1fr)' : 'minmax(0,max-content)').join(' ')\n    : 'none',\n}))\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n  const geometry = indicatorGeometry.value\n  if (!geometry) {\n    return {\n      opacity: '0',\n      width: '0px',\n      height: '0px',\n      transitionDuration: `${indicatorDuration.value}ms`,\n      transform: 'translate3d(0px, 0px, 0px)',\n    }\n  }\n\n  return {\n    opacity: indicatorReady.value ? '1' : '0',\n    width: `${geometry.width}px`,\n    height: `${geometry.height}px`,\n    transitionDuration: `${indicatorDuration.value}ms`,\n    transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n  }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n  return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n  return props.disabled || Boolean(option.disabled)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n  return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n  return Boolean(option.icon) && !option.label\n}\n\nfunction isFocusableOption(option: GrSegmentedOption, index: number): boolean {\n  if (resolveOptionDisabled(option)) {\n    return false\n  }\n\n  if (isOptionSelected(option)) {\n    return true\n  }\n\n  if (selectedIndex.value !== -1) {\n    return false\n  }\n\n  return enabledOptions.value[0]?.value === props.options[index]?.value\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n  const key = getOptionKey(value)\n\n  if (!(element instanceof HTMLElement)) {\n    itemRefs.value.delete(key)\n    return\n  }\n\n  itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n  if (left === right) {\n    return true\n  }\n\n  if (!left || !right) {\n    return false\n  }\n\n  return left.width === right.width\n    && left.height === right.height\n    && left.x === right.x\n    && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n  const root = rootRef.value\n  const option = selectedOption.value\n  if (!root || !option) {\n    if (indicatorGeometry.value !== null)\n      indicatorGeometry.value = null\n\n    if (indicatorReady.value)\n      indicatorReady.value = false\n\n    return\n  }\n\n  const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n  if (!selectedItem) {\n    return\n  }\n\n  const rootRect = root.getBoundingClientRect()\n  const itemRect = selectedItem.getBoundingClientRect()\n\n  const nextGeometry = {\n    width: Math.max(Math.round(itemRect.width), 0),\n    height: Math.max(Math.round(itemRect.height), 0),\n    x: Math.round(itemRect.left - rootRect.left),\n    y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n  } satisfies IndicatorGeometry\n\n  if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n    indicatorGeometry.value = nextGeometry\n  }\n\n  const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n  if (indicatorReady.value !== nextReady) {\n    indicatorReady.value = nextReady\n  }\n}\n\nfunction refreshObserver(): void {\n  if (typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  const root = rootRef.value\n  const option = selectedOption.value\n  const selectedItem = option\n    ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n    : null\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => scheduleMeasure())\n  }\n\n  if (!root) {\n    resizeObserver.disconnect()\n    observedRoot = null\n    observedItem = null\n    return\n  }\n\n  if (observedRoot === root && observedItem === selectedItem) {\n    return\n  }\n\n  resizeObserver.disconnect()\n  resizeObserver.observe(root)\n\n  if (selectedItem) {\n    resizeObserver.observe(selectedItem)\n  }\n\n  observedRoot = root\n  observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled) {\n    return\n  }\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureIndicator()\n    refreshObserver()\n  })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n  if (resolveOptionDisabled(option) || option.value === props.modelValue) {\n    return\n  }\n\n  emit('update:modelValue', option.value)\n  emit('change', option.value, option)\n}\n\nfunction getNextEnabledIndex(startIndex: number, direction: 1 | -1): number {\n  if (props.options.length === 0) {\n    return -1\n  }\n\n  let cursor = startIndex\n  for (let step = 0; step < props.options.length; step += 1) {\n    cursor = (cursor + direction + props.options.length) % props.options.length\n    const option = props.options[cursor]\n    if (option && !resolveOptionDisabled(option)) {\n      return cursor\n    }\n  }\n\n  return -1\n}\n\nfunction focusIndex(index: number): void {\n  const option = props.options[index]\n  if (!option) {\n    return\n  }\n\n  itemRefs.value.get(getOptionKey(option.value))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n  if (props.disabled) {\n    return\n  }\n\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault()\n    const nextIndex = getNextEnabledIndex(index, 1)\n    if (nextIndex === -1) {\n      return\n    }\n\n    const option = props.options[nextIndex]\n    if (option) {\n      emitValue(option)\n      focusIndex(nextIndex)\n    }\n    return\n  }\n\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault()\n    const nextIndex = getNextEnabledIndex(index, -1)\n    if (nextIndex === -1) {\n      return\n    }\n\n    const option = props.options[nextIndex]\n    if (option) {\n      emitValue(option)\n      focusIndex(nextIndex)\n    }\n    return\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault()\n    const firstOption = enabledOptions.value[0]\n    if (!firstOption) {\n      return\n    }\n\n    emitValue(firstOption)\n    focusIndex(props.options.findIndex(option => option.value === firstOption.value))\n    return\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault()\n    const lastOption = enabledOptions.value.at(-1)\n    if (!lastOption) {\n      return\n    }\n\n    emitValue(lastOption)\n    focusIndex(props.options.findIndex(option => option.value === lastOption.value))\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    const option = props.options[index]\n    if (option) {\n      emitValue(option)\n    }\n  }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(resolvedVariant, () => scheduleMeasure())\nwatch(resolvedSize, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  observedRoot = null\n  observedItem = null\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    data-gr-segmented\n    :data-variant=\"resolvedVariant\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :class=\"rootClassName\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"hasIndicator\"\n      data-gr-segmented-indicator\n      aria-hidden=\"true\"\n      :class=\"indicatorClassName\"\n      :style=\"indicatorStyle\"\n    />\n\n    <button\n      v-for=\"(option, index) in options\"\n      :key=\"option.value\"\n      :ref=\"element => setItemRef(option.value, element)\"\n      data-gr-segmented-item\n      :data-value=\"String(option.value)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n      :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n      :disabled=\"resolveOptionDisabled(option)\"\n      :tabindex=\"isFocusableOption(option, index) ? 0 : -1\"\n      :class=\"grSegmentedItemClass({\n        variant: resolvedVariant,\n        selected: isOptionSelected(option),\n        disabled: resolveOptionDisabled(option),\n        iconOnly: isIconOnlyOption(option),\n      })\"\n      @click=\"emitValue(option)\"\n      @keydown=\"onKeydown($event, index)\"\n    >\n      <input\n        type=\"radio\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        :name=\"resolvedName\"\n        :value=\"option.value\"\n        :checked=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n        :style=\"hiddenInputStyle\"\n      >\n\n      <slot\n        :option=\"option\"\n        :selected=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n      >\n        <component\n          :is=\"option.icon\"\n          v-if=\"option.icon\"\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemIconClass\"\n        />\n        <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n          {{ option.label }}\n        </span>\n      </slot>\n    </button>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { ComponentPublicInstance } from 'vue'\n\nimport {\n  grSegmentedIndicatorClass,\n  grSegmentedItemClass,\n  grSegmentedItemIconClass,\n  grSegmentedItemLabelClass,\n  grSegmentedRootClass,\n  grSegmentedRootStyle,\n  type GrSegmentedOption,\n  type GrSegmentedSize,\n  type GrSegmentedValue,\n  type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\nconst hiddenInputStyle = {\n  position: 'absolute',\n  opacity: '0',\n  width: '0',\n  height: '0',\n  pointerEvents: 'none',\n} as const\n\ntype IndicatorGeometry = {\n  width: number\n  height: number\n  x: number\n  y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n  modelValue: GrSegmentedValue\n  options: GrSegmentedOption[]\n  variant?: GrSegmentedVariant\n  size?: GrSegmentedSize\n  /** Длительность анимации индикатора в мс. */\n  indicatorDuration?: number\n  /** Растягивать сегмент на всю ширину контейнера. */\n  block?: boolean\n  disabled?: boolean\n  /** Имя скрытых radio-inputs для интеграции с нативной формой. */\n  name?: string\n  ariaLabel?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrSegmentedProps>(),\n  {\n    variant: undefined,\n    size: undefined,\n    indicatorDuration: 300,\n    block: false,\n    disabled: false,\n    name: undefined,\n    ariaLabel: undefined,\n  },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrSegmented' })\nconst resolvedVariant = useGrComponentProp('GrSegmented', 'variant', () => props.variant, 'pills')\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: GrSegmentedValue): void\n  (event: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n}>()\n\nconst instance = getCurrentInstance()\nconst fallbackName = `gr-segmented-${instance?.uid ?? Math.random()}`\n\nconst rootRef = ref<HTMLElement | null>(null)\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst enabledOptions = computed(() => props.options.filter(option => !resolveOptionDisabled(option)))\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst rootClassName = computed(() => grSegmentedRootClass({\n  variant: resolvedVariant.value,\n  block: props.block,\n  disabled: props.disabled,\n}))\nconst rootStyle = computed<Record<string, string>>(() => ({\n  ...grSegmentedRootStyle({\n    variant: resolvedVariant.value,\n    size: resolvedSize.value,\n  }),\n  gridTemplateColumns: props.options.length > 0\n    ? props.options.map(() => props.block ? 'minmax(0,1fr)' : 'minmax(0,max-content)').join(' ')\n    : 'none',\n}))\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(resolvedVariant.value))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n  const geometry = indicatorGeometry.value\n  if (!geometry) {\n    return {\n      opacity: '0',\n      width: '0px',\n      height: '0px',\n      transitionDuration: `${indicatorDuration.value}ms`,\n      transform: 'translate3d(0px, 0px, 0px)',\n    }\n  }\n\n  return {\n    opacity: indicatorReady.value ? '1' : '0',\n    width: `${geometry.width}px`,\n    height: `${geometry.height}px`,\n    transitionDuration: `${indicatorDuration.value}ms`,\n    transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n  }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n  return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n  return props.disabled || Boolean(option.disabled)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n  return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n  return Boolean(option.icon) && !option.label\n}\n\nfunction isFocusableOption(option: GrSegmentedOption, index: number): boolean {\n  if (resolveOptionDisabled(option)) {\n    return false\n  }\n\n  if (isOptionSelected(option)) {\n    return true\n  }\n\n  if (selectedIndex.value !== -1) {\n    return false\n  }\n\n  return enabledOptions.value[0]?.value === props.options[index]?.value\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n  const key = getOptionKey(value)\n\n  if (!(element instanceof HTMLElement)) {\n    itemRefs.value.delete(key)\n    return\n  }\n\n  itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n  if (left === right) {\n    return true\n  }\n\n  if (!left || !right) {\n    return false\n  }\n\n  return left.width === right.width\n    && left.height === right.height\n    && left.x === right.x\n    && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n  const root = rootRef.value\n  const option = selectedOption.value\n  if (!root || !option) {\n    if (indicatorGeometry.value !== null)\n      indicatorGeometry.value = null\n\n    if (indicatorReady.value)\n      indicatorReady.value = false\n\n    return\n  }\n\n  const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n  if (!selectedItem) {\n    return\n  }\n\n  const rootRect = root.getBoundingClientRect()\n  const itemRect = selectedItem.getBoundingClientRect()\n\n  const nextGeometry = {\n    width: Math.max(Math.round(itemRect.width), 0),\n    height: Math.max(Math.round(itemRect.height), 0),\n    x: Math.round(itemRect.left - rootRect.left),\n    y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n  } satisfies IndicatorGeometry\n\n  if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n    indicatorGeometry.value = nextGeometry\n  }\n\n  const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n  if (indicatorReady.value !== nextReady) {\n    indicatorReady.value = nextReady\n  }\n}\n\nfunction refreshObserver(): void {\n  if (typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  const root = rootRef.value\n  const option = selectedOption.value\n  const selectedItem = option\n    ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n    : null\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => scheduleMeasure())\n  }\n\n  if (!root) {\n    resizeObserver.disconnect()\n    observedRoot = null\n    observedItem = null\n    return\n  }\n\n  if (observedRoot === root && observedItem === selectedItem) {\n    return\n  }\n\n  resizeObserver.disconnect()\n  resizeObserver.observe(root)\n\n  if (selectedItem) {\n    resizeObserver.observe(selectedItem)\n  }\n\n  observedRoot = root\n  observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled) {\n    return\n  }\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureIndicator()\n    refreshObserver()\n  })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n  if (resolveOptionDisabled(option) || option.value === props.modelValue) {\n    return\n  }\n\n  emit('update:modelValue', option.value)\n  emit('change', option.value, option)\n}\n\nfunction getNextEnabledIndex(startIndex: number, direction: 1 | -1): number {\n  if (props.options.length === 0) {\n    return -1\n  }\n\n  let cursor = startIndex\n  for (let step = 0; step < props.options.length; step += 1) {\n    cursor = (cursor + direction + props.options.length) % props.options.length\n    const option = props.options[cursor]\n    if (option && !resolveOptionDisabled(option)) {\n      return cursor\n    }\n  }\n\n  return -1\n}\n\nfunction focusIndex(index: number): void {\n  const option = props.options[index]\n  if (!option) {\n    return\n  }\n\n  itemRefs.value.get(getOptionKey(option.value))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n  if (props.disabled) {\n    return\n  }\n\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault()\n    const nextIndex = getNextEnabledIndex(index, 1)\n    if (nextIndex === -1) {\n      return\n    }\n\n    const option = props.options[nextIndex]\n    if (option) {\n      emitValue(option)\n      focusIndex(nextIndex)\n    }\n    return\n  }\n\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault()\n    const nextIndex = getNextEnabledIndex(index, -1)\n    if (nextIndex === -1) {\n      return\n    }\n\n    const option = props.options[nextIndex]\n    if (option) {\n      emitValue(option)\n      focusIndex(nextIndex)\n    }\n    return\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault()\n    const firstOption = enabledOptions.value[0]\n    if (!firstOption) {\n      return\n    }\n\n    emitValue(firstOption)\n    focusIndex(props.options.findIndex(option => option.value === firstOption.value))\n    return\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault()\n    const lastOption = enabledOptions.value.at(-1)\n    if (!lastOption) {\n      return\n    }\n\n    emitValue(lastOption)\n    focusIndex(props.options.findIndex(option => option.value === lastOption.value))\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    const option = props.options[index]\n    if (option) {\n      emitValue(option)\n    }\n  }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(resolvedVariant, () => scheduleMeasure())\nwatch(resolvedSize, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  observedRoot = null\n  observedItem = null\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    data-gr-segmented\n    :data-variant=\"resolvedVariant\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :class=\"rootClassName\"\n    :style=\"rootStyle\"\n  >\n    <span\n      v-if=\"hasIndicator\"\n      data-gr-segmented-indicator\n      aria-hidden=\"true\"\n      :class=\"indicatorClassName\"\n      :style=\"indicatorStyle\"\n    />\n\n    <button\n      v-for=\"(option, index) in options\"\n      :key=\"option.value\"\n      :ref=\"element => setItemRef(option.value, element)\"\n      data-gr-segmented-item\n      :data-value=\"String(option.value)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n      :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n      :disabled=\"resolveOptionDisabled(option)\"\n      :tabindex=\"isFocusableOption(option, index) ? 0 : -1\"\n      :class=\"grSegmentedItemClass({\n        variant: resolvedVariant,\n        selected: isOptionSelected(option),\n        disabled: resolveOptionDisabled(option),\n        iconOnly: isIconOnlyOption(option),\n      })\"\n      @click=\"emitValue(option)\"\n      @keydown=\"onKeydown($event, index)\"\n    >\n      <input\n        type=\"radio\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        :name=\"resolvedName\"\n        :value=\"option.value\"\n        :checked=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n        :style=\"hiddenInputStyle\"\n      >\n\n      <slot\n        :option=\"option\"\n        :selected=\"isOptionSelected(option)\"\n        :disabled=\"resolveOptionDisabled(option)\"\n      >\n        <component\n          :is=\"option.icon\"\n          v-if=\"option.icon\"\n          aria-hidden=\"true\"\n          :class=\"grSegmentedItemIconClass\"\n        />\n        <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n          {{ option.label }}\n        </span>\n      </slot>\n    </button>\n  </div>\n</template>"],"mappings":"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"}

package/dist/components/GrSegmented/index.js

@@ -1,3 +1,3 @@
-import { n as grSegmentedSafelist, t as grSegmentedConfig } from "../../chunks/config-eYLZYOUS2.js";
-import { t as GrSegmented_default } from "./chunks/GrSegmented-C1y0UXpQ.js";
+import { n as grSegmentedSafelist, t as grSegmentedConfig } from "../../chunks/config-BMKNHFMD2.js";
+import { t as GrSegmented_default } from "./chunks/GrSegmented-CTd3n4PA.js";
 export { GrSegmented_default as GrSegmented, GrSegmented_default as default, grSegmentedConfig, grSegmentedSafelist };

package/dist/components/GrSelect/chunks/{GrSelect-BVCmitqa.js → GrSelect-Dn3FgJ3Z.js}

@@ -1,10 +1,11 @@
-import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
-import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-B8dd3JaA.js";
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-DfWYCBB-.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-SH0I--GW.js";
 import { vClickOutside } from "../../../directives/clickOutside.js";
 import { t as useFloating } from "../../../chunks/useFloating-DtM6TyE4.js";
 import { t as useEscapeToClose } from "../../../chunks/useEscapeToClose-C2t_S1gh.js";
-import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-CLK5hRd3.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-C1VBL0dg.js";
+import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-CwMUQrBZ.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/components/GrSelect/GrSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -32,7 +33,7 @@ var _hoisted_6 = [
 var _hoisted_7 = {
 	key: 1,
 	"data-testid": "gr-select-chevron",
-	class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--muted-fg)] pointer-events-none"
+	class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
 };
 var _hoisted_8 = [
 	"id",
@@ -47,22 +48,35 @@ var _hoisted_8 = [
 ];
 var _hoisted_9 = { class: "min-w-0 flex-1" };
 var _hoisted_10 = {
+	key: 0,
+	"data-gr-select-tags": "",
+	class: "flex flex-wrap gap-1 py-0.5"
+};
+var _hoisted_11 = { class: "truncate" };
+var _hoisted_12 = ["aria-label", "onClick"];
+var _hoisted_13 = {
 	key: 0,
 	class: "shrink-0 h-4 w-4",
 	"aria-hidden": "true"
 };
-var _hoisted_11 = {
+var _hoisted_14 = {
 	key: 1,
 	"data-testid": "gr-select-chevron",
-	class: "shrink-0 flex items-center text-[var(--muted-fg)] pointer-events-none"
+	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
 };
-var _hoisted_12 = ["disabled", "aria-label"];
-var _hoisted_13 = {
+var _hoisted_15 = ["disabled", "aria-label"];
+var _hoisted_16 = {
 	key: 0,
-	class: "p-2 border-b border-[var(--brd)]"
+	class: "p-2 border-b border-[var(--gr-brd)]"
 };
-var _hoisted_14 = ["id", "aria-multiselectable"];
-var _hoisted_15 = [
+var _hoisted_17 = {
+	key: 1,
+	"data-gr-select-loading": "",
+	class: "flex items-center justify-center gap-2 px-3 py-4 text-[13px] text-[var(--gr-muted-fg)]",
+	role: "status"
+};
+var _hoisted_18 = ["id", "aria-multiselectable"];
+var _hoisted_19 = [
 	"id",
 	"disabled",
 	"aria-selected",
@@ -70,8 +84,13 @@ var _hoisted_15 = [
 	"onClick",
 	"onMousemove"
 ];
-var _hoisted_16 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_17 = { class: "truncate" };
+var _hoisted_20 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_21 = { class: "truncate" };
+var _hoisted_22 = {
+	key: 1,
+	"data-gr-select-empty": "",
+	class: "px-3 py-4 text-center text-[13px] text-[var(--gr-muted-fg)]"
+};
 //#endregion
 //#region src/components/GrSelect/GrSelect.vue
 var GrSelect_default = /* @__PURE__ */ defineComponent({
@@ -85,7 +104,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		},
 		ariaLabel: { default: void 0 },
 		view: { default: "default" },
-		size: { default: "md" },
+		size: { default: void 0 },
 		placeholder: { default: void 0 },
 		multiple: {
 			type: Boolean,
@@ -96,6 +115,21 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+		filterPlaceholder: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
+		noResultsText: { default: void 0 },
+		tags: {
+			type: Boolean,
+			default: false
+		},
 		customValuePlaceholder: { default: void 0 },
 		dropdownMaxHeight: { default: 280 },
 		closeOnSelect: {
@@ -104,20 +138,28 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		},
 		clearable: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		clearLabel: { default: void 0 },
-		variant: { default: "primary" },
-		underline: { default: "auto" }
+		variant: { default: void 0 },
+		underline: { default: void 0 }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrSelect" });
+		const resolvedVariant = useGrComponentProp("GrSelect", "variant", () => props.variant, "primary");
+		const resolvedUnderline = useGrComponentProp("GrSelect", "underline", () => props.underline, "auto");
+		const resolvedClearable = useGrComponentProp("GrSelect", "clearable", () => props.clearable, false);
 		const { t } = useGranularityTranslations();
 		const resolvedCustomValuePlaceholder = computed(() => {
 			return props.customValuePlaceholder ?? t("gr.select.customValuePlaceholder", "Add value…");
 		});
 		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.common.clear", "Clear"));
+		const resolvedFilterPlaceholder = computed(() => props.filterPlaceholder ?? t("gr.select.searchPlaceholder", "Search…"));
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.select.loading", "Loading…"));
+		const resolvedNoResultsText = computed(() => props.noResultsText ?? t("gr.select.noResults", "No results"));
+		const resolvedSearchPlaceholder = computed(() => props.allowCustomValue ? resolvedCustomValuePlaceholder.value : resolvedFilterPlaceholder.value);
 		const baseClassName = computed(() => props.view === "link" ? linkBaseClass : defaultBaseClass);
 		const rootClass = computed(() => props.view === "link" ? "relative inline-block align-baseline" : "relative w-full");
 		const emit = __emit;
@@ -174,8 +216,11 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		});
 		const effectiveOptionsView = computed(() => {
 			if (props.view === "link" && props.multiple && props.optionsView === "native") return "panel";
+			if ((props.filterable || props.loading || props.tags) && props.optionsView === "native") return "panel";
 			return props.optionsView;
 		});
+		const showSearchInput = computed(() => (props.filterable || props.allowCustomValue) && effectiveOptionsView.value === "panel");
+		const showTags = computed(() => props.multiple && props.tags && effectiveOptionsView.value === "panel");
 		const nativeCustomOptionVisible = computed(() => {
 			if (!props.allowCustomValue) return false;
 			if (effectiveOptionsView.value !== "native") return false;
@@ -218,7 +263,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		* Группировка сохраняется, фильтрация по `customValue` скрывает пустые группы.
 		*/
 		const panelItems = computed(() => {
-			const q = props.allowCustomValue ? customValue.value.trim().toLowerCase() : "";
+			const q = props.allowCustomValue || props.filterable ? customValue.value.trim().toLowerCase() : "";
 			const items = [];
 			if (props.allowCustomValue && !props.multiple && modelSingle.value !== "" && !hasModelInOptions.value) {
 				const custom = {
@@ -298,6 +343,14 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			if (!v) return;
 			toggleValue(v);
 		}
+		function removeValue(value) {
+			if (props.disabled) return;
+			if (!props.multiple) return;
+			emitValue(selectedValues.value.filter((v) => v !== value));
+		}
+		function tagRemoveLabel(option) {
+			return t("gr.select.removeTag", "Remove {label}", { label: option.label });
+		}
 		const listboxId = useId();
 		const activeIndex = ref(-1);
 		function optionDomId(value) {
@@ -381,7 +434,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 				case "Tab":
 					closeDropdown();
 					break;
-				default: if (!props.allowCustomValue && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
+				default: if (!showSearchInput.value && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
 			}
 		}
 		watch(open, async (isOpen) => {
@@ -391,7 +444,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 				return;
 			}
 			initActiveIndex();
-			if (props.allowCustomValue) {
+			if (showSearchInput.value) {
 				await nextTick();
 				customInputRef.value?.focus();
 			}
@@ -400,14 +453,14 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			return effectiveOptionsView.value === "native" && props.view !== "link" && !props.multiple;
 		});
 		const nativeClearOptionVisible = computed(() => {
-			if (!props.clearable) return false;
+			if (!resolvedClearable.value) return false;
 			if (effectiveOptionsView.value !== "native") return false;
 			if (props.multiple) return false;
 			if (!props.options) return true;
 			return !flatOptions.value.some((o) => o.value === "");
 		});
 		const panelClearVisible = computed(() => {
-			if (!props.clearable) return false;
+			if (!resolvedClearable.value) return false;
 			if (effectiveOptionsView.value !== "panel") return false;
 			if (props.view === "link") return false;
 			return hasSelection.value;
@@ -415,10 +468,10 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		const nativeClassName = computed(() => {
 			return grSelectNativeClass({
 				view: props.view,
-				size: props.size,
+				size: resolvedSize.value,
 				disabled: props.disabled,
-				variant: props.variant,
-				underline: props.underline,
+				variant: resolvedVariant.value,
+				underline: resolvedUnderline.value,
 				showNativeChevron: showNativeChevron.value
 			});
 		});
@@ -430,9 +483,9 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		*/
 		const isLinkNative = computed(() => props.view === "link" && effectiveOptionsView.value === "native");
 		const linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({
-			size: props.size,
-			variant: props.variant,
-			underline: props.underline,
+			size: resolvedSize.value,
+			variant: resolvedVariant.value,
+			underline: resolvedUnderline.value,
 			disabled: props.disabled
 		}));
 		const linkNativeDisplayText = computed(() => {
@@ -442,10 +495,10 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			return grSelectTriggerClass({
 				view: props.view,
 				optionsView: effectiveOptionsView.value,
-				size: props.size,
+				size: resolvedSize.value,
 				disabled: props.disabled,
-				variant: props.variant,
-				underline: props.underline
+				variant: resolvedVariant.value,
+				underline: resolvedUnderline.value
 			});
 		});
 		function onChange(e) {
@@ -536,7 +589,11 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					"aria-controls": open.value ? unref(listboxId) : void 0,
 					"aria-activedescendant": activeDescendantId.value,
 					"aria-expanded": open.value ? "true" : "false",
-					class: normalizeClass([baseClassName.value, triggerClassName.value]),
+					class: normalizeClass([
+						baseClassName.value,
+						triggerClassName.value,
+						showTags.value && hasSelection.value ? "!h-auto min-h-10 !py-1.5" : ""
+					]),
 					onClick: toggleDropdown,
 					onKeydown: onComboKeydown
 				}, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "value", {
@@ -545,7 +602,27 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					displayLabel: displayLabel.value,
 					placeholder: __props.placeholder,
 					hasSelection: hasSelection.value
-				}, () => [createElementVNode("span", { class: normalizeClass(["block truncate", !hasSelection.value ? "text-[var(--muted-fg)]" : ""]) }, toDisplayString(displayText.value), 3)])]), panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_11, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+				}, () => [showTags.value && hasSelection.value ? (openBlock(), createElementBlock("span", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, (opt) => {
+					return openBlock(), createElementBlock("span", {
+						key: opt.value,
+						"data-gr-select-tag": "",
+						class: "inline-flex items-center gap-1 rounded-[6px] bg-[var(--gr-muted)] pl-2 pr-1 py-0.5 text-[12px] text-[var(--gr-fg)] max-w-full"
+					}, [createElementVNode("span", _hoisted_11, toDisplayString(opt.label), 1), !__props.disabled ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						"data-gr-select-tag-remove": "",
+						role: "button",
+						tabindex: "-1",
+						"aria-label": tagRemoveLabel(opt),
+						class: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-fg)_12%,transparent)]",
+						onClick: withModifiers(($event) => removeValue(opt.value), ["stop"])
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+						class: "i-lucide-x block h-3 w-3",
+						"aria-hidden": "true"
+					}, null, -1)])], 8, _hoisted_12)) : createCommentVNode("", true)]);
+				}), 128))])) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(["block truncate", !hasSelection.value ? "text-[var(--gr-muted-fg)]" : ""])
+				}, toDisplayString(displayText.value), 3))])]), panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_13)) : (openBlock(), createElementBlock("span", _hoisted_14, [..._cache[3] || (_cache[3] = [createElementVNode("span", {
 					class: "i-lucide-chevron-down block h-4 w-4",
 					"aria-hidden": "true"
 				}, null, -1)])]))], 42, _hoisted_8),
@@ -554,14 +631,14 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					"data-testid": "gr-select-clear",
 					"data-gr-select-clear": "",
 					type: "button",
-					class: "absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--muted)_25%,transparent)] disabled:opacity-50",
+					class: "absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)] disabled:opacity-50",
 					disabled: __props.disabled,
 					"aria-label": resolvedClearLabel.value,
 					onClick: withModifiers(clearSelection, ["stop"])
-				}, [..._cache[3] || (_cache[3] = [createElementVNode("span", {
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("span", {
 					class: "i-lucide-x inline-block h-4 w-4",
 					"aria-hidden": "true"
-				}, null, -1)])], 8, _hoisted_12)) : createCommentVNode("", true),
+				}, null, -1)])], 8, _hoisted_15)) : createCommentVNode("", true),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
 					"enter-active-class": "transition ease-out duration-150",
 					"enter-from-class": "transform opacity-0 scale-95",
@@ -576,60 +653,69 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 						"data-testid": "gr-select-panel",
 						"data-gr-select-panel": "",
 						style: normalizeStyle(unref(floatingStyle))
-					}, [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [__props.allowCustomValue ? (openBlock(), createElementBlock("div", _hoisted_13, [createVNode(GrInput_default, {
+					}, [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [showSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(GrInput_default, {
 						ref_key: "customInputRef",
 						ref: customInputRef,
 						modelValue: customValue.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customValue.value = $event),
 						"data-testid": "gr-select-custom-input",
+						"data-gr-select-search": "",
 						type: "text",
-						placeholder: resolvedCustomValuePlaceholder.value,
+						placeholder: resolvedSearchPlaceholder.value,
 						size: "sm",
 						onKeydown: onComboKeydown
-					}, null, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true), createElementVNode("div", {
+					}, null, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true), __props.loading ? (openBlock(), createElementBlock("div", _hoisted_17, [_cache[5] || (_cache[5] = createElementVNode("span", {
+						class: "i-lucide-loader-circle block h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}, null, -1)), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])) : (openBlock(), createElementBlock("div", {
+						key: 2,
 						id: unref(listboxId),
 						"data-gr-select-listbox": "",
 						class: "p-1 overflow-auto",
 						style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` }),
 						role: "listbox",
 						"aria-multiselectable": __props.multiple ? "true" : void 0
-					}, [canAddCustom.value ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						"data-testid": "gr-select-add-option",
-						"data-gr-select-add-option": "",
-						type: "button",
-						class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full"]]),
-						onClick: addCustom
-					}, toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 3)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(panelItems.value, (item) => {
-						return openBlock(), createElementBlock(Fragment, { key: item.key }, [item.kind === "group" ? (openBlock(), createElementBlock("div", {
+					}, [
+						canAddCustom.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
-							"data-gr-select-group-label": "",
-							role: "presentation",
-							class: normalizeClass(["px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
-						}, toDisplayString(item.label), 3)) : (openBlock(), createElementBlock("button", {
-							key: 1,
-							id: optionDomId(item.option.value),
-							"data-gr-select-option": "",
+							"data-testid": "gr-select-add-option",
+							"data-gr-select-add-option": "",
 							type: "button",
-							role: "option",
-							disabled: item.option.disabled,
-							"aria-selected": isSelected(item.option.value) ? "true" : "false",
-							"aria-disabled": item.option.disabled ? "true" : void 0,
-							class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
-								__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full",
-								item.option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]",
-								activeValue.value === item.option.value && !item.option.disabled ? "bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]" : ""
-							]]),
-							onClick: ($event) => toggleValue(item.option.value),
-							onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(item.option.value)
-						}, [renderSlot(_ctx.$slots, "option", {
-							option: item.option,
-							selected: isSelected(item.option.value)
-						}, () => [createElementVNode("span", _hoisted_16, [createElementVNode("span", {
-							class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(item.option.value) ? "i-lucide-check text-[var(--primary)]" : ""]),
-							"aria-hidden": "true"
-						}, null, 2), createElementVNode("span", _hoisted_17, toDisplayString(item.option.label), 1)])])], 42, _hoisted_15))], 64);
-					}), 128))], 12, _hoisted_14)], 2)], 4), [[vShow, open.value]])]),
+							class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full"]]),
+							onClick: addCustom
+						}, toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 3)) : createCommentVNode("", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(panelItems.value, (item) => {
+							return openBlock(), createElementBlock(Fragment, { key: item.key }, [item.kind === "group" ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								"data-gr-select-group-label": "",
+								role: "presentation",
+								class: normalizeClass(["px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
+							}, toDisplayString(item.label), 3)) : (openBlock(), createElementBlock("button", {
+								key: 1,
+								id: optionDomId(item.option.value),
+								"data-gr-select-option": "",
+								type: "button",
+								role: "option",
+								disabled: item.option.disabled,
+								"aria-selected": isSelected(item.option.value) ? "true" : "false",
+								"aria-disabled": item.option.disabled ? "true" : void 0,
+								class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
+									__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full",
+									item.option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]",
+									activeValue.value === item.option.value && !item.option.disabled ? "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]" : ""
+								]]),
+								onClick: ($event) => toggleValue(item.option.value),
+								onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(item.option.value)
+							}, [renderSlot(_ctx.$slots, "option", {
+								option: item.option,
+								selected: isSelected(item.option.value)
+							}, () => [createElementVNode("span", _hoisted_20, [createElementVNode("span", {
+								class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(item.option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+								"aria-hidden": "true"
+							}, null, 2), createElementVNode("span", _hoisted_21, toDisplayString(item.option.label), 1)])])], 42, _hoisted_19))], 64);
+						}), 128)),
+						!panelItems.value.length && !canAddCustom.value ? (openBlock(), createElementBlock("div", _hoisted_22, toDisplayString(resolvedNoResultsText.value), 1)) : createCommentVNode("", true)
+					], 12, _hoisted_18))], 2)], 4), [[vShow, open.value]])]),
 					_: 3
 				})]))
 			], 2)), [[unref(vClickOutside), {