@leaflink/stash 52.0.2 → 53.0.0

package/dist/MoreActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreActions.js","sources":["../src/composables/useToggleAnimation/useToggleAnimation.ts","../src/components/MoreActions/constants.ts","../src/components/MoreActions/utils.ts","../src/components/MoreActions/useOverflowCalculator.ts","../src/components/MoreActions/createIntersectionObserver.ts","../src/components/MoreActions/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=\"[\n        'stash-more-actions__container tw-flex tw-items-center tw-gap-2 tw-overflow-x-hidden',\n        props.actionsContainerClass,\n      ]\"\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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"}
+{"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('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('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('hidden');\n    } else {\n      element.classList.add('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('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 relative 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 flex items-center gap-2 overflow-x-hidden', 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        '!absolute top-0',\n        shouldMoreButtonShow ? 'animate-fade-in' : 'animate-fade-out',\n        { 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 -border-gray-500 text-gray-500 flex w-full items-center justify-between -border\"\n            secondary\n            :aria-expanded=\"isMoreMenuOpenString\"\n            @click=\"toggle\"\n          >\n            {{ props.moreButtonText }} <Icon class=\"-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=\"flex flex-col gap-1.5 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  @layer utilities {\n    :global([data-action-id]) {\n      flex-shrink: 0;\n    }\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/ObfuscateText.js

@@ -24,19 +24,19 @@ const k = {
       lengthToKeep: t.lengthToKeep,
       position: t.position
     }));
-    return (w, o) => (a(), c("span", k, [
+    return (T, o) => (a(), c("span", k, [
       i(h(l.value) + " ", 1),
       t.showToggle ? (a(), f(x, {
         key: 0,
-        class: "tw-ml-1 tw-size-auto tw-p-0",
+        class: "ml-1 size-auto p-0",
         icon: "",
         type: "button",
-        onClick: o[0] || (o[0] = (T) => e.value = !e.value)
+        onClick: o[0] || (o[0] = (_) => e.value = !e.value)
       }, {
         default: p(() => [
           d(C, {
             name: e.value ? "hide" : "show",
-            class: g(["tw-cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
+            class: g(["cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
             "data-test": e.value ? "stash-obfuscate-text|hide-toggle-icon" : "stash-obfuscate-text|show-toggle-icon"
           }, null, 8, ["name", "class", "data-test"])
         ]),

package/dist/ObfuscateText.js.map

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

package/dist/PageContent.js

@@ -1,13 +1,13 @@
-import { defineComponent as d, useSlots as l, useCssModule as p, createElementBlock as c, openBlock as r, normalizeClass as a, unref as e, createElementVNode as u, createCommentVNode as h, renderSlot as _ } from "vue";
-import { _ as m } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const b = ["id", "role"], g = /* @__PURE__ */ d({
+import { defineComponent as i, useSlots as l, useCssModule as p, createElementBlock as c, openBlock as r, normalizeClass as a, unref as e, createElementVNode as h, createCommentVNode as m, renderSlot as _ } from "vue";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const g = ["id", "role"], u = /* @__PURE__ */ i({
   name: "ll-page-content",
   __name: "PageContent",
   props: {
     activeTab: { default: void 0 }
   },
-  setup(i) {
-    const s = i, o = l(), t = p();
+  setup(d) {
+    const s = d, o = l(), t = p();
     return (n, T) => (r(), c("div", {
       id: s.activeTab ? `tabpanel-${s.activeTab}` : void 0,
       class: a(["stash-page-content", [
@@ -19,7 +19,7 @@ const b = ["id", "role"], g = /* @__PURE__ */ d({
       "data-test": "stash-page-content",
       role: s.activeTab ? "tabpanel" : void 0
     }, [
-      u("div", {
+      h("div", {
         class: a(e(t)["stash-page-content__main"])
       }, [
         _(n.$slots, "default")
@@ -29,17 +29,17 @@ const b = ["id", "role"], g = /* @__PURE__ */ d({
         class: a(e(t)["stash-page-content__sidebar"])
       }, [
         _(n.$slots, "sidebar")
-      ], 2)) : h("", !0)
-    ], 10, b));
+      ], 2)) : m("", !0)
+    ], 10, g));
   }
-}), f = "_root_1fnu6_2", v = {
+}), f = "_root_d2tr7_5", v = {
   root: f,
-  "stash-page-content--has-sidebar": "_stash-page-content--has-sidebar_1fnu6_10",
-  "stash-page-content__main": "_stash-page-content__main_1fnu6_16",
-  "stash-page-content__sidebar": "_stash-page-content__sidebar_1fnu6_21"
+  "stash-page-content--has-sidebar": "_stash-page-content--has-sidebar_d2tr7_13",
+  "stash-page-content__main": "_stash-page-content__main_d2tr7_19",
+  "stash-page-content__sidebar": "_stash-page-content__sidebar_d2tr7_24"
 }, C = {
   $style: v
-}, y = /* @__PURE__ */ m(g, [["__cssModules", C]]);
+}, y = /* @__PURE__ */ b(u, [["__cssModules", C]]);
 export {
   y as default
 };

package/dist/PageContent.js.map

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

package/dist/PageHeader.js

@@ -1,12 +1,12 @@
-import { defineComponent as g, useCssModule as u, useSlots as h, computed as f, createElementBlock as t, openBlock as s, normalizeClass as n, unref as o, createElementVNode as p, createCommentVNode as i, renderSlot as a, toDisplayString as _ } from "vue";
-import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }, v = {
+import { defineComponent as u, useCssModule as h, useSlots as f, computed as g, createElementBlock as s, openBlock as t, normalizeClass as c, unref as o, createElementVNode as p, createCommentVNode as l, renderSlot as a, toDisplayString as _ } from "vue";
+import { _ as y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const v = { class: "col-span-full flex items-center lg:col-span-1" }, k = {
   key: 0,
-  class: "stash-page-header__title tw-my-0"
-}, k = {
+  class: "stash-page-header__title my-0"
+}, $ = {
   key: 0,
-  class: "stash-page-header__description tw-mb-0 tw-mt-1.5"
-}, $ = /* @__PURE__ */ g({
+  class: "stash-page-header__description mb-0 mt-1.5"
+}, C = /* @__PURE__ */ u({
   name: "ll-page-header",
   __name: "PageHeader",
   props: {
@@ -14,45 +14,45 @@ const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }
     description: { default: void 0 }
   },
   setup(m) {
-    const c = m, r = u(), l = h(), d = f(() => !!(l["primary-action"] || l["secondary-action"]));
-    return (e, H) => (s(), t("header", {
-      class: n(["stash-page-header", [o(r).root, { [o(r).grid]: d.value }]]),
+    const r = m, i = h(), n = f(), d = g(() => !!(n["primary-action"] || n["secondary-action"]));
+    return (e, N) => (t(), s("header", {
+      class: c(["stash-page-header", [o(i).root, { [o(i).grid]: d.value }]]),
       "data-test": "stash-page-header"
     }, [
-      p("div", y, [
-        o(l).media ? (s(), t("div", {
+      p("div", v, [
+        o(n).media ? (t(), s("div", {
           key: 0,
-          class: n(["stash-page-header__media tw-mr-3 tw-self-center", o(r).mediaTest])
+          class: c(["stash-page-header__media mr-3 self-center", o(i).mediaTest])
         }, [
           a(e.$slots, "media")
-        ], 2)) : i("", !0),
+        ], 2)) : l("", !0),
         p("div", null, [
           a(e.$slots, "title", {}, () => [
-            c.title ? (s(), t("h1", v, _(c.title), 1)) : i("", !0)
+            r.title ? (t(), s("h1", k, _(r.title), 1)) : l("", !0)
           ]),
           a(e.$slots, "description", {}, () => [
-            c.description ? (s(), t("p", k, _(c.description), 1)) : i("", !0)
+            r.description ? (t(), s("p", $, _(r.description), 1)) : l("", !0)
           ])
         ])
       ]),
-      d.value ? (s(), t("div", {
+      d.value ? (t(), s("div", {
         key: 0,
-        class: n(["stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1", o(r).actions])
+        class: c(["stash-page-header__actions col-span-full flex lg:col-span-1", o(i).actions])
       }, [
         a(e.$slots, "secondary-action"),
         a(e.$slots, "primary-action")
-      ], 2)) : i("", !0)
+      ], 2)) : l("", !0)
     ], 2));
   }
-}), C = "_root_1gg6c_2", M = "_grid_1gg6c_13", S = "_actions_1gg6c_18", B = {
-  root: C,
-  grid: M,
-  actions: S,
-  "media-test": "_media-test_1gg6c_41"
-}, E = {
-  $style: B
-}, V = /* @__PURE__ */ w($, [["__cssModules", E]]);
+}), M = "_root_of257_5", S = "_grid_of257_16", B = "_actions_of257_21", E = {
+  root: M,
+  grid: S,
+  actions: B,
+  "media-test": "_media-test_of257_44"
+}, H = {
+  $style: E
+}, b = /* @__PURE__ */ y(C, [["__cssModules", H]]);
 export {
-  V as default
+  b as default
 };
 //# sourceMappingURL=PageHeader.js.map

package/dist/PageHeader.js.map

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

package/dist/PageNavigation.js

@@ -6,7 +6,7 @@ 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";
+import { _ as O } from "./Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.js";
 const R = {
   class: "stash-page-navigation container",
   "data-test": "stash-page-navigation"