@leaflink/stash 51.11.0 → 51.12.0

package/dist/MoreActions.js.map

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

package/dist/MoreActions.vue.d.ts

@@ -1,26 +1,30 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProperties } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentInternalInstance } from 'vue';
-import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComponentPublicInstance } from 'vue';
-import { ComputedRef } from 'vue';
-import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
-import { DropdownOffset } from '../Dropdown/Dropdown.vue';
-import { DropdownProps } from '../Dropdown/Dropdown.vue';
-import { GlobalComponents } from 'vue';
-import { GlobalDirectives } from 'vue';
-import { nextTick } from 'vue';
-import { OnCleanup } from '@vue/reactivity';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { ShallowUnwrapRef } from 'vue';
-import { Slot } from 'vue';
-import { VNodeProps } from 'vue';
-import { WatchOptions } from 'vue';
-import { WatchStopHandle } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -28,7 +32,27 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<MoreActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MoreActionsProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MoreActionsProps>, {
+activeItemId: undefined;
+dropdownContentClass: undefined;
+actionsContainerClass: undefined;
+moreButtonText: () => any;
+dropdownMode: string;
+disableAutoDetectActions: boolean;
+moreButtonAlign: string;
+width: undefined;
+itemInDropdownClass: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MoreActionsProps>, {
+activeItemId: undefined;
+dropdownContentClass: undefined;
+actionsContainerClass: undefined;
+moreButtonText: () => any;
+dropdownMode: string;
+disableAutoDetectActions: boolean;
+moreButtonAlign: string;
+width: undefined;
+itemInDropdownClass: undefined;
+}>>> & Readonly<{}>, {
 width: string | number;
 itemInDropdownClass: string | Record<string, boolean>;
 activeItemId: string;
@@ -38,108 +62,7 @@ actionsContainerClass: string | Record<string, boolean>;
 moreButtonText: string;
 dropdownMode: "default" | "custom";
 disableAutoDetectActions: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-actionsContainerRef: HTMLDivElement;
-trackerElementRef: HTMLDivElement;
-moreDropdownRef: ({
-$: ComponentInternalInstance;
-$data: {};
-$props: {
-readonly align?: "right" | "left" | undefined;
-readonly label?: string | undefined;
-readonly closeManually?: boolean | undefined;
-readonly offset?: DropdownOffset | undefined;
-readonly reattach?: boolean | undefined;
-readonly contentClass?: string | string[] | undefined;
-readonly fluidContent?: boolean | undefined;
-readonly onToggle?: ((isActive: boolean) => any) | undefined;
-readonly onDismiss?: (() => any) | undefined;
-} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
-$attrs: {
-[x: string]: unknown;
-};
-$refs: {
-[x: string]: unknown;
-} & {
-dropdownRef: HTMLDivElement;
-contentRef: HTMLDivElement;
-};
-$slots: Readonly<{
-[name: string]: Slot<any> | undefined;
-}>;
-$root: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$parent: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$host: Element | null;
-$emit: ((event: "toggle", isActive: boolean) => void) & ((event: "dismiss") => void);
-$el: HTMLDivElement;
-$options: ComponentOptionsBase<Readonly<DropdownProps> & Readonly<{
-onToggle?: ((isActive: boolean) => any) | undefined;
-onDismiss?: (() => any) | undefined;
-}>, {
-isActive: ComputedRef<boolean>;
-toggle: () => Promise<void>;
-dismiss: (event?: Event | undefined) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-toggle: (isActive: boolean) => any;
-dismiss: () => any;
-}, string, {
-label: string;
-align: "right" | "left";
-offset: DropdownOffset;
-closeManually: boolean;
-reattach: boolean;
-contentClass: string | string[];
-fluidContent: boolean;
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
-beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-created?: ((() => void) | (() => void)[]) | undefined;
-beforeMount?: ((() => void) | (() => void)[]) | undefined;
-mounted?: ((() => void) | (() => void)[]) | undefined;
-beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-updated?: ((() => void) | (() => void)[]) | undefined;
-activated?: ((() => void) | (() => void)[]) | undefined;
-deactivated?: ((() => void) | (() => void)[]) | undefined;
-beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-destroyed?: ((() => void) | (() => void)[]) | undefined;
-unmounted?: ((() => void) | (() => void)[]) | undefined;
-renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
-};
-$forceUpdate: () => void;
-$nextTick: typeof nextTick;
-$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
-} & Readonly<{
-label: string;
-align: "right" | "left";
-offset: DropdownOffset;
-closeManually: boolean;
-reattach: boolean;
-contentClass: string | string[];
-fluidContent: boolean;
-}> & Omit<Readonly<DropdownProps> & Readonly<{
-onToggle?: ((isActive: boolean) => any) | undefined;
-onDismiss?: (() => any) | undefined;
-}>, "toggle" | "dismiss" | "isActive" | ("label" | "align" | "offset" | "closeManually" | "reattach" | "contentClass" | "fluidContent")> & ShallowUnwrapRef<    {
-isActive: ComputedRef<boolean>;
-toggle: () => Promise<void>;
-dismiss: (event?: Event | undefined) => void;
-}> & {} & ComponentCustomProperties & {} & {
-$slots: {
-toggle?(_: {
-isActive: boolean;
-toggle: () => Promise<void>;
-}): any;
-default?(_: {
-dismiss: (event?: Event | undefined) => void;
-isActive: boolean;
-}): any;
-};
-}) | null;
-moreDropdownMenuRef: HTMLDivElement;
-}, HTMLDivElement>, {
-    actions?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     actions?(_: {}): any;
     toggle?(_: {
         toggle: () => Promise<void>;
@@ -148,7 +71,7 @@ moreDropdownMenuRef: HTMLDivElement;
 }>;
 export default _default;
 
-declare interface MoreActionsProps {
+export declare interface MoreActionsProps {
     /**
      * CSS class or classes to be applied to the dropdown content
      */

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","_openBlock","_createElementBlock","_hoisted_1","_createTextVNode","_toDisplayString","_createBlock","Button","_cache","$event","_createVNode","Icon","_normalizeClass"],"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;sBAIDK,EAAA,GAAAC,EAkBO,QAlBPC,GAkBO;AAAA,MAjBFC,EAAAC,EAAAP,EAAA,KAAc,IAAG,KACpB,CAAA;AAAA,MACQF,EAAM,mBADdU,EAeSC,GAAA;AAAA;QAbP,OAAM;AAAA,QACN,MAAA;AAAA,QACA,MAAK;AAAA,QACJ,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEf,EAAA,QAAiB,CAAIA,EAAA;AAAA,MAAA;mBAE7B,MAOE;AAAA,UAPFgB,EAOEC,GAAA;AAAA,YANC,MAAMjB,EAAA,QAAiB,SAAA;AAAA,YACxB,OAAKkB,EAAA,CAAC,qBACElB,EAAA,QAAiB,2CAAA,wCAAA,CAAA;AAAA,YACxB,aAAsBA,EAAA,QAAiB,0CAAA;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\n    });\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"props.showToggle\"\n      class=\"tw-ml-1 tw-size-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.vue.d.ts

@@ -1,16 +1,53 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare const _default: DefineComponent<ObfuscateTextProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ObfuscateTextProps> & Readonly<{}>, {
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
+maskChar: string;
+maskCharCount: number;
+lengthToKeep: number;
+position: string;
+obfuscateAll: boolean;
+showToggle: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
+maskChar: string;
+maskCharCount: number;
+lengthToKeep: number;
+position: string;
+obfuscateAll: boolean;
+showToggle: boolean;
+}>>> & Readonly<{}>, {
 position: "start" | "end";
 maskChar: string;
 maskCharCount: number;
 lengthToKeep: number;
 obfuscateAll: boolean;
 showToggle: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 declare interface ObfuscateTextOptions {
@@ -34,7 +71,7 @@ declare interface ObfuscateTextOptions {
     position?: 'start' | 'end';
 }
 
-declare interface ObfuscateTextProps extends ObfuscateTextOptions {
+export declare interface ObfuscateTextProps extends ObfuscateTextOptions {
     /**
      * The full text
      */

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","_createElementBlock","_unref","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GACRC,IAAUC,EAAA;2BAIhBC,EAqBM,OAAA;AAAA,MApBH,IAAIN,EAAM,wBAAwBA,EAAM,SAAS,KAAK;AAAA,MACvD,UAAM,sBAAoB;AAAA,QACVO,EAAAH,CAAA,EAAQ;AAAA;WAAuBG,EAAAH,CAAA,EAAO,iCAAA,CAAA,GAAA,CAAA,CAAwCG,EAAAL,CAAA,EAAM;AAAA,QAAA;AAAA;MAMpG,aAAU;AAAA,MACT,MAAMF,EAAM,yBAAyB;AAAA,IAAA;MAEtCQ,EAGM,OAAA;AAAA,QAHA,SAAOD,EAAAH,CAAA,EAAO,0BAAA,CAAA;AAAA,MAAA;QAElBK,EAA4BC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGfH,EAAAL,CAAA,EAAM,gBAArBI,EAGQ,SAAA;AAAA;QAHuB,SAAOC,EAAAH,CAAA,EAAO,6BAAA,CAAA;AAAA,MAAA;QAE3CK,EAA4BC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;"}
+{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  export interface PageContentProps {\n    /**\n     * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.\n     */\n    activeTab?: string;\n  }\n\n  const props = withDefaults(defineProps<PageContentProps>(), {\n    activeTab: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    :id=\"props.activeTab ? `tabpanel-${props.activeTab}` : undefined\"\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['stash-page-content--has-sidebar']]: !!slots.sidebar,\n      },\n    ]\"\n    data-test=\"stash-page-content\"\n    :role=\"props.activeTab ? 'tabpanel' : undefined\"\n  >\n    <div :class=\"classes['stash-page-content__main']\">\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\" :class=\"classes['stash-page-content__sidebar']\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .stash-page-content--has-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--grid-gutter);\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__main {\n    flex: 1; /* 12 cols */\n    min-width: 0;\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__sidebar {\n    flex: 0;\n    min-width: 0;\n  }\n\n  @media screen('lg') {\n    .stash-page-content--has-sidebar {\n      flex-direction: row;\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__main {\n      flex: 3; /* 9 cols */\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__sidebar {\n      flex: 1; /* 3 cols */\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule"],"mappings":";;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GACRC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageContent.vue.d.ts

@@ -1,23 +1,50 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<PageContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PageContentProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageContentProps>, {
+activeTab: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageContentProps>, {
+activeTab: undefined;
+}>>> & Readonly<{}>, {
 activeTab: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     sidebar?(_: {}): any;
 }>;
 export default _default;
 
-declare interface PageContentProps {
+export declare interface PageContentProps {
     /**
      * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.
      */