reka-ui 2.1.0 → 2.2.0

package/dist/RovingFocus/RovingFocusGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RovingFocusGroup.cjs","sources":["../../src/RovingFocus/RovingFocusGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useDirection } from '@/shared'\nimport type {\n  Direction,\n  Orientation,\n} from './utils'\n\nexport interface RovingFocusGroupProps extends PrimitiveProps {\n  /**\n   * The orientation of the group.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   */\n  orientation?: Orientation\n  /**\n   * The direction of navigation between items.\n   */\n  dir?: Direction\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: boolean\n  currentTabStopId?: string | null\n  defaultCurrentTabStopId?: string\n  preventScrollOnEntryFocus?: boolean\n}\n\nexport type RovingFocusGroupEmits = {\n  'entryFocus': [event: Event]\n  'update:currentTabStopId': [value: string | null | undefined]\n}\n\ninterface RovingContext {\n  orientation: Ref<Orientation | undefined>\n  dir: Ref<Direction>\n  loop: Ref<boolean>\n  currentTabStopId: Ref<string | null | undefined>\n  onItemFocus: (tabStopId: string) => void\n  onItemShiftTab: () => void\n  onFocusableItemAdd: () => void\n  onFocusableItemRemove: () => void\n}\n\nexport const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]\n  = createContext<RovingContext>('RovingFocusGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusGroupProps>(), {\n  loop: false,\n  orientation: undefined,\n  preventScrollOnEntryFocus: false,\n})\nconst emits = defineEmits<RovingFocusGroupEmits>()\n\nconst { loop, orientation, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst currentTabStopId = useVModel(props, 'currentTabStopId', emits, {\n  defaultValue: props.defaultCurrentTabStopId,\n  passive: (props.currentTabStopId === undefined) as false,\n})\nconst isTabbingBackOut = ref(false)\nconst isClickFocus = ref(false)\nconst focusableItemsCount = ref(0)\n\nconst { getItems, CollectionSlot } = useCollection({ isProvider: true })\n\nfunction handleFocus(event: FocusEvent) {\n  // We normally wouldn't need this check, because we already check\n  // that the focus is on the current target and not bubbling to it.\n  // We do this because Safari doesn't focus buttons when clicked, and\n  // instead, the wrapper will get focused and not through a bubbling event.\n  const isKeyboardFocus = !isClickFocus.value\n\n  if (\n    event.currentTarget\n    && event.target === event.currentTarget\n    && isKeyboardFocus\n    && !isTabbingBackOut.value\n  ) {\n    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS)\n    event.currentTarget.dispatchEvent(entryFocusEvent)\n    emits('entryFocus', entryFocusEvent)\n\n    if (!entryFocusEvent.defaultPrevented) {\n      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')\n      const activeItem = items.find(item => item.getAttribute('data-active') === 'true')\n      const currentItem = items.find(\n        item => item.id === currentTabStopId.value,\n      )\n      const candidateItems = [activeItem, currentItem, ...items].filter(\n        Boolean,\n      ) as typeof items\n      focusFirst(candidateItems, props.preventScrollOnEntryFocus)\n    }\n  }\n  isClickFocus.value = false\n}\n\nfunction handleMouseUp() {\n  // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element\n  setTimeout(() => {\n    isClickFocus.value = false\n  }, 1)\n}\n\ndefineExpose({\n  getItems,\n})\n\nprovideRovingFocusGroupContext({\n  loop,\n  dir,\n  orientation,\n  currentTabStopId,\n  onItemFocus: (tabStopId) => {\n    currentTabStopId.value = tabStopId\n  },\n  onItemShiftTab: () => {\n    isTabbingBackOut.value = true\n  },\n  onFocusableItemAdd: () => {\n    focusableItemsCount.value++\n  },\n  onFocusableItemRemove: () => {\n    focusableItemsCount.value--\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :tabindex=\"isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0\"\n      :data-orientation=\"orientation\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      style=\"outline: none\"\n      @mousedown=\"isClickFocus = true\"\n      @mouseup=\"handleMouseUp\"\n      @focus=\"handleFocus\"\n      @blur=\"isTabbingBackOut = false\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","ref","useCollection","ENTRY_FOCUS","EVENT_OPTIONS","focusFirst"],"mappings":"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"}
+{"version":3,"file":"RovingFocusGroup.cjs","sources":["../../src/RovingFocus/RovingFocusGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useDirection } from '@/shared'\nimport type {\n  Direction,\n  Orientation,\n} from './utils'\n\nexport interface RovingFocusGroupProps extends PrimitiveProps {\n  /**\n   * The orientation of the group.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   */\n  orientation?: Orientation\n  /**\n   * The direction of navigation between items.\n   */\n  dir?: Direction\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: boolean\n  /** The controlled value of the current stop item. Can be binded as `v-model`. */\n  currentTabStopId?: string | null\n  /**\n   * The value of the current stop item.\n   *\n   * Use when you do not need to control the state of the stop item.\n   */\n  defaultCurrentTabStopId?: string\n  /**\n   * When `true`, will prevent scrolling to the focus item when focused.\n   */\n  preventScrollOnEntryFocus?: boolean\n}\n\nexport type RovingFocusGroupEmits = {\n  'entryFocus': [event: Event]\n  'update:currentTabStopId': [value: string | null | undefined]\n}\n\ninterface RovingContext {\n  orientation: Ref<Orientation | undefined>\n  dir: Ref<Direction>\n  loop: Ref<boolean>\n  currentTabStopId: Ref<string | null | undefined>\n  onItemFocus: (tabStopId: string) => void\n  onItemShiftTab: () => void\n  onFocusableItemAdd: () => void\n  onFocusableItemRemove: () => void\n}\n\nexport const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]\n  = createContext<RovingContext>('RovingFocusGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusGroupProps>(), {\n  loop: false,\n  orientation: undefined,\n  preventScrollOnEntryFocus: false,\n})\nconst emits = defineEmits<RovingFocusGroupEmits>()\n\nconst { loop, orientation, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst currentTabStopId = useVModel(props, 'currentTabStopId', emits, {\n  defaultValue: props.defaultCurrentTabStopId,\n  passive: (props.currentTabStopId === undefined) as false,\n})\nconst isTabbingBackOut = ref(false)\nconst isClickFocus = ref(false)\nconst focusableItemsCount = ref(0)\n\nconst { getItems, CollectionSlot } = useCollection({ isProvider: true })\n\nfunction handleFocus(event: FocusEvent) {\n  // We normally wouldn't need this check, because we already check\n  // that the focus is on the current target and not bubbling to it.\n  // We do this because Safari doesn't focus buttons when clicked, and\n  // instead, the wrapper will get focused and not through a bubbling event.\n  const isKeyboardFocus = !isClickFocus.value\n\n  if (\n    event.currentTarget\n    && event.target === event.currentTarget\n    && isKeyboardFocus\n    && !isTabbingBackOut.value\n  ) {\n    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS)\n    event.currentTarget.dispatchEvent(entryFocusEvent)\n    emits('entryFocus', entryFocusEvent)\n\n    if (!entryFocusEvent.defaultPrevented) {\n      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')\n      const activeItem = items.find(item => item.getAttribute('data-active') === '')\n      const currentItem = items.find(\n        item => item.id === currentTabStopId.value,\n      )\n      const candidateItems = [activeItem, currentItem, ...items].filter(\n        Boolean,\n      ) as typeof items\n      focusFirst(candidateItems, props.preventScrollOnEntryFocus)\n    }\n  }\n  isClickFocus.value = false\n}\n\nfunction handleMouseUp() {\n  // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element\n  setTimeout(() => {\n    isClickFocus.value = false\n  }, 1)\n}\n\ndefineExpose({\n  getItems,\n})\n\nprovideRovingFocusGroupContext({\n  loop,\n  dir,\n  orientation,\n  currentTabStopId,\n  onItemFocus: (tabStopId) => {\n    currentTabStopId.value = tabStopId\n  },\n  onItemShiftTab: () => {\n    isTabbingBackOut.value = true\n  },\n  onFocusableItemAdd: () => {\n    focusableItemsCount.value++\n  },\n  onFocusableItemRemove: () => {\n    focusableItemsCount.value--\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :tabindex=\"isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0\"\n      :data-orientation=\"orientation\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      style=\"outline: none\"\n      @mousedown=\"isClickFocus = true\"\n      @mouseup=\"handleMouseUp\"\n      @focus=\"handleFocus\"\n      @blur=\"isTabbingBackOut = false\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","ref","useCollection","ENTRY_FOCUS","EVENT_OPTIONS","focusFirst"],"mappings":"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"}

package/dist/RovingFocus/RovingFocusGroup.js

@@ -1,16 +1,16 @@
-import { defineComponent, toRefs, ref, openBlock, createBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
+import { defineComponent, toRefs, ref, createBlock, openBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { f as focusFirst, E as ENTRY_FOCUS, a as EVENT_OPTIONS } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
 import { u as useDirection } from '../shared/useDirection.js';
-import { P as Primitive } from '../Primitive/Primitive.js';
 import { c as createContext } from '../shared/createContext.js';
+import { P as Primitive } from '../Primitive/Primitive.js';
 
 const [injectRovingFocusGroupContext, provideRovingFocusGroupContext] = createContext("RovingFocusGroup");
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RovingFocusGroup",
   props: {
-    orientation: { default: undefined },
+    orientation: { default: void 0 },
     dir: {},
     loop: { type: Boolean, default: false },
     currentTabStopId: {},
@@ -27,7 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const dir = useDirection(propDir);
     const currentTabStopId = useVModel(props, "currentTabStopId", emits, {
       defaultValue: props.defaultCurrentTabStopId,
-      passive: props.currentTabStopId === undefined
+      passive: props.currentTabStopId === void 0
     });
     const isTabbingBackOut = ref(false);
     const isClickFocus = ref(false);
@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("entryFocus", entryFocusEvent);
         if (!entryFocusEvent.defaultPrevented) {
           const items = getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
-          const activeItem = items.find((item) => item.getAttribute("data-active") === "true");
+          const activeItem = items.find((item) => item.getAttribute("data-active") === "");
           const currentItem = items.find(
             (item) => item.id === currentTabStopId.value
           );

package/dist/RovingFocus/RovingFocusGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RovingFocusGroup.js","sources":["../../src/RovingFocus/RovingFocusGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useDirection } from '@/shared'\nimport type {\n  Direction,\n  Orientation,\n} from './utils'\n\nexport interface RovingFocusGroupProps extends PrimitiveProps {\n  /**\n   * The orientation of the group.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   */\n  orientation?: Orientation\n  /**\n   * The direction of navigation between items.\n   */\n  dir?: Direction\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: boolean\n  currentTabStopId?: string | null\n  defaultCurrentTabStopId?: string\n  preventScrollOnEntryFocus?: boolean\n}\n\nexport type RovingFocusGroupEmits = {\n  'entryFocus': [event: Event]\n  'update:currentTabStopId': [value: string | null | undefined]\n}\n\ninterface RovingContext {\n  orientation: Ref<Orientation | undefined>\n  dir: Ref<Direction>\n  loop: Ref<boolean>\n  currentTabStopId: Ref<string | null | undefined>\n  onItemFocus: (tabStopId: string) => void\n  onItemShiftTab: () => void\n  onFocusableItemAdd: () => void\n  onFocusableItemRemove: () => void\n}\n\nexport const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]\n  = createContext<RovingContext>('RovingFocusGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusGroupProps>(), {\n  loop: false,\n  orientation: undefined,\n  preventScrollOnEntryFocus: false,\n})\nconst emits = defineEmits<RovingFocusGroupEmits>()\n\nconst { loop, orientation, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst currentTabStopId = useVModel(props, 'currentTabStopId', emits, {\n  defaultValue: props.defaultCurrentTabStopId,\n  passive: (props.currentTabStopId === undefined) as false,\n})\nconst isTabbingBackOut = ref(false)\nconst isClickFocus = ref(false)\nconst focusableItemsCount = ref(0)\n\nconst { getItems, CollectionSlot } = useCollection({ isProvider: true })\n\nfunction handleFocus(event: FocusEvent) {\n  // We normally wouldn't need this check, because we already check\n  // that the focus is on the current target and not bubbling to it.\n  // We do this because Safari doesn't focus buttons when clicked, and\n  // instead, the wrapper will get focused and not through a bubbling event.\n  const isKeyboardFocus = !isClickFocus.value\n\n  if (\n    event.currentTarget\n    && event.target === event.currentTarget\n    && isKeyboardFocus\n    && !isTabbingBackOut.value\n  ) {\n    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS)\n    event.currentTarget.dispatchEvent(entryFocusEvent)\n    emits('entryFocus', entryFocusEvent)\n\n    if (!entryFocusEvent.defaultPrevented) {\n      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')\n      const activeItem = items.find(item => item.getAttribute('data-active') === 'true')\n      const currentItem = items.find(\n        item => item.id === currentTabStopId.value,\n      )\n      const candidateItems = [activeItem, currentItem, ...items].filter(\n        Boolean,\n      ) as typeof items\n      focusFirst(candidateItems, props.preventScrollOnEntryFocus)\n    }\n  }\n  isClickFocus.value = false\n}\n\nfunction handleMouseUp() {\n  // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element\n  setTimeout(() => {\n    isClickFocus.value = false\n  }, 1)\n}\n\ndefineExpose({\n  getItems,\n})\n\nprovideRovingFocusGroupContext({\n  loop,\n  dir,\n  orientation,\n  currentTabStopId,\n  onItemFocus: (tabStopId) => {\n    currentTabStopId.value = tabStopId\n  },\n  onItemShiftTab: () => {\n    isTabbingBackOut.value = true\n  },\n  onFocusableItemAdd: () => {\n    focusableItemsCount.value++\n  },\n  onFocusableItemRemove: () => {\n    focusableItemsCount.value--\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :tabindex=\"isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0\"\n      :data-orientation=\"orientation\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      style=\"outline: none\"\n      @mousedown=\"isClickFocus = true\"\n      @mouseup=\"handleMouseUp\"\n      @focus=\"handleFocus\"\n      @blur=\"isTabbingBackOut = false\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RovingFocusGroup.js","sources":["../../src/RovingFocus/RovingFocusGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useDirection } from '@/shared'\nimport type {\n  Direction,\n  Orientation,\n} from './utils'\n\nexport interface RovingFocusGroupProps extends PrimitiveProps {\n  /**\n   * The orientation of the group.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   */\n  orientation?: Orientation\n  /**\n   * The direction of navigation between items.\n   */\n  dir?: Direction\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: boolean\n  /** The controlled value of the current stop item. Can be binded as `v-model`. */\n  currentTabStopId?: string | null\n  /**\n   * The value of the current stop item.\n   *\n   * Use when you do not need to control the state of the stop item.\n   */\n  defaultCurrentTabStopId?: string\n  /**\n   * When `true`, will prevent scrolling to the focus item when focused.\n   */\n  preventScrollOnEntryFocus?: boolean\n}\n\nexport type RovingFocusGroupEmits = {\n  'entryFocus': [event: Event]\n  'update:currentTabStopId': [value: string | null | undefined]\n}\n\ninterface RovingContext {\n  orientation: Ref<Orientation | undefined>\n  dir: Ref<Direction>\n  loop: Ref<boolean>\n  currentTabStopId: Ref<string | null | undefined>\n  onItemFocus: (tabStopId: string) => void\n  onItemShiftTab: () => void\n  onFocusableItemAdd: () => void\n  onFocusableItemRemove: () => void\n}\n\nexport const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]\n  = createContext<RovingContext>('RovingFocusGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusGroupProps>(), {\n  loop: false,\n  orientation: undefined,\n  preventScrollOnEntryFocus: false,\n})\nconst emits = defineEmits<RovingFocusGroupEmits>()\n\nconst { loop, orientation, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst currentTabStopId = useVModel(props, 'currentTabStopId', emits, {\n  defaultValue: props.defaultCurrentTabStopId,\n  passive: (props.currentTabStopId === undefined) as false,\n})\nconst isTabbingBackOut = ref(false)\nconst isClickFocus = ref(false)\nconst focusableItemsCount = ref(0)\n\nconst { getItems, CollectionSlot } = useCollection({ isProvider: true })\n\nfunction handleFocus(event: FocusEvent) {\n  // We normally wouldn't need this check, because we already check\n  // that the focus is on the current target and not bubbling to it.\n  // We do this because Safari doesn't focus buttons when clicked, and\n  // instead, the wrapper will get focused and not through a bubbling event.\n  const isKeyboardFocus = !isClickFocus.value\n\n  if (\n    event.currentTarget\n    && event.target === event.currentTarget\n    && isKeyboardFocus\n    && !isTabbingBackOut.value\n  ) {\n    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS)\n    event.currentTarget.dispatchEvent(entryFocusEvent)\n    emits('entryFocus', entryFocusEvent)\n\n    if (!entryFocusEvent.defaultPrevented) {\n      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')\n      const activeItem = items.find(item => item.getAttribute('data-active') === '')\n      const currentItem = items.find(\n        item => item.id === currentTabStopId.value,\n      )\n      const candidateItems = [activeItem, currentItem, ...items].filter(\n        Boolean,\n      ) as typeof items\n      focusFirst(candidateItems, props.preventScrollOnEntryFocus)\n    }\n  }\n  isClickFocus.value = false\n}\n\nfunction handleMouseUp() {\n  // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element\n  setTimeout(() => {\n    isClickFocus.value = false\n  }, 1)\n}\n\ndefineExpose({\n  getItems,\n})\n\nprovideRovingFocusGroupContext({\n  loop,\n  dir,\n  orientation,\n  currentTabStopId,\n  onItemFocus: (tabStopId) => {\n    currentTabStopId.value = tabStopId\n  },\n  onItemShiftTab: () => {\n    isTabbingBackOut.value = true\n  },\n  onFocusableItemAdd: () => {\n    focusableItemsCount.value++\n  },\n  onFocusableItemRemove: () => {\n    focusableItemsCount.value--\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :tabindex=\"isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0\"\n      :data-orientation=\"orientation\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      style=\"outline: none\"\n      @mousedown=\"isClickFocus = true\"\n      @mouseup=\"handleMouseUp\"\n      @focus=\"handleFocus\"\n      @blur=\"isTabbingBackOut = false\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/RovingFocus/RovingFocusItem.cjs

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: {
     tabStopId: {},
     focusable: { type: Boolean, default: true },
-    active: { type: Boolean, default: true },
+    active: { type: Boolean },
     allowShiftKey: { type: Boolean },
     asChild: { type: Boolean },
     as: { default: "span" }
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         context.orientation.value,
         context.dir.value
       );
-      if (focusIntent !== undefined) {
+      if (focusIntent !== void 0) {
         if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))
           return;
         event.preventDefault();
@@ -70,8 +70,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createVNode(vue.unref(Primitive_Primitive.Primitive), {
             tabindex: isCurrentTabStop.value ? 0 : -1,
             "data-orientation": vue.unref(context).orientation.value,
-            "data-active": _ctx.active,
-            "data-disabled": !_ctx.focusable ? "" : undefined,
+            "data-active": _ctx.active ? "" : void 0,
+            "data-disabled": !_ctx.focusable ? "" : void 0,
             as: _ctx.as,
             "as-child": _ctx.asChild,
             onMousedown: _cache[0] || (_cache[0] = (event) => {

package/dist/RovingFocus/RovingFocusItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RovingFocusItem.cjs","sources":["../../src/RovingFocus/RovingFocusItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface RovingFocusItemProps extends PrimitiveProps {\n  tabStopId?: string\n  focusable?: boolean\n  active?: boolean\n  allowShiftKey?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted } from 'vue'\nimport { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'\nimport { Primitive } from '@/Primitive'\nimport { focusFirst, getFocusIntent, wrapArray } from './utils'\nimport { useId } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusItemProps>(), {\n  focusable: true,\n  active: true,\n  as: 'span',\n})\n\nconst context = injectRovingFocusGroupContext()\nconst randomId = useId()\nconst id = computed(() => props.tabStopId || randomId)\nconst isCurrentTabStop = computed(\n  () => context.currentTabStopId.value === id.value,\n)\n\nconst { getItems, CollectionItem } = useCollection()\n\nonMounted(() => {\n  if (props.focusable)\n    context.onFocusableItemAdd()\n})\nonUnmounted(() => {\n  if (props.focusable)\n    context.onFocusableItemRemove()\n})\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (event.key === 'Tab' && event.shiftKey) {\n    context.onItemShiftTab()\n    return\n  }\n\n  if (event.target !== event.currentTarget)\n    return\n\n  const focusIntent = getFocusIntent(\n    event,\n    context.orientation.value,\n    context.dir.value,\n  )\n\n  if (focusIntent !== undefined) {\n    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))\n      return\n    event.preventDefault()\n    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]\n\n    if (focusIntent === 'last') {\n      candidateNodes.reverse()\n    }\n    else if (focusIntent === 'prev' || focusIntent === 'next') {\n      if (focusIntent === 'prev')\n        candidateNodes.reverse()\n      const currentIndex = candidateNodes.indexOf(\n        event.currentTarget as HTMLElement,\n      )\n\n      candidateNodes = context.loop.value\n        ? wrapArray(candidateNodes, currentIndex + 1)\n        : candidateNodes.slice(currentIndex + 1)\n    }\n\n    nextTick(() => focusFirst(candidateNodes))\n  }\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :tabindex=\"isCurrentTabStop ? 0 : -1\"\n      :data-orientation=\"context.orientation.value\"\n      :data-active=\"active\"\n      :data-disabled=\"!focusable ? '' : undefined\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @mousedown=\"\n        (event) => {\n          // We prevent focusing non-focusable items on `mousedown`.\n          // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n          if (!focusable) event.preventDefault();\n          // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n          else context.onItemFocus(id);\n        }\n      \"\n      @focus=\"context.onItemFocus(id)\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["injectRovingFocusGroupContext","useId","computed","useCollection","onMounted","onUnmounted","getFocusIntent","wrapArray","nextTick","focusFirst"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,UAAUA,0DAA8B,EAAA;AAC9C,IAAA,MAAM,WAAWC,kBAAM,EAAA;AACvB,IAAA,MAAM,EAAK,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,aAAa,QAAQ,CAAA;AACrD,IAAA,MAAM,gBAAmB,GAAAA,YAAA;AAAA,MACvB,MAAM,OAAA,CAAQ,gBAAiB,CAAA,KAAA,KAAU,EAAG,CAAA;AAAA,KAC9C;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,cAAe,EAAA,GAAIC,mCAAc,EAAA;AAEnD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,kBAAmB,EAAA;AAAA,KAC9B,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,KACjC,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAU,EAAA;AACzC,QAAA,OAAA,CAAQ,cAAe,EAAA;AACvB,QAAA;AAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,aAAA;AACzB,QAAA;AAEF,MAAA,MAAM,WAAc,GAAAC,gCAAA;AAAA,QAClB,KAAA;AAAA,QACA,QAAQ,WAAY,CAAA,KAAA;AAAA,QACpB,QAAQ,GAAI,CAAA;AAAA,OACd;AAEA,MAAA,IAAI,gBAAgB,SAAW,EAAA;AAC7B,QAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,OAAA,IAAW,MAAM,MAAW,KAAA,KAAA,CAAM,aAAgB,GAAA,KAAA,GAAQ,KAAM,CAAA,QAAA,CAAA;AACzF,UAAA;AACF,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,IAAI,iBAAiB,CAAC,GAAG,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAA,CAAE,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,OAAQ,CAAA,QAAA,KAAa,EAAE,CAAC,CAAA;AAE1F,QAAA,IAAI,gBAAgB,MAAQ,EAAA;AAC1B,UAAA,cAAA,CAAe,OAAQ,EAAA;AAAA,SAEhB,MAAA,IAAA,WAAA,KAAgB,MAAU,IAAA,WAAA,KAAgB,MAAQ,EAAA;AACzD,UAAA,IAAI,WAAgB,KAAA,MAAA;AAClB,YAAA,cAAA,CAAe,OAAQ,EAAA;AACzB,UAAA,MAAM,eAAe,cAAe,CAAA,OAAA;AAAA,YAClC,KAAM,CAAA;AAAA,WACR;AAEA,UAAiB,cAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,GAC1BC,2BAAU,CAAA,cAAA,EAAgB,YAAe,GAAA,CAAC,CAC1C,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAG3C,QAASC,YAAA,CAAA,MAAMC,4BAAW,CAAA,cAAc,CAAC,CAAA;AAAA;AAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RovingFocusItem.cjs","sources":["../../src/RovingFocus/RovingFocusItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface RovingFocusItemProps extends PrimitiveProps {\n  tabStopId?: string\n  /**\n   * When `false`, item wil be not be focusable.\n   * @defaultValue `true`\n   */\n  focusable?: boolean\n  /** When `true`, item wil be initially focused. */\n  active?: boolean\n  /** When `true`, shift + arrow key will allow focusing on next/previous item. */\n  allowShiftKey?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted } from 'vue'\nimport { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'\nimport { Primitive } from '@/Primitive'\nimport { focusFirst, getFocusIntent, wrapArray } from './utils'\nimport { useId } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusItemProps>(), {\n  focusable: true,\n  as: 'span',\n})\n\nconst context = injectRovingFocusGroupContext()\nconst randomId = useId()\nconst id = computed(() => props.tabStopId || randomId)\nconst isCurrentTabStop = computed(\n  () => context.currentTabStopId.value === id.value,\n)\n\nconst { getItems, CollectionItem } = useCollection()\n\nonMounted(() => {\n  if (props.focusable)\n    context.onFocusableItemAdd()\n})\nonUnmounted(() => {\n  if (props.focusable)\n    context.onFocusableItemRemove()\n})\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (event.key === 'Tab' && event.shiftKey) {\n    context.onItemShiftTab()\n    return\n  }\n\n  if (event.target !== event.currentTarget)\n    return\n\n  const focusIntent = getFocusIntent(\n    event,\n    context.orientation.value,\n    context.dir.value,\n  )\n\n  if (focusIntent !== undefined) {\n    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))\n      return\n    event.preventDefault()\n    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]\n\n    if (focusIntent === 'last') {\n      candidateNodes.reverse()\n    }\n    else if (focusIntent === 'prev' || focusIntent === 'next') {\n      if (focusIntent === 'prev')\n        candidateNodes.reverse()\n      const currentIndex = candidateNodes.indexOf(\n        event.currentTarget as HTMLElement,\n      )\n\n      candidateNodes = context.loop.value\n        ? wrapArray(candidateNodes, currentIndex + 1)\n        : candidateNodes.slice(currentIndex + 1)\n    }\n\n    nextTick(() => focusFirst(candidateNodes))\n  }\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :tabindex=\"isCurrentTabStop ? 0 : -1\"\n      :data-orientation=\"context.orientation.value\"\n      :data-active=\"active ? '' : undefined\"\n      :data-disabled=\"!focusable ? '' : undefined\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @mousedown=\"\n        (event) => {\n          // We prevent focusing non-focusable items on `mousedown`.\n          // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n          if (!focusable) event.preventDefault();\n          // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n          else context.onItemFocus(id);\n        }\n      \"\n      @focus=\"context.onItemFocus(id)\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["injectRovingFocusGroupContext","useId","computed","useCollection","onMounted","onUnmounted","getFocusIntent","wrapArray","nextTick","focusFirst"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,UAAUA,0DAA8B,EAAA;AAC9C,IAAA,MAAM,WAAWC,kBAAM,EAAA;AACvB,IAAA,MAAM,EAAK,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,aAAa,QAAQ,CAAA;AACrD,IAAA,MAAM,gBAAmB,GAAAA,YAAA;AAAA,MACvB,MAAM,OAAA,CAAQ,gBAAiB,CAAA,KAAA,KAAU,EAAG,CAAA;AAAA,KAC9C;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,cAAe,EAAA,GAAIC,mCAAc,EAAA;AAEnD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,kBAAmB,EAAA;AAAA,KAC9B,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,KACjC,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAU,EAAA;AACzC,QAAA,OAAA,CAAQ,cAAe,EAAA;AACvB,QAAA;AAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,aAAA;AACzB,QAAA;AAEF,MAAA,MAAM,WAAc,GAAAC,gCAAA;AAAA,QAClB,KAAA;AAAA,QACA,QAAQ,WAAY,CAAA,KAAA;AAAA,QACpB,QAAQ,GAAI,CAAA;AAAA,OACd;AAEA,MAAA,IAAI,gBAAgB,MAAW,EAAA;AAC7B,QAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,OAAA,IAAW,MAAM,MAAW,KAAA,KAAA,CAAM,aAAgB,GAAA,KAAA,GAAQ,KAAM,CAAA,QAAA,CAAA;AACzF,UAAA;AACF,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,IAAI,iBAAiB,CAAC,GAAG,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAA,CAAE,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,OAAQ,CAAA,QAAA,KAAa,EAAE,CAAC,CAAA;AAE1F,QAAA,IAAI,gBAAgB,MAAQ,EAAA;AAC1B,UAAA,cAAA,CAAe,OAAQ,EAAA;AAAA,SAEhB,MAAA,IAAA,WAAA,KAAgB,MAAU,IAAA,WAAA,KAAgB,MAAQ,EAAA;AACzD,UAAA,IAAI,WAAgB,KAAA,MAAA;AAClB,YAAA,cAAA,CAAe,OAAQ,EAAA;AACzB,UAAA,MAAM,eAAe,cAAe,CAAA,OAAA;AAAA,YAClC,KAAM,CAAA;AAAA,WACR;AAEA,UAAiB,cAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,GAC1BC,2BAAU,CAAA,cAAA,EAAgB,YAAe,GAAA,CAAC,CAC1C,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAG3C,QAASC,YAAA,CAAA,MAAMC,4BAAW,CAAA,cAAc,CAAC,CAAA;AAAA;AAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RovingFocus/RovingFocusItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, nextTick } from 'vue';
+import { defineComponent, computed, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, renderSlot, nextTick } from 'vue';
 import { g as getFocusIntent, w as wrapArray, f as focusFirst } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
 import { i as injectRovingFocusGroupContext } from './RovingFocusGroup.js';
@@ -10,7 +10,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     tabStopId: {},
     focusable: { type: Boolean, default: true },
-    active: { type: Boolean, default: true },
+    active: { type: Boolean },
     allowShiftKey: { type: Boolean },
     asChild: { type: Boolean },
     as: { default: "span" }
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         context.orientation.value,
         context.dir.value
       );
-      if (focusIntent !== undefined) {
+      if (focusIntent !== void 0) {
         if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))
           return;
         event.preventDefault();
@@ -68,8 +68,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(Primitive), {
             tabindex: isCurrentTabStop.value ? 0 : -1,
             "data-orientation": unref(context).orientation.value,
-            "data-active": _ctx.active,
-            "data-disabled": !_ctx.focusable ? "" : undefined,
+            "data-active": _ctx.active ? "" : void 0,
+            "data-disabled": !_ctx.focusable ? "" : void 0,
             as: _ctx.as,
             "as-child": _ctx.asChild,
             onMousedown: _cache[0] || (_cache[0] = (event) => {

package/dist/RovingFocus/RovingFocusItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RovingFocusItem.js","sources":["../../src/RovingFocus/RovingFocusItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface RovingFocusItemProps extends PrimitiveProps {\n  tabStopId?: string\n  focusable?: boolean\n  active?: boolean\n  allowShiftKey?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted } from 'vue'\nimport { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'\nimport { Primitive } from '@/Primitive'\nimport { focusFirst, getFocusIntent, wrapArray } from './utils'\nimport { useId } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusItemProps>(), {\n  focusable: true,\n  active: true,\n  as: 'span',\n})\n\nconst context = injectRovingFocusGroupContext()\nconst randomId = useId()\nconst id = computed(() => props.tabStopId || randomId)\nconst isCurrentTabStop = computed(\n  () => context.currentTabStopId.value === id.value,\n)\n\nconst { getItems, CollectionItem } = useCollection()\n\nonMounted(() => {\n  if (props.focusable)\n    context.onFocusableItemAdd()\n})\nonUnmounted(() => {\n  if (props.focusable)\n    context.onFocusableItemRemove()\n})\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (event.key === 'Tab' && event.shiftKey) {\n    context.onItemShiftTab()\n    return\n  }\n\n  if (event.target !== event.currentTarget)\n    return\n\n  const focusIntent = getFocusIntent(\n    event,\n    context.orientation.value,\n    context.dir.value,\n  )\n\n  if (focusIntent !== undefined) {\n    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))\n      return\n    event.preventDefault()\n    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]\n\n    if (focusIntent === 'last') {\n      candidateNodes.reverse()\n    }\n    else if (focusIntent === 'prev' || focusIntent === 'next') {\n      if (focusIntent === 'prev')\n        candidateNodes.reverse()\n      const currentIndex = candidateNodes.indexOf(\n        event.currentTarget as HTMLElement,\n      )\n\n      candidateNodes = context.loop.value\n        ? wrapArray(candidateNodes, currentIndex + 1)\n        : candidateNodes.slice(currentIndex + 1)\n    }\n\n    nextTick(() => focusFirst(candidateNodes))\n  }\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :tabindex=\"isCurrentTabStop ? 0 : -1\"\n      :data-orientation=\"context.orientation.value\"\n      :data-active=\"active\"\n      :data-disabled=\"!focusable ? '' : undefined\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @mousedown=\"\n        (event) => {\n          // We prevent focusing non-focusable items on `mousedown`.\n          // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n          if (!focusable) event.preventDefault();\n          // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n          else context.onItemFocus(id);\n        }\n      \"\n      @focus=\"context.onItemFocus(id)\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,UAAU,6BAA8B,EAAA;AAC9C,IAAA,MAAM,WAAW,KAAM,EAAA;AACvB,IAAA,MAAM,EAAK,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,aAAa,QAAQ,CAAA;AACrD,IAAA,MAAM,gBAAmB,GAAA,QAAA;AAAA,MACvB,MAAM,OAAA,CAAQ,gBAAiB,CAAA,KAAA,KAAU,EAAG,CAAA;AAAA,KAC9C;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,cAAe,EAAA,GAAI,aAAc,EAAA;AAEnD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,kBAAmB,EAAA;AAAA,KAC9B,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,KACjC,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAU,EAAA;AACzC,QAAA,OAAA,CAAQ,cAAe,EAAA;AACvB,QAAA;AAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,aAAA;AACzB,QAAA;AAEF,MAAA,MAAM,WAAc,GAAA,cAAA;AAAA,QAClB,KAAA;AAAA,QACA,QAAQ,WAAY,CAAA,KAAA;AAAA,QACpB,QAAQ,GAAI,CAAA;AAAA,OACd;AAEA,MAAA,IAAI,gBAAgB,SAAW,EAAA;AAC7B,QAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,OAAA,IAAW,MAAM,MAAW,KAAA,KAAA,CAAM,aAAgB,GAAA,KAAA,GAAQ,KAAM,CAAA,QAAA,CAAA;AACzF,UAAA;AACF,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,IAAI,iBAAiB,CAAC,GAAG,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAA,CAAE,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,OAAQ,CAAA,QAAA,KAAa,EAAE,CAAC,CAAA;AAE1F,QAAA,IAAI,gBAAgB,MAAQ,EAAA;AAC1B,UAAA,cAAA,CAAe,OAAQ,EAAA;AAAA,SAEhB,MAAA,IAAA,WAAA,KAAgB,MAAU,IAAA,WAAA,KAAgB,MAAQ,EAAA;AACzD,UAAA,IAAI,WAAgB,KAAA,MAAA;AAClB,YAAA,cAAA,CAAe,OAAQ,EAAA;AACzB,UAAA,MAAM,eAAe,cAAe,CAAA,OAAA;AAAA,YAClC,KAAM,CAAA;AAAA,WACR;AAEA,UAAiB,cAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,GAC1B,SAAU,CAAA,cAAA,EAAgB,YAAe,GAAA,CAAC,CAC1C,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAG3C,QAAS,QAAA,CAAA,MAAM,UAAW,CAAA,cAAc,CAAC,CAAA;AAAA;AAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RovingFocusItem.js","sources":["../../src/RovingFocus/RovingFocusItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface RovingFocusItemProps extends PrimitiveProps {\n  tabStopId?: string\n  /**\n   * When `false`, item wil be not be focusable.\n   * @defaultValue `true`\n   */\n  focusable?: boolean\n  /** When `true`, item wil be initially focused. */\n  active?: boolean\n  /** When `true`, shift + arrow key will allow focusing on next/previous item. */\n  allowShiftKey?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, onUnmounted } from 'vue'\nimport { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'\nimport { Primitive } from '@/Primitive'\nimport { focusFirst, getFocusIntent, wrapArray } from './utils'\nimport { useId } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nconst props = withDefaults(defineProps<RovingFocusItemProps>(), {\n  focusable: true,\n  as: 'span',\n})\n\nconst context = injectRovingFocusGroupContext()\nconst randomId = useId()\nconst id = computed(() => props.tabStopId || randomId)\nconst isCurrentTabStop = computed(\n  () => context.currentTabStopId.value === id.value,\n)\n\nconst { getItems, CollectionItem } = useCollection()\n\nonMounted(() => {\n  if (props.focusable)\n    context.onFocusableItemAdd()\n})\nonUnmounted(() => {\n  if (props.focusable)\n    context.onFocusableItemRemove()\n})\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (event.key === 'Tab' && event.shiftKey) {\n    context.onItemShiftTab()\n    return\n  }\n\n  if (event.target !== event.currentTarget)\n    return\n\n  const focusIntent = getFocusIntent(\n    event,\n    context.orientation.value,\n    context.dir.value,\n  )\n\n  if (focusIntent !== undefined) {\n    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))\n      return\n    event.preventDefault()\n    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]\n\n    if (focusIntent === 'last') {\n      candidateNodes.reverse()\n    }\n    else if (focusIntent === 'prev' || focusIntent === 'next') {\n      if (focusIntent === 'prev')\n        candidateNodes.reverse()\n      const currentIndex = candidateNodes.indexOf(\n        event.currentTarget as HTMLElement,\n      )\n\n      candidateNodes = context.loop.value\n        ? wrapArray(candidateNodes, currentIndex + 1)\n        : candidateNodes.slice(currentIndex + 1)\n    }\n\n    nextTick(() => focusFirst(candidateNodes))\n  }\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :tabindex=\"isCurrentTabStop ? 0 : -1\"\n      :data-orientation=\"context.orientation.value\"\n      :data-active=\"active ? '' : undefined\"\n      :data-disabled=\"!focusable ? '' : undefined\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @mousedown=\"\n        (event) => {\n          // We prevent focusing non-focusable items on `mousedown`.\n          // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n          if (!focusable) event.preventDefault();\n          // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n          else context.onItemFocus(id);\n        }\n      \"\n      @focus=\"context.onItemFocus(id)\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,UAAU,6BAA8B,EAAA;AAC9C,IAAA,MAAM,WAAW,KAAM,EAAA;AACvB,IAAA,MAAM,EAAK,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,aAAa,QAAQ,CAAA;AACrD,IAAA,MAAM,gBAAmB,GAAA,QAAA;AAAA,MACvB,MAAM,OAAA,CAAQ,gBAAiB,CAAA,KAAA,KAAU,EAAG,CAAA;AAAA,KAC9C;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,cAAe,EAAA,GAAI,aAAc,EAAA;AAEnD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,kBAAmB,EAAA;AAAA,KAC9B,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,KAAM,CAAA,SAAA;AACR,QAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,KACjC,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAU,EAAA;AACzC,QAAA,OAAA,CAAQ,cAAe,EAAA;AACvB,QAAA;AAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,aAAA;AACzB,QAAA;AAEF,MAAA,MAAM,WAAc,GAAA,cAAA;AAAA,QAClB,KAAA;AAAA,QACA,QAAQ,WAAY,CAAA,KAAA;AAAA,QACpB,QAAQ,GAAI,CAAA;AAAA,OACd;AAEA,MAAA,IAAI,gBAAgB,MAAW,EAAA;AAC7B,QAAI,IAAA,KAAA,CAAM,WAAW,KAAM,CAAA,OAAA,IAAW,MAAM,MAAW,KAAA,KAAA,CAAM,aAAgB,GAAA,KAAA,GAAQ,KAAM,CAAA,QAAA,CAAA;AACzF,UAAA;AACF,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,IAAI,iBAAiB,CAAC,GAAG,QAAS,EAAA,CAAE,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,GAAG,CAAA,CAAE,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,OAAQ,CAAA,QAAA,KAAa,EAAE,CAAC,CAAA;AAE1F,QAAA,IAAI,gBAAgB,MAAQ,EAAA;AAC1B,UAAA,cAAA,CAAe,OAAQ,EAAA;AAAA,SAEhB,MAAA,IAAA,WAAA,KAAgB,MAAU,IAAA,WAAA,KAAgB,MAAQ,EAAA;AACzD,UAAA,IAAI,WAAgB,KAAA,MAAA;AAClB,YAAA,cAAA,CAAe,OAAQ,EAAA;AACzB,UAAA,MAAM,eAAe,cAAe,CAAA,OAAA;AAAA,YAClC,KAAM,CAAA;AAAA,WACR;AAEA,UAAiB,cAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,GAC1B,SAAU,CAAA,cAAA,EAAgB,YAAe,GAAA,CAAC,CAC1C,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAG3C,QAAS,QAAA,CAAA,MAAM,UAAW,CAAA,cAAc,CAAC,CAAA;AAAA;AAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RovingFocus/utils.cjs

@@ -22,9 +22,9 @@ function getDirectionAwareKey(key, dir) {
 function getFocusIntent(event, orientation, dir) {
   const key = getDirectionAwareKey(event.key, dir);
   if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
-    return undefined;
+    return void 0;
   if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
-    return undefined;
+    return void 0;
   return MAP_KEY_TO_FOCUS_INTENT[key];
 }
 function focusFirst(candidates, preventScroll = false) {

package/dist/RovingFocus/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/RovingFocus/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'horizontal' | 'vertical'\nexport type Direction = 'ltr' | 'rtl'\n\nexport const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\nexport const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n  ArrowLeft: 'prev',\n  ArrowUp: 'prev',\n  ArrowRight: 'next',\n  ArrowDown: 'next',\n  PageUp: 'first',\n  Home: 'first',\n  PageDown: 'last',\n  End: 'last',\n}\n\nexport function getDirectionAwareKey(key: string, dir?: Direction) {\n  if (dir !== 'rtl')\n    return key\n  return key === 'ArrowLeft'\n    ? 'ArrowRight'\n    : key === 'ArrowRight'\n      ? 'ArrowLeft'\n      : key\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next'\n\nexport function getFocusIntent(\n  event: KeyboardEvent,\n  orientation?: Orientation,\n  dir?: Direction,\n) {\n  const key = getDirectionAwareKey(event.key, dir)\n  if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))\n    return undefined\n  if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))\n    return undefined\n  return MAP_KEY_TO_FOCUS_INTENT[key]\n}\n\nexport function focusFirst(candidates: HTMLElement[], preventScroll = false) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n    candidate.focus({ preventScroll })\n    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nexport function wrapArray<T>(array: T[], startIndex: number) {\n  return array.map((_, index) => array[(startIndex + index) % array.length])\n}\n"],"names":["getActiveElement"],"mappings":";;;;AAKO,MAAM,WAAc,GAAA;AACpB,MAAM,aAAgB,GAAA,EAAE,OAAS,EAAA,KAAA,EAAO,YAAY,IAAK;AAEzD,MAAM,uBAAuD,GAAA;AAAA,EAClE,SAAW,EAAA,MAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,MAAA;AAAA,EACZ,SAAW,EAAA,MAAA;AAAA,EACX,MAAQ,EAAA,OAAA;AAAA,EACR,IAAM,EAAA,OAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA;AACP;AAEgB,SAAA,oBAAA,CAAqB,KAAa,GAAiB,EAAA;AACjE,EAAA,IAAI,GAAQ,KAAA,KAAA;AACV,IAAO,OAAA,GAAA;AACT,EAAA,OAAO,GAAQ,KAAA,WAAA,GACX,YACA,GAAA,GAAA,KAAQ,eACN,WACA,GAAA,GAAA;AACR;AAIgB,SAAA,cAAA,CACd,KACA,EAAA,WAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,GAAM,GAAA,oBAAA,CAAqB,KAAM,CAAA,GAAA,EAAK,GAAG,CAAA;AAC/C,EAAA,IAAI,gBAAgB,UAAc,IAAA,CAAC,aAAa,YAAY,CAAA,CAAE,SAAS,GAAG,CAAA;AACxE,IAAO,OAAA,SAAA;AACT,EAAA,IAAI,gBAAgB,YAAgB,IAAA,CAAC,WAAW,WAAW,CAAA,CAAE,SAAS,GAAG,CAAA;AACvE,IAAO,OAAA,SAAA;AACT,EAAA,OAAO,wBAAwB,GAAG,CAAA;AACpC;AAEgB,SAAA,UAAA,CAAW,UAA2B,EAAA,aAAA,GAAgB,KAAO,EAAA;AAC3E,EAAA,MAAM,6BAA6BA,wCAAiB,EAAA;AACpD,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAElC,IAAA,IAAI,SAAc,KAAA,0BAAA;AAChB,MAAA;AACF,IAAU,SAAA,CAAA,KAAA,CAAM,EAAE,aAAA,EAAe,CAAA;AACjC,IAAA,IAAIA,0CAAuB,KAAA,0BAAA;AACzB,MAAA;AAAA;AAEN;AAMgB,SAAA,SAAA,CAAa,OAAY,UAAoB,EAAA;AAC3D,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,KAAU,OAAO,UAAa,GAAA,KAAA,IAAS,KAAM,CAAA,MAAM,CAAC,CAAA;AAC3E;;;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/RovingFocus/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'horizontal' | 'vertical'\nexport type Direction = 'ltr' | 'rtl'\n\nexport const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\nexport const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n  ArrowLeft: 'prev',\n  ArrowUp: 'prev',\n  ArrowRight: 'next',\n  ArrowDown: 'next',\n  PageUp: 'first',\n  Home: 'first',\n  PageDown: 'last',\n  End: 'last',\n}\n\nexport function getDirectionAwareKey(key: string, dir?: Direction) {\n  if (dir !== 'rtl')\n    return key\n  return key === 'ArrowLeft'\n    ? 'ArrowRight'\n    : key === 'ArrowRight'\n      ? 'ArrowLeft'\n      : key\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next'\n\nexport function getFocusIntent(\n  event: KeyboardEvent,\n  orientation?: Orientation,\n  dir?: Direction,\n) {\n  const key = getDirectionAwareKey(event.key, dir)\n  if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))\n    return undefined\n  if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))\n    return undefined\n  return MAP_KEY_TO_FOCUS_INTENT[key]\n}\n\nexport function focusFirst(candidates: HTMLElement[], preventScroll = false) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n    candidate.focus({ preventScroll })\n    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nexport function wrapArray<T>(array: T[], startIndex: number) {\n  return array.map((_, index) => array[(startIndex + index) % array.length])\n}\n"],"names":["getActiveElement"],"mappings":";;;;AAKO,MAAM,WAAc,GAAA;AACpB,MAAM,aAAgB,GAAA,EAAE,OAAS,EAAA,KAAA,EAAO,YAAY,IAAK;AAEzD,MAAM,uBAAuD,GAAA;AAAA,EAClE,SAAW,EAAA,MAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,MAAA;AAAA,EACZ,SAAW,EAAA,MAAA;AAAA,EACX,MAAQ,EAAA,OAAA;AAAA,EACR,IAAM,EAAA,OAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA;AACP;AAEgB,SAAA,oBAAA,CAAqB,KAAa,GAAiB,EAAA;AACjE,EAAA,IAAI,GAAQ,KAAA,KAAA;AACV,IAAO,OAAA,GAAA;AACT,EAAA,OAAO,GAAQ,KAAA,WAAA,GACX,YACA,GAAA,GAAA,KAAQ,eACN,WACA,GAAA,GAAA;AACR;AAIgB,SAAA,cAAA,CACd,KACA,EAAA,WAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,GAAM,GAAA,oBAAA,CAAqB,KAAM,CAAA,GAAA,EAAK,GAAG,CAAA;AAC/C,EAAA,IAAI,gBAAgB,UAAc,IAAA,CAAC,aAAa,YAAY,CAAA,CAAE,SAAS,GAAG,CAAA;AACxE,IAAO,OAAA,MAAA;AACT,EAAA,IAAI,gBAAgB,YAAgB,IAAA,CAAC,WAAW,WAAW,CAAA,CAAE,SAAS,GAAG,CAAA;AACvE,IAAO,OAAA,MAAA;AACT,EAAA,OAAO,wBAAwB,GAAG,CAAA;AACpC;AAEgB,SAAA,UAAA,CAAW,UAA2B,EAAA,aAAA,GAAgB,KAAO,EAAA;AAC3E,EAAA,MAAM,6BAA6BA,wCAAiB,EAAA;AACpD,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAElC,IAAA,IAAI,SAAc,KAAA,0BAAA;AAChB,MAAA;AACF,IAAU,SAAA,CAAA,KAAA,CAAM,EAAE,aAAA,EAAe,CAAA;AACjC,IAAA,IAAIA,0CAAuB,KAAA,0BAAA;AACzB,MAAA;AAAA;AAEN;AAMgB,SAAA,SAAA,CAAa,OAAY,UAAoB,EAAA;AAC3D,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,KAAU,OAAO,UAAa,GAAA,KAAA,IAAS,KAAM,CAAA,MAAM,CAAC,CAAA;AAC3E;;;;;;;;;"}

package/dist/RovingFocus/utils.js

@@ -20,9 +20,9 @@ function getDirectionAwareKey(key, dir) {
 function getFocusIntent(event, orientation, dir) {
   const key = getDirectionAwareKey(event.key, dir);
   if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
-    return undefined;
+    return void 0;
   if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
-    return undefined;
+    return void 0;
   return MAP_KEY_TO_FOCUS_INTENT[key];
 }
 function focusFirst(candidates, preventScroll = false) {

package/dist/RovingFocus/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/RovingFocus/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'horizontal' | 'vertical'\nexport type Direction = 'ltr' | 'rtl'\n\nexport const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\nexport const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n  ArrowLeft: 'prev',\n  ArrowUp: 'prev',\n  ArrowRight: 'next',\n  ArrowDown: 'next',\n  PageUp: 'first',\n  Home: 'first',\n  PageDown: 'last',\n  End: 'last',\n}\n\nexport function getDirectionAwareKey(key: string, dir?: Direction) {\n  if (dir !== 'rtl')\n    return key\n  return key === 'ArrowLeft'\n    ? 'ArrowRight'\n    : key === 'ArrowRight'\n      ? 'ArrowLeft'\n      : key\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next'\n\nexport function getFocusIntent(\n  event: KeyboardEvent,\n  orientation?: Orientation,\n  dir?: Direction,\n) {\n  const key = getDirectionAwareKey(event.key, dir)\n  if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))\n    return undefined\n  if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))\n    return undefined\n  return MAP_KEY_TO_FOCUS_INTENT[key]\n}\n\nexport function focusFirst(candidates: HTMLElement[], preventScroll = false) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n    candidate.focus({ preventScroll })\n    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nexport function wrapArray<T>(array: T[], startIndex: number) {\n  return array.map((_, index) => array[(startIndex + index) % array.length])\n}\n"],"names":[],"mappings":";;AAKO,MAAM,WAAc,GAAA;AACpB,MAAM,aAAgB,GAAA,EAAE,OAAS,EAAA,KAAA,EAAO,YAAY,IAAK;AAEzD,MAAM,uBAAuD,GAAA;AAAA,EAClE,SAAW,EAAA,MAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,MAAA;AAAA,EACZ,SAAW,EAAA,MAAA;AAAA,EACX,MAAQ,EAAA,OAAA;AAAA,EACR,IAAM,EAAA,OAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA;AACP;AAEgB,SAAA,oBAAA,CAAqB,KAAa,GAAiB,EAAA;AACjE,EAAA,IAAI,GAAQ,KAAA,KAAA;AACV,IAAO,OAAA,GAAA;AACT,EAAA,OAAO,GAAQ,KAAA,WAAA,GACX,YACA,GAAA,GAAA,KAAQ,eACN,WACA,GAAA,GAAA;AACR;AAIgB,SAAA,cAAA,CACd,KACA,EAAA,WAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,GAAM,GAAA,oBAAA,CAAqB,KAAM,CAAA,GAAA,EAAK,GAAG,CAAA;AAC/C,EAAA,IAAI,gBAAgB,UAAc,IAAA,CAAC,aAAa,YAAY,CAAA,CAAE,SAAS,GAAG,CAAA;AACxE,IAAO,OAAA,SAAA;AACT,EAAA,IAAI,gBAAgB,YAAgB,IAAA,CAAC,WAAW,WAAW,CAAA,CAAE,SAAS,GAAG,CAAA;AACvE,IAAO,OAAA,SAAA;AACT,EAAA,OAAO,wBAAwB,GAAG,CAAA;AACpC;AAEgB,SAAA,UAAA,CAAW,UAA2B,EAAA,aAAA,GAAgB,KAAO,EAAA;AAC3E,EAAA,MAAM,6BAA6B,gBAAiB,EAAA;AACpD,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAElC,IAAA,IAAI,SAAc,KAAA,0BAAA;AAChB,MAAA;AACF,IAAU,SAAA,CAAA,KAAA,CAAM,EAAE,aAAA,EAAe,CAAA;AACjC,IAAA,IAAI,kBAAuB,KAAA,0BAAA;AACzB,MAAA;AAAA;AAEN;AAMgB,SAAA,SAAA,CAAa,OAAY,UAAoB,EAAA;AAC3D,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,KAAU,OAAO,UAAa,GAAA,KAAA,IAAS,KAAM,CAAA,MAAM,CAAC,CAAA;AAC3E;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/RovingFocus/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'horizontal' | 'vertical'\nexport type Direction = 'ltr' | 'rtl'\n\nexport const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\nexport const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n  ArrowLeft: 'prev',\n  ArrowUp: 'prev',\n  ArrowRight: 'next',\n  ArrowDown: 'next',\n  PageUp: 'first',\n  Home: 'first',\n  PageDown: 'last',\n  End: 'last',\n}\n\nexport function getDirectionAwareKey(key: string, dir?: Direction) {\n  if (dir !== 'rtl')\n    return key\n  return key === 'ArrowLeft'\n    ? 'ArrowRight'\n    : key === 'ArrowRight'\n      ? 'ArrowLeft'\n      : key\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next'\n\nexport function getFocusIntent(\n  event: KeyboardEvent,\n  orientation?: Orientation,\n  dir?: Direction,\n) {\n  const key = getDirectionAwareKey(event.key, dir)\n  if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))\n    return undefined\n  if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))\n    return undefined\n  return MAP_KEY_TO_FOCUS_INTENT[key]\n}\n\nexport function focusFirst(candidates: HTMLElement[], preventScroll = false) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n    candidate.focus({ preventScroll })\n    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)\n      return\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nexport function wrapArray<T>(array: T[], startIndex: number) {\n  return array.map((_, index) => array[(startIndex + index) % array.length])\n}\n"],"names":[],"mappings":";;AAKO,MAAM,WAAc,GAAA;AACpB,MAAM,aAAgB,GAAA,EAAE,OAAS,EAAA,KAAA,EAAO,YAAY,IAAK;AAEzD,MAAM,uBAAuD,GAAA;AAAA,EAClE,SAAW,EAAA,MAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,MAAA;AAAA,EACZ,SAAW,EAAA,MAAA;AAAA,EACX,MAAQ,EAAA,OAAA;AAAA,EACR,IAAM,EAAA,OAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA;AACP;AAEgB,SAAA,oBAAA,CAAqB,KAAa,GAAiB,EAAA;AACjE,EAAA,IAAI,GAAQ,KAAA,KAAA;AACV,IAAO,OAAA,GAAA;AACT,EAAA,OAAO,GAAQ,KAAA,WAAA,GACX,YACA,GAAA,GAAA,KAAQ,eACN,WACA,GAAA,GAAA;AACR;AAIgB,SAAA,cAAA,CACd,KACA,EAAA,WAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,GAAM,GAAA,oBAAA,CAAqB,KAAM,CAAA,GAAA,EAAK,GAAG,CAAA;AAC/C,EAAA,IAAI,gBAAgB,UAAc,IAAA,CAAC,aAAa,YAAY,CAAA,CAAE,SAAS,GAAG,CAAA;AACxE,IAAO,OAAA,MAAA;AACT,EAAA,IAAI,gBAAgB,YAAgB,IAAA,CAAC,WAAW,WAAW,CAAA,CAAE,SAAS,GAAG,CAAA;AACvE,IAAO,OAAA,MAAA;AACT,EAAA,OAAO,wBAAwB,GAAG,CAAA;AACpC;AAEgB,SAAA,UAAA,CAAW,UAA2B,EAAA,aAAA,GAAgB,KAAO,EAAA;AAC3E,EAAA,MAAM,6BAA6B,gBAAiB,EAAA;AACpD,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAElC,IAAA,IAAI,SAAc,KAAA,0BAAA;AAChB,MAAA;AACF,IAAU,SAAA,CAAA,KAAA,CAAM,EAAE,aAAA,EAAe,CAAA;AACjC,IAAA,IAAI,kBAAuB,KAAA,0BAAA;AACzB,MAAA;AAAA;AAEN;AAMgB,SAAA,SAAA,CAAa,OAAY,UAAoB,EAAA;AAC3D,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,KAAU,OAAO,UAAa,GAAA,KAAA,IAAS,KAAM,CAAA,MAAM,CAAC,CAAA;AAC3E;;;;"}

package/dist/ScrollArea/ScrollAreaCorner.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, mergeProps, unref, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, computed, createBlock, createCommentVNode, openBlock, mergeProps, unref, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaCornerImpl.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';

package/dist/ScrollArea/ScrollAreaCornerImpl.cjs

@@ -33,8 +33,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           width: `${width.value}px`,
           height: `${height.value}px`,
           position: "absolute",
-          right: vue.unref(rootContext).dir.value === "ltr" ? 0 : undefined,
-          left: vue.unref(rootContext).dir.value === "rtl" ? 0 : undefined,
+          right: vue.unref(rootContext).dir.value === "ltr" ? 0 : void 0,
+          left: vue.unref(rootContext).dir.value === "rtl" ? 0 : void 0,
           bottom: 0
         }
       }, _ctx.$parent?.$props), {

package/dist/ScrollArea/ScrollAreaCornerImpl.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, watch, createBlock, createCommentVNode, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';
@@ -31,8 +31,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           width: `${width.value}px`,
           height: `${height.value}px`,
           position: "absolute",
-          right: unref(rootContext).dir.value === "ltr" ? 0 : undefined,
-          left: unref(rootContext).dir.value === "rtl" ? 0 : undefined,
+          right: unref(rootContext).dir.value === "ltr" ? 0 : void 0,
+          left: unref(rootContext).dir.value === "rtl" ? 0 : void 0,
           bottom: 0
         }
       }, _ctx.$parent?.$props), {

package/dist/ScrollArea/ScrollAreaRoot.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 const vue = require('vue');
+const shared_createContext = require('../shared/createContext.cjs');
 const shared_useDirection = require('../shared/useDirection.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
-const shared_createContext = require('../shared/createContext.cjs');
 
 const [injectScrollAreaRootContext, provideScrollAreaRootContext] = shared_createContext.createContext("ScrollAreaRoot");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -55,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       scrollArea,
       viewport,
       onViewportChange: (el) => {
-        viewport.value = el || undefined;
+        viewport.value = el || void 0;
       },
       content,
       onContentChange: (el) => {
@@ -66,10 +66,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       scrollbarY,
       scrollbarYEnabled,
       onScrollbarXChange: (scrollbar) => {
-        scrollbarX.value = scrollbar || undefined;
+        scrollbarX.value = scrollbar || void 0;
       },
       onScrollbarYChange: (scrollbar) => {
-        scrollbarY.value = scrollbar || undefined;
+        scrollbarY.value = scrollbar || void 0;
       },
       onScrollbarXEnabledChange: (rendered) => {
         scrollbarXEnabled.value = rendered;

package/dist/ScrollArea/ScrollAreaRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaRoot.cjs","sources":["../../src/ScrollArea/ScrollAreaRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, ScrollType } from './types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaRootContext {\n  type: Ref<ScrollType>\n  dir: Ref<Direction>\n  scrollHideDelay: Ref<number>\n  scrollArea: Ref<HTMLElement | undefined>\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | null) => void\n  content: Ref<HTMLElement | undefined>\n  onContentChange: (content: HTMLElement) => void\n  scrollbarX: Ref<HTMLElement | undefined>\n  onScrollbarXChange: (scrollbar: HTMLElement | null) => void\n  scrollbarXEnabled: Ref<boolean>\n  onScrollbarXEnabledChange: (rendered: boolean) => void\n  scrollbarY: Ref<HTMLElement | undefined>\n  onScrollbarYChange: (scrollbar: HTMLElement | null) => void\n  scrollbarYEnabled: Ref<boolean>\n  onScrollbarYEnabledChange: (rendered: boolean) => void\n  onCornerWidthChange: (width: number) => void\n  onCornerHeightChange: (height: number) => void\n}\n\nexport const [injectScrollAreaRootContext, provideScrollAreaRootContext]\n  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')\n\nexport interface ScrollAreaRootProps extends PrimitiveProps {\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.\n   *\n   * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>\n   * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>\n   * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>\n   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.\n   */\n  type?: ScrollType\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  /** If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars. */\n  scrollHideDelay?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ScrollAreaRootProps>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n})\n\nconst cornerWidth = ref(0)\nconst cornerHeight = ref(0)\nconst viewport = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nconst scrollbarX = ref<HTMLElement>()\nconst scrollbarY = ref<HTMLElement>()\nconst scrollbarXEnabled = ref(false)\nconst scrollbarYEnabled = ref(false)\n\nconst { type, dir: propDir, scrollHideDelay } = toRefs(props)\nconst dir = useDirection(propDir)\n\nfunction scrollTop() {\n  viewport.value?.scrollTo({\n    top: 0,\n  })\n}\nfunction scrollTopLeft() {\n  viewport.value?.scrollTo({\n    top: 0,\n    left: 0,\n  })\n}\n\ndefineExpose({\n  /** Viewport element within ScrollArea */\n  viewport,\n  /** Scroll viewport to top */\n  scrollTop,\n  /** Scroll viewport to top-left */\n  scrollTopLeft,\n})\n\nconst { forwardRef, currentElement: scrollArea } = useForwardExpose()\n\nprovideScrollAreaRootContext({\n  type,\n  dir,\n  scrollHideDelay,\n  scrollArea,\n  viewport,\n  onViewportChange: (el) => {\n    viewport.value = el || undefined\n  },\n  content,\n  onContentChange: (el) => {\n    content.value = el\n  },\n  scrollbarX,\n  scrollbarXEnabled,\n  scrollbarY,\n  scrollbarYEnabled,\n  onScrollbarXChange: (scrollbar) => {\n    scrollbarX.value = scrollbar || undefined\n  },\n  onScrollbarYChange: (scrollbar) => {\n    scrollbarY.value = scrollbar || undefined\n  },\n  onScrollbarXEnabledChange: (rendered) => {\n    scrollbarXEnabled.value = rendered\n  },\n  onScrollbarYEnabledChange: (rendered) => {\n    scrollbarYEnabled.value = rendered\n  },\n  onCornerWidthChange: (width) => {\n    cornerWidth.value = width\n  },\n  onCornerHeightChange: (height) => {\n    cornerHeight.value = height\n  },\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :dir=\"dir\"\n    :style=\"{\n      position: 'relative',\n      // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n      ['--reka-scroll-area-corner-width' as any]: `${cornerWidth}px`,\n      ['--reka-scroll-area-corner-height' as any]: `${cornerHeight}px`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["createContext","ref","toRefs","useDirection","useForwardExpose"],"mappings":";;;;;;;;AA2BO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnEA,mCAAqC,gBAAgB;;;;;;;;;;;AAuBzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,WAAA,GAAcC,QAAI,CAAC,CAAA;AACzB,IAAM,MAAA,YAAA,GAAeA,QAAI,CAAC,CAAA;AAC1B,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,UAAUA,OAAiB,EAAA;AACjC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AACnC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AAEnC,IAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAK,SAAS,eAAgB,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA;AAGH,IAAa,QAAA,CAAA;AAAA;AAAA,MAEX,QAAA;AAAA;AAAA,MAEA,SAAA;AAAA;AAAA,MAEA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,UAAA,KAAeC,wCAAiB,EAAA;AAEpE,IAA6B,4BAAA,CAAA;AAAA,MAC3B,IAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,EAAO,KAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,EAAM,IAAA,SAAA;AAAA,OACzB;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAO,KAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OAClB;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,SAAA;AAAA,OAClC;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,SAAA;AAAA,OAClC;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,mBAAA,EAAqB,CAAC,KAAU,KAAA;AAC9B,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AAAA,OACtB;AAAA,MACA,oBAAA,EAAsB,CAAC,MAAW,KAAA;AAChC,QAAA,YAAA,CAAa,KAAQ,GAAA,MAAA;AAAA;AACvB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaRoot.cjs","sources":["../../src/ScrollArea/ScrollAreaRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, ScrollType } from './types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaRootContext {\n  type: Ref<ScrollType>\n  dir: Ref<Direction>\n  scrollHideDelay: Ref<number>\n  scrollArea: Ref<HTMLElement | undefined>\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | null) => void\n  content: Ref<HTMLElement | undefined>\n  onContentChange: (content: HTMLElement) => void\n  scrollbarX: Ref<HTMLElement | undefined>\n  onScrollbarXChange: (scrollbar: HTMLElement | null) => void\n  scrollbarXEnabled: Ref<boolean>\n  onScrollbarXEnabledChange: (rendered: boolean) => void\n  scrollbarY: Ref<HTMLElement | undefined>\n  onScrollbarYChange: (scrollbar: HTMLElement | null) => void\n  scrollbarYEnabled: Ref<boolean>\n  onScrollbarYEnabledChange: (rendered: boolean) => void\n  onCornerWidthChange: (width: number) => void\n  onCornerHeightChange: (height: number) => void\n}\n\nexport const [injectScrollAreaRootContext, provideScrollAreaRootContext]\n  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')\n\nexport interface ScrollAreaRootProps extends PrimitiveProps {\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.\n   *\n   * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>\n   * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>\n   * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>\n   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.\n   */\n  type?: ScrollType\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  /** If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars. */\n  scrollHideDelay?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ScrollAreaRootProps>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n})\n\nconst cornerWidth = ref(0)\nconst cornerHeight = ref(0)\nconst viewport = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nconst scrollbarX = ref<HTMLElement>()\nconst scrollbarY = ref<HTMLElement>()\nconst scrollbarXEnabled = ref(false)\nconst scrollbarYEnabled = ref(false)\n\nconst { type, dir: propDir, scrollHideDelay } = toRefs(props)\nconst dir = useDirection(propDir)\n\nfunction scrollTop() {\n  viewport.value?.scrollTo({\n    top: 0,\n  })\n}\nfunction scrollTopLeft() {\n  viewport.value?.scrollTo({\n    top: 0,\n    left: 0,\n  })\n}\n\ndefineExpose({\n  /** Viewport element within ScrollArea */\n  viewport,\n  /** Scroll viewport to top */\n  scrollTop,\n  /** Scroll viewport to top-left */\n  scrollTopLeft,\n})\n\nconst { forwardRef, currentElement: scrollArea } = useForwardExpose()\n\nprovideScrollAreaRootContext({\n  type,\n  dir,\n  scrollHideDelay,\n  scrollArea,\n  viewport,\n  onViewportChange: (el) => {\n    viewport.value = el || undefined\n  },\n  content,\n  onContentChange: (el) => {\n    content.value = el\n  },\n  scrollbarX,\n  scrollbarXEnabled,\n  scrollbarY,\n  scrollbarYEnabled,\n  onScrollbarXChange: (scrollbar) => {\n    scrollbarX.value = scrollbar || undefined\n  },\n  onScrollbarYChange: (scrollbar) => {\n    scrollbarY.value = scrollbar || undefined\n  },\n  onScrollbarXEnabledChange: (rendered) => {\n    scrollbarXEnabled.value = rendered\n  },\n  onScrollbarYEnabledChange: (rendered) => {\n    scrollbarYEnabled.value = rendered\n  },\n  onCornerWidthChange: (width) => {\n    cornerWidth.value = width\n  },\n  onCornerHeightChange: (height) => {\n    cornerHeight.value = height\n  },\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :dir=\"dir\"\n    :style=\"{\n      position: 'relative',\n      // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n      ['--reka-scroll-area-corner-width' as any]: `${cornerWidth}px`,\n      ['--reka-scroll-area-corner-height' as any]: `${cornerHeight}px`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["createContext","ref","toRefs","useDirection","useForwardExpose"],"mappings":";;;;;;;;AA2BO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnEA,mCAAqC,gBAAgB;;;;;;;;;;;AAuBzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,WAAA,GAAcC,QAAI,CAAC,CAAA;AACzB,IAAM,MAAA,YAAA,GAAeA,QAAI,CAAC,CAAA;AAC1B,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,UAAUA,OAAiB,EAAA;AACjC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAA,MAAM,aAAaA,OAAiB,EAAA;AACpC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AACnC,IAAM,MAAA,iBAAA,GAAoBA,QAAI,KAAK,CAAA;AAEnC,IAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAK,SAAS,eAAgB,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA;AAGH,IAAa,QAAA,CAAA;AAAA;AAAA,MAEX,QAAA;AAAA;AAAA,MAEA,SAAA;AAAA;AAAA,MAEA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,UAAA,KAAeC,wCAAiB,EAAA;AAEpE,IAA6B,4BAAA,CAAA;AAAA,MAC3B,IAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,EAAO,KAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,EAAM,IAAA,MAAA;AAAA,OACzB;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAO,KAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OAClB;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,mBAAA,EAAqB,CAAC,KAAU,KAAA;AAC9B,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AAAA,OACtB;AAAA,MACA,oBAAA,EAAsB,CAAC,MAAW,KAAA;AAChC,QAAA,YAAA,CAAa,KAAQ,GAAA,MAAA;AAAA;AACvB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaRoot.js

@@ -1,8 +1,8 @@
-import { defineComponent, ref, toRefs, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, toRefs, createBlock, openBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { c as createContext } from '../shared/createContext.js';
 import { u as useDirection } from '../shared/useDirection.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
-import { c as createContext } from '../shared/createContext.js';
 
 const [injectScrollAreaRootContext, provideScrollAreaRootContext] = createContext("ScrollAreaRoot");
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -53,7 +53,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       scrollArea,
       viewport,
       onViewportChange: (el) => {
-        viewport.value = el || undefined;
+        viewport.value = el || void 0;
       },
       content,
       onContentChange: (el) => {
@@ -64,10 +64,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       scrollbarY,
       scrollbarYEnabled,
       onScrollbarXChange: (scrollbar) => {
-        scrollbarX.value = scrollbar || undefined;
+        scrollbarX.value = scrollbar || void 0;
       },
       onScrollbarYChange: (scrollbar) => {
-        scrollbarY.value = scrollbar || undefined;
+        scrollbarY.value = scrollbar || void 0;
       },
       onScrollbarXEnabledChange: (rendered) => {
         scrollbarXEnabled.value = rendered;

package/dist/ScrollArea/ScrollAreaRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaRoot.js","sources":["../../src/ScrollArea/ScrollAreaRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, ScrollType } from './types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaRootContext {\n  type: Ref<ScrollType>\n  dir: Ref<Direction>\n  scrollHideDelay: Ref<number>\n  scrollArea: Ref<HTMLElement | undefined>\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | null) => void\n  content: Ref<HTMLElement | undefined>\n  onContentChange: (content: HTMLElement) => void\n  scrollbarX: Ref<HTMLElement | undefined>\n  onScrollbarXChange: (scrollbar: HTMLElement | null) => void\n  scrollbarXEnabled: Ref<boolean>\n  onScrollbarXEnabledChange: (rendered: boolean) => void\n  scrollbarY: Ref<HTMLElement | undefined>\n  onScrollbarYChange: (scrollbar: HTMLElement | null) => void\n  scrollbarYEnabled: Ref<boolean>\n  onScrollbarYEnabledChange: (rendered: boolean) => void\n  onCornerWidthChange: (width: number) => void\n  onCornerHeightChange: (height: number) => void\n}\n\nexport const [injectScrollAreaRootContext, provideScrollAreaRootContext]\n  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')\n\nexport interface ScrollAreaRootProps extends PrimitiveProps {\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.\n   *\n   * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>\n   * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>\n   * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>\n   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.\n   */\n  type?: ScrollType\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  /** If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars. */\n  scrollHideDelay?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ScrollAreaRootProps>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n})\n\nconst cornerWidth = ref(0)\nconst cornerHeight = ref(0)\nconst viewport = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nconst scrollbarX = ref<HTMLElement>()\nconst scrollbarY = ref<HTMLElement>()\nconst scrollbarXEnabled = ref(false)\nconst scrollbarYEnabled = ref(false)\n\nconst { type, dir: propDir, scrollHideDelay } = toRefs(props)\nconst dir = useDirection(propDir)\n\nfunction scrollTop() {\n  viewport.value?.scrollTo({\n    top: 0,\n  })\n}\nfunction scrollTopLeft() {\n  viewport.value?.scrollTo({\n    top: 0,\n    left: 0,\n  })\n}\n\ndefineExpose({\n  /** Viewport element within ScrollArea */\n  viewport,\n  /** Scroll viewport to top */\n  scrollTop,\n  /** Scroll viewport to top-left */\n  scrollTopLeft,\n})\n\nconst { forwardRef, currentElement: scrollArea } = useForwardExpose()\n\nprovideScrollAreaRootContext({\n  type,\n  dir,\n  scrollHideDelay,\n  scrollArea,\n  viewport,\n  onViewportChange: (el) => {\n    viewport.value = el || undefined\n  },\n  content,\n  onContentChange: (el) => {\n    content.value = el\n  },\n  scrollbarX,\n  scrollbarXEnabled,\n  scrollbarY,\n  scrollbarYEnabled,\n  onScrollbarXChange: (scrollbar) => {\n    scrollbarX.value = scrollbar || undefined\n  },\n  onScrollbarYChange: (scrollbar) => {\n    scrollbarY.value = scrollbar || undefined\n  },\n  onScrollbarXEnabledChange: (rendered) => {\n    scrollbarXEnabled.value = rendered\n  },\n  onScrollbarYEnabledChange: (rendered) => {\n    scrollbarYEnabled.value = rendered\n  },\n  onCornerWidthChange: (width) => {\n    cornerWidth.value = width\n  },\n  onCornerHeightChange: (height) => {\n    cornerHeight.value = height\n  },\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :dir=\"dir\"\n    :style=\"{\n      position: 'relative',\n      // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n      ['--reka-scroll-area-corner-width' as any]: `${cornerWidth}px`,\n      ['--reka-scroll-area-corner-height' as any]: `${cornerHeight}px`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnE,cAAqC,gBAAgB;;;;;;;;;;;AAuBzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,WAAA,GAAc,IAAI,CAAC,CAAA;AACzB,IAAM,MAAA,YAAA,GAAe,IAAI,CAAC,CAAA;AAC1B,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,UAAU,GAAiB,EAAA;AACjC,IAAA,MAAM,aAAa,GAAiB,EAAA;AACpC,IAAA,MAAM,aAAa,GAAiB,EAAA;AACpC,IAAM,MAAA,iBAAA,GAAoB,IAAI,KAAK,CAAA;AACnC,IAAM,MAAA,iBAAA,GAAoB,IAAI,KAAK,CAAA;AAEnC,IAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAK,SAAS,eAAgB,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA;AAGH,IAAa,QAAA,CAAA;AAAA;AAAA,MAEX,QAAA;AAAA;AAAA,MAEA,SAAA;AAAA;AAAA,MAEA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,UAAA,KAAe,gBAAiB,EAAA;AAEpE,IAA6B,4BAAA,CAAA;AAAA,MAC3B,IAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,EAAO,KAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,EAAM,IAAA,SAAA;AAAA,OACzB;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAO,KAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OAClB;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,SAAA;AAAA,OAClC;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,SAAA;AAAA,OAClC;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,mBAAA,EAAqB,CAAC,KAAU,KAAA;AAC9B,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AAAA,OACtB;AAAA,MACA,oBAAA,EAAsB,CAAC,MAAW,KAAA;AAChC,QAAA,YAAA,CAAa,KAAQ,GAAA,MAAA;AAAA;AACvB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaRoot.js","sources":["../../src/ScrollArea/ScrollAreaRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, ScrollType } from './types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaRootContext {\n  type: Ref<ScrollType>\n  dir: Ref<Direction>\n  scrollHideDelay: Ref<number>\n  scrollArea: Ref<HTMLElement | undefined>\n  viewport: Ref<HTMLElement | undefined>\n  onViewportChange: (viewport: HTMLElement | null) => void\n  content: Ref<HTMLElement | undefined>\n  onContentChange: (content: HTMLElement) => void\n  scrollbarX: Ref<HTMLElement | undefined>\n  onScrollbarXChange: (scrollbar: HTMLElement | null) => void\n  scrollbarXEnabled: Ref<boolean>\n  onScrollbarXEnabledChange: (rendered: boolean) => void\n  scrollbarY: Ref<HTMLElement | undefined>\n  onScrollbarYChange: (scrollbar: HTMLElement | null) => void\n  scrollbarYEnabled: Ref<boolean>\n  onScrollbarYEnabledChange: (rendered: boolean) => void\n  onCornerWidthChange: (width: number) => void\n  onCornerHeightChange: (height: number) => void\n}\n\nexport const [injectScrollAreaRootContext, provideScrollAreaRootContext]\n  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')\n\nexport interface ScrollAreaRootProps extends PrimitiveProps {\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.\n   *\n   * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>\n   * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>\n   * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>\n   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.\n   */\n  type?: ScrollType\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  /** If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars. */\n  scrollHideDelay?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ScrollAreaRootProps>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n})\n\nconst cornerWidth = ref(0)\nconst cornerHeight = ref(0)\nconst viewport = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nconst scrollbarX = ref<HTMLElement>()\nconst scrollbarY = ref<HTMLElement>()\nconst scrollbarXEnabled = ref(false)\nconst scrollbarYEnabled = ref(false)\n\nconst { type, dir: propDir, scrollHideDelay } = toRefs(props)\nconst dir = useDirection(propDir)\n\nfunction scrollTop() {\n  viewport.value?.scrollTo({\n    top: 0,\n  })\n}\nfunction scrollTopLeft() {\n  viewport.value?.scrollTo({\n    top: 0,\n    left: 0,\n  })\n}\n\ndefineExpose({\n  /** Viewport element within ScrollArea */\n  viewport,\n  /** Scroll viewport to top */\n  scrollTop,\n  /** Scroll viewport to top-left */\n  scrollTopLeft,\n})\n\nconst { forwardRef, currentElement: scrollArea } = useForwardExpose()\n\nprovideScrollAreaRootContext({\n  type,\n  dir,\n  scrollHideDelay,\n  scrollArea,\n  viewport,\n  onViewportChange: (el) => {\n    viewport.value = el || undefined\n  },\n  content,\n  onContentChange: (el) => {\n    content.value = el\n  },\n  scrollbarX,\n  scrollbarXEnabled,\n  scrollbarY,\n  scrollbarYEnabled,\n  onScrollbarXChange: (scrollbar) => {\n    scrollbarX.value = scrollbar || undefined\n  },\n  onScrollbarYChange: (scrollbar) => {\n    scrollbarY.value = scrollbar || undefined\n  },\n  onScrollbarXEnabledChange: (rendered) => {\n    scrollbarXEnabled.value = rendered\n  },\n  onScrollbarYEnabledChange: (rendered) => {\n    scrollbarYEnabled.value = rendered\n  },\n  onCornerWidthChange: (width) => {\n    cornerWidth.value = width\n  },\n  onCornerHeightChange: (height) => {\n    cornerHeight.value = height\n  },\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :dir=\"dir\"\n    :style=\"{\n      position: 'relative',\n      // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n      ['--reka-scroll-area-corner-width' as any]: `${cornerWidth}px`,\n      ['--reka-scroll-area-corner-height' as any]: `${cornerHeight}px`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnE,cAAqC,gBAAgB;;;;;;;;;;;AAuBzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,WAAA,GAAc,IAAI,CAAC,CAAA;AACzB,IAAM,MAAA,YAAA,GAAe,IAAI,CAAC,CAAA;AAC1B,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,UAAU,GAAiB,EAAA;AACjC,IAAA,MAAM,aAAa,GAAiB,EAAA;AACpC,IAAA,MAAM,aAAa,GAAiB,EAAA;AACpC,IAAM,MAAA,iBAAA,GAAoB,IAAI,KAAK,CAAA;AACnC,IAAM,MAAA,iBAAA,GAAoB,IAAI,KAAK,CAAA;AAEnC,IAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAK,SAAS,eAAgB,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5D,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,QAAA,CAAS,OAAO,QAAS,CAAA;AAAA,QACvB,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA;AAGH,IAAa,QAAA,CAAA;AAAA;AAAA,MAEX,QAAA;AAAA;AAAA,MAEA,SAAA;AAAA;AAAA,MAEA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,UAAA,KAAe,gBAAiB,EAAA;AAEpE,IAA6B,4BAAA,CAAA;AAAA,MAC3B,IAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,EAAO,KAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,EAAM,IAAA,MAAA;AAAA,OACzB;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAO,KAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OAClB;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,kBAAA,EAAoB,CAAC,SAAc,KAAA;AACjC,QAAA,UAAA,CAAW,QAAQ,SAAa,IAAA,MAAA;AAAA,OAClC;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,yBAAA,EAA2B,CAAC,QAAa,KAAA;AACvC,QAAA,iBAAA,CAAkB,KAAQ,GAAA,QAAA;AAAA,OAC5B;AAAA,MACA,mBAAA,EAAqB,CAAC,KAAU,KAAA;AAC9B,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AAAA,OACtB;AAAA,MACA,oBAAA,EAAsB,CAAC,MAAW,KAAA;AAChC,QAAA,YAAA,CAAa,KAAQ,GAAA,MAAA;AAAA;AACvB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbar.cjs

@@ -5,8 +5,8 @@ const ScrollArea_ScrollAreaScrollbarHover = require('./ScrollAreaScrollbarHover.
 const ScrollArea_ScrollAreaScrollbarScroll = require('./ScrollAreaScrollbarScroll.cjs');
 const ScrollArea_ScrollAreaScrollbarAuto = require('./ScrollAreaScrollbarAuto.cjs');
 const ScrollArea_ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.cjs');
-const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_createContext = require('../shared/createContext.cjs');
+const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const ScrollArea_ScrollAreaRoot = require('./ScrollAreaRoot.cjs');
 
 const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext] = shared_createContext.createContext("ScrollAreaScrollbar");

package/dist/ScrollArea/ScrollAreaScrollbar.js

@@ -1,10 +1,10 @@
-import { defineComponent, computed, watch, onUnmounted, toRefs, unref, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, computed, watch, onUnmounted, toRefs, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarHover.js';
 import { _ as _sfc_main$2 } from './ScrollAreaScrollbarScroll.js';
 import { _ as _sfc_main$3 } from './ScrollAreaScrollbarAuto.js';
 import { _ as _sfc_main$4 } from './ScrollAreaScrollbarVisible.js';
-import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { c as createContext } from '../shared/createContext.js';
+import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';
 
 const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext] = createContext("ScrollAreaScrollbar");

package/dist/ScrollArea/ScrollAreaScrollbarAuto.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
+import { defineComponent, ref, onMounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 import { useDebounceFn, useResizeObserver } from '@vueuse/core';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarVisible.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/ScrollArea/ScrollAreaScrollbarHover.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarAuto.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Presence } from '../Presence/Presence.js';

package/dist/ScrollArea/ScrollAreaScrollbarImpl.cjs

@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
       if (rootContext.viewport)
         rootContext.viewport.value.style.scrollBehavior = "";
-      rectRef.value = undefined;
+      rectRef.value = void 0;
     }
     function handleWheel(event) {
       const element = event.target;

package/dist/ScrollArea/ScrollAreaScrollbarImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarImpl.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { toInt } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n    - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","onMounted","onUnmounted","toInt","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"ScrollAreaScrollbarImpl.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { toInt } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n    - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","onMounted","onUnmounted","toInt","useResizeObserver"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,IAAO,GAAA,MAAA;AACb,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AACxE,IAAA,MAAM,mBAAmBC,+DAAiC,EAAA;AAE1D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,SAAA,KAAcC,wCAAiB,EAAA;AACnE,IAAM,MAAA,uBAAA,GAA0BC,QAAI,EAAE,CAAA;AACtC,IAAA,MAAM,UAAUA,OAAa,EAAA;AAE7B,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,MAAM,CAAI,GAAA,KAAA,CAAM,OAAU,GAAA,OAAA,CAAQ,KAAO,EAAA,IAAA;AACzC,QAAA,MAAM,CAAI,GAAA,KAAA,CAAM,OAAU,GAAA,OAAA,CAAQ,KAAO,EAAA,GAAA;AACzC,QAAA,IAAA,CAAK,cAAgB,EAAA,EAAE,CAAG,EAAA,CAAA,EAAG,CAAA;AAAA;AAC/B;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAA,MAAM,WAAc,GAAA,CAAA;AACpB,MAAI,IAAA,KAAA,CAAM,WAAW,WAAa,EAAA;AAChC,QAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,QAAQ,OAAA,CAAA,iBAAA,CAAkB,MAAM,SAAS,CAAA;AACzC,QAAQ,OAAA,CAAA,KAAA,GAAQ,SAAU,CAAA,KAAA,CAAO,qBAAsB,EAAA;AAIvD,QAAwB,uBAAA,CAAA,KAAA,GAAQ,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,gBAAA;AACpD,QAAS,QAAA,CAAA,IAAA,CAAK,MAAM,gBAAmB,GAAA,MAAA;AACvC,QAAA,IAAI,WAAY,CAAA,QAAA;AACd,UAAY,WAAA,CAAA,QAAA,CAAS,KAAO,CAAA,KAAA,CAAM,cAAiB,GAAA,MAAA;AAErD,QAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AACxB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AAGxB,IAAA,SAAS,gBAAgB,KAAqB,EAAA;AAC5C,MAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,MAAI,IAAA,OAAA,CAAQ,iBAAkB,CAAA,KAAA,CAAM,SAAS,CAAA;AAC3C,QAAQ,OAAA,CAAA,qBAAA,CAAsB,MAAM,SAAS,CAAA;AAE/C,MAAS,QAAA,CAAA,IAAA,CAAK,KAAM,CAAA,gBAAA,GAAmB,uBAAwB,CAAA,KAAA;AAC/D,MAAA,IAAI,WAAY,CAAA,QAAA;AACd,QAAY,WAAA,CAAA,QAAA,CAAS,KAAO,CAAA,KAAA,CAAM,cAAiB,GAAA,EAAA;AAErD,MAAA,OAAA,CAAQ,KAAQ,GAAA,MAAA;AAAA;AAGlB,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,MAAA,MAAM,gBAAmB,GAAA,SAAA,CAAU,KAAO,EAAA,QAAA,CAAS,OAAO,CAAA;AAC1D,MAAA,MAAM,eACF,uBAAwB,CAAA,KAAA,CAAM,MAAM,OACpC,GAAA,uBAAA,CAAwB,MAAM,KAAM,CAAA,QAAA;AACxC,MAAI,IAAA,gBAAA;AACF,QAAwB,uBAAA,CAAA,iBAAA,CAAkB,OAAO,YAAY,CAAA;AAAA;AAGjE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,iBAAiB,OAAS,EAAA,WAAA,EAAa,EAAE,OAAA,EAAS,OAAO,CAAA;AAAA,KACnE,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,SAAS,gBAAmB,GAAA;AAC1B,MAAA,IAAI,CAAC,SAAU,CAAA,KAAA;AACb,QAAA;AACF,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAA,uBAAA,CAAwB,gBAAiB,CAAA;AAAA,UACvC,OAAS,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,WAAe,IAAA,CAAA;AAAA,UACpD,QAAU,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,WAAe,IAAA,CAAA;AAAA,UACrD,SAAW,EAAA;AAAA,YACT,IAAA,EAAM,SAAU,CAAA,KAAA,CAAM,WAAe,IAAA,CAAA;AAAA,YACrC,cAAcC,sBAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAK,EAAE,WAAW,CAAA;AAAA,YACjE,YAAYA,sBAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAK,EAAE,YAAY;AAAA;AAClE,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAA,uBAAA,CAAwB,gBAAiB,CAAA;AAAA,UACvC,OAAS,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,UACrD,QAAU,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,UACtD,SAAW,EAAA;AAAA,YACT,IAAA,EAAM,SAAU,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,YACvC,cAAcA,sBAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAM,EAAE,WAAW,CAAA;AAAA,YAClE,YAAYA,sBAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAM,EAAE,YAAY;AAAA;AACnE,SACD,CAAA;AAAA;AACH;AAGF,IAAAC,sBAAA,CAAkB,WAAW,gBAAgB,CAAA;AAC7C,IAAkBA,sBAAA,CAAA,WAAA,CAAY,SAAS,gBAAgB,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarImpl.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import { t as toInt } from './utils.js';
 import { i as injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.js';
@@ -52,7 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
       if (rootContext.viewport)
         rootContext.viewport.value.style.scrollBehavior = "";
-      rectRef.value = undefined;
+      rectRef.value = void 0;
     }
     function handleWheel(event) {
       const element = event.target;