reka-ui 2.1.1 → 2.2.1

package/dist/Select/SelectRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { AcceptableValue, Direction, FormFieldProps } from '@/shared/types'\nimport { createContext, isNullish, useDirection, useFormControl } from '@/shared'\nimport { compare } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {\n  /** The controlled open state of the Select. Can be bind as `v-model:open`. */\n  open?: boolean\n  /** The open state of the select when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /** The value of the select when initially rendered. Use when you do not need to control the state of the Select */\n  defaultValue?: T | Array<T>\n  /** The controlled value of the Select. Can be bind as `v-model`. */\n  modelValue?: T | Array<T>\n  /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */\n  by?: string | ((a: T, b: T) => boolean)\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether multiple options can be selected or not. */\n  multiple?: boolean\n  /** Native html input `autocomplete` attribute. */\n  autocomplete?: string\n  /** When `true`, prevents the user from interacting with Select */\n  disabled?: boolean\n}\n\nexport type SelectRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler called when the open state of the context menu changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface SelectRootContext<T> {\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerChange: (node: HTMLElement | undefined) => void\n  valueElement: Ref<HTMLElement | undefined>\n  onValueElementChange: (node: HTMLElement) => void\n  contentId: string\n  modelValue: Ref<T | Array<T> | undefined>\n  onValueChange: (value: T) => void\n  open: Ref<boolean>\n  multiple: Ref<boolean>\n  required?: Ref<boolean>\n  by?: string | ((a: T, b: T) => boolean)\n  onOpenChange: (open: boolean) => void\n  dir: Ref<Direction>\n  triggerPointerDownPosRef: Ref<{ x: number, y: number } | null>\n  isEmptyModelValue: Ref<boolean>\n  disabled?: Ref<boolean>\n\n  optionsSet: Ref<Set<SelectOption>>\n  onOptionAdd: (option: SelectOption) => void\n  onOptionRemove: (option: SelectOption) => void\n}\n\nexport const [injectSelectRootContext, provideSelectRootContext]\n  = createContext<SelectRootContext<AcceptableValue>>('SelectRoot')\n\ninterface SelectOption { value: any, disabled?: boolean, textContent: string }\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, ref, toRefs } from 'vue'\nimport BubbleSelect from './BubbleSelect.vue'\nimport { PopperRoot } from '@/Popper'\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectRootProps>(), {\n  modelValue: undefined,\n  open: undefined,\n})\nconst emits = defineEmits<SelectRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { required, disabled, multiple, dir: propDir } = toRefs(props)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[] | undefined>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\nconst valueElement = ref<HTMLElement>()\nconst triggerPointerDownPosRef = ref({\n  x: 0,\n  y: 0,\n})\n\nconst isEmptyModelValue = computed(() => {\n  if (multiple.value && Array.isArray(modelValue.value))\n    return modelValue.value?.length === 0\n  else\n    return isNullish(modelValue.value)\n})\n\nuseCollection({ isProvider: true })\nconst dir = useDirection(propDir)\n\nconst isFormControl = useFormControl(triggerElement)\nconst optionsSet = ref<Set<SelectOption>>(new Set())\n\n// The native `select` only associates the correct default value if the corresponding\n// `option` is rendered as a child **at the same time** as itself.\n// Because it might take a few renders for our items to gather the information to build\n// the native `option`(s), we generate a key on the `select` to make sure Vue re-builds it\n// each time the options change.\nconst nativeSelectKey = computed(() => {\n  return Array.from(optionsSet.value)\n    .map(option => option.value)\n    .join(';')\n})\n\nfunction handleValueChange(value: T) {\n  if (multiple.value) {\n    const array = Array.isArray(modelValue.value) ? [...modelValue.value] : []\n    const index = array.findIndex(i => compare(i, value, props.by))\n    index === -1 ? array.push(value) : array.splice(index, 1)\n    modelValue.value = [...array]\n  }\n  else {\n    modelValue.value = value\n  }\n}\n\nprovideSelectRootContext({\n  triggerElement,\n  onTriggerChange: (node) => {\n    triggerElement.value = node\n  },\n  valueElement,\n  onValueElementChange: (node) => {\n    valueElement.value = node\n  },\n  contentId: '',\n  modelValue,\n  // @ts-expect-error Missing infer for AcceptableValue\n  onValueChange: handleValueChange,\n  by: props.by,\n  open,\n  multiple,\n  required,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  dir,\n  triggerPointerDownPosRef,\n  disabled,\n  isEmptyModelValue,\n\n  optionsSet,\n  onOptionAdd: option => optionsSet.value.add(option),\n  onOptionRemove: option => optionsSet.value.delete(option),\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n\n    <BubbleSelect\n      v-if=\"isFormControl\"\n      :key=\"nativeSelectKey\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      :multiple=\"multiple\"\n      :required=\"required\"\n      :name=\"name\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :value=\"modelValue\"\n    >\n      <option\n        v-if=\"isNullish(modelValue)\"\n        value=\"\"\n      />\n      <option\n        v-for=\"option in Array.from(optionsSet)\"\n        :key=\"option.value ?? ''\"\n        v-bind=\"option\"\n      />\n    </BubbleSelect>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AcceptableValue, Direction, FormFieldProps } from '@/shared/types'\nimport type { Ref } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { createContext, isNullish, useDirection, useFormControl } from '@/shared'\nimport { compare } from './utils'\n\nexport interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {\n  /** The controlled open state of the Select. Can be bind as `v-model:open`. */\n  open?: boolean\n  /** The open state of the select when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /** The value of the select when initially rendered. Use when you do not need to control the state of the Select */\n  defaultValue?: T | Array<T>\n  /** The controlled value of the Select. Can be bind as `v-model`. */\n  modelValue?: T | Array<T>\n  /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */\n  by?: string | ((a: T, b: T) => boolean)\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether multiple options can be selected or not. */\n  multiple?: boolean\n  /** Native html input `autocomplete` attribute. */\n  autocomplete?: string\n  /** When `true`, prevents the user from interacting with Select */\n  disabled?: boolean\n}\n\nexport type SelectRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler called when the open state of the context menu changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface SelectRootContext<T> {\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerChange: (node: HTMLElement | undefined) => void\n  valueElement: Ref<HTMLElement | undefined>\n  onValueElementChange: (node: HTMLElement) => void\n  contentId: string\n  modelValue: Ref<T | Array<T> | undefined>\n  onValueChange: (value: T) => void\n  open: Ref<boolean>\n  multiple: Ref<boolean>\n  required?: Ref<boolean>\n  by?: string | ((a: T, b: T) => boolean)\n  onOpenChange: (open: boolean) => void\n  dir: Ref<Direction>\n  triggerPointerDownPosRef: Ref<{ x: number, y: number } | null>\n  isEmptyModelValue: Ref<boolean>\n  disabled?: Ref<boolean>\n\n  optionsSet: Ref<Set<SelectOption>>\n  onOptionAdd: (option: SelectOption) => void\n  onOptionRemove: (option: SelectOption) => void\n}\n\nexport const [injectSelectRootContext, provideSelectRootContext]\n  = createContext<SelectRootContext<AcceptableValue>>('SelectRoot')\n\ninterface SelectOption { value: any, disabled?: boolean, textContent: string }\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { PopperRoot } from '@/Popper'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRefs } from 'vue'\nimport BubbleSelect from './BubbleSelect.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectRootProps>(), {\n  modelValue: undefined,\n  open: undefined,\n})\nconst emits = defineEmits<SelectRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { required, disabled, multiple, dir: propDir } = toRefs(props)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[] | undefined>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\nconst valueElement = ref<HTMLElement>()\nconst triggerPointerDownPosRef = ref({\n  x: 0,\n  y: 0,\n})\n\nconst isEmptyModelValue = computed(() => {\n  if (multiple.value && Array.isArray(modelValue.value))\n    return modelValue.value?.length === 0\n  else\n    return isNullish(modelValue.value)\n})\n\nuseCollection({ isProvider: true })\nconst dir = useDirection(propDir)\n\nconst isFormControl = useFormControl(triggerElement)\nconst optionsSet = ref<Set<SelectOption>>(new Set())\n\n// The native `select` only associates the correct default value if the corresponding\n// `option` is rendered as a child **at the same time** as itself.\n// Because it might take a few renders for our items to gather the information to build\n// the native `option`(s), we generate a key on the `select` to make sure Vue re-builds it\n// each time the options change.\nconst nativeSelectKey = computed(() => {\n  return Array.from(optionsSet.value)\n    .map(option => option.value)\n    .join(';')\n})\n\nfunction handleValueChange(value: T) {\n  if (multiple.value) {\n    const array = Array.isArray(modelValue.value) ? [...modelValue.value] : []\n    const index = array.findIndex(i => compare(i, value, props.by))\n    index === -1 ? array.push(value) : array.splice(index, 1)\n    modelValue.value = [...array]\n  }\n  else {\n    modelValue.value = value\n  }\n}\n\nprovideSelectRootContext({\n  triggerElement,\n  onTriggerChange: (node) => {\n    triggerElement.value = node\n  },\n  valueElement,\n  onValueElementChange: (node) => {\n    valueElement.value = node\n  },\n  contentId: '',\n  modelValue,\n  // @ts-expect-error Missing infer for AcceptableValue\n  onValueChange: handleValueChange,\n  by: props.by,\n  open,\n  multiple,\n  required,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  dir,\n  triggerPointerDownPosRef,\n  disabled,\n  isEmptyModelValue,\n\n  optionsSet,\n  onOptionAdd: option => optionsSet.value.add(option),\n  onOptionRemove: option => optionsSet.value.delete(option),\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n\n    <BubbleSelect\n      v-if=\"isFormControl\"\n      :key=\"nativeSelectKey\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      :multiple=\"multiple\"\n      :required=\"required\"\n      :name=\"name\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :value=\"modelValue\"\n    >\n      <option\n        v-if=\"isNullish(modelValue)\"\n        value=\"\"\n      />\n      <option\n        v-for=\"option in Array.from(optionsSet)\"\n        :key=\"option.value ?? ''\"\n        v-bind=\"option\"\n      />\n    </BubbleSelect>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Select/SelectScrollButtonImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollButtonImpl.cjs","sources":["../../src/Select/SelectScrollButtonImpl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { Primitive } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { getActiveElement } from '@/shared'\n\nexport type SelectScrollButtonImplEmits = {\n  autoScroll: []\n}\n\nconst emits = defineEmits<SelectScrollButtonImplEmits>()\nconst { getItems } = useCollection()\n\nconst contentContext = injectSelectContentContext()\nconst autoScrollTimerRef = ref<number | null>(null)\n\nfunction clearAutoScrollTimer() {\n  if (autoScrollTimerRef.value !== null) {\n    window.clearInterval(autoScrollTimerRef.value)\n    autoScrollTimerRef.value = null\n  }\n}\n\nwatchEffect(() => {\n  const activeItem = getItems().map(i => i.ref).find(\n    item => item === getActiveElement(),\n  )\n  activeItem?.scrollIntoView({ block: 'nearest' })\n})\n\nfunction handlePointerDown() {\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nfunction handlePointerMove() {\n  contentContext.onItemLeave?.()\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nonBeforeUnmount(() => clearAutoScrollTimer())\n</script>\n\n<template>\n  <Primitive\n    aria-hidden=\"true\"\n    :style=\"{\n      flexShrink: 0,\n    }\"\n    v-bind=\"$parent?.$props\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerleave=\"\n      () => {\n        clearAutoScrollTimer();\n      }\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useCollection","injectSelectContentContext","ref","watchEffect","getActiveElement","onBeforeUnmount"],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAM,MAAA,kBAAA,GAAqBC,QAAmB,IAAI,CAAA;AAElD,IAAA,SAAS,oBAAuB,GAAA;AAC9B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAO,MAAA,CAAA,aAAA,CAAc,mBAAmB,KAAK,CAAA;AAC7C,QAAA,kBAAA,CAAmB,KAAQ,GAAA,IAAA;AAAA;AAC7B;AAGF,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,MAAM,aAAa,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAE,CAAA,IAAA;AAAA,QAC5C,CAAA,IAAA,KAAQ,SAASC,wCAAiB;AAAA,OACpC;AACA,MAAA,UAAA,EAAY,cAAe,CAAA,EAAE,KAAO,EAAA,SAAA,EAAW,CAAA;AAAA,KAChD,CAAA;AAED,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAA,cAAA,CAAe,WAAc,IAAA;AAC7B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAgBC,mBAAA,CAAA,MAAM,sBAAsB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollButtonImpl.cjs","sources":["../../src/Select/SelectScrollButtonImpl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { getActiveElement } from '@/shared'\nimport { onBeforeUnmount, ref, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\n\nexport type SelectScrollButtonImplEmits = {\n  autoScroll: []\n}\n\nconst emits = defineEmits<SelectScrollButtonImplEmits>()\nconst { getItems } = useCollection()\n\nconst contentContext = injectSelectContentContext()\nconst autoScrollTimerRef = ref<number | null>(null)\n\nfunction clearAutoScrollTimer() {\n  if (autoScrollTimerRef.value !== null) {\n    window.clearInterval(autoScrollTimerRef.value)\n    autoScrollTimerRef.value = null\n  }\n}\n\nwatchEffect(() => {\n  const activeItem = getItems().map(i => i.ref).find(\n    item => item === getActiveElement(),\n  )\n  activeItem?.scrollIntoView({ block: 'nearest' })\n})\n\nfunction handlePointerDown() {\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nfunction handlePointerMove() {\n  contentContext.onItemLeave?.()\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nonBeforeUnmount(() => clearAutoScrollTimer())\n</script>\n\n<template>\n  <Primitive\n    aria-hidden=\"true\"\n    :style=\"{\n      flexShrink: 0,\n    }\"\n    v-bind=\"$parent?.$props\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerleave=\"\n      () => {\n        clearAutoScrollTimer();\n      }\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useCollection","injectSelectContentContext","ref","watchEffect","getActiveElement","onBeforeUnmount"],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAM,MAAA,kBAAA,GAAqBC,QAAmB,IAAI,CAAA;AAElD,IAAA,SAAS,oBAAuB,GAAA;AAC9B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAO,MAAA,CAAA,aAAA,CAAc,mBAAmB,KAAK,CAAA;AAC7C,QAAA,kBAAA,CAAmB,KAAQ,GAAA,IAAA;AAAA;AAC7B;AAGF,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,MAAM,aAAa,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAE,CAAA,IAAA;AAAA,QAC5C,CAAA,IAAA,KAAQ,SAASC,wCAAiB;AAAA,OACpC;AACA,MAAA,UAAA,EAAY,cAAe,CAAA,EAAE,KAAO,EAAA,SAAA,EAAW,CAAA;AAAA,KAChD,CAAA;AAED,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAA,cAAA,CAAe,WAAc,IAAA;AAC7B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAgBC,mBAAA,CAAA,MAAM,sBAAsB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectScrollButtonImpl.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watchEffect, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, watchEffect, onBeforeUnmount, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { u as useCollection } from '../Collection/Collection.js';
 import { g as getActiveElement } from '../shared/getActiveElement.js';
 import { P as Primitive } from '../Primitive/Primitive.js';

package/dist/Select/SelectScrollButtonImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollButtonImpl.js","sources":["../../src/Select/SelectScrollButtonImpl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { Primitive } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { getActiveElement } from '@/shared'\n\nexport type SelectScrollButtonImplEmits = {\n  autoScroll: []\n}\n\nconst emits = defineEmits<SelectScrollButtonImplEmits>()\nconst { getItems } = useCollection()\n\nconst contentContext = injectSelectContentContext()\nconst autoScrollTimerRef = ref<number | null>(null)\n\nfunction clearAutoScrollTimer() {\n  if (autoScrollTimerRef.value !== null) {\n    window.clearInterval(autoScrollTimerRef.value)\n    autoScrollTimerRef.value = null\n  }\n}\n\nwatchEffect(() => {\n  const activeItem = getItems().map(i => i.ref).find(\n    item => item === getActiveElement(),\n  )\n  activeItem?.scrollIntoView({ block: 'nearest' })\n})\n\nfunction handlePointerDown() {\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nfunction handlePointerMove() {\n  contentContext.onItemLeave?.()\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nonBeforeUnmount(() => clearAutoScrollTimer())\n</script>\n\n<template>\n  <Primitive\n    aria-hidden=\"true\"\n    :style=\"{\n      flexShrink: 0,\n    }\"\n    v-bind=\"$parent?.$props\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerleave=\"\n      () => {\n        clearAutoScrollTimer();\n      }\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAM,MAAA,kBAAA,GAAqB,IAAmB,IAAI,CAAA;AAElD,IAAA,SAAS,oBAAuB,GAAA;AAC9B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAO,MAAA,CAAA,aAAA,CAAc,mBAAmB,KAAK,CAAA;AAC7C,QAAA,kBAAA,CAAmB,KAAQ,GAAA,IAAA;AAAA;AAC7B;AAGF,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,MAAM,aAAa,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAE,CAAA,IAAA;AAAA,QAC5C,CAAA,IAAA,KAAQ,SAAS,gBAAiB;AAAA,OACpC;AACA,MAAA,UAAA,EAAY,cAAe,CAAA,EAAE,KAAO,EAAA,SAAA,EAAW,CAAA;AAAA,KAChD,CAAA;AAED,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAA,cAAA,CAAe,WAAc,IAAA;AAC7B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAgB,eAAA,CAAA,MAAM,sBAAsB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollButtonImpl.js","sources":["../../src/Select/SelectScrollButtonImpl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { getActiveElement } from '@/shared'\nimport { onBeforeUnmount, ref, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\n\nexport type SelectScrollButtonImplEmits = {\n  autoScroll: []\n}\n\nconst emits = defineEmits<SelectScrollButtonImplEmits>()\nconst { getItems } = useCollection()\n\nconst contentContext = injectSelectContentContext()\nconst autoScrollTimerRef = ref<number | null>(null)\n\nfunction clearAutoScrollTimer() {\n  if (autoScrollTimerRef.value !== null) {\n    window.clearInterval(autoScrollTimerRef.value)\n    autoScrollTimerRef.value = null\n  }\n}\n\nwatchEffect(() => {\n  const activeItem = getItems().map(i => i.ref).find(\n    item => item === getActiveElement(),\n  )\n  activeItem?.scrollIntoView({ block: 'nearest' })\n})\n\nfunction handlePointerDown() {\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nfunction handlePointerMove() {\n  contentContext.onItemLeave?.()\n  if (autoScrollTimerRef.value === null) {\n    autoScrollTimerRef.value = window.setInterval(() => {\n      emits('autoScroll')\n    }, 50)\n  }\n}\n\nonBeforeUnmount(() => clearAutoScrollTimer())\n</script>\n\n<template>\n  <Primitive\n    aria-hidden=\"true\"\n    :style=\"{\n      flexShrink: 0,\n    }\"\n    v-bind=\"$parent?.$props\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerleave=\"\n      () => {\n        clearAutoScrollTimer();\n      }\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAM,MAAA,kBAAA,GAAqB,IAAmB,IAAI,CAAA;AAElD,IAAA,SAAS,oBAAuB,GAAA;AAC9B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAO,MAAA,CAAA,aAAA,CAAc,mBAAmB,KAAK,CAAA;AAC7C,QAAA,kBAAA,CAAmB,KAAQ,GAAA,IAAA;AAAA;AAC7B;AAGF,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,MAAM,aAAa,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAE,CAAA,IAAA;AAAA,QAC5C,CAAA,IAAA,KAAQ,SAAS,gBAAiB;AAAA,OACpC;AACA,MAAA,UAAA,EAAY,cAAe,CAAA,EAAE,KAAO,EAAA,SAAA,EAAW,CAAA;AAAA,KAChD,CAAA;AAED,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAA,cAAA,CAAe,WAAc,IAAA;AAC7B,MAAI,IAAA,kBAAA,CAAmB,UAAU,IAAM,EAAA;AACrC,QAAmB,kBAAA,CAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,CAAY,MAAM;AAClD,UAAA,KAAA,CAAM,YAAY,CAAA;AAAA,WACjB,EAAE,CAAA;AAAA;AACP;AAGF,IAAgB,eAAA,CAAA,MAAM,sBAAsB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectScrollDownButton.cjs

@@ -2,9 +2,9 @@
 
 const vue = require('vue');
 const Select_SelectScrollButtonImpl = require('./SelectScrollButtonImpl.cjs');
+const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
-const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectScrollDownButton",
@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const contentContext = Select_SelectContentImpl.injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
     const canScrollDown = vue.ref(false);
     vue.watchEffect((cleanupFn) => {

package/dist/Select/SelectScrollDownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollDownButton.cjs","sources":["../../src/Select/SelectScrollDownButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollDownButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\ndefineProps<SelectScrollDownButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollDown = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight\n      // we use Math.ceil here because if the UI is zoomed-in\n      // `scrollTop` is not always reported as an integer\n      canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollDown\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"\n      () => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport?.value && selectedItem?.value) {\n          viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;\n        }\n      }\n    \"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":["injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","ref","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiBA,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,SAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAM,MAAA,aAAA,GAAgBC,QAAI,KAAK,CAAA;AAE/B,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAM,MAAA,SAAA,GAAY,QAAS,CAAA,YAAA,GAAe,QAAS,CAAA,YAAA;AAGnD,UAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,GAAA,SAAA;AAAA,SACxD;AAPA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAQzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollDownButton.cjs","sources":["../../src/Select/SelectScrollDownButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollDownButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollDownButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollDown = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight\n      // we use Math.ceil here because if the UI is zoomed-in\n      // `scrollTop` is not always reported as an integer\n      canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollDown\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"\n      () => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport?.value && selectedItem?.value) {\n          viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;\n        }\n      }\n    \"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":["injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","ref","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiBA,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAM,MAAA,aAAA,GAAgBC,QAAI,KAAK,CAAA;AAE/B,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAM,MAAA,SAAA,GAAY,QAAS,CAAA,YAAA,GAAe,QAAS,CAAA,YAAA;AAGnD,UAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,GAAA,SAAA;AAAA,SACxD;AAPA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAQzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectScrollDownButton.js

@@ -1,8 +1,8 @@
-import { defineComponent, ref, watchEffect, watch, openBlock, createBlock, unref, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, ref, watchEffect, watch, createBlock, createCommentVNode, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './SelectScrollButtonImpl.js';
+import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectSelectContentContext } from './SelectContentImpl.js';
-import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectScrollDownButton",
@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const contentContext = injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = useForwardExpose();
     const canScrollDown = ref(false);
     watchEffect((cleanupFn) => {

package/dist/Select/SelectScrollDownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollDownButton.js","sources":["../../src/Select/SelectScrollDownButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollDownButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\ndefineProps<SelectScrollDownButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollDown = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight\n      // we use Math.ceil here because if the UI is zoomed-in\n      // `scrollTop` is not always reported as an integer\n      canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollDown\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"\n      () => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport?.value && selectedItem?.value) {\n          viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;\n        }\n      }\n    \"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,SAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAM,MAAA,aAAA,GAAgB,IAAI,KAAK,CAAA;AAE/B,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAM,MAAA,SAAA,GAAY,QAAS,CAAA,YAAA,GAAe,QAAS,CAAA,YAAA;AAGnD,UAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,GAAA,SAAA;AAAA,SACxD;AAPA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAQzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollDownButton.js","sources":["../../src/Select/SelectScrollDownButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollDownButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollDownButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollDown = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      const maxScroll = viewport.scrollHeight - viewport.clientHeight\n      // we use Math.ceil here because if the UI is zoomed-in\n      // `scrollTop` is not always reported as an integer\n      canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollDown\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"\n      () => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport?.value && selectedItem?.value) {\n          viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;\n        }\n      }\n    \"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAM,MAAA,aAAA,GAAgB,IAAI,KAAK,CAAA;AAE/B,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAM,MAAA,SAAA,GAAY,QAAS,CAAA,YAAA,GAAe,QAAS,CAAA,YAAA;AAGnD,UAAA,aAAA,CAAc,KAAQ,GAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,GAAA,SAAA;AAAA,SACxD;AAPA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAQzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectScrollUpButton.cjs

@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const contentContext = Select_SelectContentImpl.injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
     const canScrollUp = vue.ref(false);
     vue.watchEffect((cleanupFn) => {

package/dist/Select/SelectScrollUpButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollUpButton.cjs","sources":["../../src/Select/SelectScrollUpButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollUpButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollUpButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollUp = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      canScrollUp.value = viewport.scrollTop > 0\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollUp\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"() => {\n      const { viewport, selectedItem } = contentContext;\n      if (viewport?.value && selectedItem?.value) {\n        viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;\n      }\n    }\"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":["injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","ref","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiBA,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,SAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAM,MAAA,WAAA,GAAcC,QAAI,KAAK,CAAA;AAE7B,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAY,WAAA,CAAA,KAAA,GAAQ,SAAS,SAAY,GAAA,CAAA;AAAA,SAC3C;AAJA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAKzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollUpButton.cjs","sources":["../../src/Select/SelectScrollUpButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollUpButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollUpButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollUp = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      canScrollUp.value = viewport.scrollTop > 0\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollUp\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"() => {\n      const { viewport, selectedItem } = contentContext;\n      if (viewport?.value && selectedItem?.value) {\n        viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;\n      }\n    }\"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":["injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","ref","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiBA,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAM,MAAA,WAAA,GAAcC,QAAI,KAAK,CAAA;AAE7B,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAY,WAAA,CAAA,KAAA,GAAQ,SAAS,SAAY,GAAA,CAAA;AAAA,SAC3C;AAJA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAKzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectScrollUpButton.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watchEffect, watch, openBlock, createBlock, unref, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, ref, watchEffect, watch, createBlock, createCommentVNode, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './SelectScrollButtonImpl.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectSelectContentContext } from './SelectContentImpl.js';
@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const contentContext = injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = useForwardExpose();
     const canScrollUp = ref(false);
     watchEffect((cleanupFn) => {

package/dist/Select/SelectScrollUpButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollUpButton.js","sources":["../../src/Select/SelectScrollUpButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollUpButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollUpButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollUp = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      canScrollUp.value = viewport.scrollTop > 0\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollUp\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"() => {\n      const { viewport, selectedItem } = contentContext;\n      if (viewport?.value && selectedItem?.value) {\n        viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;\n      }\n    }\"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,SAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAM,MAAA,WAAA,GAAc,IAAI,KAAK,CAAA;AAE7B,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAY,WAAA,CAAA,KAAA,GAAQ,SAAS,SAAY,GAAA,CAAA;AAAA,SAC3C;AAJA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAKzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectScrollUpButton.js","sources":["../../src/Select/SelectScrollUpButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SelectScrollUpButtonProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, watchEffect } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'\n\ndefineProps<SelectScrollUpButtonProps>()\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst canScrollUp = ref(false)\n\nwatchEffect((cleanupFn) => {\n  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {\n    const viewport = contentContext.viewport.value\n\n    function handleScroll() {\n      canScrollUp.value = viewport.scrollTop > 0\n    }\n    handleScroll()\n    viewport.addEventListener('scroll', handleScroll)\n\n    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))\n  }\n})\n\nwatch(currentElement, () => {\n  if (currentElement.value)\n    alignedPositionContext?.onScrollButtonChange(currentElement.value)\n})\n</script>\n\n<template>\n  <SelectScrollButtonImpl\n    v-if=\"canScrollUp\"\n    :ref=\"forwardRef\"\n    @auto-scroll=\"() => {\n      const { viewport, selectedItem } = contentContext;\n      if (viewport?.value && selectedItem?.value) {\n        viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;\n      }\n    }\"\n  >\n    <slot />\n  </SelectScrollButtonImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAM,MAAA,WAAA,GAAc,IAAI,KAAK,CAAA;AAE7B,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,cAAe,CAAA,QAAA,EAAU,KAAS,IAAA,cAAA,CAAe,cAAc,KAAO,EAAA;AAGxE,QAAA,IAAS,eAAT,WAAwB;AACtB,UAAY,WAAA,CAAA,KAAA,GAAQ,SAAS,SAAY,GAAA,CAAA;AAAA,SAC3C;AAJA,QAAM,MAAA,QAAA,GAAW,eAAe,QAAS,CAAA,KAAA;AAKzC,QAAa,YAAA,EAAA;AACb,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM,QAAA,CAAS,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAC,CAAA;AAAA;AACtE,KACD,CAAA;AAED,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAwB,sBAAA,EAAA,oBAAA,CAAqB,eAAe,KAAK,CAAA;AAAA,KACpE,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectSeparator.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { P as Primitive } from '../Primitive/Primitive.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/Select/SelectTrigger.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 const vue = require('vue');
-const Select_utils = require('./utils.cjs');
 const Popper_PopperAnchor = require('../Popper/PopperAnchor.cjs');
+const Select_utils = require('./utils.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
-const Select_SelectRoot = require('./SelectRoot.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useId = require('../shared/useId.cjs');
 const shared_useTypeahead = require('../shared/useTypeahead.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const Select_SelectRoot = require('./SelectRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectTrigger",
@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const rootContext = Select_SelectRoot.injectSelectRootContext();
     const { forwardRef, currentElement: triggerElement } = shared_useForwardExpose.useForwardExpose();
     const isDisabled = vue.computed(() => rootContext.disabled?.value || props.disabled);
-    rootContext.contentId ||= shared_useId.useId(undefined, "reka-select-content");
+    rootContext.contentId ||= shared_useId.useId(void 0, "reka-select-content");
     vue.onMounted(() => {
       rootContext.onTriggerChange(triggerElement.value);
     });
@@ -51,7 +51,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createVNode(vue.unref(Primitive_Primitive.Primitive), {
             ref: vue.unref(forwardRef),
             role: "combobox",
-            type: _ctx.as === "button" ? "button" : undefined,
+            type: _ctx.as === "button" ? "button" : void 0,
             "aria-controls": vue.unref(rootContext).contentId,
             "aria-expanded": vue.unref(rootContext).open.value || false,
             "aria-required": vue.unref(rootContext).required?.value,
@@ -59,8 +59,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             disabled: isDisabled.value,
             dir: vue.unref(rootContext)?.dir.value,
             "data-state": vue.unref(rootContext)?.open.value ? "open" : "closed",
-            "data-disabled": isDisabled.value ? "" : undefined,
-            "data-placeholder": vue.unref(rootContext).modelValue?.value ? undefined : "",
+            "data-disabled": isDisabled.value ? "" : void 0,
+            "data-placeholder": vue.unref(Select_utils.shouldShowPlaceholder)(vue.unref(rootContext).modelValue?.value) ? "" : void 0,
             "as-child": _ctx.asChild,
             as: _ctx.as,
             onClick: _cache[0] || (_cache[0] = (event) => {

package/dist/Select/SelectTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.cjs","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { PopperAnchor, type PopperAnchorProps } from '@/Popper'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"\n        rootContext.modelValue?.value ? undefined : ''\n      \"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":["injectSelectRootContext","useForwardExpose","computed","useId","onMounted","useCollection","useTypeahead"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAA,MAAM,aAAaC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,SAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,mCAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmBC,gCAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectTrigger.cjs","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { PopperAnchorProps } from '@/Popper'\nimport { PopperAnchor } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS, shouldShowPlaceholder } from './utils'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":["injectSelectRootContext","useForwardExpose","computed","useId","onMounted","useCollection","useTypeahead"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAA,MAAM,aAAaC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,mCAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmBC,gCAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectTrigger.js

@@ -1,12 +1,12 @@
-import { defineComponent, computed, onMounted, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, renderSlot } from 'vue';
-import { O as OPEN_KEYS } from './utils.js';
+import { defineComponent, computed, onMounted, createBlock, openBlock, unref, withCtx, createVNode, withModifiers, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Popper/PopperAnchor.js';
+import { O as OPEN_KEYS, s as shouldShowPlaceholder } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
-import { i as injectSelectRootContext } from './SelectRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useId } from '../shared/useId.js';
 import { u as useTypeahead } from '../shared/useTypeahead.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
+import { i as injectSelectRootContext } from './SelectRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectTrigger",
@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const rootContext = injectSelectRootContext();
     const { forwardRef, currentElement: triggerElement } = useForwardExpose();
     const isDisabled = computed(() => rootContext.disabled?.value || props.disabled);
-    rootContext.contentId ||= useId(undefined, "reka-select-content");
+    rootContext.contentId ||= useId(void 0, "reka-select-content");
     onMounted(() => {
       rootContext.onTriggerChange(triggerElement.value);
     });
@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(Primitive), {
             ref: unref(forwardRef),
             role: "combobox",
-            type: _ctx.as === "button" ? "button" : undefined,
+            type: _ctx.as === "button" ? "button" : void 0,
             "aria-controls": unref(rootContext).contentId,
             "aria-expanded": unref(rootContext).open.value || false,
             "aria-required": unref(rootContext).required?.value,
@@ -57,8 +57,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: isDisabled.value,
             dir: unref(rootContext)?.dir.value,
             "data-state": unref(rootContext)?.open.value ? "open" : "closed",
-            "data-disabled": isDisabled.value ? "" : undefined,
-            "data-placeholder": unref(rootContext).modelValue?.value ? undefined : "",
+            "data-disabled": isDisabled.value ? "" : void 0,
+            "data-placeholder": unref(shouldShowPlaceholder)(unref(rootContext).modelValue?.value) ? "" : void 0,
             "as-child": _ctx.asChild,
             as: _ctx.as,
             onClick: _cache[0] || (_cache[0] = (event) => {

package/dist/Select/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { PopperAnchor, type PopperAnchorProps } from '@/Popper'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"\n        rootContext.modelValue?.value ? undefined : ''\n      \"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,SAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmB,YAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectTrigger.js","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { PopperAnchorProps } from '@/Popper'\nimport { PopperAnchor } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS, shouldShowPlaceholder } from './utils'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmB,YAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectValue.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const vue = require('vue');
+const Select_utils = require('./utils.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
@@ -22,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const selectedLabel = vue.computed(() => {
       let list = [];
       const options = Array.from(rootContext.optionsSet.value);
-      const getOption = (value) => options.find((option) => option.value === value);
+      const getOption = (value) => options.find((option) => Select_utils.valueComparator(value, option.value, rootContext.by));
       if (Array.isArray(rootContext.modelValue.value)) {
         list = rootContext.modelValue.value.map((value) => getOption(value)?.textContent ?? "");
       } else {
@@ -39,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         as: _ctx.as,
         "as-child": _ctx.asChild,
         style: { pointerEvents: "none" },
-        "data-placeholder": selectedLabel.value.length ? undefined : props.placeholder
+        "data-placeholder": selectedLabel.value.length ? void 0 : props.placeholder
       }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default", {

package/dist/Select/SelectValue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.cjs","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => option.value === value)\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectSelectRootContext","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAM,MAAA,SAAA,GAAY,CAAC,KAA4B,KAAA,OAAA,CAAQ,KAAK,CAAU,MAAA,KAAA,MAAA,CAAO,UAAU,KAAK,CAAA;AAC5F,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectValue.cjs","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => valueComparator(value, option.value, rootContext.by))\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectSelectRootContext","onMounted","computed","valueComparator"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAA,MAAM,SAAY,GAAA,CAAC,KAA4B,KAAA,OAAA,CAAQ,IAAK,CAAA,CAAA,MAAA,KAAUC,4BAAgB,CAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAC1H,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAWD,aAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectValue.js

@@ -1,4 +1,5 @@
-import { defineComponent, onMounted, computed, openBlock, createBlock, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, onMounted, computed, createBlock, openBlock, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { v as valueComparator } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectSelectRootContext } from './SelectRoot.js';
@@ -20,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const selectedLabel = computed(() => {
       let list = [];
       const options = Array.from(rootContext.optionsSet.value);
-      const getOption = (value) => options.find((option) => option.value === value);
+      const getOption = (value) => options.find((option) => valueComparator(value, option.value, rootContext.by));
       if (Array.isArray(rootContext.modelValue.value)) {
         list = rootContext.modelValue.value.map((value) => getOption(value)?.textContent ?? "");
       } else {
@@ -37,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         as: _ctx.as,
         "as-child": _ctx.asChild,
         style: { pointerEvents: "none" },
-        "data-placeholder": selectedLabel.value.length ? undefined : props.placeholder
+        "data-placeholder": selectedLabel.value.length ? void 0 : props.placeholder
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {

package/dist/Select/SelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.js","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => option.value === value)\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAM,MAAA,SAAA,GAAY,CAAC,KAA4B,KAAA,OAAA,CAAQ,KAAK,CAAU,MAAA,KAAA,MAAA,CAAO,UAAU,KAAK,CAAA;AAC5F,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectValue.js","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => valueComparator(value, option.value, rootContext.by))\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAA,MAAM,SAAY,GAAA,CAAC,KAA4B,KAAA,OAAA,CAAQ,IAAK,CAAA,CAAA,MAAA,KAAU,eAAgB,CAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAC1H,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectViewport.cjs

@@ -3,10 +3,10 @@
 const vue = require('vue');
 const Select_utils = require('./utils.cjs');
 const shared_useNonce = require('../shared/useNonce.cjs');
-const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
+const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectViewport",
@@ -20,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { nonce: propNonce } = vue.toRefs(props);
     const nonce = shared_useNonce.useNonce(propNonce);
     const contentContext = Select_SelectContentImpl.injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? Select_SelectItemAlignedPosition.injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
     vue.onMounted(() => {
       contentContext?.onViewportChange(currentElement.value);

package/dist/Select/SelectViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.cjs","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { CONTENT_MARGIN } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","onMounted","ref","CONTENT_MARGIN"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,SAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAcC,2BAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectViewport.cjs","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport { CONTENT_MARGIN } from './utils'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","onMounted","ref","CONTENT_MARGIN"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAcC,2BAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectViewport.js

@@ -1,10 +1,10 @@
-import { defineComponent, toRefs, onMounted, ref, openBlock, createElementBlock, Fragment, createVNode, unref, mergeProps, withCtx, renderSlot, createTextVNode } from 'vue';
+import { defineComponent, toRefs, onMounted, ref, createElementBlock, openBlock, Fragment, createVNode, unref, mergeProps, withCtx, renderSlot, createTextVNode } from 'vue';
 import { C as CONTENT_MARGIN } from './utils.js';
 import { u as useNonce } from '../shared/useNonce.js';
-import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectSelectContentContext } from './SelectContentImpl.js';
+import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectViewport",
@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { nonce: propNonce } = toRefs(props);
     const nonce = useNonce(propNonce);
     const contentContext = injectSelectContentContext();
-    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : undefined;
+    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : void 0;
     const { forwardRef, currentElement } = useForwardExpose();
     onMounted(() => {
       contentContext?.onViewportChange(currentElement.value);