@leaflink/stash 51.12.8 → 51.12.9

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/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  PROCESSED: 'data-more-actions-processed',\n} as const;\n\nexport const FADE_ANIMATION_DURATION = 300;\n","import { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES, ID_PREFIXES } from './constants';\n\n// Map to track pending timeouts for elements to prevent memory leaks\nconst elementTimeouts = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();\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  // Clear any pending timeout for this element\n  const existingTimeout = elementTimeouts.get(element);\n  if (existingTimeout) {\n    clearTimeout(existingTimeout);\n    elementTimeouts.delete(element);\n  }\n\n  if (overflowIds.has(elementId)) {\n    element.removeAttribute(DATA_ATTRIBUTES.PROCESSED);\n    element.classList.add('tw-invisible');\n  } else {\n    const timeout = setTimeout(() => {\n      if (element.isConnected) {\n        element.setAttribute(DATA_ATTRIBUTES.PROCESSED, 'true');\n      }\n      elementTimeouts.delete(element);\n    }, DEBOUNCE.FAST);\n    elementTimeouts.set(element, timeout);\n    element.classList.remove('tw-invisible');\n  }\n}\n\n/**\n * Syncs more-actions content visibility based on overflow state\n * Shows more-actions items whose data-action-id is in overflowIds\n * Supports nested elements with data-action-id (e.g., Menu > MenuItem)\n */\nexport function syncMoreActionsVisibility(moreDropdownMenuEl: HTMLElement | null, overflowIds: Set<string>): void {\n  if (!moreDropdownMenuEl) {\n    return;\n  }\n\n  // Find all elements with data-action-id at any nesting level (for nested wrappers like Menu > MenuItem)\n  const nestedItemsWithActionId = Array.from(\n    moreDropdownMenuEl.querySelectorAll(`[${DATA_ATTRIBUTES.ACTION_ID}]`),\n  ) as HTMLElement[];\n\n  // Filter to only \"leaf\" elements - those that don't contain other elements with data-action-id\n  // This prevents hiding wrapper elements that contain the actual actionable items\n  const leafItems = nestedItemsWithActionId.filter((element) => {\n    const nestedActionsInside = element.querySelectorAll(`[${DATA_ATTRIBUTES.ACTION_ID}]`);\n    // If element has nested elements with data-action-id inside, it's a wrapper, not a leaf\n    return nestedActionsInside.length === 0;\n  });\n\n  // Apply styles and visibility to leaf items only\n  leafItems.forEach((element) => {\n    const actionId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n    // Show more-actions item only if its action-id is in overflowIds (item is hidden in toolbar)\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 { nextTick, type Ref, ref, type ShallowRef } from 'vue';\n\nimport { DEBOUNCE } from '../../constants';\nimport { DATA_ATTRIBUTES } from './constants';\nimport { applyElementVisibility, createElementIdMap, syncMoreActionsVisibility } 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  onOverflowChange?: () => void;\n}\n\nexport function useOverflowCalculator({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\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 more-actions content visibility\n      syncMoreActionsVisibility(moreDropdownMenuRef.value, overflowIds.value);\n\n      // Call callback if provided and state actually changed\n      // Use nextTick to ensure CSS changes are applied before calculating visible elements width\n      if (onOverflowChange && lastOverflowState.value !== newOverflowState) {\n        lastOverflowState.value = newOverflowState;\n        nextTick(() => {\n          onOverflowChange();\n        });\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 updateTrackerBounding() {\n    trackerBounding.update();\n  }\n\n  function cleanup() {\n    debouncedCalculateOverflow.cancel();\n    isProcessing.value = false;\n  }\n\n  return {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    updateTrackerBounding,\n    cleanup,\n    isProcessing,\n  };\n}\n","import { useIntersectionObserver, useResizeObserver } from '@vueuse/core';\nimport debounce from 'lodash-es/debounce';\nimport { nextTick, 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  syncMoreActionsVisibility,\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  calculateMoreButtonWidth: () => number;\n  hasMoreActionsSlot: Ref<boolean>;\n  onOverflowChange?: () => void;\n}\n\nexport function createIntersectionObserver({\n  actionsContainerRef,\n  overflowIds,\n  moreDropdownMenuRef,\n  trackerElementRef,\n  moreDropdownWidth,\n  calculateMoreButtonWidth,\n  hasMoreActionsSlot,\n  onOverflowChange,\n}: CreateIntersectionObserverOptions) {\n  const isInitializing = ref(false);\n\n  const {\n    calculateOverflow,\n    applyElementVisibility,\n    updateOverflowState,\n    updateTrackerBounding,\n    cleanup: cleanupCalculator,\n    isProcessing,\n  } = useOverflowCalculator({\n    actionsContainerRef,\n    overflowIds,\n    moreDropdownMenuRef,\n    trackerElementRef,\n    onOverflowChange,\n  });\n\n  let mutationObserver: MutationObserver | null = null;\n  let stopResizeObserver: (() => void) | null = null;\n  let stopIntersectionObserver: (() => void) | null = null;\n\n  function clearOverflowState() {\n    overflowIds.value.clear();\n    moreDropdownWidth.value = 0;\n  }\n\n  /**\n   * Cleanup all observers (ResizeObserver and IntersectionObserver)\n   * to prevent memory leaks when re-creating them\n   */\n  function cleanupObservers() {\n    if (stopResizeObserver) {\n      stopResizeObserver();\n      stopResizeObserver = null;\n    }\n    if (stopIntersectionObserver) {\n      stopIntersectionObserver();\n      stopIntersectionObserver = null;\n    }\n  }\n\n  // Track DOM mutations - created once, outside of createObserver to prevent duplicates\n  const handleMutation = debounce(\n    () => {\n      if (!actionsContainerRef.value || !hasMoreActionsSlot.value) {\n        return;\n      }\n\n      // Add data-action-id to first-level children\n      addActionIds(actionsContainerRef.value);\n\n      // Cleanup old observers before re-initializing\n      cleanupObservers();\n      cleanupCalculator();\n      debouncedInitObserve();\n    },\n    DEBOUNCE.FAST,\n    { leading: false, trailing: true },\n  );\n\n  function createObserver() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // If there's no more-actions slot, don't set up overflow detection\n    if (!hasMoreActionsSlot.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    const { stop: stopResize } = useResizeObserver(actionsContainerRef, () => {\n      updateTrackerBounding();\n      calculateOverflow();\n    });\n    stopResizeObserver = stopResize;\n\n    const { stop: stopIntersection } = 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 more-actions content visibility\n            syncMoreActionsVisibility(moreDropdownMenuRef.value, overflowIds.value);\n\n            // Call callback if provided and state actually changed\n            // Use nextTick to ensure CSS changes are applied before calculating visible elements width\n            if (onOverflowChange) {\n              nextTick(() => {\n                onOverflowChange();\n              });\n            }\n          }\n        }\n      },\n      {\n        root: actionsContainerRef.value,\n      },\n    );\n    stopIntersectionObserver = stopIntersection;\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    syncMoreActionsVisibility(moreDropdownMenuRef.value, overflowIds.value);\n  }\n\n  function initObserve() {\n    if (!actionsContainerRef.value) {\n      return;\n    }\n\n    // If there's no more-actions slot, don't initialize\n    if (!hasMoreActionsSlot.value) {\n      return;\n    }\n\n    // Add data-action-id to first-level children\n    addActionIds(actionsContainerRef.value);\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    // Setup MutationObserver once to watch for DOM changes\n    // Only create if it doesn't exist to prevent duplicates\n    if (!mutationObserver && actionsContainerRef.value) {\n      mutationObserver = new MutationObserver(handleMutation);\n      mutationObserver.observe(actionsContainerRef.value, {\n        childList: true, // Watch for added/removed children\n        subtree: false, // Only watch direct children\n      });\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    // If there's no more-actions slot, skip initialization\n    if (!hasMoreActionsSlot.value) {\n      return;\n    }\n\n    // Add data-action-id to first-level children\n    addActionIds(actionsContainerRef.value);\n    initObserve();\n  });\n\n  onUpdated(() => {\n    // If there's no more-actions slot, skip initialization\n    if (!hasMoreActionsSlot.value) {\n      return;\n    }\n\n    // Add data-action-id to first-level children\n    addActionIds(actionsContainerRef.value);\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    cleanupObservers();\n    cleanupCalculator();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    cleanupObservers();\n    cleanupCalculator();\n    handleMutation.cancel();\n    debouncedInitObserve.cancel();\n    if (mutationObserver) {\n      mutationObserver.disconnect();\n      mutationObserver = null;\n    }\n  });\n\n  onBeforeUnmount(() => {\n    cleanupObservers();\n    cleanupCalculator();\n    handleMutation.cancel();\n    debouncedInitObserve.cancel();\n    if (mutationObserver) {\n      mutationObserver.disconnect();\n      mutationObserver = null;\n    }\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, FADE_ANIMATION_DURATION } 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  const isRecalculatingWithDelay = ref(false);\n  let widthCalculationTimeout: ReturnType<typeof setTimeout> | null = null;\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 elementId = element.getAttribute(DATA_ATTRIBUTES.ACTION_ID);\n\n      // Check if element should be visible based on overflow state\n      // Elements without data-action-id are always considered visible (never hidden by overflow logic)\n      const shouldBeVisible = !elementId || !overflowIds.value.has(elementId);\n\n      // Double-check with CSS classes as a fallback\n      const isHiddenByCSS = element.classList.contains('tw-invisible');\n\n      // Element is considered visible if:\n      // 1. It's not in overflowIds (should be visible) OR it has no data-action-id (always visible)\n      // 2. AND it's not hidden by CSS classes\n      if (shouldBeVisible && !isHiddenByCSS) {\n        const rect = element.getBoundingClientRect();\n        totalWidth += rect.width;\n\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  /**\n   * Calculates visible elements width with a delay to allow animations to complete\n   * This ensures that width calculation happens after elements are actually hidden/shown\n   */\n  const calculateVisibleElementsWidthDelayed = () => {\n    // Set recalculating state immediately to hide More button\n    isRecalculatingWithDelay.value = true;\n\n    // Clear any existing timeout\n    if (widthCalculationTimeout) {\n      clearTimeout(widthCalculationTimeout);\n    }\n\n    // Set a new timeout to calculate width after animation completes\n    widthCalculationTimeout = setTimeout(() => {\n      if (!isRecalculatingWidth.value) {\n        isRecalculatingWidth.value = true;\n\n        // Use double nextTick to ensure all DOM updates and CSS changes are applied\n        nextTick(() => {\n          nextTick(() => {\n            calculateVisibleElementsWidth();\n            isRecalculatingWidth.value = false;\n            isRecalculatingWithDelay.value = false; // Show More button after calculation is complete\n          });\n        });\n      }\n    }, FADE_ANIMATION_DURATION + 100); // Add small buffer to ensure animation is complete\n  };\n\n  // Watch for changes in overflowIds to recalculate visible elements width with delay\n  watch(overflowIds, () => {\n    calculateVisibleElementsWidthDelayed();\n  });\n\n  /**\n   * Cleanup function to clear any pending timeouts\n   */\n  const cleanup = () => {\n    if (widthCalculationTimeout) {\n      clearTimeout(widthCalculationTimeout);\n      widthCalculationTimeout = null;\n    }\n    isRecalculatingWithDelay.value = false;\n  };\n\n  return {\n    visibleElementsWidth,\n    isRecalculatingWidth,\n    isRecalculatingWithDelay,\n    calculateVisibleElementsWidth,\n    calculateVisibleElementsWidthDelayed,\n    cleanup,\n  };\n}\n","<script lang=\"ts\" setup>\n  /**\n   * MoreActions Component\n   *\n   * This component provides a responsive toolbar that automatically moves overflow items\n   * into a \"More\" dropdown menu when space is limited.\n   *\n   * @example\n   * <MoreActions>\n   *   <Button data-action-id=\"edit\">Edit</Button>\n   *   <Button data-action-id=\"delete\">Delete</Button>\n   *   <Button data-action-id=\"share\">Share</Button>\n   *\n   *   <template #more-actions>\n   *     <DropdownItem data-action-id=\"edit\">Edit Item</DropdownItem>\n   *     <DropdownItem data-action-id=\"delete\">Delete Item</DropdownItem>\n   *     <DropdownItem data-action-id=\"share\">Share Item</DropdownItem>\n   *   </template>\n   * </MoreActions>\n   *\n   * IMPORTANT:\n   * - The #more-actions slot is REQUIRED. If not provided, the More dropdown will not be rendered.\n   * - Each item in the default slot must have a corresponding item in the 'more-actions'\n   *   slot with the same data-action-id attribute.\n   * - The component automatically shows/hides matching items based on available space:\n   *   - Items visible in toolbar → hidden in more-actions\n   *   - Items hidden in toolbar (overflow) → visible in more-actions\n   */\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, useTemplateRef, watch } from 'vue';\n\n  import { useToggleAnimation } from '../../composables/useToggleAnimation/useToggleAnimation';\n  import { DEBOUNCE } from '../../constants';\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 { useMoreButtonWidth } from './useMoreButtonWidth';\n  import { useVisibleElementsWidth } from './useVisibleElementsWidth';\n\n  export interface MoreActionsProps {\n    /**\n     * CSS class or classes to be applied to the actions container\n     */\n    actionsContainerClass?: string | Record<string, boolean> | undefined;\n    /**\n     * HTML element tag to use for the actions container\n     * Useful when you need to maintain valid HTML semantics\n     * (e.g., use 'ul' when children are <li> elements)\n     * @default 'div'\n     */\n    actionsContainerTag?: string;\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     * 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\n  const props = withDefaults(defineProps<MoreActionsProps>(), {\n    actionsContainerClass: undefined,\n    actionsContainerTag: 'div',\n    moreButtonText: () => t('ll.more'),\n    dropdownMode: 'default',\n    moreButtonAlign: 'separate',\n    width: undefined,\n  });\n\n  // Check if more-actions slot is provided (REQUIRED for dropdown to render)\n  const slots = useSlots();\n  const hasMoreActionsSlot = computed(() => !!slots['more-actions']);\n\n  // Refs for DOM elements\n  const actionsContainerRef = useTemplateRef<HTMLElement>('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  const showButtonDelayTimeout = ref<ReturnType<typeof setTimeout> | null>(null);\n  const isDelayedShowReady = ref(false);\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 {\n    visibleElementsWidth,\n    isRecalculatingWithDelay,\n    calculateVisibleElementsWidthDelayed,\n    cleanup: cleanupVisibleElementsWidth,\n  } = useVisibleElementsWidth({\n    actionsContainerRef,\n    overflowIds,\n  });\n\n  const shouldShowMoreButton = computed(() => {\n    return (\n      hasMoreActionsSlot.value &&\n      hasOverflowActions.value &&\n      !isRecalculatingWithDelay.value &&\n      isDelayedShowReady.value\n    );\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    calculateMoreButtonWidth,\n    hasMoreActionsSlot,\n    onOverflowChange: calculateVisibleElementsWidthDelayed,\n  });\n\n  // Watch for when recalculation completes and overflow actions exist\n  watch(\n    () => hasMoreActionsSlot.value && hasOverflowActions.value && !isRecalculatingWithDelay.value,\n    (isReady) => {\n      // Clear any existing timeout\n      if (showButtonDelayTimeout.value) {\n        clearTimeout(showButtonDelayTimeout.value);\n        showButtonDelayTimeout.value = null;\n      }\n\n      if (isReady) {\n        // Add delay before showing the button\n        showButtonDelayTimeout.value = setTimeout(() => {\n          isDelayedShowReady.value = true;\n        }, DEBOUNCE.FAST);\n      } else {\n        // Hide immediately when overflow actions are removed or slot is not available\n        isDelayedShowReady.value = false;\n      }\n    },\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  }\n\n  onBeforeUnmount(() => {\n    cleanupVisibleElementsWidth();\n    if (showButtonDelayTimeout.value) {\n      clearTimeout(showButtonDelayTimeout.value);\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-more-actions tw-relative tw-overflow-x-hidden\"\n    data-test=\"stash-more-actions\"\n    :style=\"{ width: props.width }\"\n  >\n    <component\n      :is=\"props.actionsContainerTag\"\n      ref=\"actionsContainerRef\"\n      data-test=\"stash-more-actions__container\"\n      :style=\"{\n        width: actionsContainerWidth,\n        minWidth: moreButtonWidth ? `${moreButtonWidth}px` : undefined,\n      }\"\n      :class=\"['stash-more-actions__container tw-flex tw-items-center tw-gap-2', props.actionsContainerClass]\"\n    >\n      <!-- Default slot for elements that can be hidden -->\n      <slot></slot>\n    </component>\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    <!-- Only render dropdown if more-actions slot is provided -->\n    <Dropdown\n      v-if=\"hasMoreActionsSlot\"\n      ref=\"moreDropdownRef\"\n      :class=\"[\n        '!tw-absolute tw-top-0',\n        shouldMoreButtonShow ? 'tw-animate-fade-in' : 'tw-animate-fade-out',\n        { 'tw-invisible': !isMoreButtonVisible },\n      ]\"\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\n          :id=\"moreMenuId\"\n          ref=\"moreDropdownMenuRef\"\n          data-test=\"stash-more-actions__dropdown\"\n          class=\"tw-flex tw-flex-col tw-gap-1.5 tw-p-1.5\"\n        >\n          <!-- More actions slot content (only overflow items will be shown) -->\n          <slot name=\"more-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\n  :global(.stash-more-actions__container [data-action-id]:not([data-more-actions-processed])) {\n    visibility: hidden;\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","elementTimeouts","addActionIdsToFirstLevelChildren","actionsContainerEl","directChildren","existingIds","child","existingId","nextIndex","createElementIdMap","elementIdMap","index","actionId","cleanupOverflowIds","overflowIds","currentElementIds","idsToRemove","id","applyElementVisibility","element","elementId","existingTimeout","timeout","DEBOUNCE","syncMoreActionsVisibility","moreDropdownMenuEl","useOverflowCalculator","actionsContainerRef","moreDropdownMenuRef","trackerElementRef","onOverflowChange","isProcessing","lastOverflowState","trackerBounding","useElementBounding","updateOverflowState","newOverflowIds","calculateOverflowInternal","computedStyle","gapValue","gapWidth","elementRect","currentOverflowState","newOverflowState","nextTick","debouncedCalculateOverflow","debounce","calculateOverflow","updateTrackerBounding","createIntersectionObserver","moreDropdownWidth","calculateMoreButtonWidth","hasMoreActionsSlot","isInitializing","cleanupCalculator","mutationObserver","stopResizeObserver","stopIntersectionObserver","clearOverflowState","cleanupObservers","handleMutation","addActionIds","debouncedInitObserve","createObserver","stopResize","useResizeObserver","stopIntersection","useIntersectionObserver","entries","hasChanges","entry","initObserve","onMounted","onUpdated","onDeactivated","onBeforeUnmount","useMoreButtonWidth","moreDropdownRef","moreButtonAlign","hasOverflowActions","_a","dropdownWidth","moreButtonWidth","watch","newValue","calculatedWidth","useVisibleElementsWidth","visibleElementsWidth","isRecalculatingWidth","isRecalculatingWithDelay","widthCalculationTimeout","calculateVisibleElementsWidth","totalWidth","shouldBeVisible","isHiddenByCSS","rect","calculateVisibleElementsWidthDelayed","props","__props","slots","useSlots","computed","useTemplateRef","isMoreMenuOpen","moreMenuId","uniqueId","showButtonDelayTimeout","isDelayedShowReady","isMoreButtonVisible","shouldMoreButtonShow","toggleMoreButtonAnimation","cleanupVisibleElementsWidth","shouldShowMoreButton","isMoreMenuOpenString","actionsContainerWidth","moreButtonPosition","isReady","handleDropdownToggle","event"],"mappings":"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"}

package/dist/MoreActions.vue.d.ts

@@ -33,53 +33,48 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MoreActionsProps>, {
-activeItemId: undefined;
-dropdownContentClass: undefined;
 actionsContainerClass: undefined;
+actionsContainerTag: string;
 moreButtonText: () => any;
 dropdownMode: string;
-disableAutoDetectActions: boolean;
 moreButtonAlign: string;
 width: undefined;
-itemInDropdownClass: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MoreActionsProps>, {
-activeItemId: undefined;
-dropdownContentClass: undefined;
 actionsContainerClass: undefined;
+actionsContainerTag: string;
 moreButtonText: () => any;
 dropdownMode: string;
-disableAutoDetectActions: boolean;
 moreButtonAlign: string;
 width: undefined;
-itemInDropdownClass: undefined;
 }>>> & Readonly<{}>, {
 width: string | number;
-itemInDropdownClass: string | Record<string, boolean>;
-activeItemId: string;
 moreButtonAlign: "separate" | "together";
-dropdownContentClass: string;
 actionsContainerClass: string | Record<string, boolean>;
+actionsContainerTag: string;
 moreButtonText: string;
 dropdownMode: "default" | "custom";
-disableAutoDetectActions: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
-    actions?(_: {}): any;
+    default?(_: {}): any;
     toggle?(_: {
         toggle: () => Promise<void>;
         isOpen: boolean;
     }): any;
+    "more-actions"?(_: {}): any;
 }>;
 export default _default;
 
 export declare interface MoreActionsProps {
-    /**
-     * CSS class or classes to be applied to the dropdown content
-     */
-    dropdownContentClass?: string;
     /**
      * CSS class or classes to be applied to the actions container
      */
     actionsContainerClass?: string | Record<string, boolean> | undefined;
+    /**
+     * HTML element tag to use for the actions container
+     * Useful when you need to maintain valid HTML semantics
+     * (e.g., use 'ul' when children are <li> elements)
+     * @default 'div'
+     */
+    actionsContainerTag?: string;
     /**
      * Text to display on the more actions button
      */
@@ -95,32 +90,12 @@ export declare interface MoreActionsProps {
      * - 'custom': Custom rendering through slots
      */
     dropdownMode?: 'default' | 'custom';
-    /**
-     * Whether to disable automatic detection of actions from first-level children in the actions slot
-     * When false (default), all direct children in the actions slot will be treated as actions
-     * without needing to manually add data-action-id attributes
-     */
-    disableAutoDetectActions?: boolean;
-    /**
-     * Whether to apply dropdown item styling automatically
-     * When enabled, applies flex layout, padding, hover effects, and other styling to dropdown items
-     */
-    autoStyleDropdownItems?: boolean;
-    /**
-     * Active item ID for highlighting in dropdown
-     * Used when autoStyleDropdownItems is enabled to show which item is currently selected
-     */
-    activeItemId?: string;
     /**
      * Alignment of the More button
      * - 'separate': Button is aligned to the right edge of the actions container (default)
      * - 'together': Button is aligned immediately after the last visible action
      */
     moreButtonAlign?: 'separate' | 'together';
-    /**
-     * CSS class or classes to be applied to items inside the dropdown
-     */
-    itemInDropdownClass?: string | Record<string, boolean> | undefined;
 }
 
 export { }

package/dist/PageNavigation.js

@@ -1,13 +1,16 @@
-import { defineComponent as g, ref as x, watch as I, onMounted as _, createElementBlock as i, openBlock as u, createVNode as T, withCtx as p, Fragment as V, renderList as k, createBlock as N, unref as B, createTextVNode as C, toDisplayString as U } from "vue";
-import y from "@leaflink/snitch";
-import s from "lodash-es/kebabCase";
-import { useRoute as P, useRouter as D } from "vue-router";
-import E from "./Tab.js";
-import F from "./Tabs.js";
-const L = {
+import { defineComponent as T, ref as B, watch as N, onMounted as C, createElementBlock as f, openBlock as o, createVNode as x, withCtx as l, Fragment as i, renderList as I, createBlock as p, unref as b, createTextVNode as v, toDisplayString as h } from "vue";
+import U from "@leaflink/snitch";
+import r from "lodash-es/kebabCase";
+import { useRoute as M, useRouter as P } from "vue-router";
+import D from "./Badge.js";
+import E from "./Menu.js";
+import F from "./MenuItem.js";
+import L from "./Tab.js";
+import { _ as O } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
+const R = {
   class: "stash-page-navigation container",
   "data-test": "stash-page-navigation"
-}, z = /* @__PURE__ */ g({
+}, Q = /* @__PURE__ */ T({
   name: "ll-page-navigation",
   __name: "PageNavigation",
   props: {
@@ -16,62 +19,92 @@ const L = {
     items: {}
   },
   emits: ["update:modelValue", "change"],
-  setup(v, { emit: h }) {
-    const n = v, c = h;
-    n.activeIndex && y.info("The `activeIndex` prop is deprecated. Use `v-model` instead.");
-    const r = P(), f = D(), d = x("");
-    function o(t) {
-      t !== d.value && (d.value = t, c("update:modelValue", t));
+  setup(k, { emit: V }) {
+    const n = k, g = V;
+    n.activeIndex && U.info("The `activeIndex` prop is deprecated. Use `v-model` instead.");
+    const d = M(), _ = P(), c = B("");
+    function s(t) {
+      t !== c.value && (c.value = t, g("update:modelValue", t));
     }
-    return I(
+    return N(
       () => n.modelValue,
       (t, e) => {
         if (e === t) return;
-        const a = n.items.findIndex((l) => s(l.label) === t);
-        c("change", a), o(t);
+        const a = n.items.findIndex((u) => r(u.label) === t);
+        g("change", a), s(t);
       }
-    ), _(() => {
+    ), C(() => {
       if (!n.items.length) return;
       if (n.activeIndex !== void 0) {
         const e = n.items[n.activeIndex];
-        o(s(e.label));
+        s(r(e.label));
         return;
       }
-      if (n.modelValue !== d.value) {
-        o(n.modelValue);
+      if (n.modelValue !== c.value) {
+        s(n.modelValue);
         return;
       }
-      if (!f) return;
+      if (!_) return;
       const t = n.items.find((e) => {
         if (e != null && e.disabled || !(e != null && e.to) && !(e != null && e.href)) return;
-        const { path: a } = f.resolve((e == null ? void 0 : e.to) || (e == null ? void 0 : e.href));
-        if (a === r.path)
+        const { path: a } = _.resolve((e == null ? void 0 : e.to) || (e == null ? void 0 : e.href));
+        if (a === d.path)
           return !0;
-        if (!r.path.includes(a)) return;
-        const l = (r.path.length - r.path.lastIndexOf("/")) * -1, b = r.path.slice(0, l);
-        return a === b;
+        if (!d.path.includes(a)) return;
+        const u = (d.path.length - d.path.lastIndexOf("/")) * -1, y = d.path.slice(0, u);
+        return a === y;
       });
-      t && o((t == null ? void 0 : t.value) || s(t.label));
-    }), (t, e) => (u(), i("nav", L, [
-      T(F, {
-        "active-tab": d.value,
-        "onUpdate:activeTab": o
+      t && s((t == null ? void 0 : t.value) || r(t.label));
+    }), (t, e) => (o(), f("nav", R, [
+      x(O, {
+        "active-tab": c.value,
+        "onUpdate:activeTab": s
       }, {
-        default: p(() => [
-          (u(!0), i(V, null, k(n.items, (a, l) => (u(), N(E, {
+        "more-actions": l(() => [
+          x(E, null, {
+            default: l(() => [
+              (o(!0), f(i, null, I(n.items, (a) => (o(), p(F, {
+                key: a.label,
+                "data-action-id": (a == null ? void 0 : a.value) || b(r)(a.label),
+                "is-disabled": a.disabled
+              }, {
+                default: l(() => [
+                  a.badge ? (o(), p(D, {
+                    key: 0,
+                    content: a.badge,
+                    position: "inline",
+                    color: "red"
+                  }, {
+                    default: l(() => [
+                      v(h(a.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"])) : (o(), f(i, { key: 1 }, [
+                    v(h(a.label), 1)
+                  ], 64))
+                ]),
+                _: 2
+              }, 1032, ["data-action-id", "is-disabled"]))), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        default: l(() => [
+          (o(!0), f(i, null, I(n.items, (a, u) => (o(), p(L, {
             key: a.label,
-            value: (a == null ? void 0 : a.value) || B(s)(a.label),
+            value: (a == null ? void 0 : a.value) || b(r)(a.label),
             to: a.to,
             href: a.href,
             badge: a.badge,
             disabled: a.disabled,
-            "data-id": l
+            "data-id": u,
+            "data-action-id": (a == null ? void 0 : a.value) || b(r)(a.label)
           }, {
-            default: p(() => [
-              C(U(a.label), 1)
+            default: l(() => [
+              v(h(a.label), 1)
             ]),
             _: 2
-          }, 1032, ["value", "to", "href", "badge", "disabled", "data-id"]))), 128))
+          }, 1032, ["value", "to", "href", "badge", "disabled", "data-id", "data-action-id"]))), 128))
         ]),
         _: 1
       }, 8, ["active-tab"])
@@ -79,6 +112,6 @@ const L = {
   }
 });
 export {
-  z as default
+  Q as default
 };
 //# sourceMappingURL=PageNavigation.js.map

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 Badge from '../Badge/Badge.vue';\n  import Menu from '../Menu/Menu.vue';\n  import MenuItem from '../MenuItem/MenuItem.vue';\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        :data-action-id=\"item?.value || kebabCase(item.label)\"\n      >\n        {{ item.label }}\n      </Tab>\n\n      <template #more-actions>\n        <Menu>\n          <MenuItem\n            v-for=\"item in props.items\"\n            :key=\"item.label\"\n            :data-action-id=\"item?.value || kebabCase(item.label)\"\n            :is-disabled=\"item.disabled\"\n          >\n            <Badge v-if=\"item.badge\" :content=\"item.badge\" position=\"inline\" color=\"red\">\n              {{ item.label }}\n            </Badge>\n            <template v-else>\n              {{ item.label }}\n            </template>\n          </MenuItem>\n        </Menu>\n      </template>\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":";;;;;;;;;;;;;;;;;;;;;;AA8CE,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/Tab.js

@@ -1,7 +1,7 @@
 import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
 import j from "@leaflink/snitch";
 import D from "./Badge.js";
-import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
+import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
   __name: "Tab",

package/dist/Tabs.js

@@ -1,13 +1,7 @@
-import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
-import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
-import { _ as a } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const t = {
-  "menu-tab": "_menu-tab_frbn6_2"
-}, o = {
-  $style: t
-}, r = /* @__PURE__ */ a(s, [["__cssModules", o]]);
+import { _ as r } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
+import { T as t, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
 export {
-  c as TABS_INJECTION,
+  t as TABS_INJECTION,
   f as TabVariant,
   r as default
 };

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/Tabs.vue.d.ts

@@ -46,6 +46,7 @@ variant: TabVariant;
 variant: "line" | "enclosed";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
+    "more-actions"?(_: {}): any;
 }>;
 export default _default;