reka-ui 2.1.0 → 2.1.1

package/dist/Select/SelectContentImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isFirstValidItem) {\n      if (rootContext.isEmptyModelValue.value) {\n        firstValidItemFoundRef.value = true\n        selectedItem.value = node\n      }\n      else if (isSelectedItem) {\n        firstValidItemFoundRef.value = true\n        selectedItem.value = node\n      }\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\n          :style=\"{\n            // flex layout so we can place the scroll buttons properly\n            display: 'flex',\n            flexDirection: 'column',\n            // reset the outline by default as the content MAY get focused\n            outline: 'none',\n          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\nconst firstSelectedItemInArrayFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (rootContext.multiple.value) {\n      if (firstSelectedItemInArrayFoundRef.value) {\n        return\n      }\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n\n        // make sure to keep the first item highlighted when `multiple`\n        if (isSelectedItem) {\n          firstSelectedItemInArrayFoundRef.value = true\n        }\n      }\n    }\n    else {\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n      }\n    }\n\n    if (isFirstValidItem) {\n      firstValidItemFoundRef.value = true\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\n          :style=\"{\n            // flex layout so we can place the scroll buttons properly\n            display: 'flex',\n            flexDirection: 'column',\n            // reset the outline by default as the content MAY get focused\n            outline: 'none',\n          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0CO,MAAM,gCAAyD,GAAA;AAAA,EACpE,kBAAkB,MAAM;AAAA,GAAC;AAAA,EACzB,qBAAqB,MAAM;AAAA,GAAC;AAAA,EAC5B,iBAAiB,MAAM;AAAA;AACzB;AAgCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAe,cAAA,EAAA;AACf,IAAA,iBAAA,CAAkB,MAAM,QAAQ,CAAA;AAChC,IAAA,MAAM,EAAE,cAAA,EAAgB,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnD,IAAA,MAAM,UAAU,GAAiB,EAAA;AACjC,IAAA,aAAA,CAAc,OAAO,CAAA;AAErB,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAsB,EAAA,GAAI,YAAa,EAAA;AAEvD,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,eAAe,GAAiB,EAAA;AACtC,IAAA,MAAM,mBAAmB,GAAiB,EAAA;AAC1C,IAAM,MAAA,YAAA,GAAe,IAAI,KAAK,CAAA;AAC9B,IAAM,MAAA,sBAAA,GAAyB,IAAI,KAAK,CAAA;AACxC,IAAM,MAAA,gCAAA,GAAmC,IAAI,KAAK,CAAA;AAElD,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,YAAA,CAAa,SAAS,OAAQ,CAAA,KAAA;AAChC,QAAA,UAAA,CAAW,CAAC,YAAA,CAAa,KAAO,EAAA,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA;AAGlD,IAAA,KAAA,CAAM,cAAc,MAAM;AACxB,MAAkB,iBAAA,EAAA;AAAA,KACnB,CAAA;AAID,IAAM,MAAA,EAAE,YAAc,EAAA,wBAAA,EAA6B,GAAA,WAAA;AACnD,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,CAAC,OAAQ,CAAA,KAAA;AACX,QAAA;AACF,MAAA,IAAI,gBAAmB,GAAA,EAAE,CAAG,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA;AAEpC,MAAM,MAAA,iBAAA,GAAoB,CAAC,KAAwB,KAAA;AACjD,QAAmB,gBAAA,GAAA;AAAA,UACjB,GAAG,IAAK,CAAA,GAAA;AAAA,YACN,KAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAK,IAAA,wBAAA,CAAyB,OAAO,CAAK,IAAA,CAAA;AAAA,WAClE;AAAA,UACA,GAAG,IAAK,CAAA,GAAA;AAAA,YACN,KAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAK,IAAA,wBAAA,CAAyB,OAAO,CAAK,IAAA,CAAA;AAAA;AAClE,SACF;AAAA,OACF;AACA,MAAM,MAAA,eAAA,GAAkB,CAAC,KAAwB,KAAA;AAG/C,QAAA,IAAI,MAAM,WAAgB,KAAA,OAAA;AACxB,UAAA;AAGF,QAAA,IAAI,gBAAiB,CAAA,CAAA,IAAK,EAAM,IAAA,gBAAA,CAAiB,KAAK,EAAI,EAAA;AACxD,UAAA,KAAA,CAAM,cAAe,EAAA;AAAA,SAElB,MAAA;AAEH,UAAA,IAAI,CAAC,OAAA,CAAQ,KAAO,EAAA,QAAA,CAAS,MAAM,MAAqB,CAAA;AACtD,YAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AAEtB,QAAS,QAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAC7D,QAAA,wBAAA,CAAyB,KAAQ,GAAA,IAAA;AAAA,OACnC;AAEA,MAAI,IAAA,wBAAA,CAAyB,UAAU,IAAM,EAAA;AAC3C,QAAS,QAAA,CAAA,gBAAA,CAAiB,eAAe,iBAAiB,CAAA;AAC1D,QAAS,QAAA,CAAA,gBAAA,CAAiB,aAAa,eAAiB,EAAA;AAAA,UACtD,OAAS,EAAA,IAAA;AAAA,UACT,IAAM,EAAA;AAAA,SACP,CAAA;AAAA;AAGH,MAAA,SAAA,CAAU,MAAM;AACd,QAAS,QAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAC7D,QAAS,QAAA,CAAA,mBAAA,CAAoB,aAAa,eAAiB,EAAA;AAAA,UACzD,OAAS,EAAA;AAAA,SACV,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,UAAU,KAAM,CAAA,OAAA;AAG7D,MAAA,IAAI,MAAM,GAAQ,KAAA,KAAA;AAChB,QAAA,KAAA,CAAM,cAAe,EAAA;AAEvB,MAAA,IAAI,CAAC,aAAA,IAAiB,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA;AACzC,QAAsB,qBAAA,CAAA,KAAA,CAAM,GAAK,EAAA,QAAA,EAAU,CAAA;AAE7C,MAAI,IAAA,CAAC,WAAW,WAAa,EAAA,MAAA,EAAQ,KAAK,CAAE,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAC/D,QAAA,MAAM,kBAAkB,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACjD,QAAI,IAAA,cAAA,GAAiB,CAAC,GAAG,eAAe,CAAA;AAExC,QAAA,IAAI,CAAC,SAAW,EAAA,KAAK,CAAE,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AACvC,UAAiB,cAAA,GAAA,cAAA,CAAe,KAAM,EAAA,CAAE,OAAQ,EAAA;AAElD,QAAA,IAAI,CAAC,SAAW,EAAA,WAAW,EAAE,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAChD,UAAA,MAAM,iBAAiB,KAAM,CAAA,MAAA;AAC7B,UAAM,MAAA,YAAA,GAAe,cAAe,CAAA,OAAA,CAAQ,cAAc,CAAA;AAC1D,UAAiB,cAAA,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAExD,QAAW,UAAA,CAAA,MAAM,UAAW,CAAA,cAAc,CAAC,CAAA;AAC3C,QAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AACvB;AAGF,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,IAAI,MAAM,QAAa,KAAA,QAAA;AACrB,QAAO,OAAA,KAAA;AAAA,kBACG,EAAC;AAAA,KACd,CAAA;AAED,IAAM,MAAA,cAAA,GAAiB,eAAgB,CAAA,WAAA,CAAY,KAAK,CAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,OAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,IAAS,KAAA;AAC1B,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA;AAAA,OACnB;AAAA,MACA,eAAiB,EAAA,CAAC,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AAC1C,QAAA,MAAM,gBAAmB,GAAA,CAAC,sBAAuB,CAAA,KAAA,IAAS,CAAC,QAAA;AAC3D,QAAA,MAAM,iBAAiB,eAAgB,CAAA,WAAA,CAAY,WAAW,KAAO,EAAA,KAAA,EAAO,YAAY,EAAE,CAAA;AAE1F,QAAI,IAAA,WAAA,CAAY,SAAS,KAAO,EAAA;AAC9B,UAAA,IAAI,iCAAiC,KAAO,EAAA;AAC1C,YAAA;AAAA;AAEF,UAAA,IAAI,kBAAkB,gBAAkB,EAAA;AACtC,YAAA,YAAA,CAAa,KAAQ,GAAA,IAAA;AAGrB,YAAA,IAAI,cAAgB,EAAA;AAClB,cAAA,gCAAA,CAAiC,KAAQ,GAAA,IAAA;AAAA;AAC3C;AACF,SAEG,MAAA;AACH,UAAA,IAAI,kBAAkB,gBAAkB,EAAA;AACtC,YAAA,YAAA,CAAa,KAAQ,GAAA,IAAA;AAAA;AACvB;AAGF,QAAA,IAAI,gBAAkB,EAAA;AACpB,UAAA,sBAAA,CAAuB,KAAQ,GAAA,IAAA;AAAA;AACjC,OACF;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAa,MAAM;AACjB,QAAA,OAAA,CAAQ,OAAO,KAAM,EAAA;AAAA,OACvB;AAAA,MACA,mBAAqB,EAAA,CAAC,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AAC9C,QAAA,MAAM,gBAAmB,GAAA,CAAC,sBAAuB,CAAA,KAAA,IAAS,CAAC,QAAA;AAC3D,QAAA,MAAM,iBAAiB,eAAgB,CAAA,WAAA,CAAY,WAAW,KAAO,EAAA,KAAA,EAAO,YAAY,EAAE,CAAA;AAE1F,QAAA,IAAI,cAAkB,IAAA,gBAAA;AACpB,UAAA,gBAAA,CAAiB,KAAQ,GAAA,IAAA;AAAA,OAC7B;AAAA,MACA,iBAAA;AAAA,MACA,UAAU,KAAM,CAAA,QAAA;AAAA,MAChB,YAAA;AAAA,MACA,SAAW,EAAA;AAAA,KACZ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderRoot.cjs

@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     minStepsBetweenThumbs: { default: 0 },
     thumbAlignment: { default: "contain" },
     asChild: { type: Boolean },
-    as: {},
+    as: { default: "span" },
     name: {},
     required: { type: Boolean }
   },

package/dist/Slider/SliderRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.cjs","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { ARROW_KEYS, PAGE_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useForwardExpose","useFormControl","useCollection","useVModel","computed","ref","getClosestValueIndex","toRaw","getDecimalCount","roundValue","clamp","getNextSortedValues","hasMinStepsBetweenValues"],"mappings":"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"}
+{"version":3,"file":"SliderRoot.cjs","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { ARROW_KEYS, PAGE_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useForwardExpose","useFormControl","useCollection","useVModel","computed","ref","getClosestValueIndex","toRaw","getDecimalCount","roundValue","clamp","getNextSortedValues","hasMinStepsBetweenValues"],"mappings":"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"}

package/dist/Slider/SliderRoot.js

@@ -30,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     minStepsBetweenThumbs: { default: 0 },
     thumbAlignment: { default: "contain" },
     asChild: { type: Boolean },
-    as: {},
+    as: { default: "span" },
     name: {},
     required: { type: Boolean }
   },

package/dist/Slider/SliderRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.js","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { ARROW_KEYS, PAGE_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SliderRoot.js","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { ARROW_KEYS, PAGE_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Slider/SliderThumb.cjs

@@ -9,7 +9,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SliderThumb",
   props: {
     asChild: { type: Boolean },
-    as: {}
+    as: { default: "span" }
   },
   setup(__props) {
     const props = __props;

package/dist/Slider/SliderThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.cjs","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport SliderThumbImpl from './SliderThumbImpl.vue'\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\n\nconst props = defineProps<SliderThumbProps>()\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":["useCollection","useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumb.cjs","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport SliderThumbImpl from './SliderThumbImpl.vue'\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":["useCollection","useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}

package/dist/Slider/SliderThumb.js

@@ -7,7 +7,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SliderThumb",
   props: {
     asChild: { type: Boolean },
-    as: {}
+    as: { default: "span" }
   },
   setup(__props) {
     const props = __props;

package/dist/Slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport SliderThumbImpl from './SliderThumbImpl.vue'\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\n\nconst props = defineProps<SliderThumbProps>()\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumb.js","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport SliderThumbImpl from './SliderThumbImpl.vue'\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}

package/dist/TagsInput/TagsInputItemDelete.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const vue = require('vue');
+const ohash = require('ohash');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const TagsInput_TagsInputRoot = require('./TagsInputRoot.cjs');
@@ -21,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     function handleDelete() {
       if (disabled.value)
         return;
-      const index = context.modelValue.value.findIndex((i) => i === itemContext.value.value);
+      const index = context.modelValue.value.findIndex((i) => ohash.isEqual(i, itemContext.value.value));
       context.onRemoveValue(index);
     }
     return (_ctx, _cache) => {

package/dist/TagsInput/TagsInputItemDelete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInputItemDelete.cjs","sources":["../../src/TagsInput/TagsInputItemDelete.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectTagsInputItemContext } from './TagsInputItem.vue'\nimport { injectTagsInputRootContext } from './TagsInputRoot.vue'\nimport { computed } from 'vue'\nimport { useForwardExpose } from '@/shared'\n\nexport interface TagsInputItemDeleteProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<TagsInputItemDeleteProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst context = injectTagsInputRootContext()\nconst itemContext = injectTagsInputItemContext()\n\nconst disabled = computed(() => itemContext.disabled?.value || context.disabled.value)\n\nfunction handleDelete() {\n  if (disabled.value)\n    return\n  const index = context.modelValue.value.findIndex(i => i === itemContext.value.value)\n  context.onRemoveValue(index)\n}\n</script>\n\n<template>\n  <Primitive\n    tabindex=\"-1\"\n    v-bind=\"props\"\n    :aria-labelledby=\"itemContext.textId\"\n    :aria-current=\"itemContext.isSelected.value\"\n    :data-state=\"itemContext.isSelected.value ? 'active' : 'inactive'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    @click=\"handleDelete\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectTagsInputRootContext","injectTagsInputItemContext","computed"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiBA,wCAAA,EAAA;AACjB,IAAA,MAAM,UAAUC,kDAA2B,EAAA;AAC3C,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM,WAAA,CAAY,UAAU,KAAS,IAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAErF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,IAAI,QAAS,CAAA,KAAA;AACX,QAAA;AACF,MAAM,MAAA,KAAA,GAAQ,QAAQ,UAAW,CAAA,KAAA,CAAM,UAAU,CAAK,CAAA,KAAA,CAAA,KAAM,WAAY,CAAA,KAAA,CAAM,KAAK,CAAA;AACnF,MAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TagsInputItemDelete.cjs","sources":["../../src/TagsInput/TagsInputItemDelete.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectTagsInputItemContext } from './TagsInputItem.vue'\nimport { injectTagsInputRootContext } from './TagsInputRoot.vue'\nimport { computed } from 'vue'\nimport { useForwardExpose } from '@/shared'\nimport { isEqual } from 'ohash'\n\nexport interface TagsInputItemDeleteProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<TagsInputItemDeleteProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst context = injectTagsInputRootContext()\nconst itemContext = injectTagsInputItemContext()\n\nconst disabled = computed(() => itemContext.disabled?.value || context.disabled.value)\n\nfunction handleDelete() {\n  if (disabled.value)\n    return\n  const index = context.modelValue.value.findIndex(i => isEqual(i, itemContext.value.value))\n  context.onRemoveValue(index)\n}\n</script>\n\n<template>\n  <Primitive\n    tabindex=\"-1\"\n    v-bind=\"props\"\n    :aria-labelledby=\"itemContext.textId\"\n    :aria-current=\"itemContext.isSelected.value\"\n    :data-state=\"itemContext.isSelected.value ? 'active' : 'inactive'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    @click=\"handleDelete\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectTagsInputRootContext","injectTagsInputItemContext","computed","isEqual"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiBA,wCAAA,EAAA;AACjB,IAAA,MAAM,UAAUC,kDAA2B,EAAA;AAC3C,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM,WAAA,CAAY,UAAU,KAAS,IAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAErF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,IAAI,QAAS,CAAA,KAAA;AACX,QAAA;AACF,MAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,UAAA,CAAW,KAAM,CAAA,SAAA,CAAU,CAAK,CAAA,KAAAC,aAAA,CAAQ,CAAG,EAAA,WAAA,CAAY,KAAM,CAAA,KAAK,CAAC,CAAA;AACzF,MAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TagsInput/TagsInputItemDelete.js

@@ -1,4 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { isEqual } from 'ohash';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectTagsInputRootContext } from './TagsInputRoot.js';
@@ -19,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function handleDelete() {
       if (disabled.value)
         return;
-      const index = context.modelValue.value.findIndex((i) => i === itemContext.value.value);
+      const index = context.modelValue.value.findIndex((i) => isEqual(i, itemContext.value.value));
       context.onRemoveValue(index);
     }
     return (_ctx, _cache) => {

package/dist/TagsInput/TagsInputItemDelete.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInputItemDelete.js","sources":["../../src/TagsInput/TagsInputItemDelete.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectTagsInputItemContext } from './TagsInputItem.vue'\nimport { injectTagsInputRootContext } from './TagsInputRoot.vue'\nimport { computed } from 'vue'\nimport { useForwardExpose } from '@/shared'\n\nexport interface TagsInputItemDeleteProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<TagsInputItemDeleteProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst context = injectTagsInputRootContext()\nconst itemContext = injectTagsInputItemContext()\n\nconst disabled = computed(() => itemContext.disabled?.value || context.disabled.value)\n\nfunction handleDelete() {\n  if (disabled.value)\n    return\n  const index = context.modelValue.value.findIndex(i => i === itemContext.value.value)\n  context.onRemoveValue(index)\n}\n</script>\n\n<template>\n  <Primitive\n    tabindex=\"-1\"\n    v-bind=\"props\"\n    :aria-labelledby=\"itemContext.textId\"\n    :aria-current=\"itemContext.isSelected.value\"\n    :data-state=\"itemContext.isSelected.value ? 'active' : 'inactive'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    @click=\"handleDelete\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,UAAU,0BAA2B,EAAA;AAC3C,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM,WAAA,CAAY,UAAU,KAAS,IAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAErF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,IAAI,QAAS,CAAA,KAAA;AACX,QAAA;AACF,MAAM,MAAA,KAAA,GAAQ,QAAQ,UAAW,CAAA,KAAA,CAAM,UAAU,CAAK,CAAA,KAAA,CAAA,KAAM,WAAY,CAAA,KAAA,CAAM,KAAK,CAAA;AACnF,MAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TagsInputItemDelete.js","sources":["../../src/TagsInput/TagsInputItemDelete.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectTagsInputItemContext } from './TagsInputItem.vue'\nimport { injectTagsInputRootContext } from './TagsInputRoot.vue'\nimport { computed } from 'vue'\nimport { useForwardExpose } from '@/shared'\nimport { isEqual } from 'ohash'\n\nexport interface TagsInputItemDeleteProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<TagsInputItemDeleteProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst context = injectTagsInputRootContext()\nconst itemContext = injectTagsInputItemContext()\n\nconst disabled = computed(() => itemContext.disabled?.value || context.disabled.value)\n\nfunction handleDelete() {\n  if (disabled.value)\n    return\n  const index = context.modelValue.value.findIndex(i => isEqual(i, itemContext.value.value))\n  context.onRemoveValue(index)\n}\n</script>\n\n<template>\n  <Primitive\n    tabindex=\"-1\"\n    v-bind=\"props\"\n    :aria-labelledby=\"itemContext.textId\"\n    :aria-current=\"itemContext.isSelected.value\"\n    :data-state=\"itemContext.isSelected.value ? 'active' : 'inactive'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    @click=\"handleDelete\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,UAAU,0BAA2B,EAAA;AAC3C,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM,WAAA,CAAY,UAAU,KAAS,IAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAErF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,IAAI,QAAS,CAAA,KAAA;AACX,QAAA;AACF,MAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,UAAA,CAAW,KAAM,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,OAAA,CAAQ,CAAG,EAAA,WAAA,CAAY,KAAM,CAAA,KAAK,CAAC,CAAA;AACzF,MAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastClose.cjs

@@ -22,13 +22,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createVNode(vue.unref(Primitive_Primitive.Primitive), vue.mergeProps(props, {
             ref: vue.unref(forwardRef),
             type: _ctx.as === "button" ? "button" : undefined,
-            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(rootContext).onClose())
+            onClick: vue.unref(rootContext).onClose
           }), {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 16, ["type"])
+          }, 16, ["type", "onClick"])
         ]),
         _: 3
       });

package/dist/Toast/ToastClose.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastClose.cjs","sources":["../../src/Toast/ToastClose.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToastCloseProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport ToastAnnounceExclude from './ToastAnnounceExclude.vue'\nimport { injectToastRootContext } from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastCloseProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToastRootContext()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToastAnnounceExclude as-child>\n    <Primitive\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined \"\n      @click=\"rootContext.onClose()\"\n    >\n      <slot />\n    </Primitive>\n  </ToastAnnounceExclude>\n</template>\n"],"names":["injectToastRootContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,0CAAuB,EAAA;AAC3C,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToastClose.cjs","sources":["../../src/Toast/ToastClose.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToastCloseProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport ToastAnnounceExclude from './ToastAnnounceExclude.vue'\nimport { injectToastRootContext } from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastCloseProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToastRootContext()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToastAnnounceExclude as-child>\n    <Primitive\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined \"\n      @click=\"rootContext.onClose\"\n    >\n      <slot />\n    </Primitive>\n  </ToastAnnounceExclude>\n</template>\n"],"names":["injectToastRootContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,0CAAuB,EAAA;AAC3C,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastClose.js

@@ -20,13 +20,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(Primitive), mergeProps(props, {
             ref: unref(forwardRef),
             type: _ctx.as === "button" ? "button" : undefined,
-            onClick: _cache[0] || (_cache[0] = ($event) => unref(rootContext).onClose())
+            onClick: unref(rootContext).onClose
           }), {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 16, ["type"])
+          }, 16, ["type", "onClick"])
         ]),
         _: 3
       });

package/dist/Toast/ToastClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastClose.js","sources":["../../src/Toast/ToastClose.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToastCloseProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport ToastAnnounceExclude from './ToastAnnounceExclude.vue'\nimport { injectToastRootContext } from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastCloseProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToastRootContext()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToastAnnounceExclude as-child>\n    <Primitive\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined \"\n      @click=\"rootContext.onClose()\"\n    >\n      <slot />\n    </Primitive>\n  </ToastAnnounceExclude>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,sBAAuB,EAAA;AAC3C,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToastClose.js","sources":["../../src/Toast/ToastClose.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToastCloseProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport ToastAnnounceExclude from './ToastAnnounceExclude.vue'\nimport { injectToastRootContext } from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastCloseProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToastRootContext()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToastAnnounceExclude as-child>\n    <Primitive\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined \"\n      @click=\"rootContext.onClose\"\n    >\n      <slot />\n    </Primitive>\n  </ToastAnnounceExclude>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,sBAAuB,EAAA;AAC3C,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastRoot.cjs

@@ -48,6 +48,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               event.currentTarget.setAttribute("data-swipe", "start");
             }),
             onSwipeMove: _cache[5] || (_cache[5] = (event) => {
+              emits("swipeMove", event);
               const { x, y } = event.detail.delta;
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "move");
@@ -55,6 +56,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               target.style.setProperty("--reka-toast-swipe-move-y", `${y}px`);
             }),
             onSwipeCancel: _cache[6] || (_cache[6] = (event) => {
+              emits("swipeCancel", event);
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "cancel");
               target.style.removeProperty("--reka-toast-swipe-move-x");
@@ -63,6 +65,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               target.style.removeProperty("--reka-toast-swipe-end-y");
             }),
             onSwipeEnd: _cache[7] || (_cache[7] = (event) => {
+              emits("swipeEnd", event);
               const { x, y } = event.detail.delta;
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "end");

package/dist/Toast/ToastRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRoot.cjs","sources":["../../src/Toast/ToastRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ToastRootImplEmits, ToastRootImplProps } from './ToastRootImpl.vue'\nimport { useForwardExpose } from '@/shared'\n\nexport type ToastRootEmits = Omit<ToastRootImplEmits, 'close'> & {\n  /** Event handler called when the open state changes */\n  'update:open': [value: boolean]\n}\n\nexport interface ToastRootProps extends ToastRootImplProps {\n  /** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Presence } from '@/Presence'\nimport ToastRootImpl from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastRootProps>(), {\n  type: 'foreground',\n  open: undefined,\n  defaultOpen: true,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Remaining time (in ms) */\n    remaining: number\n    /** Total time the toast will remain visible for (in ms) */\n    duration: number\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n</script>\n\n<template>\n  <Presence :present=\"forceMount || open\">\n    <ToastRootImpl\n      :ref=\"forwardRef\"\n      v-slot=\"{ remaining, duration: _duration }\"\n      :open=\"open\"\n      :type=\"type\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :duration=\"duration\"\n      v-bind=\"$attrs\"\n      @close=\"open = false\"\n      @pause=\"emits('pause')\"\n      @resume=\"emits('resume')\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @swipe-start=\"(event) => {\n        emits('swipeStart', event);\n        (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');\n      }\"\n      @swipe-move=\"(event) => {\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'move');\n        target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);\n      }\"\n      @swipe-cancel=\"(event) => {\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'cancel');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.removeProperty('--reka-toast-swipe-end-x');\n        target.style.removeProperty('--reka-toast-swipe-end-y');\n      }\"\n      @swipe-end=\"(event) => {\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'end');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);\n        open = false;\n      }\"\n    >\n      <slot\n        :remaining=\"remaining\"\n        :duration=\"_duration\"\n        :open=\"open\"\n      />\n    </ToastRootImpl>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","useVModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAad,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AACxC,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToastRoot.cjs","sources":["../../src/Toast/ToastRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ToastRootImplEmits, ToastRootImplProps } from './ToastRootImpl.vue'\nimport { useForwardExpose } from '@/shared'\n\nexport type ToastRootEmits = Omit<ToastRootImplEmits, 'close'> & {\n  /** Event handler called when the open state changes */\n  'update:open': [value: boolean]\n}\n\nexport interface ToastRootProps extends ToastRootImplProps {\n  /** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Presence } from '@/Presence'\nimport ToastRootImpl from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastRootProps>(), {\n  type: 'foreground',\n  open: undefined,\n  defaultOpen: true,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Remaining time (in ms) */\n    remaining: number\n    /** Total time the toast will remain visible for (in ms) */\n    duration: number\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n</script>\n\n<template>\n  <Presence :present=\"forceMount || open\">\n    <ToastRootImpl\n      :ref=\"forwardRef\"\n      v-slot=\"{ remaining, duration: _duration }\"\n      :open=\"open\"\n      :type=\"type\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :duration=\"duration\"\n      v-bind=\"$attrs\"\n      @close=\"open = false\"\n      @pause=\"emits('pause')\"\n      @resume=\"emits('resume')\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @swipe-start=\"(event) => {\n        emits('swipeStart', event);\n        (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');\n      }\"\n      @swipe-move=\"(event) => {\n        emits('swipeMove', event);\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'move');\n        target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);\n      }\"\n      @swipe-cancel=\"(event) => {\n        emits('swipeCancel', event);\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'cancel');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.removeProperty('--reka-toast-swipe-end-x');\n        target.style.removeProperty('--reka-toast-swipe-end-y');\n      }\"\n      @swipe-end=\"(event) => {\n        emits('swipeEnd', event);\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'end');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);\n        open = false;\n      }\"\n    >\n      <slot\n        :remaining=\"remaining\"\n        :duration=\"_duration\"\n        :open=\"open\"\n      />\n    </ToastRootImpl>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","useVModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAad,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AACxC,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastRoot.js

@@ -46,6 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               event.currentTarget.setAttribute("data-swipe", "start");
             }),
             onSwipeMove: _cache[5] || (_cache[5] = (event) => {
+              emits("swipeMove", event);
               const { x, y } = event.detail.delta;
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "move");
@@ -53,6 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               target.style.setProperty("--reka-toast-swipe-move-y", `${y}px`);
             }),
             onSwipeCancel: _cache[6] || (_cache[6] = (event) => {
+              emits("swipeCancel", event);
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "cancel");
               target.style.removeProperty("--reka-toast-swipe-move-x");
@@ -61,6 +63,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               target.style.removeProperty("--reka-toast-swipe-end-y");
             }),
             onSwipeEnd: _cache[7] || (_cache[7] = (event) => {
+              emits("swipeEnd", event);
               const { x, y } = event.detail.delta;
               const target = event.currentTarget;
               target.setAttribute("data-swipe", "end");

package/dist/Toast/ToastRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRoot.js","sources":["../../src/Toast/ToastRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ToastRootImplEmits, ToastRootImplProps } from './ToastRootImpl.vue'\nimport { useForwardExpose } from '@/shared'\n\nexport type ToastRootEmits = Omit<ToastRootImplEmits, 'close'> & {\n  /** Event handler called when the open state changes */\n  'update:open': [value: boolean]\n}\n\nexport interface ToastRootProps extends ToastRootImplProps {\n  /** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Presence } from '@/Presence'\nimport ToastRootImpl from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastRootProps>(), {\n  type: 'foreground',\n  open: undefined,\n  defaultOpen: true,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Remaining time (in ms) */\n    remaining: number\n    /** Total time the toast will remain visible for (in ms) */\n    duration: number\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n</script>\n\n<template>\n  <Presence :present=\"forceMount || open\">\n    <ToastRootImpl\n      :ref=\"forwardRef\"\n      v-slot=\"{ remaining, duration: _duration }\"\n      :open=\"open\"\n      :type=\"type\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :duration=\"duration\"\n      v-bind=\"$attrs\"\n      @close=\"open = false\"\n      @pause=\"emits('pause')\"\n      @resume=\"emits('resume')\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @swipe-start=\"(event) => {\n        emits('swipeStart', event);\n        (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');\n      }\"\n      @swipe-move=\"(event) => {\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'move');\n        target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);\n      }\"\n      @swipe-cancel=\"(event) => {\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'cancel');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.removeProperty('--reka-toast-swipe-end-x');\n        target.style.removeProperty('--reka-toast-swipe-end-y');\n      }\"\n      @swipe-end=\"(event) => {\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'end');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);\n        open = false;\n      }\"\n    >\n      <slot\n        :remaining=\"remaining\"\n        :duration=\"_duration\"\n        :open=\"open\"\n      />\n    </ToastRootImpl>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAad,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToastRoot.js","sources":["../../src/Toast/ToastRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ToastRootImplEmits, ToastRootImplProps } from './ToastRootImpl.vue'\nimport { useForwardExpose } from '@/shared'\n\nexport type ToastRootEmits = Omit<ToastRootImplEmits, 'close'> & {\n  /** Event handler called when the open state changes */\n  'update:open': [value: boolean]\n}\n\nexport interface ToastRootProps extends ToastRootImplProps {\n  /** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Presence } from '@/Presence'\nimport ToastRootImpl from './ToastRootImpl.vue'\n\nconst props = withDefaults(defineProps<ToastRootProps>(), {\n  type: 'foreground',\n  open: undefined,\n  defaultOpen: true,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Remaining time (in ms) */\n    remaining: number\n    /** Total time the toast will remain visible for (in ms) */\n    duration: number\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n</script>\n\n<template>\n  <Presence :present=\"forceMount || open\">\n    <ToastRootImpl\n      :ref=\"forwardRef\"\n      v-slot=\"{ remaining, duration: _duration }\"\n      :open=\"open\"\n      :type=\"type\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :duration=\"duration\"\n      v-bind=\"$attrs\"\n      @close=\"open = false\"\n      @pause=\"emits('pause')\"\n      @resume=\"emits('resume')\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @swipe-start=\"(event) => {\n        emits('swipeStart', event);\n        (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');\n      }\"\n      @swipe-move=\"(event) => {\n        emits('swipeMove', event);\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'move');\n        target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);\n      }\"\n      @swipe-cancel=\"(event) => {\n        emits('swipeCancel', event);\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'cancel');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.removeProperty('--reka-toast-swipe-end-x');\n        target.style.removeProperty('--reka-toast-swipe-end-y');\n      }\"\n      @swipe-end=\"(event) => {\n        emits('swipeEnd', event);\n        const { x, y } = event.detail.delta;\n        const target = event.currentTarget as HTMLElement\n        target.setAttribute('data-swipe', 'end');\n        target.style.removeProperty('--reka-toast-swipe-move-x');\n        target.style.removeProperty('--reka-toast-swipe-move-y');\n        target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);\n        target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);\n        open = false;\n      }\"\n    >\n      <slot\n        :remaining=\"remaining\"\n        :duration=\"_duration\"\n        :open=\"open\"\n      />\n    </ToastRootImpl>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAad,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastRootImpl.cjs

@@ -54,11 +54,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       closeTimerStartTimeRef.value = (/* @__PURE__ */ new Date()).getTime();
       closeTimerRef.value = window.setTimeout(handleClose, duration2);
     }
-    function handleClose() {
+    function handleClose(event) {
+      const isNonPointerEvent = event?.pointerType === "";
       const isFocusInToast = currentElement.value?.contains(shared_getActiveElement.getActiveElement());
-      if (isFocusInToast)
+      if (isFocusInToast && isNonPointerEvent)
         providerContext.viewport.value?.focus();
-      providerContext.isClosePausedRef.value = false;
+      if (isNonPointerEvent) {
+        providerContext.isClosePausedRef.value = false;
+      }
       emits("close");
     }
     const announceTextContent = vue.computed(() => currentElement.value ? Toast_utils.getAnnounceTextContent(currentElement.value) : null);

package/dist/Toast/ToastRootImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRootImpl.cjs","sources":["../../src/Toast/ToastRootImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isClient } from '@vueuse/shared'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { SwipeEvent } from './utils'\nimport { createContext, getActiveElement, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nexport type ToastRootImplEmits = {\n  close: []\n  /** Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`. */\n  escapeKeyDown: [event: KeyboardEvent]\n  /** Event handler called when the dismiss timer is paused. This occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred. */\n  pause: []\n  /** Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused. */\n  resume: []\n  /** Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeStart: [event: SwipeEvent]\n  /** Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeMove: [event: SwipeEvent]\n  swipeCancel: [event: SwipeEvent]\n  /** Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeEnd: [event: SwipeEvent]\n}\n\nexport interface ToastRootImplProps extends PrimitiveProps {\n  /**\n   * Control the sensitivity of the toast for accessibility purposes.\n   *\n   * For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.\n   */\n  type?: 'foreground' | 'background'\n  /**\n   * The controlled open state of the dialog. Can be bind as `v-model:open`.\n   */\n  open?: boolean\n  /**\n   * Time in milliseconds that toast should remain visible for. Overrides value\n   * given to `ToastProvider`.\n   */\n  duration?: number\n}\n\nexport const [injectToastRootContext, provideToastRootContext]\n  = createContext<{ onClose: () => void }>('ToastRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'\nimport { injectToastProviderContext } from './ToastProvider.vue'\nimport { TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME, getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'\nimport { onKeyStroke, useRafFn } from '@vueuse/core'\nimport ToastAnnounce from './ToastAnnounce.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ToastRootImplProps>(), {\n  open: false,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootImplEmits>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst providerContext = injectToastProviderContext()\nconst pointerStartRef = ref<{ x: number, y: number } | null>(null)\nconst swipeDeltaRef = ref<{ x: number, y: number } | null>(null)\nconst duration = computed(\n  () => typeof props.duration === 'number'\n    ? props.duration\n    : providerContext.duration.value,\n)\n\nconst closeTimerStartTimeRef = ref(0)\nconst closeTimerRemainingTimeRef = ref(duration.value)\nconst closeTimerRef = ref(0)\nconst remainingTime = ref(duration.value)\n\nconst remainingRaf = useRafFn(() => {\n  const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value\n  remainingTime.value = Math.max(closeTimerRemainingTimeRef.value - elapsedTime, 0)\n}, { fpsLimit: 60 })\n\nfunction startTimer(duration: number) {\n  if (duration <= 0 || duration === Number.POSITIVE_INFINITY)\n    return\n  // startTimer is used inside a watch with immediate set to true.\n  // This results in code execution during SSR.\n  // Ensure this code only runs in a browser environment\n  if (!isClient)\n    return\n  window.clearTimeout(closeTimerRef.value)\n  closeTimerStartTimeRef.value = new Date().getTime()\n  closeTimerRef.value = window.setTimeout(handleClose, duration)\n}\n\nfunction handleClose() {\n  // focus viewport if focus is within toast to read the remaining toast\n  // count to SR users and ensure focus isn't lost\n  const isFocusInToast = currentElement.value?.contains(getActiveElement())\n  if (isFocusInToast)\n    providerContext.viewport.value?.focus()\n\n  // when manually close the toast, we reset isClosePausedRef\n  providerContext.isClosePausedRef.value = false\n  emits('close')\n}\n\nconst announceTextContent = computed(() => currentElement.value ? getAnnounceTextContent(currentElement.value) : null)\n\nif (props.type && !['foreground', 'background'].includes(props.type)) {\n  const error = 'Invalid prop `type` supplied to `Toast`. Expected `foreground | background`.'\n  throw new Error(error)\n}\n\nwatchEffect((cleanupFn) => {\n  const viewport = providerContext.viewport.value\n  if (viewport) {\n    const handleResume = () => {\n      startTimer(closeTimerRemainingTimeRef.value)\n      remainingRaf.resume()\n      emits('resume')\n    }\n    const handlePause = () => {\n      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value\n      closeTimerRemainingTimeRef.value = closeTimerRemainingTimeRef.value - elapsedTime\n      window.clearTimeout(closeTimerRef.value)\n      remainingRaf.pause()\n      emits('pause')\n    }\n    viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n    viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n    return () => {\n      viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n      viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n    }\n  }\n})\n\n// start timer when toast opens or duration changes.\n// we include `open` in deps because closed !== unmounted when animating\n// so it could reopen before being completely unmounted\nwatch(() => [props.open, duration.value], () => {\n  // Reset the timer when the toast is rerendered with the new duration\n  closeTimerRemainingTimeRef.value = duration.value\n\n  if (props.open && !providerContext.isClosePausedRef.value)\n    startTimer(duration.value)\n}, { immediate: true })\n\nonKeyStroke('Escape', (event) => {\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented) {\n    providerContext.isFocusedToastEscapeKeyDownRef.value = true\n    handleClose()\n  }\n})\n\nonMounted(() => {\n  providerContext.onToastAdd()\n})\nonUnmounted(() => {\n  providerContext.onToastRemove()\n})\n\nprovideToastRootContext({ onClose: handleClose })\n</script>\n\n<template>\n  <ToastAnnounce\n    v-if=\"announceTextContent\"\n    role=\"alert\"\n    :aria-live=\"type === 'foreground' ? 'assertive' : 'polite'\"\n    aria-atomic=\"true\"\n  >\n    {{ announceTextContent }}\n  </ToastAnnounce>\n\n  <Teleport\n    v-if=\"providerContext.viewport.value\"\n    :to=\"providerContext.viewport.value\"\n  >\n    <CollectionItem>\n      <Primitive\n        :ref=\"forwardRef\"\n        role=\"alert\"\n        aria-live=\"off\"\n        aria-atomic=\"true\"\n        tabindex=\"0\"\n        v-bind=\"$attrs\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :data-state=\"open ? 'open' : 'closed'\"\n        :data-swipe-direction=\"providerContext.swipeDirection.value\"\n        :style=\"{ userSelect: 'none', touchAction: 'none' }\"\n        @pointerdown.left=\"(event: PointerEvent) => {\n          pointerStartRef = { x: event.clientX, y: event.clientY };\n        }\"\n        @pointermove=\"(event: PointerEvent) => {\n          if (!pointerStartRef) return;\n          const x = event.clientX - pointerStartRef.x;\n          const y = event.clientY - pointerStartRef.y;\n          const hasSwipeMoveStarted = Boolean(swipeDeltaRef);\n          const isHorizontalSwipe = ['left', 'right'].includes(providerContext.swipeDirection.value);\n          const clamp = ['left', 'up'].includes(providerContext.swipeDirection.value)\n            ? Math.min\n            : Math.max;\n          const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;\n          const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;\n          const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;\n          const delta = { x: clampedX, y: clampedY };\n          const eventDetail = { originalEvent: event, delta };\n          if (hasSwipeMoveStarted) {\n            swipeDeltaRef = delta;\n            handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, (ev: SwipeEvent) => emits('swipeMove', ev), eventDetail);\n          }\n          else if (isDeltaInDirection(delta, providerContext.swipeDirection.value, moveStartBuffer)) {\n            swipeDeltaRef = delta;\n            handleAndDispatchCustomEvent(TOAST_SWIPE_START, (ev: SwipeEvent) => emits('swipeStart', ev), eventDetail);\n            (event.target as HTMLElement).setPointerCapture(event.pointerId);\n          }\n          else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {\n            // User is swiping in wrong direction so we disable swipe gesture\n            // for the current pointer down interaction\n            pointerStartRef = null;\n          }\n        }\"\n        @pointerup=\"(event: PointerEvent) => {\n          const delta = swipeDeltaRef;\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n          swipeDeltaRef = null;\n          pointerStartRef = null;\n          if (delta) {\n            const toast = event.currentTarget;\n            const eventDetail = { originalEvent: event, delta };\n            if (\n              isDeltaInDirection(delta, providerContext.swipeDirection.value, providerContext.swipeThreshold.value)\n            ) {\n              handleAndDispatchCustomEvent(TOAST_SWIPE_END, (ev: SwipeEvent) => emits('swipeEnd', ev), eventDetail);\n            }\n            else {\n              handleAndDispatchCustomEvent(TOAST_SWIPE_CANCEL, (ev: SwipeEvent) => emits('swipeCancel', ev), eventDetail);\n            }\n            // Prevent click event from triggering on items within the toast when\n            // pointer up is part of a swipe gesture\n            toast?.addEventListener('click', (event) => event.preventDefault(), {\n              once: true,\n            });\n          }\n        }\"\n      >\n        <slot\n          :remaining=\"remainingTime\"\n          :duration=\"duration\"\n        />\n      </Primitive>\n    </CollectionItem>\n  </Teleport>\n</template>\n"],"names":["createContext","useForwardExpose","useCollection","injectToastProviderContext","ref","computed","useRafFn","duration","isClient","getActiveElement","getAnnounceTextContent","watchEffect","VIEWPORT_PAUSE","VIEWPORT_RESUME","watch","onKeyStroke","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"ToastRootImpl.cjs","sources":["../../src/Toast/ToastRootImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isClient } from '@vueuse/shared'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { SwipeEvent } from './utils'\nimport { createContext, getActiveElement, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nexport type ToastRootImplEmits = {\n  close: []\n  /** Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`. */\n  escapeKeyDown: [event: KeyboardEvent]\n  /** Event handler called when the dismiss timer is paused. This occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred. */\n  pause: []\n  /** Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused. */\n  resume: []\n  /** Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeStart: [event: SwipeEvent]\n  /** Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeMove: [event: SwipeEvent]\n  swipeCancel: [event: SwipeEvent]\n  /** Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`. */\n  swipeEnd: [event: SwipeEvent]\n}\n\nexport interface ToastRootImplProps extends PrimitiveProps {\n  /**\n   * Control the sensitivity of the toast for accessibility purposes.\n   *\n   * For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.\n   */\n  type?: 'foreground' | 'background'\n  /**\n   * The controlled open state of the dialog. Can be bind as `v-model:open`.\n   */\n  open?: boolean\n  /**\n   * Time in milliseconds that toast should remain visible for. Overrides value\n   * given to `ToastProvider`.\n   */\n  duration?: number\n}\n\nexport const [injectToastRootContext, provideToastRootContext]\n  = createContext<{ onClose: () => void }>('ToastRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'\nimport { injectToastProviderContext } from './ToastProvider.vue'\nimport { TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME, getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'\nimport { onKeyStroke, useRafFn } from '@vueuse/core'\nimport ToastAnnounce from './ToastAnnounce.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ToastRootImplProps>(), {\n  open: false,\n  as: 'li',\n})\n\nconst emits = defineEmits<ToastRootImplEmits>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst providerContext = injectToastProviderContext()\nconst pointerStartRef = ref<{ x: number, y: number } | null>(null)\nconst swipeDeltaRef = ref<{ x: number, y: number } | null>(null)\nconst duration = computed(\n  () => typeof props.duration === 'number'\n    ? props.duration\n    : providerContext.duration.value,\n)\n\nconst closeTimerStartTimeRef = ref(0)\nconst closeTimerRemainingTimeRef = ref(duration.value)\nconst closeTimerRef = ref(0)\nconst remainingTime = ref(duration.value)\n\nconst remainingRaf = useRafFn(() => {\n  const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value\n  remainingTime.value = Math.max(closeTimerRemainingTimeRef.value - elapsedTime, 0)\n}, { fpsLimit: 60 })\n\nfunction startTimer(duration: number) {\n  if (duration <= 0 || duration === Number.POSITIVE_INFINITY)\n    return\n  // startTimer is used inside a watch with immediate set to true.\n  // This results in code execution during SSR.\n  // Ensure this code only runs in a browser environment\n  if (!isClient)\n    return\n  window.clearTimeout(closeTimerRef.value)\n  closeTimerStartTimeRef.value = new Date().getTime()\n  closeTimerRef.value = window.setTimeout(handleClose, duration)\n}\n\nfunction handleClose(event?: PointerEvent) {\n  const isNonPointerEvent = event?.pointerType === ''\n\n  // reka: update to only perform focus when user focus via keyboard\n  // focus viewport if focus is within toast to read the remaining toast\n  // count to SR users and ensure focus isn't lost\n  const isFocusInToast = currentElement.value?.contains(getActiveElement())\n  if (isFocusInToast && isNonPointerEvent)\n    providerContext.viewport.value?.focus()\n\n  if (isNonPointerEvent) {\n    // when manually close the toast, we reset isClosePausedRef\n    providerContext.isClosePausedRef.value = false\n  }\n\n  emits('close')\n}\n\nconst announceTextContent = computed(() => currentElement.value ? getAnnounceTextContent(currentElement.value) : null)\n\nif (props.type && !['foreground', 'background'].includes(props.type)) {\n  const error = 'Invalid prop `type` supplied to `Toast`. Expected `foreground | background`.'\n  throw new Error(error)\n}\n\nwatchEffect((cleanupFn) => {\n  const viewport = providerContext.viewport.value\n  if (viewport) {\n    const handleResume = () => {\n      startTimer(closeTimerRemainingTimeRef.value)\n      remainingRaf.resume()\n      emits('resume')\n    }\n    const handlePause = () => {\n      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value\n      closeTimerRemainingTimeRef.value = closeTimerRemainingTimeRef.value - elapsedTime\n      window.clearTimeout(closeTimerRef.value)\n      remainingRaf.pause()\n      emits('pause')\n    }\n    viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n    viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n    return () => {\n      viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n      viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n    }\n  }\n})\n\n// start timer when toast opens or duration changes.\n// we include `open` in deps because closed !== unmounted when animating\n// so it could reopen before being completely unmounted\nwatch(() => [props.open, duration.value], () => {\n  // Reset the timer when the toast is rerendered with the new duration\n  closeTimerRemainingTimeRef.value = duration.value\n\n  if (props.open && !providerContext.isClosePausedRef.value)\n    startTimer(duration.value)\n}, { immediate: true })\n\nonKeyStroke('Escape', (event) => {\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented) {\n    providerContext.isFocusedToastEscapeKeyDownRef.value = true\n    handleClose()\n  }\n})\n\nonMounted(() => {\n  providerContext.onToastAdd()\n})\nonUnmounted(() => {\n  providerContext.onToastRemove()\n})\n\nprovideToastRootContext({ onClose: handleClose })\n</script>\n\n<template>\n  <ToastAnnounce\n    v-if=\"announceTextContent\"\n    role=\"alert\"\n    :aria-live=\"type === 'foreground' ? 'assertive' : 'polite'\"\n    aria-atomic=\"true\"\n  >\n    {{ announceTextContent }}\n  </ToastAnnounce>\n\n  <Teleport\n    v-if=\"providerContext.viewport.value\"\n    :to=\"providerContext.viewport.value\"\n  >\n    <CollectionItem>\n      <Primitive\n        :ref=\"forwardRef\"\n        role=\"alert\"\n        aria-live=\"off\"\n        aria-atomic=\"true\"\n        tabindex=\"0\"\n        v-bind=\"$attrs\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :data-state=\"open ? 'open' : 'closed'\"\n        :data-swipe-direction=\"providerContext.swipeDirection.value\"\n        :style=\"{ userSelect: 'none', touchAction: 'none' }\"\n        @pointerdown.left=\"(event: PointerEvent) => {\n          pointerStartRef = { x: event.clientX, y: event.clientY };\n        }\"\n        @pointermove=\"(event: PointerEvent) => {\n          if (!pointerStartRef) return;\n          const x = event.clientX - pointerStartRef.x;\n          const y = event.clientY - pointerStartRef.y;\n          const hasSwipeMoveStarted = Boolean(swipeDeltaRef);\n          const isHorizontalSwipe = ['left', 'right'].includes(providerContext.swipeDirection.value);\n          const clamp = ['left', 'up'].includes(providerContext.swipeDirection.value)\n            ? Math.min\n            : Math.max;\n          const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;\n          const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;\n          const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;\n          const delta = { x: clampedX, y: clampedY };\n          const eventDetail = { originalEvent: event, delta };\n          if (hasSwipeMoveStarted) {\n            swipeDeltaRef = delta;\n            handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, (ev: SwipeEvent) => emits('swipeMove', ev), eventDetail);\n          }\n          else if (isDeltaInDirection(delta, providerContext.swipeDirection.value, moveStartBuffer)) {\n            swipeDeltaRef = delta;\n            handleAndDispatchCustomEvent(TOAST_SWIPE_START, (ev: SwipeEvent) => emits('swipeStart', ev), eventDetail);\n            (event.target as HTMLElement).setPointerCapture(event.pointerId);\n          }\n          else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {\n            // User is swiping in wrong direction so we disable swipe gesture\n            // for the current pointer down interaction\n            pointerStartRef = null;\n          }\n        }\"\n        @pointerup=\"(event: PointerEvent) => {\n          const delta = swipeDeltaRef;\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n          swipeDeltaRef = null;\n          pointerStartRef = null;\n          if (delta) {\n            const toast = event.currentTarget;\n            const eventDetail = { originalEvent: event, delta };\n            if (\n              isDeltaInDirection(delta, providerContext.swipeDirection.value, providerContext.swipeThreshold.value)\n            ) {\n              handleAndDispatchCustomEvent(TOAST_SWIPE_END, (ev: SwipeEvent) => emits('swipeEnd', ev), eventDetail);\n            }\n            else {\n              handleAndDispatchCustomEvent(TOAST_SWIPE_CANCEL, (ev: SwipeEvent) => emits('swipeCancel', ev), eventDetail);\n            }\n            // Prevent click event from triggering on items within the toast when\n            // pointer up is part of a swipe gesture\n            toast?.addEventListener('click', (event) => event.preventDefault(), {\n              once: true,\n            });\n          }\n        }\"\n      >\n        <slot\n          :remaining=\"remainingTime\"\n          :duration=\"duration\"\n        />\n      </Primitive>\n    </CollectionItem>\n  </Teleport>\n</template>\n"],"names":["createContext","useForwardExpose","useCollection","injectToastProviderContext","ref","computed","useRafFn","duration","isClient","getActiveElement","getAnnounceTextContent","watchEffect","VIEWPORT_PAUSE","VIEWPORT_RESUME","watch","onKeyStroke","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;AA0CO,MAAM,CAAC,sBAAA,EAAwB,uBAAuB,CAAA,GACzDA,mCAAuC,WAAW;;;;;;;;;;;;;;;AAetD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AACxD,IAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,mCAAc,EAAA;AAEzC,IAAA,MAAM,kBAAkBC,8CAA2B,EAAA;AACnD,IAAM,MAAA,eAAA,GAAkBC,QAAqC,IAAI,CAAA;AACjE,IAAM,MAAA,aAAA,GAAgBA,QAAqC,IAAI,CAAA;AAC/D,IAAA,MAAM,QAAW,GAAAC,YAAA;AAAA,MACf,MAAM,OAAO,KAAM,CAAA,QAAA,KAAa,WAC5B,KAAM,CAAA,QAAA,GACN,gBAAgB,QAAS,CAAA;AAAA,KAC/B;AAEA,IAAM,MAAA,sBAAA,GAAyBD,QAAI,CAAC,CAAA;AACpC,IAAM,MAAA,0BAAA,GAA6BA,OAAI,CAAA,QAAA,CAAS,KAAK,CAAA;AACrD,IAAM,MAAA,aAAA,GAAgBA,QAAI,CAAC,CAAA;AAC3B,IAAM,MAAA,aAAA,GAAgBA,OAAI,CAAA,QAAA,CAAS,KAAK,CAAA;AAExC,IAAM,MAAA,YAAA,GAAeE,cAAS,MAAM;AAClC,MAAA,MAAM,+BAAkB,IAAA,IAAA,EAAO,EAAA,OAAA,KAAY,sBAAuB,CAAA,KAAA;AAClE,MAAA,aAAA,CAAc,QAAQ,IAAK,CAAA,GAAA,CAAI,0BAA2B,CAAA,KAAA,GAAQ,aAAa,CAAC,CAAA;AAAA,KAC/E,EAAA,EAAE,QAAU,EAAA,EAAA,EAAI,CAAA;AAEnB,IAAA,SAAS,WAAWC,SAAkB,EAAA;AACpC,MAAIA,IAAAA,SAAAA,IAAY,CAAKA,IAAAA,SAAAA,KAAa,MAAO,CAAA,iBAAA;AACvC,QAAA;AAIF,MAAA,IAAI,CAACC,eAAA;AACH,QAAA;AACF,MAAO,MAAA,CAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AACvC,MAAA,sBAAA,CAAuB,KAAQ,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAClD,MAAA,aAAA,CAAc,KAAQ,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAaD,SAAQ,CAAA;AAAA;AAG/D,IAAA,SAAS,YAAY,KAAsB,EAAA;AACzC,MAAM,MAAA,iBAAA,GAAoB,OAAO,WAAgB,KAAA,EAAA;AAKjD,MAAA,MAAM,cAAiB,GAAA,cAAA,CAAe,KAAO,EAAA,QAAA,CAASE,0CAAkB,CAAA;AACxE,MAAA,IAAI,cAAkB,IAAA,iBAAA;AACpB,QAAgB,eAAA,CAAA,QAAA,CAAS,OAAO,KAAM,EAAA;AAExC,MAAA,IAAI,iBAAmB,EAAA;AAErB,QAAA,eAAA,CAAgB,iBAAiB,KAAQ,GAAA,KAAA;AAAA;AAG3C,MAAA,KAAA,CAAM,OAAO,CAAA;AAAA;AAGf,IAAM,MAAA,mBAAA,GAAsBJ,aAAS,MAAM,cAAA,CAAe,QAAQK,kCAAuB,CAAA,cAAA,CAAe,KAAK,CAAA,GAAI,IAAI,CAAA;AAErH,IAAI,IAAA,KAAA,CAAM,IAAQ,IAAA,CAAC,CAAC,YAAA,EAAc,YAAY,CAAE,CAAA,QAAA,CAAS,KAAM,CAAA,IAAI,CAAG,EAAA;AACpE,MAAA,MAAM,KAAQ,GAAA,8EAAA;AACd,MAAM,MAAA,IAAI,MAAM,KAAK,CAAA;AAAA;AAGvB,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,gBAAgB,QAAS,CAAA,KAAA;AAC1C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,MAAM,eAAe,MAAM;AACzB,UAAA,UAAA,CAAW,2BAA2B,KAAK,CAAA;AAC3C,UAAA,YAAA,CAAa,MAAO,EAAA;AACpB,UAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,SAChB;AACA,QAAA,MAAM,cAAc,MAAM;AACxB,UAAA,MAAM,+BAAkB,IAAA,IAAA,EAAO,EAAA,OAAA,KAAY,sBAAuB,CAAA,KAAA;AAClE,UAA2B,0BAAA,CAAA,KAAA,GAAQ,2BAA2B,KAAQ,GAAA,WAAA;AACtE,UAAO,MAAA,CAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AACvC,UAAA,YAAA,CAAa,KAAM,EAAA;AACnB,UAAA,KAAA,CAAM,OAAO,CAAA;AAAA,SACf;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiBC,4BAAgB,WAAW,CAAA;AACrD,QAAS,QAAA,CAAA,gBAAA,CAAiBC,6BAAiB,YAAY,CAAA;AACvD,QAAA,OAAO,MAAM;AACX,UAAS,QAAA,CAAA,mBAAA,CAAoBD,4BAAgB,WAAW,CAAA;AACxD,UAAS,QAAA,CAAA,mBAAA,CAAoBC,6BAAiB,YAAY,CAAA;AAAA,SAC5D;AAAA;AACF,KACD,CAAA;AAKD,IAAAC,SAAA,CAAM,MAAM,CAAC,KAAA,CAAM,MAAM,QAAS,CAAA,KAAK,GAAG,MAAM;AAE9C,MAAA,0BAAA,CAA2B,QAAQ,QAAS,CAAA,KAAA;AAE5C,MAAA,IAAI,KAAM,CAAA,IAAA,IAAQ,CAAC,eAAA,CAAgB,gBAAiB,CAAA,KAAA;AAClD,QAAA,UAAA,CAAW,SAAS,KAAK,CAAA;AAAA,KAC1B,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA;AAEtB,IAAYC,gBAAA,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC/B,MAAA,KAAA,CAAM,iBAAiB,KAAK,CAAA;AAC5B,MAAI,IAAA,CAAC,MAAM,gBAAkB,EAAA;AAC3B,QAAA,eAAA,CAAgB,+BAA+B,KAAQ,GAAA,IAAA;AACvD,QAAY,WAAA,EAAA;AAAA;AACd,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,eAAA,CAAgB,UAAW,EAAA;AAAA,KAC5B,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,eAAA,CAAgB,aAAc,EAAA;AAAA,KAC/B,CAAA;AAED,IAAwB,uBAAA,CAAA,EAAE,OAAS,EAAA,WAAA,EAAa,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toast/ToastRootImpl.js

@@ -52,11 +52,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       closeTimerStartTimeRef.value = (/* @__PURE__ */ new Date()).getTime();
       closeTimerRef.value = window.setTimeout(handleClose, duration2);
     }
-    function handleClose() {
+    function handleClose(event) {
+      const isNonPointerEvent = event?.pointerType === "";
       const isFocusInToast = currentElement.value?.contains(getActiveElement());
-      if (isFocusInToast)
+      if (isFocusInToast && isNonPointerEvent)
         providerContext.viewport.value?.focus();
-      providerContext.isClosePausedRef.value = false;
+      if (isNonPointerEvent) {
+        providerContext.isClosePausedRef.value = false;
+      }
       emits("close");
     }
     const announceTextContent = computed(() => currentElement.value ? getAnnounceTextContent(currentElement.value) : null);