@leaflink/stash 51.11.1 → 51.12.0

package/dist/MoreActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreActions.js","sources":["../src/composables/useToggleAnimation/useToggleAnimation.ts","../src/components/MoreActions/constants.ts","../src/components/MoreActions/utils.ts","../src/components/MoreActions/useOverflowCalculator.ts","../src/components/MoreActions/createIntersectionObserver.ts","../src/components/MoreActions/useDropdownItemStyling.ts","../src/components/MoreActions/useMoreButtonWidth.ts","../src/components/MoreActions/useVisibleElementsWidth.ts","../src/components/MoreActions/MoreActions.vue"],"sourcesContent":["import { useToggle } from '@vueuse/core';\nimport { onUnmounted, type Ref, ref } from 'vue';\n\nexport interface UseToggleAnimationOptions {\n  /**\n   * Duration of the animation in milliseconds\n   * @default 300\n   */\n  duration?: number;\n  /**\n   * Whether to start with the element visible\n   * @default false\n   */\n  initialVisible?: boolean;\n}\n\nexport interface UseToggleAnimationReturn {\n  /**\n   * Whether the element should be visible in the DOM\n   */\n  isVisible: Ref<boolean>;\n  /**\n   * Whether the element should show the \"show\" animation (fade-in)\n   */\n  shouldShow: Ref<boolean>;\n  /**\n   * Whether the element should show the \"hide\" animation (fade-out)\n   */\n  shouldHide: Ref<boolean>;\n  /**\n   * Function to toggle the visibility with animation\n   */\n  toggle: (visible: boolean) => void;\n  /**\n   * Function to show the element with animation\n   */\n  show: () => void;\n  /**\n   * Function to hide the element with animation\n   */\n  hide: () => void;\n  /**\n   * Function to immediately set visibility without animation\n   */\n  setVisible: (visible: boolean) => void;\n  /**\n   * Cleanup function to clear any pending timeouts\n   */\n  cleanup: () => void;\n}\n\n/**\n * Composable for managing toggle animations with proper timeout cleanup\n *\n * @param options Configuration options for the animation\n * @returns Object with visibility state and control functions\n *\n */\nexport function useToggleAnimation(options: UseToggleAnimationOptions = {}): UseToggleAnimationReturn {\n  const { duration = 300, initialVisible = false } = options;\n\n  const [isVisible, toggleIsVisible] = useToggle(initialVisible);\n  const [shouldShow, toggleShouldShow] = useToggle(initialVisible);\n  const [shouldHide, toggleShouldHide] = useToggle(false);\n  const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);\n\n  /**\n   * Clear any existing timeout to prevent race conditions\n   */\n  function clearExistingTimeout(): void {\n    if (timeoutId.value !== null) {\n      clearTimeout(timeoutId.value);\n      timeoutId.value = null;\n    }\n  }\n\n  /**\n   * Set visibility immediately without animation\n   */\n  function setVisible(visible: boolean): void {\n    clearExistingTimeout();\n    if (isVisible.value !== visible) {\n      toggleIsVisible();\n    }\n    if (shouldShow.value !== visible) {\n      toggleShouldShow();\n    }\n    if (shouldHide.value) {\n      toggleShouldHide();\n    }\n  }\n\n  /**\n   * Toggle visibility with animation\n   */\n  function toggle(visible: boolean): void {\n    clearExistingTimeout();\n\n    if (visible) {\n      // Show with fade-in\n      if (!isVisible.value) {\n        toggleIsVisible();\n      }\n      if (!shouldShow.value) {\n        toggleShouldShow();\n      }\n      if (shouldHide.value) {\n        toggleShouldHide();\n      }\n    } else {\n      // Hide with fade-out, then remove from DOM after animation\n      if (shouldShow.value) {\n        toggleShouldShow();\n      }\n      if (!shouldHide.value) {\n        toggleShouldHide();\n      }\n\n      timeoutId.value = setTimeout(() => {\n        if (isVisible.value) {\n          toggleIsVisible();\n        }\n        if (shouldHide.value) {\n          toggleShouldHide();\n        }\n        timeoutId.value = null;\n      }, duration);\n    }\n  }\n\n  /**\n   * Show the element with animation\n   */\n  function show(): void {\n    toggle(true);\n  }\n\n  /**\n   * Hide the element with animation\n   */\n  function hide(): void {\n    toggle(false);\n  }\n\n  /**\n   * Cleanup function to clear any pending timeouts\n   */\n  function cleanup(): void {\n    clearExistingTimeout();\n  }\n\n  // Cleanup timeout on component unmount to prevent memory leaks\n  onUnmounted(() => {\n    cleanup();\n  });\n\n  return {\n    isVisible,\n    shouldShow,\n    shouldHide,\n    toggle,\n    show,\n    hide,\n    setVisible,\n    cleanup,\n  };\n}\n","export const Z_INDEX = {\n  TRACKER: -1,\n  DROPDOWN: 1000,\n} as const;\n\nexport const ID_PREFIXES = {\n  AUTO_ACTION: 'auto-action-',\n  INDEX_BASED: 'index-',\n  MORE_MENU: 'more-actions-menu-',\n} as const;\n\nexport const DATA_ATTRIBUTES = {\n  ACTION_ID: 'data-action-id',\n} as const;\n\nexport const FADE_ANIMATION_DURATION = 300;\n","import { DATA_ATTRIBUTES, ID_PREFIXES } from './constants';\n\n/**\n * Adds data-action-id attributes to first-level children of the actions container\n * Ensures unique IDs by checking existing ones\n */\nexport function addActionIdsToFirstLevelChildren(actionsContainerEl: HTMLElement | null): void {\n  if (!actionsContainerEl) {\n    return;\n  }\n\n  // Get all direct children of the actions container\n  const directChildren = Array.from(actionsContainerEl.children) as HTMLElement[];\n\n  // Collect existing action IDs to avoid duplicates\n  const existingIds = new Set<string>();\n  directChildren.forEach((child) => {\n    const existingId = child.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n    if (existingId) {\n      existingIds.add(existingId);\n    }\n  });\n\n  // Find the next available index for auto-generated IDs\n  let nextIndex = 0;\n  while (existingIds.has(`auto-action-${nextIndex}`)) {\n    nextIndex++;\n  }\n\n  directChildren.forEach((child) => {\n    // Only add data-action-id if it doesn't already exist\n    if (!child.hasAttribute(DATA_ATTRIBUTES.ACTION_ID)) {\n      child.setAttribute(DATA_ATTRIBUTES.ACTION_ID, `${ID_PREFIXES.AUTO_ACTION}${nextIndex}`);\n      nextIndex++;\n    }\n  });\n}\n\n/**\n * Creates a map of elements to their IDs\n */\nexport function createElementIdMap(directChildren: HTMLElement[]): Map<HTMLElement, string> {\n  const elementIdMap = new Map<HTMLElement, string>();\n\n  directChildren.forEach((child, index) => {\n    const actionId = child.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n    if (actionId) {\n      elementIdMap.set(child, actionId);\n    } else {\n      // Use index as ID for elements without data-action-id\n      elementIdMap.set(child, `${ID_PREFIXES.INDEX_BASED}${index}`);\n    }\n  });\n\n  return elementIdMap;\n}\n\n/**\n * Cleans up overflow IDs for elements that no longer exist\n */\nexport function cleanupOverflowIds(overflowIds: Set<string>, currentElementIds: Set<string>): void {\n  const idsToRemove: string[] = [];\n\n  overflowIds.forEach((id) => {\n    if (!currentElementIds.has(id)) {\n      idsToRemove.push(id);\n    }\n  });\n\n  idsToRemove.forEach((id) => {\n    overflowIds.delete(id);\n  });\n}\n\n/**\n * Applies visibility classes to elements based on overflow state\n */\nexport function applyElementVisibility(element: HTMLElement, elementId: string, overflowIds: Set<string>): void {\n  if (overflowIds.has(elementId)) {\n    element.classList.add('tw-invisible');\n  } else {\n    element.classList.remove('tw-invisible');\n  }\n}\n\n/**\n * Syncs dropdown content visibility with main container\n */\nexport function syncDropdownVisibility(\n  moreDropdownMenuEl: HTMLElement | null,\n  actionsContainerEl: HTMLElement | null,\n  overflowIds: Set<string>,\n  itemInDropdownClass?: string | Record<string, boolean> | undefined,\n): void {\n  if (!moreDropdownMenuEl) {\n    return;\n  }\n\n  const allDropdownItems = Array.from(moreDropdownMenuEl.children as HTMLCollection) as HTMLElement[];\n\n  // First, sync data-action-id from main container to dropdown items\n  if (actionsContainerEl) {\n    const mainContainerChildren = Array.from(actionsContainerEl.children) as HTMLElement[];\n    allDropdownItems.forEach((dropdownItem, index) => {\n      if (index < mainContainerChildren.length) {\n        const mainItem = mainContainerChildren[index];\n        const actionId = mainItem.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n        if (actionId) {\n          dropdownItem.setAttribute(DATA_ATTRIBUTES.ACTION_ID, actionId);\n        }\n      }\n    });\n  }\n\n  allDropdownItems.forEach((element) => {\n    const actionId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n    // Apply itemInDropdownClass if provided\n    if (itemInDropdownClass) {\n      if (typeof itemInDropdownClass === 'string') {\n        // Handle string class names (space-separated)\n        const classes = itemInDropdownClass.split(' ').filter(Boolean);\n        classes.forEach((className) => {\n          if (className) {\n            element.classList.add(className);\n          }\n        });\n      } else if (typeof itemInDropdownClass === 'object') {\n        // Handle object with class names as keys and boolean values\n        Object.entries(itemInDropdownClass).forEach(([className, shouldAdd]) => {\n          if (shouldAdd) {\n            element.classList.add(className);\n          } else {\n            element.classList.remove(className);\n          }\n        });\n      }\n    }\n\n    // Actions elements - show if they overflow\n    const shouldShow = actionId && overflowIds.has(actionId);\n    if (shouldShow) {\n      element.classList.remove('tw-hidden');\n    } else {\n      element.classList.add('tw-hidden');\n    }\n  });\n}\n","import { useElementBounding } from '@vueuse/core';\nimport debounce from 'lodash-es/debounce';\nimport { type Ref, ref, type ShallowRef } from 'vue';\n\nimport { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES } from './constants';\nimport { applyElementVisibility, createElementIdMap, syncDropdownVisibility } from './utils';\n\ninterface UseOverflowCalculatorOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  trackerElementRef: ShallowRef<HTMLElement | null>;\n  itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  onOverflowChange?: () => void;\n}\n\nexport function useOverflowCalculator({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\n  itemInDropdownClass,\n  onOverflowChange,\n}: UseOverflowCalculatorOptions) {\n  const isProcessing = ref(false);\n  const lastOverflowState = ref<string>(''); // Track last overflow state to prevent unnecessary updates\n  const trackerBounding = useElementBounding(trackerElementRef);\n\n  /**\n   * Updates overflow state and applies visibility classes to elements\n   */\n  function updateOverflowState(\n    newOverflowIds: Set<string>,\n    directChildren: HTMLElement[],\n    elementIdMap: Map<HTMLElement, string>,\n  ): void {\n    overflowIds.value.clear();\n    newOverflowIds.forEach((id) => overflowIds.value.add(id));\n\n    // Apply visibility classes\n    directChildren.forEach((element) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n      if (elementId) {\n        applyElementVisibility(element, elementId, overflowIds.value);\n      }\n    });\n  }\n\n  function calculateOverflowInternal() {\n    if (!actionsContainerRef.value || !trackerElementRef.value) {\n      isProcessing.value = false;\n      return;\n    }\n\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n    const elementIdMap = createElementIdMap(directChildren);\n\n    // Create a new overflow set to compare with current state\n    const newOverflowIds = new Set<string>();\n\n    // Get current gap width from CSS computed styles of the actions container\n    const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n    const gapValue = computedStyle.columnGap || computedStyle.gap;\n    const gapWidth = gapValue ? parseFloat(gapValue) : 0;\n\n    // Calculate which elements should be hidden based on their position relative to tracker\n    directChildren.forEach((element, index) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n      const elementRect = element.getBoundingClientRect();\n\n      // Calculate the effective right edge including gap\n      // If this is not the last element, add gap to the right edge\n      const effectiveRightEdge = index < directChildren.length - 1 ? elementRect.right + gapWidth : elementRect.right;\n\n      // If element's effective right edge extends beyond tracker's left edge, hide it\n      if (effectiveRightEdge > trackerBounding.left.value) {\n        if (elementId) {\n          newOverflowIds.add(elementId);\n        }\n      }\n    });\n\n    // Check if overflow state has actually changed\n    const currentOverflowState = Array.from(overflowIds.value).sort().join(',');\n    const newOverflowState = Array.from(newOverflowIds).sort().join(',');\n\n    if (currentOverflowState !== newOverflowState) {\n      // Update overflow state and apply visibility\n      updateOverflowState(newOverflowIds, directChildren, elementIdMap);\n\n      // Sync dropdown content visibility\n      syncDropdownVisibility(\n        moreDropdownMenuRef.value,\n        actionsContainerRef.value,\n        overflowIds.value,\n        itemInDropdownClass,\n      );\n\n      // Call callback if provided and state actually changed\n      if (onOverflowChange && lastOverflowState.value !== newOverflowState) {\n        lastOverflowState.value = newOverflowState;\n        onOverflowChange();\n      }\n    }\n\n    isProcessing.value = false;\n  }\n\n  const debouncedCalculateOverflow = debounce(calculateOverflowInternal, DEBOUNCE.FAST);\n\n  function calculateOverflow() {\n    if (isProcessing.value || !actionsContainerRef.value || !trackerElementRef.value) {\n      return;\n    }\n\n    isProcessing.value = true;\n    debouncedCalculateOverflow();\n  }\n\n  function cleanup() {\n    debouncedCalculateOverflow.cancel();\n    isProcessing.value = false;\n  }\n\n  return {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    cleanup,\n    isProcessing,\n  };\n}\n","import { useIntersectionObserver, useResizeObserver } from '@vueuse/core';\nimport debounce from 'lodash-es/debounce';\nimport { onBeforeUnmount, onDeactivated, onMounted, onUpdated, type Ref, ref, type ShallowRef } from 'vue';\n\nimport { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES } from './constants';\nimport { useOverflowCalculator } from './useOverflowCalculator';\nimport {\n  addActionIdsToFirstLevelChildren as addActionIds,\n  cleanupOverflowIds,\n  createElementIdMap,\n  syncDropdownVisibility,\n} from './utils';\n\ninterface CreateIntersectionObserverOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  trackerElementRef: ShallowRef<HTMLElement | null>;\n  moreDropdownWidth: Ref<number>;\n  itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  calculateMoreButtonWidth: () => number;\n  autoDetectActions?: boolean;\n  onOverflowChange?: () => void;\n}\n\nexport function createIntersectionObserver({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\n  moreDropdownWidth,\n  itemInDropdownClass,\n  calculateMoreButtonWidth,\n  autoDetectActions = true,\n  onOverflowChange,\n}: CreateIntersectionObserverOptions) {\n  const isInitializing = ref(false);\n\n  const {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    cleanup: cleanupCalculator,\n    isProcessing,\n  } = useOverflowCalculator({\n    actionsContainerRef,\n    overflowIds,\n    moreDropdownMenuRef,\n    trackerElementRef,\n    itemInDropdownClass,\n    onOverflowChange,\n  });\n  function clearOverflowState() {\n    overflowIds.value.clear();\n    moreDropdownWidth.value = 0;\n  }\n\n  function createObserver() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // Get all direct children of the actions container\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n\n    // Create a map of elements to their IDs (either data-action-id or index-based)\n    const elementIdMap = createElementIdMap(directChildren);\n\n    // Clean up overflowIds for elements that no longer exist\n    const currentElementIds = new Set(elementIdMap.values());\n    cleanupOverflowIds(overflowIds.value, currentElementIds);\n\n    // to track container size changes\n    useResizeObserver(actionsContainerRef, calculateOverflow);\n\n    useIntersectionObserver(\n      directChildren,\n      (entries) => {\n        if (isProcessing.value) {\n          return;\n        }\n\n        let hasChanges = false;\n        const newOverflowIds = new Set(overflowIds.value);\n\n        entries.forEach((entry) => {\n          const element = entry.target as HTMLElement;\n          const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n          // Check if element is fully visible\n          if (entry.intersectionRatio === 1) {\n            // show action, hide in dropdown\n            if (elementId && newOverflowIds.has(elementId)) {\n              newOverflowIds.delete(elementId);\n              hasChanges = true;\n            }\n          } else {\n            // hide action, show in dropdown (intersectionRatio < 1 means partially or not visible)\n            if (elementId && !newOverflowIds.has(elementId)) {\n              newOverflowIds.add(elementId);\n              hasChanges = true;\n            }\n          }\n        });\n\n        // Only update if there are actual changes\n        if (hasChanges) {\n          const currentOverflowState = Array.from(overflowIds.value).sort().join(',');\n          const newOverflowState = Array.from(newOverflowIds).sort().join(',');\n\n          if (currentOverflowState !== newOverflowState) {\n            // Update overflow state and apply visibility\n            updateOverflowState(newOverflowIds, directChildren, elementIdMap);\n\n            // Sync dropdown content visibility\n            syncDropdownVisibility(\n              moreDropdownMenuRef.value,\n              actionsContainerRef.value,\n              overflowIds.value,\n              itemInDropdownClass,\n            );\n\n            // Call callback if provided and state actually changed\n            if (onOverflowChange) {\n              onOverflowChange();\n            }\n          }\n        }\n      },\n      {\n        root: actionsContainerRef.value,\n      },\n    );\n\n    // Apply initial visibility to all elements\n    directChildren.forEach((element) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || '';\n      applyElementVisibility(element, elementId, overflowIds.value);\n    });\n\n    // Initial calculation\n    calculateOverflow();\n\n    syncDropdownVisibility(\n      moreDropdownMenuRef.value,\n      actionsContainerRef.value,\n      overflowIds.value,\n      itemInDropdownClass,\n    );\n  }\n\n  function initObserve() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n\n    createObserver();\n\n    // Set initial dropdown width - only if not already set\n    if (moreDropdownWidth.value === 0) {\n      moreDropdownWidth.value = calculateMoreButtonWidth();\n    }\n  }\n\n  const debouncedInitObserve = debounce(\n    () => {\n      if (!isInitializing.value) {\n        isInitializing.value = true;\n        initObserve();\n        isInitializing.value = false;\n      }\n    },\n    DEBOUNCE.FAST,\n    { leading: true },\n  );\n\n  onMounted(() => {\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n    initObserve();\n  });\n\n  onUpdated(() => {\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n    // Clear overflowIds if no actions are present\n    if (actionsContainerRef.value) {\n      const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n      if (directChildren.length === 0) {\n        clearOverflowState();\n      }\n    }\n    cleanupCalculator();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    cleanupCalculator();\n  });\n\n  onBeforeUnmount(() => {\n    cleanupCalculator();\n  });\n}\n","import { type Ref, type ShallowRef } from 'vue';\n\nimport { DATA_ATTRIBUTES } from './constants';\n\n// Updated interface with Ref suffix naming convention\ninterface UseDropdownItemStylingOptions {\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  autoStyleDropdownItems: boolean;\n  activeItemId?: Ref<string | undefined>;\n}\n\nexport function useDropdownItemStyling({\n  moreDropdownMenuRef,\n  overflowIds,\n  autoStyleDropdownItems,\n  activeItemId,\n}: UseDropdownItemStylingOptions) {\n  /**\n   * Applies dropdown item styling to elements in the dropdown menu\n   */\n  function applyDropdownItemStyling() {\n    if (!autoStyleDropdownItems || !moreDropdownMenuRef.value) {\n      return;\n    }\n\n    const dropdownItems = Array.from(moreDropdownMenuRef.value.children);\n\n    dropdownItems.forEach((element) => {\n      if (!(element instanceof HTMLElement)) {\n        return;\n      }\n\n      // Get the data-action-id which should match the overflow IDs\n      const actionId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n      // Hide elements that are not in overflow (still visible in main container)\n      if (actionId && !overflowIds.value.has(actionId)) {\n        element.classList.add('tw-hidden');\n        return; // Skip styling for hidden elements\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      // Remove existing checkmark icon\n      element.querySelector('.stash-tabs__dropdown-selected-tab-icon')?.remove();\n\n      // Clear classes from the first child element (button/component inside tab)\n      const firstElementChild = element.firstElementChild as Element;\n      if (firstElementChild) {\n        firstElementChild.className = '';\n      }\n\n      // Clear existing classes\n      element.className = '';\n\n      // Apply dropdown item styling\n      element.classList.add(\n        'tw-flex',\n        'tw-items-center',\n        'tw-justify-between',\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:!tw-bg-ice-200',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-bg-blue-100',\n        'tw-list-none',\n      );\n\n      // Check if this is the active item and add checkmark\n      const elementId = element.getAttribute('id');\n      if (elementId && activeItemId?.value && elementId === activeItemId.value) {\n        const span = document.createElement('span');\n        span.className = 'stash-tabs__dropdown-selected-tab-icon';\n        span.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"tw-text-blue-500 tw-w-6 tw-h-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20.707 6.854 9 18.561l-5.707-5.707 1.414-1.414L9 15.733 19.293 5.44l1.414 1.414Z\" clip-rule=\"evenodd\"/></svg>`;\n        element.appendChild(span);\n      }\n    });\n  }\n\n  return {\n    applyDropdownItemStyling,\n  };\n}\n","import { type ComputedRef, nextTick, ref, type ShallowRef, watch } from 'vue';\n\nimport Dropdown from '../Dropdown/Dropdown.vue';\n\n// Updated interface with Ref suffix naming convention\ninterface UseMoreDropdownWidthOptions {\n  moreDropdownRef: ShallowRef<InstanceType<typeof Dropdown> | null>;\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  moreButtonAlign: 'separate' | 'together';\n  hasOverflowActions: ComputedRef<boolean>;\n}\n\nexport function useMoreButtonWidth({\n  moreDropdownRef,\n  actionsContainerRef,\n  moreButtonAlign,\n  hasOverflowActions,\n}: UseMoreDropdownWidthOptions) {\n  /**\n   * Calculates the width of the More dropdown with gap consideration\n   * When moreButtonAlign is 'separate', adds the gap between actions container and dropdown\n   * When moreButtonAlign is 'together', returns only the dropdown width\n   */\n  const calculateMoreButtonWidth = (): number => {\n    if (!moreDropdownRef.value?.$el) {\n      return 0;\n    }\n\n    const dropdownWidth = moreDropdownRef.value.$el.getBoundingClientRect().width;\n\n    // If moreButtonAlign is separate, add gap between actions container and dropdown\n    if (moreButtonAlign === 'separate' && actionsContainerRef.value) {\n      const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n      const gapWidth = parseFloat(computedStyle.gap) || 0;\n      return dropdownWidth + gapWidth;\n    }\n\n    return dropdownWidth;\n  };\n\n  const moreButtonWidth = ref(0);\n\n  watch(hasOverflowActions, (newValue) => {\n    if (newValue && moreDropdownRef.value) {\n      nextTick(() => {\n        const calculatedWidth = calculateMoreButtonWidth();\n        if (calculatedWidth > 0) {\n          moreButtonWidth.value = calculatedWidth;\n        }\n      });\n    }\n  });\n\n  return {\n    calculateMoreButtonWidth,\n    moreButtonWidth,\n  };\n}\n","import { nextTick, type Ref, ref, type ShallowRef, watch } from 'vue';\n\nimport { DATA_ATTRIBUTES } from './constants';\n\ninterface UseVisibleElementsWidthOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n}\n\nexport function useVisibleElementsWidth({ actionsContainerRef, overflowIds }: UseVisibleElementsWidthOptions) {\n  const visibleElementsWidth = ref(0);\n  const isRecalculatingWidth = ref(false);\n\n  /**\n   * Calculates the total width of currently visible elements\n   * This is used for positioning the More button\n   */\n  const calculateVisibleElementsWidth = () => {\n    if (!actionsContainerRef.value) {\n      visibleElementsWidth.value = 0;\n      return;\n    }\n\n    let totalWidth = 0;\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n\n    directChildren.forEach((element, index) => {\n      const isHidden = element.classList.contains('tw-invisible');\n\n      // Only count visible elements\n      const elementId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n      if (!isHidden && elementId && !overflowIds.value.has(elementId)) {\n        const rect = element.getBoundingClientRect();\n        totalWidth += rect.width;\n        // Add gap between elements\n        if (index < directChildren.length - 1 && actionsContainerRef.value) {\n          // Always get the most current gap width from CSS computed styles of the actions container\n          const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n          const gapValue = computedStyle.columnGap || computedStyle.gap;\n          const gapWidth = gapValue ? parseFloat(gapValue) : 0;\n          totalWidth += gapWidth;\n        }\n      }\n    });\n\n    visibleElementsWidth.value = totalWidth;\n  };\n\n  // Watch for changes in overflowIds to recalculate visible elements width\n  watch(overflowIds, () => {\n    if (!isRecalculatingWidth.value) {\n      isRecalculatingWidth.value = true;\n      nextTick(() => {\n        calculateVisibleElementsWidth();\n        isRecalculatingWidth.value = false;\n      });\n    }\n  });\n\n  return {\n    visibleElementsWidth,\n    isRecalculatingWidth,\n    calculateVisibleElementsWidth,\n  };\n}\n","<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';\n\n  import { useToggleAnimation } from '../../composables/useToggleAnimation/useToggleAnimation';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { FADE_ANIMATION_DURATION, ID_PREFIXES, Z_INDEX } from './constants';\n  import { createIntersectionObserver } from './createIntersectionObserver';\n  import { useDropdownItemStyling } from './useDropdownItemStyling';\n  import { useMoreButtonWidth } from './useMoreButtonWidth';\n  import { useVisibleElementsWidth } from './useVisibleElementsWidth';\n\n  export interface MoreActionsProps {\n    /**\n     * CSS class or classes to be applied to the dropdown content\n     */\n    dropdownContentClass?: string;\n    /**\n     * CSS class or classes to be applied to the actions container\n     */\n    actionsContainerClass?: string | Record<string, boolean> | undefined;\n    /**\n     * Text to display on the more actions button\n     */\n    moreButtonText?: string;\n    /**\n     * Optional width for the more-actions container\n     * Applies style=\"width: {width}\" to the stash-more-actions element\n     */\n    width?: string | number;\n    /**\n     * Rendering mode for dropdown items\n     * - 'default': Button-style rendering (current behavior)\n     * - 'custom': Custom rendering through slots\n     */\n    dropdownMode?: 'default' | 'custom';\n    /**\n     * Whether to disable automatic detection of actions from first-level children in the actions slot\n     * When false (default), all direct children in the actions slot will be treated as actions\n     * without needing to manually add data-action-id attributes\n     */\n    disableAutoDetectActions?: boolean;\n    /**\n     * Whether to apply dropdown item styling automatically\n     * When enabled, applies flex layout, padding, hover effects, and other styling to dropdown items\n     */\n    autoStyleDropdownItems?: boolean;\n    /**\n     * Active item ID for highlighting in dropdown\n     * Used when autoStyleDropdownItems is enabled to show which item is currently selected\n     */\n    activeItemId?: string;\n    /**\n     * Alignment of the More button\n     * - 'separate': Button is aligned to the right edge of the actions container (default)\n     * - 'together': Button is aligned immediately after the last visible action\n     */\n    moreButtonAlign?: 'separate' | 'together';\n    /**\n     * CSS class or classes to be applied to items inside the dropdown\n     */\n    itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  }\n\n  const props = withDefaults(defineProps<MoreActionsProps>(), {\n    activeItemId: undefined,\n    dropdownContentClass: undefined,\n    actionsContainerClass: undefined,\n    moreButtonText: () => t('ll.more'),\n    dropdownMode: 'default',\n    disableAutoDetectActions: false,\n    moreButtonAlign: 'separate',\n    width: undefined,\n    itemInDropdownClass: undefined,\n  });\n\n  // Refs for DOM elements\n  const actionsContainerRef = useTemplateRef('actionsContainerRef');\n  const moreDropdownRef = useTemplateRef('moreDropdownRef');\n  const moreDropdownMenuRef = useTemplateRef('moreDropdownMenuRef');\n  const trackerElementRef = useTemplateRef('trackerElementRef');\n\n  // State management\n  const overflowIds = ref<Set<string>>(new Set());\n  const isMoreMenuOpen = ref(false);\n  const moreMenuId = uniqueId(ID_PREFIXES.MORE_MENU);\n\n  const {\n    isVisible: isMoreButtonVisible,\n    shouldShow: shouldMoreButtonShow,\n    toggle: toggleMoreButtonAnimation,\n  } = useToggleAnimation({\n    duration: FADE_ANIMATION_DURATION,\n    initialVisible: false,\n  });\n\n  const hasOverflowActions = computed(() => overflowIds.value.size > 0);\n\n  // Updated to use new Ref suffix naming convention\n  const { calculateMoreButtonWidth, moreButtonWidth } = useMoreButtonWidth({\n    moreDropdownRef,\n    actionsContainerRef,\n    moreButtonAlign: props.moreButtonAlign,\n    hasOverflowActions,\n  });\n\n  // Updated to use new Ref suffix naming convention\n  const { visibleElementsWidth, isRecalculatingWidth, calculateVisibleElementsWidth } = useVisibleElementsWidth({\n    actionsContainerRef,\n    overflowIds,\n  });\n\n  const shouldShowMoreButton = computed(() => {\n    return hasOverflowActions.value;\n  });\n\n  const isMoreMenuOpenString = computed(() => isMoreMenuOpen.value.toString());\n\n  const actionsContainerWidth = computed(() => {\n    if (!shouldShowMoreButton.value) {\n      return '100%';\n    }\n\n    return `calc(100% - ${moreButtonWidth.value}px)`;\n  });\n\n  const moreButtonPosition = computed(() => {\n    if (props.moreButtonAlign === 'together') {\n      return { left: `${visibleElementsWidth.value}px`, right: 'auto' };\n    } else {\n      // Default separate alignment\n      return { right: '0', left: 'auto' };\n    }\n  });\n\n  createIntersectionObserver({\n    actionsContainerRef,\n    overflowIds,\n    moreDropdownMenuRef,\n    trackerElementRef,\n    moreDropdownWidth: moreButtonWidth,\n    itemInDropdownClass: props.itemInDropdownClass,\n    calculateMoreButtonWidth,\n    autoDetectActions: !props.disableAutoDetectActions,\n\n    onOverflowChange: () => {\n      // Recalculate visible elements width when overflow changes\n      if (!isRecalculatingWidth.value) {\n        nextTick(() => {\n          calculateVisibleElementsWidth();\n        });\n      }\n    },\n  });\n\n  // Updated to use new Ref suffix naming convention\n  const { applyDropdownItemStyling } = useDropdownItemStyling({\n    moreDropdownMenuRef,\n    overflowIds,\n    autoStyleDropdownItems: props.autoStyleDropdownItems,\n    activeItemId: computed(() => props.activeItemId),\n  });\n\n  // Watch for changes in shouldShowMoreButton to handle fade animations\n  watch(shouldShowMoreButton, (newValue) => {\n    toggleMoreButtonAnimation(newValue);\n  });\n\n  function handleDropdownToggle(event: boolean) {\n    isMoreMenuOpen.value = event;\n    if (event && props.autoStyleDropdownItems) {\n      nextTick(() => applyDropdownItemStyling());\n    }\n  }\n</script>\n\n<template>\n  <div class=\"stash-more-actions tw-relative\" data-test=\"stash-more-actions\" :style=\"{ width: props.width }\">\n    <div\n      ref=\"actionsContainerRef\"\n      :style=\"{\n        width: actionsContainerWidth,\n      }\"\n      :class=\"['stash-more-actions__container tw-flex tw-items-center tw-gap-2', props.actionsContainerClass]\"\n    >\n      <!-- Actions slot for elements that can be hidden -->\n      <slot name=\"actions\"></slot>\n    </div>\n\n    <!-- Tracker Element - to detect when action elements overlap with it, triggering overflow behavior -->\n    <div\n      ref=\"trackerElementRef\"\n      class=\"stash-more-actions__tracker\"\n      :style=\"{\n        position: 'absolute',\n        right: '0px',\n        top: '0',\n        visibility: 'hidden',\n        width: moreButtonWidth + 'px',\n        height: '100%',\n        pointerEvents: 'none',\n        zIndex: Z_INDEX.TRACKER,\n      }\"\n    ></div>\n\n    <Dropdown\n      v-show=\"isMoreButtonVisible\"\n      ref=\"moreDropdownRef\"\n      :content-class=\"props.dropdownContentClass\"\n      :class=\"['!tw-absolute tw-top-0', shouldMoreButtonShow ? 'tw-animate-fade-in' : 'tw-animate-fade-out']\"\n      :style=\"moreButtonPosition\"\n      @toggle=\"handleDropdownToggle\"\n    >\n      <template #toggle=\"{ toggle }\">\n        <slot name=\"toggle\" :toggle=\"toggle\" :is-open=\"isMoreMenuOpen\">\n          <Button\n            class=\"button tw-border-gray-500 tw-text-gray-500 tw-flex tw-w-full tw-items-center tw-justify-between tw-border\"\n            secondary\n            :aria-expanded=\"isMoreMenuOpenString\"\n            @click=\"toggle\"\n          >\n            {{ props.moreButtonText }} <Icon class=\"tw-ml-1.5\" name=\"action-dots\" />\n          </Button>\n        </slot>\n      </template>\n\n      <template #default>\n        <div :id=\"moreMenuId\" ref=\"moreDropdownMenuRef\" class=\"tw-flex tw-flex-col tw-gap-1.5 tw-p-1.5\">\n          <!-- Actions slot content in dropdown (only overflow items) -->\n          <slot name=\"actions\"></slot>\n        </div>\n      </template>\n    </Dropdown>\n  </div>\n</template>\n\n<style module>\n  :global([data-action-id]) {\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["useToggleAnimation","options","duration","initialVisible","isVisible","toggleIsVisible","useToggle","shouldShow","toggleShouldShow","shouldHide","toggleShouldHide","timeoutId","ref","clearExistingTimeout","setVisible","visible","toggle","show","hide","cleanup","onUnmounted","Z_INDEX","ID_PREFIXES","DATA_ATTRIBUTES","FADE_ANIMATION_DURATION","addActionIdsToFirstLevelChildren","actionsContainerEl","directChildren","existingIds","child","existingId","nextIndex","createElementIdMap","elementIdMap","index","actionId","cleanupOverflowIds","overflowIds","currentElementIds","idsToRemove","id","applyElementVisibility","element","elementId","syncDropdownVisibility","moreDropdownMenuEl","itemInDropdownClass","allDropdownItems","mainContainerChildren","dropdownItem","className","shouldAdd","useOverflowCalculator","actionsContainerRef","moreDropdownMenuRef","trackerElementRef","onOverflowChange","isProcessing","lastOverflowState","trackerBounding","useElementBounding","updateOverflowState","newOverflowIds","calculateOverflowInternal","computedStyle","gapValue","gapWidth","elementRect","currentOverflowState","newOverflowState","debouncedCalculateOverflow","debounce","DEBOUNCE","calculateOverflow","createIntersectionObserver","moreDropdownWidth","calculateMoreButtonWidth","autoDetectActions","isInitializing","cleanupCalculator","clearOverflowState","createObserver","useResizeObserver","useIntersectionObserver","entries","hasChanges","entry","initObserve","addActionIds","debouncedInitObserve","onMounted","onUpdated","onDeactivated","onBeforeUnmount","useDropdownItemStyling","autoStyleDropdownItems","activeItemId","applyDropdownItemStyling","_a","firstElementChild","span","useMoreButtonWidth","moreDropdownRef","moreButtonAlign","hasOverflowActions","dropdownWidth","moreButtonWidth","watch","newValue","nextTick","calculatedWidth","useVisibleElementsWidth","visibleElementsWidth","isRecalculatingWidth","calculateVisibleElementsWidth","totalWidth","isHidden","rect","props","__props","useTemplateRef","isMoreMenuOpen","moreMenuId","uniqueId","isMoreButtonVisible","shouldMoreButtonShow","toggleMoreButtonAnimation","computed","shouldShowMoreButton","isMoreMenuOpenString","actionsContainerWidth","moreButtonPosition","handleDropdownToggle","event"],"mappings":"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"}
+{"version":3,"file":"MoreActions.js","sources":["../src/composables/useToggleAnimation/useToggleAnimation.ts","../src/components/MoreActions/constants.ts","../src/components/MoreActions/utils.ts","../src/components/MoreActions/useOverflowCalculator.ts","../src/components/MoreActions/createIntersectionObserver.ts","../src/components/MoreActions/useDropdownItemStyling.ts","../src/components/MoreActions/useMoreButtonWidth.ts","../src/components/MoreActions/useVisibleElementsWidth.ts","../src/components/MoreActions/MoreActions.vue"],"sourcesContent":["import { useToggle } from '@vueuse/core';\nimport { onUnmounted, type Ref, ref } from 'vue';\n\nexport interface UseToggleAnimationOptions {\n  /**\n   * Duration of the animation in milliseconds\n   * @default 300\n   */\n  duration?: number;\n  /**\n   * Whether to start with the element visible\n   * @default false\n   */\n  initialVisible?: boolean;\n}\n\nexport interface UseToggleAnimationReturn {\n  /**\n   * Whether the element should be visible in the DOM\n   */\n  isVisible: Ref<boolean>;\n  /**\n   * Whether the element should show the \"show\" animation (fade-in)\n   */\n  shouldShow: Ref<boolean>;\n  /**\n   * Whether the element should show the \"hide\" animation (fade-out)\n   */\n  shouldHide: Ref<boolean>;\n  /**\n   * Function to toggle the visibility with animation\n   */\n  toggle: (visible: boolean) => void;\n  /**\n   * Function to show the element with animation\n   */\n  show: () => void;\n  /**\n   * Function to hide the element with animation\n   */\n  hide: () => void;\n  /**\n   * Function to immediately set visibility without animation\n   */\n  setVisible: (visible: boolean) => void;\n  /**\n   * Cleanup function to clear any pending timeouts\n   */\n  cleanup: () => void;\n}\n\n/**\n * Composable for managing toggle animations with proper timeout cleanup\n *\n * @param options Configuration options for the animation\n * @returns Object with visibility state and control functions\n *\n */\nexport function useToggleAnimation(options: UseToggleAnimationOptions = {}): UseToggleAnimationReturn {\n  const { duration = 300, initialVisible = false } = options;\n\n  const [isVisible, toggleIsVisible] = useToggle(initialVisible);\n  const [shouldShow, toggleShouldShow] = useToggle(initialVisible);\n  const [shouldHide, toggleShouldHide] = useToggle(false);\n  const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);\n\n  /**\n   * Clear any existing timeout to prevent race conditions\n   */\n  function clearExistingTimeout(): void {\n    if (timeoutId.value !== null) {\n      clearTimeout(timeoutId.value);\n      timeoutId.value = null;\n    }\n  }\n\n  /**\n   * Set visibility immediately without animation\n   */\n  function setVisible(visible: boolean): void {\n    clearExistingTimeout();\n    if (isVisible.value !== visible) {\n      toggleIsVisible();\n    }\n    if (shouldShow.value !== visible) {\n      toggleShouldShow();\n    }\n    if (shouldHide.value) {\n      toggleShouldHide();\n    }\n  }\n\n  /**\n   * Toggle visibility with animation\n   */\n  function toggle(visible: boolean): void {\n    clearExistingTimeout();\n\n    if (visible) {\n      // Show with fade-in\n      if (!isVisible.value) {\n        toggleIsVisible();\n      }\n      if (!shouldShow.value) {\n        toggleShouldShow();\n      }\n      if (shouldHide.value) {\n        toggleShouldHide();\n      }\n    } else {\n      // Hide with fade-out, then remove from DOM after animation\n      if (shouldShow.value) {\n        toggleShouldShow();\n      }\n      if (!shouldHide.value) {\n        toggleShouldHide();\n      }\n\n      timeoutId.value = setTimeout(() => {\n        if (isVisible.value) {\n          toggleIsVisible();\n        }\n        if (shouldHide.value) {\n          toggleShouldHide();\n        }\n        timeoutId.value = null;\n      }, duration);\n    }\n  }\n\n  /**\n   * Show the element with animation\n   */\n  function show(): void {\n    toggle(true);\n  }\n\n  /**\n   * Hide the element with animation\n   */\n  function hide(): void {\n    toggle(false);\n  }\n\n  /**\n   * Cleanup function to clear any pending timeouts\n   */\n  function cleanup(): void {\n    clearExistingTimeout();\n  }\n\n  // Cleanup timeout on component unmount to prevent memory leaks\n  onUnmounted(() => {\n    cleanup();\n  });\n\n  return {\n    isVisible,\n    shouldShow,\n    shouldHide,\n    toggle,\n    show,\n    hide,\n    setVisible,\n    cleanup,\n  };\n}\n","export const Z_INDEX = {\n  TRACKER: -1,\n  DROPDOWN: 1000,\n} as const;\n\nexport const ID_PREFIXES = {\n  AUTO_ACTION: 'auto-action-',\n  INDEX_BASED: 'index-',\n  MORE_MENU: 'more-actions-menu-',\n} as const;\n\nexport const DATA_ATTRIBUTES = {\n  ACTION_ID: 'data-action-id',\n} as const;\n\nexport const FADE_ANIMATION_DURATION = 300;\n","import { DATA_ATTRIBUTES, ID_PREFIXES } from './constants';\n\n/**\n * Adds data-action-id attributes to first-level children of the actions container\n * Ensures unique IDs by checking existing ones\n */\nexport function addActionIdsToFirstLevelChildren(actionsContainerEl: HTMLElement | null): void {\n  if (!actionsContainerEl) {\n    return;\n  }\n\n  // Get all direct children of the actions container\n  const directChildren = Array.from(actionsContainerEl.children) as HTMLElement[];\n\n  // Collect existing action IDs to avoid duplicates\n  const existingIds = new Set<string>();\n  directChildren.forEach((child) => {\n    const existingId = child.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n    if (existingId) {\n      existingIds.add(existingId);\n    }\n  });\n\n  // Find the next available index for auto-generated IDs\n  let nextIndex = 0;\n  while (existingIds.has(`auto-action-${nextIndex}`)) {\n    nextIndex++;\n  }\n\n  directChildren.forEach((child) => {\n    // Only add data-action-id if it doesn't already exist\n    if (!child.hasAttribute(DATA_ATTRIBUTES.ACTION_ID)) {\n      child.setAttribute(DATA_ATTRIBUTES.ACTION_ID, `${ID_PREFIXES.AUTO_ACTION}${nextIndex}`);\n      nextIndex++;\n    }\n  });\n}\n\n/**\n * Creates a map of elements to their IDs\n */\nexport function createElementIdMap(directChildren: HTMLElement[]): Map<HTMLElement, string> {\n  const elementIdMap = new Map<HTMLElement, string>();\n\n  directChildren.forEach((child, index) => {\n    const actionId = child.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n    if (actionId) {\n      elementIdMap.set(child, actionId);\n    } else {\n      // Use index as ID for elements without data-action-id\n      elementIdMap.set(child, `${ID_PREFIXES.INDEX_BASED}${index}`);\n    }\n  });\n\n  return elementIdMap;\n}\n\n/**\n * Cleans up overflow IDs for elements that no longer exist\n */\nexport function cleanupOverflowIds(overflowIds: Set<string>, currentElementIds: Set<string>): void {\n  const idsToRemove: string[] = [];\n\n  overflowIds.forEach((id) => {\n    if (!currentElementIds.has(id)) {\n      idsToRemove.push(id);\n    }\n  });\n\n  idsToRemove.forEach((id) => {\n    overflowIds.delete(id);\n  });\n}\n\n/**\n * Applies visibility classes to elements based on overflow state\n */\nexport function applyElementVisibility(element: HTMLElement, elementId: string, overflowIds: Set<string>): void {\n  if (overflowIds.has(elementId)) {\n    element.classList.add('tw-invisible');\n  } else {\n    element.classList.remove('tw-invisible');\n  }\n}\n\n/**\n * Syncs dropdown content visibility with main container\n */\nexport function syncDropdownVisibility(\n  moreDropdownMenuEl: HTMLElement | null,\n  actionsContainerEl: HTMLElement | null,\n  overflowIds: Set<string>,\n  itemInDropdownClass?: string | Record<string, boolean> | undefined,\n): void {\n  if (!moreDropdownMenuEl) {\n    return;\n  }\n\n  const allDropdownItems = Array.from(moreDropdownMenuEl.children as HTMLCollection) as HTMLElement[];\n\n  // First, sync data-action-id from main container to dropdown items\n  if (actionsContainerEl) {\n    const mainContainerChildren = Array.from(actionsContainerEl.children) as HTMLElement[];\n    allDropdownItems.forEach((dropdownItem, index) => {\n      if (index < mainContainerChildren.length) {\n        const mainItem = mainContainerChildren[index];\n        const actionId = mainItem.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n        if (actionId) {\n          dropdownItem.setAttribute(DATA_ATTRIBUTES.ACTION_ID, actionId);\n        }\n      }\n    });\n  }\n\n  allDropdownItems.forEach((element) => {\n    const actionId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n    // Apply itemInDropdownClass if provided\n    if (itemInDropdownClass) {\n      if (typeof itemInDropdownClass === 'string') {\n        // Handle string class names (space-separated)\n        const classes = itemInDropdownClass.split(' ').filter(Boolean);\n        classes.forEach((className) => {\n          if (className) {\n            element.classList.add(className);\n          }\n        });\n      } else if (typeof itemInDropdownClass === 'object') {\n        // Handle object with class names as keys and boolean values\n        Object.entries(itemInDropdownClass).forEach(([className, shouldAdd]) => {\n          if (shouldAdd) {\n            element.classList.add(className);\n          } else {\n            element.classList.remove(className);\n          }\n        });\n      }\n    }\n\n    // Actions elements - show if they overflow\n    const shouldShow = actionId && overflowIds.has(actionId);\n    if (shouldShow) {\n      element.classList.remove('tw-hidden');\n    } else {\n      element.classList.add('tw-hidden');\n    }\n  });\n}\n","import { useElementBounding } from '@vueuse/core';\nimport debounce from 'lodash-es/debounce';\nimport { type Ref, ref, type ShallowRef } from 'vue';\n\nimport { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES } from './constants';\nimport { applyElementVisibility, createElementIdMap, syncDropdownVisibility } from './utils';\n\ninterface UseOverflowCalculatorOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  trackerElementRef: ShallowRef<HTMLElement | null>;\n  itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  onOverflowChange?: () => void;\n}\n\nexport function useOverflowCalculator({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\n  itemInDropdownClass,\n  onOverflowChange,\n}: UseOverflowCalculatorOptions) {\n  const isProcessing = ref(false);\n  const lastOverflowState = ref<string>(''); // Track last overflow state to prevent unnecessary updates\n  const trackerBounding = useElementBounding(trackerElementRef);\n\n  /**\n   * Updates overflow state and applies visibility classes to elements\n   */\n  function updateOverflowState(\n    newOverflowIds: Set<string>,\n    directChildren: HTMLElement[],\n    elementIdMap: Map<HTMLElement, string>,\n  ): void {\n    overflowIds.value.clear();\n    newOverflowIds.forEach((id) => overflowIds.value.add(id));\n\n    // Apply visibility classes\n    directChildren.forEach((element) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n      if (elementId) {\n        applyElementVisibility(element, elementId, overflowIds.value);\n      }\n    });\n  }\n\n  function calculateOverflowInternal() {\n    if (!actionsContainerRef.value || !trackerElementRef.value) {\n      isProcessing.value = false;\n      return;\n    }\n\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n    const elementIdMap = createElementIdMap(directChildren);\n\n    // Create a new overflow set to compare with current state\n    const newOverflowIds = new Set<string>();\n\n    // Get current gap width from CSS computed styles of the actions container\n    const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n    const gapValue = computedStyle.columnGap || computedStyle.gap;\n    const gapWidth = gapValue ? parseFloat(gapValue) : 0;\n\n    // Calculate which elements should be hidden based on their position relative to tracker\n    directChildren.forEach((element, index) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n      const elementRect = element.getBoundingClientRect();\n\n      // Calculate the effective right edge including gap\n      // If this is not the last element, add gap to the right edge\n      const effectiveRightEdge = index < directChildren.length - 1 ? elementRect.right + gapWidth : elementRect.right;\n\n      // If element's effective right edge extends beyond tracker's left edge, hide it\n      if (effectiveRightEdge > trackerBounding.left.value) {\n        if (elementId) {\n          newOverflowIds.add(elementId);\n        }\n      }\n    });\n\n    // Check if overflow state has actually changed\n    const currentOverflowState = Array.from(overflowIds.value).sort().join(',');\n    const newOverflowState = Array.from(newOverflowIds).sort().join(',');\n\n    if (currentOverflowState !== newOverflowState) {\n      // Update overflow state and apply visibility\n      updateOverflowState(newOverflowIds, directChildren, elementIdMap);\n\n      // Sync dropdown content visibility\n      syncDropdownVisibility(\n        moreDropdownMenuRef.value,\n        actionsContainerRef.value,\n        overflowIds.value,\n        itemInDropdownClass,\n      );\n\n      // Call callback if provided and state actually changed\n      if (onOverflowChange && lastOverflowState.value !== newOverflowState) {\n        lastOverflowState.value = newOverflowState;\n        onOverflowChange();\n      }\n    }\n\n    isProcessing.value = false;\n  }\n\n  const debouncedCalculateOverflow = debounce(calculateOverflowInternal, DEBOUNCE.FAST);\n\n  function calculateOverflow() {\n    if (isProcessing.value || !actionsContainerRef.value || !trackerElementRef.value) {\n      return;\n    }\n\n    isProcessing.value = true;\n    debouncedCalculateOverflow();\n  }\n\n  function cleanup() {\n    debouncedCalculateOverflow.cancel();\n    isProcessing.value = false;\n  }\n\n  return {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    cleanup,\n    isProcessing,\n  };\n}\n","import { useIntersectionObserver, useResizeObserver } from '@vueuse/core';\nimport debounce from 'lodash-es/debounce';\nimport { onBeforeUnmount, onDeactivated, onMounted, onUpdated, type Ref, ref, type ShallowRef } from 'vue';\n\nimport { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES } from './constants';\nimport { useOverflowCalculator } from './useOverflowCalculator';\nimport {\n  addActionIdsToFirstLevelChildren as addActionIds,\n  cleanupOverflowIds,\n  createElementIdMap,\n  syncDropdownVisibility,\n} from './utils';\n\ninterface CreateIntersectionObserverOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  trackerElementRef: ShallowRef<HTMLElement | null>;\n  moreDropdownWidth: Ref<number>;\n  itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  calculateMoreButtonWidth: () => number;\n  autoDetectActions?: boolean;\n  onOverflowChange?: () => void;\n}\n\nexport function createIntersectionObserver({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\n  moreDropdownWidth,\n  itemInDropdownClass,\n  calculateMoreButtonWidth,\n  autoDetectActions = true,\n  onOverflowChange,\n}: CreateIntersectionObserverOptions) {\n  const isInitializing = ref(false);\n\n  const {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    cleanup: cleanupCalculator,\n    isProcessing,\n  } = useOverflowCalculator({\n    actionsContainerRef,\n    overflowIds,\n    moreDropdownMenuRef,\n    trackerElementRef,\n    itemInDropdownClass,\n    onOverflowChange,\n  });\n  function clearOverflowState() {\n    overflowIds.value.clear();\n    moreDropdownWidth.value = 0;\n  }\n\n  function createObserver() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // Get all direct children of the actions container\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n\n    // Create a map of elements to their IDs (either data-action-id or index-based)\n    const elementIdMap = createElementIdMap(directChildren);\n\n    // Clean up overflowIds for elements that no longer exist\n    const currentElementIds = new Set(elementIdMap.values());\n    cleanupOverflowIds(overflowIds.value, currentElementIds);\n\n    // to track container size changes\n    useResizeObserver(actionsContainerRef, calculateOverflow);\n\n    useIntersectionObserver(\n      directChildren,\n      (entries) => {\n        if (isProcessing.value) {\n          return;\n        }\n\n        let hasChanges = false;\n        const newOverflowIds = new Set(overflowIds.value);\n\n        entries.forEach((entry) => {\n          const element = entry.target as HTMLElement;\n          const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || undefined;\n\n          // Check if element is fully visible\n          if (entry.intersectionRatio === 1) {\n            // show action, hide in dropdown\n            if (elementId && newOverflowIds.has(elementId)) {\n              newOverflowIds.delete(elementId);\n              hasChanges = true;\n            }\n          } else {\n            // hide action, show in dropdown (intersectionRatio < 1 means partially or not visible)\n            if (elementId && !newOverflowIds.has(elementId)) {\n              newOverflowIds.add(elementId);\n              hasChanges = true;\n            }\n          }\n        });\n\n        // Only update if there are actual changes\n        if (hasChanges) {\n          const currentOverflowState = Array.from(overflowIds.value).sort().join(',');\n          const newOverflowState = Array.from(newOverflowIds).sort().join(',');\n\n          if (currentOverflowState !== newOverflowState) {\n            // Update overflow state and apply visibility\n            updateOverflowState(newOverflowIds, directChildren, elementIdMap);\n\n            // Sync dropdown content visibility\n            syncDropdownVisibility(\n              moreDropdownMenuRef.value,\n              actionsContainerRef.value,\n              overflowIds.value,\n              itemInDropdownClass,\n            );\n\n            // Call callback if provided and state actually changed\n            if (onOverflowChange) {\n              onOverflowChange();\n            }\n          }\n        }\n      },\n      {\n        root: actionsContainerRef.value,\n      },\n    );\n\n    // Apply initial visibility to all elements\n    directChildren.forEach((element) => {\n      const elementId = elementIdMap.get(element) || element.getAttribute(DATA_ATTRIBUTES.ACTION_ID) || '';\n      applyElementVisibility(element, elementId, overflowIds.value);\n    });\n\n    // Initial calculation\n    calculateOverflow();\n\n    syncDropdownVisibility(\n      moreDropdownMenuRef.value,\n      actionsContainerRef.value,\n      overflowIds.value,\n      itemInDropdownClass,\n    );\n  }\n\n  function initObserve() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n\n    createObserver();\n\n    // Set initial dropdown width - only if not already set\n    if (moreDropdownWidth.value === 0) {\n      moreDropdownWidth.value = calculateMoreButtonWidth();\n    }\n  }\n\n  const debouncedInitObserve = debounce(\n    () => {\n      if (!isInitializing.value) {\n        isInitializing.value = true;\n        initObserve();\n        isInitializing.value = false;\n      }\n    },\n    DEBOUNCE.FAST,\n    { leading: true },\n  );\n\n  onMounted(() => {\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n    initObserve();\n  });\n\n  onUpdated(() => {\n    // Add data-action-id to first-level children if autoDetectActions is enabled\n    if (autoDetectActions) {\n      addActionIds(actionsContainerRef.value);\n    }\n    // Clear overflowIds if no actions are present\n    if (actionsContainerRef.value) {\n      const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n      if (directChildren.length === 0) {\n        clearOverflowState();\n      }\n    }\n    cleanupCalculator();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    cleanupCalculator();\n  });\n\n  onBeforeUnmount(() => {\n    cleanupCalculator();\n  });\n}\n","import { type Ref, type ShallowRef } from 'vue';\n\nimport { DATA_ATTRIBUTES } from './constants';\n\n// Updated interface with Ref suffix naming convention\ninterface UseDropdownItemStylingOptions {\n  moreDropdownMenuRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n  autoStyleDropdownItems: boolean;\n  activeItemId?: Ref<string | undefined>;\n}\n\nexport function useDropdownItemStyling({\n  moreDropdownMenuRef,\n  overflowIds,\n  autoStyleDropdownItems,\n  activeItemId,\n}: UseDropdownItemStylingOptions) {\n  /**\n   * Applies dropdown item styling to elements in the dropdown menu\n   */\n  function applyDropdownItemStyling() {\n    if (!autoStyleDropdownItems || !moreDropdownMenuRef.value) {\n      return;\n    }\n\n    const dropdownItems = Array.from(moreDropdownMenuRef.value.children);\n\n    dropdownItems.forEach((element) => {\n      if (!(element instanceof HTMLElement)) {\n        return;\n      }\n\n      // Get the data-action-id which should match the overflow IDs\n      const actionId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n      // Hide elements that are not in overflow (still visible in main container)\n      if (actionId && !overflowIds.value.has(actionId)) {\n        element.classList.add('tw-hidden');\n        return; // Skip styling for hidden elements\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      // Remove existing checkmark icon\n      element.querySelector('.stash-tabs__dropdown-selected-tab-icon')?.remove();\n\n      // Clear classes from the first child element (button/component inside tab)\n      const firstElementChild = element.firstElementChild as Element;\n      if (firstElementChild) {\n        firstElementChild.className = '';\n      }\n\n      // Clear existing classes\n      element.className = '';\n\n      // Apply dropdown item styling\n      element.classList.add(\n        'tw-flex',\n        'tw-items-center',\n        'tw-justify-between',\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:!tw-bg-ice-200',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-bg-blue-100',\n        'tw-list-none',\n      );\n\n      // Check if this is the active item and add checkmark\n      const elementId = element.getAttribute('id');\n      if (elementId && activeItemId?.value && elementId === activeItemId.value) {\n        const span = document.createElement('span');\n        span.className = 'stash-tabs__dropdown-selected-tab-icon';\n        span.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"tw-text-blue-500 tw-w-6 tw-h-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20.707 6.854 9 18.561l-5.707-5.707 1.414-1.414L9 15.733 19.293 5.44l1.414 1.414Z\" clip-rule=\"evenodd\"/></svg>`;\n        element.appendChild(span);\n      }\n    });\n  }\n\n  return {\n    applyDropdownItemStyling,\n  };\n}\n","import { type ComputedRef, nextTick, ref, type ShallowRef, watch } from 'vue';\n\nimport Dropdown from '../Dropdown/Dropdown.vue';\n\n// Updated interface with Ref suffix naming convention\ninterface UseMoreDropdownWidthOptions {\n  moreDropdownRef: ShallowRef<InstanceType<typeof Dropdown> | null>;\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  moreButtonAlign: 'separate' | 'together';\n  hasOverflowActions: ComputedRef<boolean>;\n}\n\nexport function useMoreButtonWidth({\n  moreDropdownRef,\n  actionsContainerRef,\n  moreButtonAlign,\n  hasOverflowActions,\n}: UseMoreDropdownWidthOptions) {\n  /**\n   * Calculates the width of the More dropdown with gap consideration\n   * When moreButtonAlign is 'separate', adds the gap between actions container and dropdown\n   * When moreButtonAlign is 'together', returns only the dropdown width\n   */\n  const calculateMoreButtonWidth = (): number => {\n    if (!moreDropdownRef.value?.$el) {\n      return 0;\n    }\n\n    const dropdownWidth = moreDropdownRef.value.$el.getBoundingClientRect().width;\n\n    // If moreButtonAlign is separate, add gap between actions container and dropdown\n    if (moreButtonAlign === 'separate' && actionsContainerRef.value) {\n      const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n      const gapWidth = parseFloat(computedStyle.gap) || 0;\n      return dropdownWidth + gapWidth;\n    }\n\n    return dropdownWidth;\n  };\n\n  const moreButtonWidth = ref(0);\n\n  watch(hasOverflowActions, (newValue) => {\n    if (newValue && moreDropdownRef.value) {\n      nextTick(() => {\n        const calculatedWidth = calculateMoreButtonWidth();\n        if (calculatedWidth > 0) {\n          moreButtonWidth.value = calculatedWidth;\n        }\n      });\n    }\n  });\n\n  return {\n    calculateMoreButtonWidth,\n    moreButtonWidth,\n  };\n}\n","import { nextTick, type Ref, ref, type ShallowRef, watch } from 'vue';\n\nimport { DATA_ATTRIBUTES } from './constants';\n\ninterface UseVisibleElementsWidthOptions {\n  actionsContainerRef: ShallowRef<HTMLElement | null>;\n  overflowIds: Ref<Set<string>>;\n}\n\nexport function useVisibleElementsWidth({ actionsContainerRef, overflowIds }: UseVisibleElementsWidthOptions) {\n  const visibleElementsWidth = ref(0);\n  const isRecalculatingWidth = ref(false);\n\n  /**\n   * Calculates the total width of currently visible elements\n   * This is used for positioning the More button\n   */\n  const calculateVisibleElementsWidth = () => {\n    if (!actionsContainerRef.value) {\n      visibleElementsWidth.value = 0;\n      return;\n    }\n\n    let totalWidth = 0;\n    const directChildren = Array.from(actionsContainerRef.value.children) as HTMLElement[];\n\n    directChildren.forEach((element, index) => {\n      const isHidden = element.classList.contains('tw-invisible');\n\n      // Only count visible elements\n      const elementId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n      if (!isHidden && elementId && !overflowIds.value.has(elementId)) {\n        const rect = element.getBoundingClientRect();\n        totalWidth += rect.width;\n        // Add gap between elements\n        if (index < directChildren.length - 1 && actionsContainerRef.value) {\n          // Always get the most current gap width from CSS computed styles of the actions container\n          const computedStyle = window.getComputedStyle(actionsContainerRef.value);\n          const gapValue = computedStyle.columnGap || computedStyle.gap;\n          const gapWidth = gapValue ? parseFloat(gapValue) : 0;\n          totalWidth += gapWidth;\n        }\n      }\n    });\n\n    visibleElementsWidth.value = totalWidth;\n  };\n\n  // Watch for changes in overflowIds to recalculate visible elements width\n  watch(overflowIds, () => {\n    if (!isRecalculatingWidth.value) {\n      isRecalculatingWidth.value = true;\n      nextTick(() => {\n        calculateVisibleElementsWidth();\n        isRecalculatingWidth.value = false;\n      });\n    }\n  });\n\n  return {\n    visibleElementsWidth,\n    isRecalculatingWidth,\n    calculateVisibleElementsWidth,\n  };\n}\n","<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';\n\n  import { useToggleAnimation } from '../../composables/useToggleAnimation/useToggleAnimation';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { FADE_ANIMATION_DURATION, ID_PREFIXES, Z_INDEX } from './constants';\n  import { createIntersectionObserver } from './createIntersectionObserver';\n  import { useDropdownItemStyling } from './useDropdownItemStyling';\n  import { useMoreButtonWidth } from './useMoreButtonWidth';\n  import { useVisibleElementsWidth } from './useVisibleElementsWidth';\n\n  export interface MoreActionsProps {\n    /**\n     * CSS class or classes to be applied to the dropdown content\n     */\n    dropdownContentClass?: string;\n    /**\n     * CSS class or classes to be applied to the actions container\n     */\n    actionsContainerClass?: string | Record<string, boolean> | undefined;\n    /**\n     * Text to display on the more actions button\n     */\n    moreButtonText?: string;\n    /**\n     * Optional width for the more-actions container\n     * Applies style=\"width: {width}\" to the stash-more-actions element\n     */\n    width?: string | number;\n    /**\n     * Rendering mode for dropdown items\n     * - 'default': Button-style rendering (current behavior)\n     * - 'custom': Custom rendering through slots\n     */\n    dropdownMode?: 'default' | 'custom';\n    /**\n     * Whether to disable automatic detection of actions from first-level children in the actions slot\n     * When false (default), all direct children in the actions slot will be treated as actions\n     * without needing to manually add data-action-id attributes\n     */\n    disableAutoDetectActions?: boolean;\n    /**\n     * Whether to apply dropdown item styling automatically\n     * When enabled, applies flex layout, padding, hover effects, and other styling to dropdown items\n     */\n    autoStyleDropdownItems?: boolean;\n    /**\n     * Active item ID for highlighting in dropdown\n     * Used when autoStyleDropdownItems is enabled to show which item is currently selected\n     */\n    activeItemId?: string;\n    /**\n     * Alignment of the More button\n     * - 'separate': Button is aligned to the right edge of the actions container (default)\n     * - 'together': Button is aligned immediately after the last visible action\n     */\n    moreButtonAlign?: 'separate' | 'together';\n    /**\n     * CSS class or classes to be applied to items inside the dropdown\n     */\n    itemInDropdownClass?: string | Record<string, boolean> | undefined;\n  }\n\n  const props = withDefaults(defineProps<MoreActionsProps>(), {\n    activeItemId: undefined,\n    dropdownContentClass: undefined,\n    actionsContainerClass: undefined,\n    moreButtonText: () => t('ll.more'),\n    dropdownMode: 'default',\n    disableAutoDetectActions: false,\n    moreButtonAlign: 'separate',\n    width: undefined,\n    itemInDropdownClass: undefined,\n  });\n\n  // Refs for DOM elements\n  const actionsContainerRef = useTemplateRef('actionsContainerRef');\n  const moreDropdownRef = useTemplateRef('moreDropdownRef');\n  const moreDropdownMenuRef = useTemplateRef('moreDropdownMenuRef');\n  const trackerElementRef = useTemplateRef('trackerElementRef');\n\n  // State management\n  const overflowIds = ref<Set<string>>(new Set());\n  const isMoreMenuOpen = ref(false);\n  const moreMenuId = uniqueId(ID_PREFIXES.MORE_MENU);\n\n  const {\n    isVisible: isMoreButtonVisible,\n    shouldShow: shouldMoreButtonShow,\n    toggle: toggleMoreButtonAnimation,\n  } = useToggleAnimation({\n    duration: FADE_ANIMATION_DURATION,\n    initialVisible: false,\n  });\n\n  const hasOverflowActions = computed(() => overflowIds.value.size > 0);\n\n  // Updated to use new Ref suffix naming convention\n  const { calculateMoreButtonWidth, moreButtonWidth } = useMoreButtonWidth({\n    moreDropdownRef,\n    actionsContainerRef,\n    moreButtonAlign: props.moreButtonAlign,\n    hasOverflowActions,\n  });\n\n  // Updated to use new Ref suffix naming convention\n  const { visibleElementsWidth, isRecalculatingWidth, calculateVisibleElementsWidth } = useVisibleElementsWidth({\n    actionsContainerRef,\n    overflowIds,\n  });\n\n  const shouldShowMoreButton = computed(() => {\n    return hasOverflowActions.value;\n  });\n\n  const isMoreMenuOpenString = computed(() => isMoreMenuOpen.value.toString());\n\n  const actionsContainerWidth = computed(() => {\n    if (!shouldShowMoreButton.value) {\n      return '100%';\n    }\n\n    return `calc(100% - ${moreButtonWidth.value}px)`;\n  });\n\n  const moreButtonPosition = computed(() => {\n    if (props.moreButtonAlign === 'together') {\n      return { left: `${visibleElementsWidth.value}px`, right: 'auto' };\n    } else {\n      // Default separate alignment\n      return { right: '0', left: 'auto' };\n    }\n  });\n\n  createIntersectionObserver({\n    actionsContainerRef,\n    overflowIds,\n    moreDropdownMenuRef,\n    trackerElementRef,\n    moreDropdownWidth: moreButtonWidth,\n    itemInDropdownClass: props.itemInDropdownClass,\n    calculateMoreButtonWidth,\n    autoDetectActions: !props.disableAutoDetectActions,\n\n    onOverflowChange: () => {\n      // Recalculate visible elements width when overflow changes\n      if (!isRecalculatingWidth.value) {\n        nextTick(() => {\n          calculateVisibleElementsWidth();\n        });\n      }\n    },\n  });\n\n  // Updated to use new Ref suffix naming convention\n  const { applyDropdownItemStyling } = useDropdownItemStyling({\n    moreDropdownMenuRef,\n    overflowIds,\n    autoStyleDropdownItems: props.autoStyleDropdownItems,\n    activeItemId: computed(() => props.activeItemId),\n  });\n\n  // Watch for changes in shouldShowMoreButton to handle fade animations\n  watch(shouldShowMoreButton, (newValue) => {\n    toggleMoreButtonAnimation(newValue);\n  });\n\n  function handleDropdownToggle(event: boolean) {\n    isMoreMenuOpen.value = event;\n    if (event && props.autoStyleDropdownItems) {\n      nextTick(() => applyDropdownItemStyling());\n    }\n  }\n</script>\n\n<template>\n  <div class=\"stash-more-actions tw-relative\" data-test=\"stash-more-actions\" :style=\"{ width: props.width }\">\n    <div\n      ref=\"actionsContainerRef\"\n      :style=\"{\n        width: actionsContainerWidth,\n      }\"\n      :class=\"['stash-more-actions__container tw-flex tw-items-center tw-gap-2', props.actionsContainerClass]\"\n    >\n      <!-- Actions slot for elements that can be hidden -->\n      <slot name=\"actions\"></slot>\n    </div>\n\n    <!-- Tracker Element - to detect when action elements overlap with it, triggering overflow behavior -->\n    <div\n      ref=\"trackerElementRef\"\n      class=\"stash-more-actions__tracker\"\n      :style=\"{\n        position: 'absolute',\n        right: '0px',\n        top: '0',\n        visibility: 'hidden',\n        width: moreButtonWidth + 'px',\n        height: '100%',\n        pointerEvents: 'none',\n        zIndex: Z_INDEX.TRACKER,\n      }\"\n    ></div>\n\n    <Dropdown\n      v-show=\"isMoreButtonVisible\"\n      ref=\"moreDropdownRef\"\n      :content-class=\"props.dropdownContentClass\"\n      :class=\"['!tw-absolute tw-top-0', shouldMoreButtonShow ? 'tw-animate-fade-in' : 'tw-animate-fade-out']\"\n      :style=\"moreButtonPosition\"\n      @toggle=\"handleDropdownToggle\"\n    >\n      <template #toggle=\"{ toggle }\">\n        <slot name=\"toggle\" :toggle=\"toggle\" :is-open=\"isMoreMenuOpen\">\n          <Button\n            class=\"button tw-border-gray-500 tw-text-gray-500 tw-flex tw-w-full tw-items-center tw-justify-between tw-border\"\n            secondary\n            :aria-expanded=\"isMoreMenuOpenString\"\n            @click=\"toggle\"\n          >\n            {{ props.moreButtonText }} <Icon class=\"tw-ml-1.5\" name=\"action-dots\" />\n          </Button>\n        </slot>\n      </template>\n\n      <template #default>\n        <div :id=\"moreMenuId\" ref=\"moreDropdownMenuRef\" class=\"tw-flex tw-flex-col tw-gap-1.5 tw-p-1.5\">\n          <!-- Actions slot content in dropdown (only overflow items) -->\n          <slot name=\"actions\"></slot>\n        </div>\n      </template>\n    </Dropdown>\n  </div>\n</template>\n\n<style module>\n  :global([data-action-id]) {\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["useToggleAnimation","options","duration","initialVisible","isVisible","toggleIsVisible","useToggle","shouldShow","toggleShouldShow","shouldHide","toggleShouldHide","timeoutId","ref","clearExistingTimeout","setVisible","visible","toggle","show","hide","cleanup","onUnmounted","Z_INDEX","ID_PREFIXES","DATA_ATTRIBUTES","FADE_ANIMATION_DURATION","addActionIdsToFirstLevelChildren","actionsContainerEl","directChildren","existingIds","child","existingId","nextIndex","createElementIdMap","elementIdMap","index","actionId","cleanupOverflowIds","overflowIds","currentElementIds","idsToRemove","id","applyElementVisibility","element","elementId","syncDropdownVisibility","moreDropdownMenuEl","itemInDropdownClass","allDropdownItems","mainContainerChildren","dropdownItem","className","shouldAdd","useOverflowCalculator","actionsContainerRef","moreDropdownMenuRef","trackerElementRef","onOverflowChange","isProcessing","lastOverflowState","trackerBounding","useElementBounding","updateOverflowState","newOverflowIds","calculateOverflowInternal","computedStyle","gapValue","gapWidth","elementRect","currentOverflowState","newOverflowState","debouncedCalculateOverflow","debounce","DEBOUNCE","calculateOverflow","createIntersectionObserver","moreDropdownWidth","calculateMoreButtonWidth","autoDetectActions","isInitializing","cleanupCalculator","clearOverflowState","createObserver","useResizeObserver","useIntersectionObserver","entries","hasChanges","entry","initObserve","addActionIds","debouncedInitObserve","onMounted","onUpdated","onDeactivated","onBeforeUnmount","useDropdownItemStyling","autoStyleDropdownItems","activeItemId","applyDropdownItemStyling","_a","firstElementChild","span","useMoreButtonWidth","moreDropdownRef","moreButtonAlign","hasOverflowActions","dropdownWidth","moreButtonWidth","watch","newValue","nextTick","calculatedWidth","useVisibleElementsWidth","visibleElementsWidth","isRecalculatingWidth","calculateVisibleElementsWidth","totalWidth","isHidden","rect","props","__props","useTemplateRef","isMoreMenuOpen","moreMenuId","uniqueId","isMoreButtonVisible","shouldMoreButtonShow","toggleMoreButtonAnimation","computed","shouldShowMoreButton","isMoreMenuOpenString","actionsContainerWidth","moreButtonPosition","handleDropdownToggle","event"],"mappings":"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"}

package/dist/ObfuscateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\n    });\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"props.showToggle\"\n      class=\"tw-ml-1 tw-size-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\n    });\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"props.showToggle\"\n      class=\"tw-ml-1 tw-size-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  export interface PageContentProps {\n    /**\n     * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.\n     */\n    activeTab?: string;\n  }\n\n  const props = withDefaults(defineProps<PageContentProps>(), {\n    activeTab: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    :id=\"props.activeTab ? `tabpanel-${props.activeTab}` : undefined\"\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['stash-page-content--has-sidebar']]: !!slots.sidebar,\n      },\n    ]\"\n    data-test=\"stash-page-content\"\n    :role=\"props.activeTab ? 'tabpanel' : undefined\"\n  >\n    <div :class=\"classes['stash-page-content__main']\">\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\" :class=\"classes['stash-page-content__sidebar']\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .stash-page-content--has-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--grid-gutter);\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__main {\n    flex: 1; /* 12 cols */\n    min-width: 0;\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__sidebar {\n    flex: 0;\n    min-width: 0;\n  }\n\n  @media screen('lg') {\n    .stash-page-content--has-sidebar {\n      flex-direction: row;\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__main {\n      flex: 3; /* 9 cols */\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__sidebar {\n      flex: 1; /* 3 cols */\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule"],"mappings":";;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAS,GACjBC,IAAUC,EAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  export interface PageContentProps {\n    /**\n     * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.\n     */\n    activeTab?: string;\n  }\n\n  const props = withDefaults(defineProps<PageContentProps>(), {\n    activeTab: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    :id=\"props.activeTab ? `tabpanel-${props.activeTab}` : undefined\"\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['stash-page-content--has-sidebar']]: !!slots.sidebar,\n      },\n    ]\"\n    data-test=\"stash-page-content\"\n    :role=\"props.activeTab ? 'tabpanel' : undefined\"\n  >\n    <div :class=\"classes['stash-page-content__main']\">\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\" :class=\"classes['stash-page-content__sidebar']\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .stash-page-content--has-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--grid-gutter);\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__main {\n    flex: 1; /* 12 cols */\n    min-width: 0;\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__sidebar {\n    flex: 0;\n    min-width: 0;\n  }\n\n  @media screen('lg') {\n    .stash-page-content--has-sidebar {\n      flex-direction: row;\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__main {\n      flex: 3; /* 9 cols */\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__sidebar {\n      flex: 1; /* 3 cols */\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule"],"mappings":";;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GACRC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title?: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    title: undefined,\n    description: undefined,\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    data-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 v-if=\"props.title\" class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"props.description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">\n            {{ props.description }}\n          </p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: var(--grid-gutter);\n    margin: 0 auto;\n    max-width: theme('width.container');\n    padding: theme('spacing.6') var(--grid-gutter) theme('spacing.12');\n    width: 100%;\n  }\n\n  @media screen('lg') {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen('md') {\n    .actions {\n      column-gap: var(--grid-gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen('lg') {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAKRC,IAAUC,EAAa,GACvBC,IAAQC,EAAS,GAEjBC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title?: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    title: undefined,\n    description: undefined,\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    data-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 v-if=\"props.title\" class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"props.description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">\n            {{ props.description }}\n          </p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: var(--grid-gutter);\n    margin: 0 auto;\n    max-width: theme('width.container');\n    padding: theme('spacing.6') var(--grid-gutter) theme('spacing.12');\n    width: 100%;\n  }\n\n  @media screen('lg') {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen('md') {\n    .actions {\n      column-gap: var(--grid-gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen('lg') {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAKRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAERC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import kebabCase from 'lodash-es/kebabCase';\n  import { onMounted, ref, watch } from 'vue';\n  import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';\n\n  import Tab, { type TabProps } from '../Tab/Tab.vue';\n  import Tabs from '../Tabs/Tabs.vue';\n\n  defineOptions({\n    name: 'll-page-navigation',\n  });\n\n  export interface NavItem extends Omit<TabProps, 'value'> {\n    /**\n     * The tab's label\n     */\n    label: string;\n\n    /**\n     * The tab's label\n     */\n    value?: string;\n  }\n\n  export interface PageNavigationProps {\n    /**\n     * Index of active tab (zero-based)\n     * @deprecated Use v-model instead.\n     */\n    activeIndex?: number | string;\n\n    /**\n     * The currently active tab value\n     */\n    modelValue?: string;\n\n    /**\n     * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n     */\n    items: NavItem[];\n  }\n\n  const props = withDefaults(defineProps<PageNavigationProps>(), {\n    activeIndex: undefined,\n    modelValue: '',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emits the current active nav value\n     */\n    (e: 'update:modelValue', activeTab: string): void;\n\n    /**\n     * Emits the current active nav index\n     * @deprecated - Use v-model instead.\n     */\n    (e: 'change', activeNavIndex: number): void;\n  }>();\n\n  if (props.activeIndex) {\n    logger.info('The `activeIndex` prop is deprecated. Use `v-model` instead.');\n  }\n\n  const route = useRoute();\n  const router = useRouter();\n\n  // this ref is needed to keep track of the active tab even if v-model is not passed\n  const activeTab = ref('');\n\n  function onUpdateActiveTab(newActiveTab: string) {\n    if (newActiveTab === activeTab.value) return;\n\n    activeTab.value = newActiveTab;\n    emit('update:modelValue', newActiveTab);\n  }\n\n  watch(\n    () => props.modelValue,\n    (newValue, oldValue) => {\n      if (oldValue === newValue) return;\n\n      // TODO: Remove this once activeIndex is removed\n      const activeNavItemIndex = props.items.findIndex((item) => kebabCase(item.label) === newValue);\n      emit('change', activeNavItemIndex);\n\n      // Forcing updating activeTab when the component is in a keep alive state\n      onUpdateActiveTab(newValue);\n    },\n  );\n\n  onMounted(() => {\n    if (!props.items.length) return;\n\n    // TODO: Remove this once activeIndex is removed\n    if (props.activeIndex !== undefined) {\n      const activeTabItem = props.items[props.activeIndex];\n\n      onUpdateActiveTab(kebabCase(activeTabItem.label));\n\n      return;\n    }\n\n    if (props.modelValue !== activeTab.value) {\n      onUpdateActiveTab(props.modelValue);\n      return;\n    }\n\n    if (!router) return;\n\n    const itemMatchingRoute = props.items.find((item) => {\n      if (item?.disabled || (!item?.to && !item?.href)) return;\n\n      const { path } = router.resolve((item?.to as RouteLocationRaw) || (item?.href as string));\n\n      if (path === route.path) {\n        return true;\n      }\n\n      if (!route.path.includes(path)) return;\n\n      const sliceIndex = (route.path.length - route.path.lastIndexOf('/')) * -1;\n      const parentPath = route.path.slice(0, sliceIndex);\n\n      return path === parentPath;\n    });\n\n    if (!itemMatchingRoute) return;\n\n    onUpdateActiveTab(itemMatchingRoute?.value || kebabCase(itemMatchingRoute.label));\n  });\n</script>\n\n<template>\n  <nav class=\"stash-page-navigation container\" data-test=\"stash-page-navigation\">\n    <Tabs :active-tab=\"activeTab\" @update:active-tab=\"onUpdateActiveTab\">\n      <Tab\n        v-for=\"(item, index) in props.items\"\n        :key=\"item.label\"\n        :value=\"item?.value || kebabCase(item.label)\"\n        :to=\"item.to\"\n        :href=\"item.href\"\n        :badge=\"item.badge\"\n        :disabled=\"item.disabled\"\n        :data-id=\"index\"\n      >\n        {{ item.label }}\n      </Tab>\n    </Tabs>\n  </nav>\n</template>\n"],"names":["props","__props","emit","__emit","logger","route","useRoute","router","useRouter","activeTab","ref","onUpdateActiveTab","newActiveTab","watch","newValue","oldValue","activeNavItemIndex","item","kebabCase","onMounted","activeTabItem","itemMatchingRoute","path","sliceIndex","parentPath"],"mappings":";;;;;;;;;;;;;;;;;;;AA2CE,UAAMA,IAAQC,GAKRC,IAAOC;AAab,IAAIH,EAAM,eACRI,EAAO,KAAK,8DAA8D;AAG5E,UAAMC,IAAQC,EAAS,GACjBC,IAASC,EAAU,GAGnBC,IAAYC,EAAI,EAAE;AAExB,aAASC,EAAkBC,GAAsB;AAC3C,MAAAA,MAAiBH,EAAU,UAE/BA,EAAU,QAAQG,GAClBV,EAAK,qBAAqBU,CAAY;AAAA,IAAA;AAGxC,WAAAC;AAAA,MACE,MAAMb,EAAM;AAAA,MACZ,CAACc,GAAUC,MAAa;AACtB,YAAIA,MAAaD,EAAU;AAGrB,cAAAE,IAAqBhB,EAAM,MAAM,UAAU,CAACiB,MAASC,EAAUD,EAAK,KAAK,MAAMH,CAAQ;AAC7F,QAAAZ,EAAK,UAAUc,CAAkB,GAGjCL,EAAkBG,CAAQ;AAAA,MAAA;AAAA,IAE9B,GAEAK,EAAU,MAAM;AACV,UAAA,CAACnB,EAAM,MAAM,OAAQ;AAGrB,UAAAA,EAAM,gBAAgB,QAAW;AACnC,cAAMoB,IAAgBpB,EAAM,MAAMA,EAAM,WAAW;AAEjC,QAAAW,EAAAO,EAAUE,EAAc,KAAK,CAAC;AAEhD;AAAA,MAAA;AAGE,UAAApB,EAAM,eAAeS,EAAU,OAAO;AACxC,QAAAE,EAAkBX,EAAM,UAAU;AAClC;AAAA,MAAA;AAGF,UAAI,CAACO,EAAQ;AAEb,YAAMc,IAAoBrB,EAAM,MAAM,KAAK,CAACiB,MAAS;AACnD,YAAIA,KAAA,QAAAA,EAAM,YAAa,EAACA,KAAA,QAAAA,EAAM,OAAM,EAACA,KAAA,QAAAA,EAAM,MAAO;AAE5C,cAAA,EAAE,MAAAK,EAAS,IAAAf,EAAO,SAASU,KAAA,gBAAAA,EAAM,QAA4BA,KAAA,gBAAAA,EAAM,KAAe;AAEpF,YAAAK,MAASjB,EAAM;AACV,iBAAA;AAGT,YAAI,CAACA,EAAM,KAAK,SAASiB,CAAI,EAAG;AAE1B,cAAAC,KAAclB,EAAM,KAAK,SAASA,EAAM,KAAK,YAAY,GAAG,KAAK,IACjEmB,IAAanB,EAAM,KAAK,MAAM,GAAGkB,CAAU;AAEjD,eAAOD,MAASE;AAAA,MAAA,CACjB;AAED,MAAKH,KAELV,GAAkBU,KAAA,gBAAAA,EAAmB,UAASH,EAAUG,EAAkB,KAAK,CAAC;AAAA,IAAA,CACjF;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import kebabCase from 'lodash-es/kebabCase';\n  import { onMounted, ref, watch } from 'vue';\n  import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';\n\n  import Tab, { type TabProps } from '../Tab/Tab.vue';\n  import Tabs from '../Tabs/Tabs.vue';\n\n  defineOptions({\n    name: 'll-page-navigation',\n  });\n\n  export interface NavItem extends Omit<TabProps, 'value'> {\n    /**\n     * The tab's label\n     */\n    label: string;\n\n    /**\n     * The tab's label\n     */\n    value?: string;\n  }\n\n  export interface PageNavigationProps {\n    /**\n     * Index of active tab (zero-based)\n     * @deprecated Use v-model instead.\n     */\n    activeIndex?: number | string;\n\n    /**\n     * The currently active tab value\n     */\n    modelValue?: string;\n\n    /**\n     * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n     */\n    items: NavItem[];\n  }\n\n  const props = withDefaults(defineProps<PageNavigationProps>(), {\n    activeIndex: undefined,\n    modelValue: '',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emits the current active nav value\n     */\n    (e: 'update:modelValue', activeTab: string): void;\n\n    /**\n     * Emits the current active nav index\n     * @deprecated - Use v-model instead.\n     */\n    (e: 'change', activeNavIndex: number): void;\n  }>();\n\n  if (props.activeIndex) {\n    logger.info('The `activeIndex` prop is deprecated. Use `v-model` instead.');\n  }\n\n  const route = useRoute();\n  const router = useRouter();\n\n  // this ref is needed to keep track of the active tab even if v-model is not passed\n  const activeTab = ref('');\n\n  function onUpdateActiveTab(newActiveTab: string) {\n    if (newActiveTab === activeTab.value) return;\n\n    activeTab.value = newActiveTab;\n    emit('update:modelValue', newActiveTab);\n  }\n\n  watch(\n    () => props.modelValue,\n    (newValue, oldValue) => {\n      if (oldValue === newValue) return;\n\n      // TODO: Remove this once activeIndex is removed\n      const activeNavItemIndex = props.items.findIndex((item) => kebabCase(item.label) === newValue);\n      emit('change', activeNavItemIndex);\n\n      // Forcing updating activeTab when the component is in a keep alive state\n      onUpdateActiveTab(newValue);\n    },\n  );\n\n  onMounted(() => {\n    if (!props.items.length) return;\n\n    // TODO: Remove this once activeIndex is removed\n    if (props.activeIndex !== undefined) {\n      const activeTabItem = props.items[props.activeIndex];\n\n      onUpdateActiveTab(kebabCase(activeTabItem.label));\n\n      return;\n    }\n\n    if (props.modelValue !== activeTab.value) {\n      onUpdateActiveTab(props.modelValue);\n      return;\n    }\n\n    if (!router) return;\n\n    const itemMatchingRoute = props.items.find((item) => {\n      if (item?.disabled || (!item?.to && !item?.href)) return;\n\n      const { path } = router.resolve((item?.to as RouteLocationRaw) || (item?.href as string));\n\n      if (path === route.path) {\n        return true;\n      }\n\n      if (!route.path.includes(path)) return;\n\n      const sliceIndex = (route.path.length - route.path.lastIndexOf('/')) * -1;\n      const parentPath = route.path.slice(0, sliceIndex);\n\n      return path === parentPath;\n    });\n\n    if (!itemMatchingRoute) return;\n\n    onUpdateActiveTab(itemMatchingRoute?.value || kebabCase(itemMatchingRoute.label));\n  });\n</script>\n\n<template>\n  <nav class=\"stash-page-navigation container\" data-test=\"stash-page-navigation\">\n    <Tabs :active-tab=\"activeTab\" @update:active-tab=\"onUpdateActiveTab\">\n      <Tab\n        v-for=\"(item, index) in props.items\"\n        :key=\"item.label\"\n        :value=\"item?.value || kebabCase(item.label)\"\n        :to=\"item.to\"\n        :href=\"item.href\"\n        :badge=\"item.badge\"\n        :disabled=\"item.disabled\"\n        :data-id=\"index\"\n      >\n        {{ item.label }}\n      </Tab>\n    </Tabs>\n  </nav>\n</template>\n"],"names":["props","__props","emit","__emit","logger","route","useRoute","router","useRouter","activeTab","ref","onUpdateActiveTab","newActiveTab","watch","newValue","oldValue","activeNavItemIndex","item","kebabCase","onMounted","activeTabItem","itemMatchingRoute","path","sliceIndex","parentPath"],"mappings":";;;;;;;;;;;;;;;;;;;AA2CE,UAAMA,IAAQC,GAKRC,IAAOC;AAab,IAAIH,EAAM,eACRI,EAAO,KAAK,8DAA8D;AAG5E,UAAMC,IAAQC,EAAA,GACRC,IAASC,EAAA,GAGTC,IAAYC,EAAI,EAAE;AAExB,aAASC,EAAkBC,GAAsB;AAC/C,MAAIA,MAAiBH,EAAU,UAE/BA,EAAU,QAAQG,GAClBV,EAAK,qBAAqBU,CAAY;AAAA,IACxC;AAEA,WAAAC;AAAA,MACE,MAAMb,EAAM;AAAA,MACZ,CAACc,GAAUC,MAAa;AACtB,YAAIA,MAAaD,EAAU;AAG3B,cAAME,IAAqBhB,EAAM,MAAM,UAAU,CAACiB,MAASC,EAAUD,EAAK,KAAK,MAAMH,CAAQ;AAC7F,QAAAZ,EAAK,UAAUc,CAAkB,GAGjCL,EAAkBG,CAAQ;AAAA,MAC5B;AAAA,IAAA,GAGFK,EAAU,MAAM;AACd,UAAI,CAACnB,EAAM,MAAM,OAAQ;AAGzB,UAAIA,EAAM,gBAAgB,QAAW;AACnC,cAAMoB,IAAgBpB,EAAM,MAAMA,EAAM,WAAW;AAEnD,QAAAW,EAAkBO,EAAUE,EAAc,KAAK,CAAC;AAEhD;AAAA,MACF;AAEA,UAAIpB,EAAM,eAAeS,EAAU,OAAO;AACxC,QAAAE,EAAkBX,EAAM,UAAU;AAClC;AAAA,MACF;AAEA,UAAI,CAACO,EAAQ;AAEb,YAAMc,IAAoBrB,EAAM,MAAM,KAAK,CAACiB,MAAS;AACnD,YAAIA,KAAA,QAAAA,EAAM,YAAa,EAACA,KAAA,QAAAA,EAAM,OAAM,EAACA,KAAA,QAAAA,EAAM,MAAO;AAElD,cAAM,EAAE,MAAAK,MAASf,EAAO,SAASU,KAAA,gBAAAA,EAAM,QAA4BA,KAAA,gBAAAA,EAAM,KAAe;AAExF,YAAIK,MAASjB,EAAM;AACjB,iBAAO;AAGT,YAAI,CAACA,EAAM,KAAK,SAASiB,CAAI,EAAG;AAEhC,cAAMC,KAAclB,EAAM,KAAK,SAASA,EAAM,KAAK,YAAY,GAAG,KAAK,IACjEmB,IAAanB,EAAM,KAAK,MAAM,GAAGkB,CAAU;AAEjD,eAAOD,MAASE;AAAA,MAClB,CAAC;AAED,MAAKH,KAELV,GAAkBU,KAAA,gBAAAA,EAAmB,UAASH,EAAUG,EAAkB,KAAK,CAAC;AAAA,IAClF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul\n      class=\"stash-paginate__list tw-flex tw-items-center\"\n      :class=\"classes.pagination\"\n      data-test=\"stash-paginate|list\"\n    >\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"tw-mx-3 tw-text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      &:not(:disabled):hover,\n      &:not(:disabled):focus,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-active:focus {\n        @apply tw-bg-blue-700 tw-border-blue-700;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAa,GAEvBC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IACzC,CAAA,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAAA;AAM9B,aAASC,IAAO;AACV,MAAAb,EAAM,cAAcM,EAAU,SACrBK,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAMF,aAASc,IAAO;AACV,MAAAd,EAAM,cAAc,KACXW,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAOF,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAGhD,aAAAV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAKN;AAOT,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAAA;AAOlE,aAASG,EAAuBH,GAAuB;AAC9C,aAAAV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul\n      class=\"stash-paginate__list tw-flex tw-items-center\"\n      :class=\"classes.pagination\"\n      data-test=\"stash-paginate|list\"\n    >\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"tw-mx-3 tw-text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      &:not(:disabled):hover,\n      &:not(:disabled):focus,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-active:focus {\n        @apply tw-bg-blue-700 tw-border-blue-700;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAA,GAEVC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IAAA,CACzC,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAC9B;AAKA,aAASC,IAAO;AACd,MAAIb,EAAM,cAAcM,EAAU,SAChCK,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASc,IAAO;AACd,MAAId,EAAM,cAAc,KACtBW,EAAWX,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAElD,aACEV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAClE;AAMA,aAASG,EAAuBH,GAAuB;AACrD,aAAOV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PlaidLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaidLink.js","sources":["../src/components/PlaidLink/PlaidLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, ref } from 'vue';\n\n  import { LinkTokenResponse, Plaid } from '../../../types/plaid';\n  import usePlaidLink from '../../composables/usePlaidLink/usePlaidLink';\n\n  export interface PlaidLinkProps {\n    /**\n     * @deprecated Plaid does not support other URLs for loading its SDK\n     * Plaid initialization script url to be used\n     */\n    initScriptUrl?: string;\n\n    /**\n     * Key to be used in session storage for OAuth flow\n     */\n    storageKey?: string;\n\n    /**\n     * Url to be used to redirect the user from the OAuth flow\n     */\n    returnTo?: string;\n\n    /**\n     * Plaid link token\n     */\n    token?: string;\n\n    /**\n     * Plaid environment to connect\n     */\n    env?: Plaid.Environment;\n\n    /**\n     * Function that returns a link token object to be used with Plaid.\n     * `link_token` takes precedence over `token` if informed.\n     */\n    createToken?: () => Promise<LinkTokenResponse>;\n  }\n\n  const props = withDefaults(defineProps<PlaidLinkProps>(), {\n    initScriptUrl: 'https://cdn.plaid.com/link/v2/stable/link-initialize.js',\n    storageKey: undefined,\n    returnTo: window.location.href,\n    env: 'sandbox',\n    token: undefined,\n    createToken: undefined,\n  });\n\n  const internalStorageKey = computed(() => {\n    if (props.storageKey) {\n      return props.storageKey;\n    }\n\n    // returns up to the last 3 parts of the host. e.g. for `subdomain.my.domain.com` it will return `my.domain.com`\n    const host = window.location.host.split('.').splice(-3).join('.');\n\n    return `${host}-plaid`;\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted whenever the exit event contains errors\n     */\n    (e: 'error', error: Plaid.Error | null | Error, metadata?: Plaid.OnExitMetaData): void;\n    /**\n     * Emitted whenever the user successfully links an item\n     */\n    (e: 'success', public_token: string, metadata: Plaid.OnSuccessMetaData): void;\n    /**\n     * Emitted whenever the user exits the Link flow\n     */\n    (e: 'exit', metadata: Plaid.OnExitMetaData): void;\n    /**\n     * Emitted when the Link is ready to be opened\n     */\n    (e: 'load'): void;\n    /**\n     * Emitted at specific points during the Link flow\n     */\n    (e: 'event', eventName: Plaid.EventName, metadata: Plaid.OnEventMetaData): void;\n  }>();\n\n  const isPlaidModalOpen = ref(false);\n\n  const onExit: Plaid.OnExit = (error: Plaid.Error | null, metadata: Plaid.OnExitMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    if (error) {\n      logger.error(new Error('Plaid: Error trying to link an account'), {\n        tags: { plaid: true },\n        extra: { PlaidError: error },\n      });\n      emit('error', error, metadata);\n    }\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('exit', metadata);\n  };\n\n  const onSuccess: Plaid.OnSuccess = (public_token: string, metadata: Plaid.OnSuccessMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('success', public_token, metadata);\n  };\n\n  const onLoad: Plaid.OnLoad = (...args) => emit('load', ...args);\n\n  const onEvent: Plaid.OnEvent = (...args) => emit('event', ...args);\n\n  const plaidLinkOptions = ref<Plaid.CreateConfig>({\n    env: props.env,\n    onSuccess,\n    onEvent,\n    onLoad,\n    onExit,\n  });\n\n  const { open: openPlaidLink } = usePlaidLink(plaidLinkOptions);\n\n  async function handleClick() {\n    if (isPlaidModalOpen.value === true) {\n      return;\n    }\n\n    isPlaidModalOpen.value = true;\n\n    if (typeof props.createToken === 'function') {\n      try {\n        const { link_token } = await props.createToken();\n\n        plaidLinkOptions.value.token = link_token;\n      } catch (err) {\n        const error = new Error('Plaid: Error trying to invoke createToken');\n\n        logger.error(error, {\n          tags: { plaid: true },\n          extra: { error: err },\n        });\n\n        emit('error', error);\n      }\n    } else if (props.token) {\n      plaidLinkOptions.value.token = props.token;\n    }\n\n    if (!plaidLinkOptions.value.token) {\n      const error = new Error('Plaid: link token not found');\n\n      logger.error(error, { tags: { plaid: true } });\n      emit('error', error);\n\n      isPlaidModalOpen.value = false;\n\n      return;\n    }\n\n    sessionStorage.setItem(\n      internalStorageKey.value,\n      JSON.stringify({ token: plaidLinkOptions.value.token, returnTo: props.returnTo, env: props.env }),\n    );\n\n    openPlaidLink();\n  }\n\n  defineExpose({\n    handleClick,\n  });\n</script>\n\n<template>\n  <span data-test=\"stash-plaid-link\" @click=\"handleClick\">\n    <!-- @slot Default slot to trigger Plaid's modal -->\n    <slot :open=\"isPlaidModalOpen\"></slot>\n  </span>\n</template>\n"],"names":["props","__props","internalStorageKey","computed","emit","__emit","isPlaidModalOpen","ref","onExit","error","metadata","logger","onSuccess","public_token","onLoad","args","onEvent","plaidLinkOptions","openPlaidLink","usePlaidLink","handleClick","link_token","err","__expose"],"mappings":";;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GASRC,IAAqBC,EAAS,MAC9BH,EAAM,aACDA,EAAM,aAMR,GAFM,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,CAElD,QACf,GAEKI,IAAOC,GAuBPC,IAAmBC,EAAI,EAAK,GAE5BC,IAAuB,CAACC,GAA2BC,MAAmC;AAC1F,MAAAJ,EAAiB,QAAQ,IAErBG,MACFE,EAAO,MAAM,IAAI,MAAM,wCAAwC,GAAG;AAAA,QAChE,MAAM,EAAE,OAAO,GAAK;AAAA,QACpB,OAAO,EAAE,YAAYF,EAAM;AAAA,MAAA,CAC5B,GACIL,EAAA,SAASK,GAAOC,CAAQ,IAGhB,eAAA,WAAWR,EAAmB,KAAK,GAElDE,EAAK,QAAQM,CAAQ;AAAA,IACvB,GAEME,IAA6B,CAACC,GAAsBH,MAAsC;AAC9F,MAAAJ,EAAiB,QAAQ,IAEV,eAAA,WAAWJ,EAAmB,KAAK,GAE7CE,EAAA,WAAWS,GAAcH,CAAQ;AAAA,IACxC,GAEMI,IAAuB,IAAIC,MAASX,EAAK,QAAQ,GAAGW,CAAI,GAExDC,IAAyB,IAAID,MAASX,EAAK,SAAS,GAAGW,CAAI,GAE3DE,IAAmBV,EAAwB;AAAA,MAC/C,KAAKP,EAAM;AAAA,MACX,WAAAY;AAAA,MACA,SAAAI;AAAA,MACA,QAAAF;AAAA,MACA,QAAAN;AAAA,IAAA,CACD,GAEK,EAAE,MAAMU,MAAkBC,EAAaF,CAAgB;AAE7D,mBAAeG,IAAc;AACvB,UAAAd,EAAiB,UAAU,IAM3B;AAAA,YAFJA,EAAiB,QAAQ,IAErB,OAAON,EAAM,eAAgB;AAC3B,cAAA;AACF,kBAAM,EAAE,YAAAqB,EAAA,IAAe,MAAMrB,EAAM,YAAY;AAE/C,YAAAiB,EAAiB,MAAM,QAAQI;AAAA,mBACxBC,GAAK;AACN,kBAAAb,IAAQ,IAAI,MAAM,2CAA2C;AAEnE,YAAAE,EAAO,MAAMF,GAAO;AAAA,cAClB,MAAM,EAAE,OAAO,GAAK;AAAA,cACpB,OAAO,EAAE,OAAOa,EAAI;AAAA,YAAA,CACrB,GAEDlB,EAAK,SAASK,CAAK;AAAA,UAAA;AAAA,YAEvB,CAAWT,EAAM,UACEiB,EAAA,MAAM,QAAQjB,EAAM;AAGnC,YAAA,CAACiB,EAAiB,MAAM,OAAO;AAC3B,gBAAAR,IAAQ,IAAI,MAAM,6BAA6B;AAE9C,UAAAE,EAAA,MAAMF,GAAO,EAAE,MAAM,EAAE,OAAO,GAAA,GAAQ,GAC7CL,EAAK,SAASK,CAAK,GAEnBH,EAAiB,QAAQ;AAEzB;AAAA,QAAA;AAGa,uBAAA;AAAA,UACbJ,EAAmB;AAAA,UACnB,KAAK,UAAU,EAAE,OAAOe,EAAiB,MAAM,OAAO,UAAUjB,EAAM,UAAU,KAAKA,EAAM,IAAK,CAAA;AAAA,QAClG,GAEckB,EAAA;AAAA;AAAA,IAAA;AAGH,WAAAK,EAAA;AAAA,MACX,aAAAH;AAAA,IAAA,CACD;;;;;;;;"}
+{"version":3,"file":"PlaidLink.js","sources":["../src/components/PlaidLink/PlaidLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, ref } from 'vue';\n\n  import { LinkTokenResponse, Plaid } from '../../../types/plaid';\n  import usePlaidLink from '../../composables/usePlaidLink/usePlaidLink';\n\n  export interface PlaidLinkProps {\n    /**\n     * @deprecated Plaid does not support other URLs for loading its SDK\n     * Plaid initialization script url to be used\n     */\n    initScriptUrl?: string;\n\n    /**\n     * Key to be used in session storage for OAuth flow\n     */\n    storageKey?: string;\n\n    /**\n     * Url to be used to redirect the user from the OAuth flow\n     */\n    returnTo?: string;\n\n    /**\n     * Plaid link token\n     */\n    token?: string;\n\n    /**\n     * Plaid environment to connect\n     */\n    env?: Plaid.Environment;\n\n    /**\n     * Function that returns a link token object to be used with Plaid.\n     * `link_token` takes precedence over `token` if informed.\n     */\n    createToken?: () => Promise<LinkTokenResponse>;\n  }\n\n  const props = withDefaults(defineProps<PlaidLinkProps>(), {\n    initScriptUrl: 'https://cdn.plaid.com/link/v2/stable/link-initialize.js',\n    storageKey: undefined,\n    returnTo: window.location.href,\n    env: 'sandbox',\n    token: undefined,\n    createToken: undefined,\n  });\n\n  const internalStorageKey = computed(() => {\n    if (props.storageKey) {\n      return props.storageKey;\n    }\n\n    // returns up to the last 3 parts of the host. e.g. for `subdomain.my.domain.com` it will return `my.domain.com`\n    const host = window.location.host.split('.').splice(-3).join('.');\n\n    return `${host}-plaid`;\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted whenever the exit event contains errors\n     */\n    (e: 'error', error: Plaid.Error | null | Error, metadata?: Plaid.OnExitMetaData): void;\n    /**\n     * Emitted whenever the user successfully links an item\n     */\n    (e: 'success', public_token: string, metadata: Plaid.OnSuccessMetaData): void;\n    /**\n     * Emitted whenever the user exits the Link flow\n     */\n    (e: 'exit', metadata: Plaid.OnExitMetaData): void;\n    /**\n     * Emitted when the Link is ready to be opened\n     */\n    (e: 'load'): void;\n    /**\n     * Emitted at specific points during the Link flow\n     */\n    (e: 'event', eventName: Plaid.EventName, metadata: Plaid.OnEventMetaData): void;\n  }>();\n\n  const isPlaidModalOpen = ref(false);\n\n  const onExit: Plaid.OnExit = (error: Plaid.Error | null, metadata: Plaid.OnExitMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    if (error) {\n      logger.error(new Error('Plaid: Error trying to link an account'), {\n        tags: { plaid: true },\n        extra: { PlaidError: error },\n      });\n      emit('error', error, metadata);\n    }\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('exit', metadata);\n  };\n\n  const onSuccess: Plaid.OnSuccess = (public_token: string, metadata: Plaid.OnSuccessMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('success', public_token, metadata);\n  };\n\n  const onLoad: Plaid.OnLoad = (...args) => emit('load', ...args);\n\n  const onEvent: Plaid.OnEvent = (...args) => emit('event', ...args);\n\n  const plaidLinkOptions = ref<Plaid.CreateConfig>({\n    env: props.env,\n    onSuccess,\n    onEvent,\n    onLoad,\n    onExit,\n  });\n\n  const { open: openPlaidLink } = usePlaidLink(plaidLinkOptions);\n\n  async function handleClick() {\n    if (isPlaidModalOpen.value === true) {\n      return;\n    }\n\n    isPlaidModalOpen.value = true;\n\n    if (typeof props.createToken === 'function') {\n      try {\n        const { link_token } = await props.createToken();\n\n        plaidLinkOptions.value.token = link_token;\n      } catch (err) {\n        const error = new Error('Plaid: Error trying to invoke createToken');\n\n        logger.error(error, {\n          tags: { plaid: true },\n          extra: { error: err },\n        });\n\n        emit('error', error);\n      }\n    } else if (props.token) {\n      plaidLinkOptions.value.token = props.token;\n    }\n\n    if (!plaidLinkOptions.value.token) {\n      const error = new Error('Plaid: link token not found');\n\n      logger.error(error, { tags: { plaid: true } });\n      emit('error', error);\n\n      isPlaidModalOpen.value = false;\n\n      return;\n    }\n\n    sessionStorage.setItem(\n      internalStorageKey.value,\n      JSON.stringify({ token: plaidLinkOptions.value.token, returnTo: props.returnTo, env: props.env }),\n    );\n\n    openPlaidLink();\n  }\n\n  defineExpose({\n    handleClick,\n  });\n</script>\n\n<template>\n  <span data-test=\"stash-plaid-link\" @click=\"handleClick\">\n    <!-- @slot Default slot to trigger Plaid's modal -->\n    <slot :open=\"isPlaidModalOpen\"></slot>\n  </span>\n</template>\n"],"names":["props","__props","internalStorageKey","computed","emit","__emit","isPlaidModalOpen","ref","onExit","error","metadata","logger","onSuccess","public_token","onLoad","args","onEvent","plaidLinkOptions","openPlaidLink","usePlaidLink","handleClick","link_token","err","__expose"],"mappings":";;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GASRC,IAAqBC,EAAS,MAC9BH,EAAM,aACDA,EAAM,aAMR,GAFM,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,CAElD,QACf,GAEKI,IAAOC,GAuBPC,IAAmBC,EAAI,EAAK,GAE5BC,IAAuB,CAACC,GAA2BC,MAAmC;AAC1F,MAAAJ,EAAiB,QAAQ,IAErBG,MACFE,EAAO,MAAM,IAAI,MAAM,wCAAwC,GAAG;AAAA,QAChE,MAAM,EAAE,OAAO,GAAA;AAAA,QACf,OAAO,EAAE,YAAYF,EAAA;AAAA,MAAM,CAC5B,GACDL,EAAK,SAASK,GAAOC,CAAQ,IAG/B,eAAe,WAAWR,EAAmB,KAAK,GAElDE,EAAK,QAAQM,CAAQ;AAAA,IACvB,GAEME,IAA6B,CAACC,GAAsBH,MAAsC;AAC9F,MAAAJ,EAAiB,QAAQ,IAEzB,eAAe,WAAWJ,EAAmB,KAAK,GAElDE,EAAK,WAAWS,GAAcH,CAAQ;AAAA,IACxC,GAEMI,IAAuB,IAAIC,MAASX,EAAK,QAAQ,GAAGW,CAAI,GAExDC,IAAyB,IAAID,MAASX,EAAK,SAAS,GAAGW,CAAI,GAE3DE,IAAmBV,EAAwB;AAAA,MAC/C,KAAKP,EAAM;AAAA,MACX,WAAAY;AAAA,MACA,SAAAI;AAAA,MACA,QAAAF;AAAA,MACA,QAAAN;AAAA,IAAA,CACD,GAEK,EAAE,MAAMU,MAAkBC,EAAaF,CAAgB;AAE7D,mBAAeG,IAAc;AAC3B,UAAId,EAAiB,UAAU,IAM/B;AAAA,YAFAA,EAAiB,QAAQ,IAErB,OAAON,EAAM,eAAgB;AAC/B,cAAI;AACF,kBAAM,EAAE,YAAAqB,EAAA,IAAe,MAAMrB,EAAM,YAAA;AAEnC,YAAAiB,EAAiB,MAAM,QAAQI;AAAA,UACjC,SAASC,GAAK;AACZ,kBAAMb,IAAQ,IAAI,MAAM,2CAA2C;AAEnE,YAAAE,EAAO,MAAMF,GAAO;AAAA,cAClB,MAAM,EAAE,OAAO,GAAA;AAAA,cACf,OAAO,EAAE,OAAOa,EAAA;AAAA,YAAI,CACrB,GAEDlB,EAAK,SAASK,CAAK;AAAA,UACrB;AAAA,YACF,CAAWT,EAAM,UACfiB,EAAiB,MAAM,QAAQjB,EAAM;AAGvC,YAAI,CAACiB,EAAiB,MAAM,OAAO;AACjC,gBAAMR,IAAQ,IAAI,MAAM,6BAA6B;AAErD,UAAAE,EAAO,MAAMF,GAAO,EAAE,MAAM,EAAE,OAAO,GAAA,GAAQ,GAC7CL,EAAK,SAASK,CAAK,GAEnBH,EAAiB,QAAQ;AAEzB;AAAA,QACF;AAEA,uBAAe;AAAA,UACbJ,EAAmB;AAAA,UACnB,KAAK,UAAU,EAAE,OAAOe,EAAiB,MAAM,OAAO,UAAUjB,EAAM,UAAU,KAAKA,EAAM,KAAK;AAAA,QAAA,GAGlGkB,EAAA;AAAA;AAAA,IACF;AAEA,WAAAK,EAAa;AAAA,MACX,aAAAH;AAAA,IAAA,CACD;;;;;;;;"}

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-3\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","is","computed","linkAttrs"],"mappings":";;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GACRC,IAAUC,EAAa,GAEvBC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKM,IAAYD,EAAS,MACrBL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IACZ,IAGEA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IACd,IAGK,CAAC,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-3\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","is","computed","linkAttrs"],"mappings":";;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GACRC,IAAUC,EAAA,GAEVC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKM,IAAYD,EAAS,MACrBL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * @deprecated Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"tw-sr-only\" :class=\"classes.input\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\" :class=\"classes.label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    margin: theme('spacing[1.5]') 0;\n  }\n\n  .label {\n    color: var(--color-ice-700);\n    cursor: pointer;\n    display: inline-block;\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    line-height: theme('spacing.6');\n    min-height: theme('spacing.9');\n    overflow: visible;\n    padding: theme('spacing[1.5]') 0 theme('spacing[1.5]') calc(20px + theme('spacing.3'));\n    position: relative;\n    vertical-align: top;\n  }\n\n  .label::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    content: '';\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  .label::before,\n  .label::after {\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    border-radius: 50%;\n  }\n\n  .error .label {\n    color: var(--color-red-500);\n  }\n\n  .error .label::before,\n  .error .input {\n    border-color: var(--color-red-500);\n  }\n\n  .input:checked + .label::after {\n    background: var(--color-blue-500);\n    content: '';\n    height: 14px;\n    left: 3px;\n    width: 14px;\n  }\n\n  .input:checked:disabled + .label::after {\n    background: var(--color-ice-500);\n  }\n\n  .input:not(:disabled, :checked) + .label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n\n  @media screen('lg') {\n    .root input {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_hoisted_1","_hoisted_2","_createElementBlock","_normalizeClass","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","_cache","$event","$options","_ctx","_toDisplayString"],"mappings":";;;;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAc;AAAA,IACxB;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACb;AAAA,MACD,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE9E;AACF,GAjFHE,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA;;cAqFEC,EAMM,OAAA;AAAA,IAND,OArFPC,GAqFa,eAAa,CAA+BC,UAAQ,eAAeC,EAAQ,SAAA,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAAiH,SAAjHC,EAAiH;AAAA,MAAzG,IAAIH,EAAE;AAAA,MAtFlB,uBAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAsF6BC,EAAa,gBAAAD;AAAA,MAAE,OAAM,CAAA,cAAqBN,EAAA,QAAQ,KAAK;AAAA,MAAE,MAAK;AAAA,IAAgB,GAAAQ,EAAA,MAAM,GAtFjH,MAAA,IAAAZ,CAAA,GAAA;AAAA,UAsF6BW,EAAa,aAAA;AAAA;IAEtCJ,EAEQ,SAAA;AAAA,MAFA,KAAKF,EAAE;AAAA,MAAG,OAxFtBF,EAwF6BC,EAAO,QAAC,KAAK;AAAA,IACjC,GAAAS,EAAAR,EAAA,KAAK,GAzFd,IAAAJ,CAAA;AAAA;;;;;"}
+{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * @deprecated Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"tw-sr-only\" :class=\"classes.input\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\" :class=\"classes.label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    margin: theme('spacing[1.5]') 0;\n  }\n\n  .label {\n    color: var(--color-ice-700);\n    cursor: pointer;\n    display: inline-block;\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    line-height: theme('spacing.6');\n    min-height: theme('spacing.9');\n    overflow: visible;\n    padding: theme('spacing[1.5]') 0 theme('spacing[1.5]') calc(20px + theme('spacing.3'));\n    position: relative;\n    vertical-align: top;\n  }\n\n  .label::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    content: '';\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  .label::before,\n  .label::after {\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    border-radius: 50%;\n  }\n\n  .error .label {\n    color: var(--color-red-500);\n  }\n\n  .error .label::before,\n  .error .input {\n    border-color: var(--color-red-500);\n  }\n\n  .input:checked + .label::after {\n    background: var(--color-blue-500);\n    content: '';\n    height: 14px;\n    left: 3px;\n    width: 14px;\n  }\n\n  .input:checked:disabled + .label::after {\n    background: var(--color-ice-500);\n  }\n\n  .input:not(:disabled, :checked) + .label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n\n  @media screen('lg') {\n    .root input {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_hoisted_1","_hoisted_2","_createElementBlock","_normalizeClass","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","_cache","$event","$options","_ctx","_toDisplayString"],"mappings":";;;;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACT;AAAA;;;;IAMF,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAY;AAAA;EAEzB;AAAA,EAEA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACd;AAAA,MACA,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACpC;AAAA;;EAIJ,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE/E;GAhFJE,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA;;cAqFEC,EAMM,OAAA;AAAA,IAND,OArFPC,GAqFa,eAAa,CAA+BC,UAAQ,eAAeC,EAAA,SAAQ,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAAiH,SAAjHC,EAAiH;AAAA,MAAzG,IAAIH,EAAA;AAAA,MAtFhB,uBAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAsF6BC,EAAA,gBAAaD;AAAA,MAAE,OAAK,CAAC,cAAqBN,EAAA,QAAQ,KAAK;AAAA,MAAE,MAAK;AAAA,IAAgB,GAAAQ,EAAA,MAAM,GAAA,MAAA,IAtFjHZ,CAAA,GAAA;AAAA,UAsF6BW,EAAA,aAAa;AAAA;IAEtCJ,EAEQ,SAAA;AAAA,MAFA,KAAKF,EAAA;AAAA,MAAK,OAxFtBF,EAwF6BC,EAAA,QAAQ,KAAK;AAAA,IACjC,GAAAS,EAAAR,EAAA,KAAK,GAAA,IAzFdJ,CAAA;AAAA;;;;;"}