@salt-ds/core 1.47.4 → 1.48.0

package/dist-cjs/utils/usePreventScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePreventScroll.js","sources":["../src/utils/usePreventScroll.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Taken from https://github.com/adobe/react-spectrum/blob/cc08a8dbc95d3648eee47bc9b8e0ed48448e0da2/packages/%40react-aria/overlays/src/usePreventScroll.ts#L44 but refactored.\n * This hook currently doesn't use `useWindow` because in a desktop environment the main window is only the window they typically want locked.\n * If we need to in the future we can add an option to specify which window should be affected.\n */\n\nimport { createChainedFunction } from \"./createChainedFunction\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\ninterface PreventScrollOptions {\n  /** Whether the scroll lock is disabled. */\n  isDisabled?: boolean;\n}\n\nconst visualViewport = typeof document !== \"undefined\" && window.visualViewport;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n  \"checkbox\",\n  \"radio\",\n  \"range\",\n  \"color\",\n  \"file\",\n  \"image\",\n  \"button\",\n  \"submit\",\n  \"reset\",\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: () => void;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  const { isDisabled } = options;\n\n  useIsomorphicLayoutEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    preventScrollCount++;\n    if (preventScrollCount === 1) {\n      if (isIOS()) {\n        restore = preventScrollMobileSafari();\n      } else {\n        restore = preventScrollStandard();\n      }\n    }\n\n    return () => {\n      preventScrollCount--;\n      if (preventScrollCount === 0) {\n        restore();\n      }\n    };\n  }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n  return createChainedFunction(\n    setStyle(\n      document.documentElement,\n      \"paddingRight\",\n      `${window.innerWidth - document.documentElement.clientWidth}px`,\n    ),\n    setStyle(document.documentElement, \"overflow\", \"hidden\"),\n  );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n//    it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n//    This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n//    on the window.\n// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at\n//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow\n//    by preventing default in a `touchmove` event.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n//    into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n//    same visually, but makes the actual scroll position always zero. This is required to make all of the\n//    above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n//    to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n  let scrollable: Element;\n  let restoreScrollableStyles: () => void;\n  const onTouchStart = (e: TouchEvent) => {\n    // Store the nearest scrollable parent element from the element that the user touched.\n    scrollable = getScrollParent(e.target as Element, true);\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return;\n    }\n\n    // Prevent scrolling up when at the top and scrolling down when at the bottom\n    // of a nested scrollable area, otherwise mobile Safari will start scrolling\n    // the window instead.\n    if (\n      scrollable instanceof HTMLElement &&\n      window.getComputedStyle(scrollable).overscrollBehavior === \"auto\"\n    ) {\n      restoreScrollableStyles = setStyle(\n        scrollable,\n        \"overscrollBehavior\",\n        \"contain\",\n      );\n    }\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    // Prevent scrolling the window.\n    if (\n      !scrollable ||\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault();\n      return;\n    }\n\n    // overscroll-behavior should prevent scroll chaining, but currently does not\n    // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452\n    // This checks that both the width and height do not overflow, otherwise we might\n    // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to\n    // the element will prevent vertical page scrolling. We can't add that automatically\n    // because it must be set before the touchstart event.\n    if (\n      scrollable.scrollHeight === scrollable.clientHeight &&\n      scrollable.scrollWidth === scrollable.clientWidth\n    ) {\n      e.preventDefault();\n    }\n  };\n\n  const onTouchEnd = () => {\n    if (restoreScrollableStyles) {\n      restoreScrollableStyles();\n    }\n  };\n\n  const onFocus = (e: FocusEvent) => {\n    const target = e.target as HTMLElement;\n    if (willOpenKeyboard(target)) {\n      setupStyles();\n\n      // Apply a transform to trick Safari into thinking the input is at the top of the page\n      // so it doesn't try to scroll it into view.\n      target.style.transform = \"translateY(-2000px)\";\n      requestAnimationFrame(() => {\n        target.style.transform = \"\";\n\n        // This will have prevented the browser from scrolling the focused element into view,\n        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            // If the keyboard is already visible, do this after one additional frame\n            // to wait for the transform to be removed.\n            requestAnimationFrame(() => {\n              scrollIntoView(target);\n            });\n          } else {\n            // Otherwise, wait for the visual viewport to resize before scrolling so we can\n            // measure the correct position to scroll to.\n            visualViewport.addEventListener(\n              \"resize\",\n              () => scrollIntoView(target),\n              { once: true },\n            );\n          }\n        }\n      });\n    }\n  };\n\n  let restoreStyles: null | (() => void) = null;\n  const setupStyles = () => {\n    if (restoreStyles) {\n      return;\n    }\n\n    const onWindowScroll = () => {\n      // Last resort. If the window scrolled, scroll it back to the top.\n      // It should always be at the top because the body will have a negative margin (see below).\n      window.scrollTo(0, 0);\n    };\n\n    // Record the original scroll position so we can restore it.\n    // Then apply a negative margin to the body to offset it by the scroll position. This will\n    // enable us to scroll the window to the top, which is required for the rest of this to work.\n    const scrollX = window.pageXOffset;\n    const scrollY = window.pageYOffset;\n\n    restoreStyles = createChainedFunction(\n      addEvent(window, \"scroll\", onWindowScroll),\n      setStyle(\n        document.documentElement,\n        \"paddingRight\",\n        `${window.innerWidth - document.documentElement.clientWidth}px`,\n      ),\n      setStyle(document.documentElement, \"overflow\", \"hidden\"),\n      setStyle(document.body, \"marginTop\", `-${scrollY}px`),\n      () => {\n        window.scrollTo(scrollX, scrollY);\n      },\n    );\n\n    // Scroll to the top. The negative margin on the body will make this appear the same.\n    window.scrollTo(0, 0);\n  };\n\n  const removeEvents = createChainedFunction(\n    addEvent(document, \"touchstart\", onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchmove\", onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchend\", onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"focus\", onFocus, true),\n  );\n\n  return () => {\n    // Restore styles and scroll the page back to where it was.\n    restoreScrollableStyles?.();\n    restoreStyles?.();\n    removeEvents();\n  };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: HTMLElement, style: string, value: string) {\n  const cur = element.style[style as any];\n  element.style[style as any] = value;\n\n  return () => {\n    element.style[style as any] = cur;\n  };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: Document | Window,\n  event: K,\n  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions,\n) {\n  // internal function, so it's ok to ignore the difficult to fix type error\n  // @ts-ignore\n  target.addEventListener(event, handler, options);\n  return () => {\n    // @ts-ignore\n    target.removeEventListener(event, handler, options);\n  };\n}\n\nfunction scrollIntoView(target: Element) {\n  const root = document.scrollingElement || document.documentElement;\n  let nextTarget: Element | null = target;\n  while (nextTarget && nextTarget !== root) {\n    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n    const scrollable = getScrollParent(nextTarget);\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== nextTarget\n    ) {\n      const scrollableTop = scrollable.getBoundingClientRect().top;\n      const targetTop = nextTarget.getBoundingClientRect().top;\n      if (targetTop > scrollableTop + nextTarget.clientHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop;\n      }\n    }\n\n    nextTarget = scrollable.parentElement;\n  }\n}\n\nfunction willOpenKeyboard(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  );\n}\n\nfunction isScrollable(\n  node: Element | null,\n  checkForOverflow?: boolean,\n): boolean {\n  if (!node) {\n    return false;\n  }\n  const style = window.getComputedStyle(node);\n  let isScrollable = /(auto|scroll)/.test(\n    style.overflow + style.overflowX + style.overflowY,\n  );\n\n  if (isScrollable && checkForOverflow) {\n    isScrollable =\n      node.scrollHeight !== node.clientHeight ||\n      node.scrollWidth !== node.clientWidth;\n  }\n\n  return isScrollable;\n}\n\nfunction getScrollParent(node: Element, checkForOverflow?: boolean): Element {\n  let scrollableNode: Element | null = node;\n  if (isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  return (\n    scrollableNode || document.scrollingElement || document.documentElement\n  );\n}\n\nfunction testPlatform(re: RegExp) {\n  return typeof window !== \"undefined\" && window.navigator != null\n    ? re.test(\n        // @ts-expect-error userAgentData is only supported in Chrome 90+\n        window.navigator.userAgentData?.platform || window.navigator.platform,\n      )\n    : false;\n}\n\nfunction cached(fn: () => boolean) {\n  if (process.env.NODE_ENV === \"test\") {\n    return fn;\n  }\n\n  let res: boolean | null = null;\n  return () => {\n    if (res == null) {\n      res = fn();\n    }\n    return res;\n  };\n}\n\nconst isMac = cached(() => testPlatform(/^Mac/i));\n\nconst isIPhone = cached(() => testPlatform(/^iPhone/i));\n\nconst isIPad = cached(\n  () =>\n    testPlatform(/^iPad/i) ||\n    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.\n    (isMac() && navigator.maxTouchPoints > 1),\n);\n\nconst isIOS = cached(() => isIPhone() || isIPad());\n"],"names":["useIsomorphicLayoutEffect","createChainedFunction","isScrollable"],"mappings":"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"}
+{"version":3,"file":"usePreventScroll.js","sources":["../src/utils/usePreventScroll.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Taken from https://github.com/adobe/react-spectrum/blob/cc08a8dbc95d3648eee47bc9b8e0ed48448e0da2/packages/%40react-aria/overlays/src/usePreventScroll.ts#L44 but refactored.\n * This hook currently doesn't use `useWindow` because in a desktop environment the main window is only the window they typically want locked.\n * If we need to in the future we can add an option to specify which window should be affected.\n */\n\nimport { createChainedFunction } from \"./createChainedFunction\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\ninterface PreventScrollOptions {\n  /** Whether the scroll lock is disabled. */\n  isDisabled?: boolean;\n}\n\nconst visualViewport = typeof document !== \"undefined\" && window.visualViewport;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n  \"checkbox\",\n  \"radio\",\n  \"range\",\n  \"color\",\n  \"file\",\n  \"image\",\n  \"button\",\n  \"submit\",\n  \"reset\",\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: () => void;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  const { isDisabled } = options;\n\n  useIsomorphicLayoutEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    preventScrollCount++;\n    if (preventScrollCount === 1) {\n      if (isIOS()) {\n        restore = preventScrollMobileSafari();\n      } else {\n        restore = preventScrollStandard();\n      }\n    }\n\n    return () => {\n      preventScrollCount--;\n      if (preventScrollCount === 0) {\n        restore();\n      }\n    };\n  }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n  return createChainedFunction(\n    setStyle(\n      document.documentElement,\n      \"paddingRight\",\n      `${window.innerWidth - document.documentElement.clientWidth}px`,\n    ),\n    setStyle(document.documentElement, \"overflow\", \"hidden\"),\n  );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n//    it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n//    This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n//    on the window.\n// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at\n//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow\n//    by preventing default in a `touchmove` event.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n//    into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n//    same visually, but makes the actual scroll position always zero. This is required to make all of the\n//    above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n//    to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n  let scrollable: Element;\n  let restoreScrollableStyles: () => void;\n  const onTouchStart = (e: TouchEvent) => {\n    // Store the nearest scrollable parent element from the element that the user touched.\n    scrollable = getScrollParent(e.target as Element, true);\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return;\n    }\n\n    // Prevent scrolling up when at the top and scrolling down when at the bottom\n    // of a nested scrollable area, otherwise mobile Safari will start scrolling\n    // the window instead.\n    if (\n      scrollable instanceof HTMLElement &&\n      window.getComputedStyle(scrollable).overscrollBehavior === \"auto\"\n    ) {\n      restoreScrollableStyles = setStyle(\n        scrollable,\n        \"overscrollBehavior\",\n        \"contain\",\n      );\n    }\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    // Prevent scrolling the window.\n    if (\n      !scrollable ||\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault();\n      return;\n    }\n\n    // overscroll-behavior should prevent scroll chaining, but currently does not\n    // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452\n    // This checks that both the width and height do not overflow, otherwise we might\n    // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to\n    // the element will prevent vertical page scrolling. We can't add that automatically\n    // because it must be set before the touchstart event.\n    if (\n      scrollable.scrollHeight === scrollable.clientHeight &&\n      scrollable.scrollWidth === scrollable.clientWidth\n    ) {\n      e.preventDefault();\n    }\n  };\n\n  const onTouchEnd = () => {\n    if (restoreScrollableStyles) {\n      restoreScrollableStyles();\n    }\n  };\n\n  const onFocus = (e: FocusEvent) => {\n    const target = e.target as HTMLElement;\n    if (willOpenKeyboard(target)) {\n      setupStyles();\n\n      // Apply a transform to trick Safari into thinking the input is at the top of the page\n      // so it doesn't try to scroll it into view.\n      target.style.transform = \"translateY(-2000px)\";\n      requestAnimationFrame(() => {\n        target.style.transform = \"\";\n\n        // This will have prevented the browser from scrolling the focused element into view,\n        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            // If the keyboard is already visible, do this after one additional frame\n            // to wait for the transform to be removed.\n            requestAnimationFrame(() => {\n              scrollIntoView(target);\n            });\n          } else {\n            // Otherwise, wait for the visual viewport to resize before scrolling so we can\n            // measure the correct position to scroll to.\n            visualViewport.addEventListener(\n              \"resize\",\n              () => scrollIntoView(target),\n              { once: true },\n            );\n          }\n        }\n      });\n    }\n  };\n\n  let restoreStyles: null | (() => void) = null;\n  const setupStyles = () => {\n    if (restoreStyles) {\n      return;\n    }\n\n    const onWindowScroll = () => {\n      // Last resort. If the window scrolled, scroll it back to the top.\n      // It should always be at the top because the body will have a negative margin (see below).\n      window.scrollTo(0, 0);\n    };\n\n    // Record the original scroll position so we can restore it.\n    // Then apply a negative margin to the body to offset it by the scroll position. This will\n    // enable us to scroll the window to the top, which is required for the rest of this to work.\n    const scrollX = window.pageXOffset;\n    const scrollY = window.pageYOffset;\n\n    restoreStyles = createChainedFunction(\n      addEvent(window, \"scroll\", onWindowScroll),\n      setStyle(\n        document.documentElement,\n        \"paddingRight\",\n        `${window.innerWidth - document.documentElement.clientWidth}px`,\n      ),\n      setStyle(document.documentElement, \"overflow\", \"hidden\"),\n      setStyle(document.body, \"marginTop\", `-${scrollY}px`),\n      () => {\n        window.scrollTo(scrollX, scrollY);\n      },\n    );\n\n    // Scroll to the top. The negative margin on the body will make this appear the same.\n    window.scrollTo(0, 0);\n  };\n\n  const removeEvents = createChainedFunction(\n    addEvent(document, \"touchstart\", onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchmove\", onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchend\", onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"focus\", onFocus, true),\n  );\n\n  return () => {\n    // Restore styles and scroll the page back to where it was.\n    restoreScrollableStyles?.();\n    restoreStyles?.();\n    removeEvents();\n  };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: HTMLElement, style: string, value: string) {\n  const cur = element.style[style as any];\n  element.style[style as any] = value;\n\n  return () => {\n    element.style[style as any] = cur;\n  };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: Document | Window,\n  event: K,\n  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions,\n) {\n  // internal function, so it's ok to ignore the difficult to fix type error\n  // @ts-expect-error\n  target.addEventListener(event, handler, options);\n  return () => {\n    // @ts-expect-error\n    target.removeEventListener(event, handler, options);\n  };\n}\n\nfunction scrollIntoView(target: Element) {\n  const root = document.scrollingElement || document.documentElement;\n  let nextTarget: Element | null = target;\n  while (nextTarget && nextTarget !== root) {\n    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n    const scrollable = getScrollParent(nextTarget);\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== nextTarget\n    ) {\n      const scrollableTop = scrollable.getBoundingClientRect().top;\n      const targetTop = nextTarget.getBoundingClientRect().top;\n      if (targetTop > scrollableTop + nextTarget.clientHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop;\n      }\n    }\n\n    nextTarget = scrollable.parentElement;\n  }\n}\n\nfunction willOpenKeyboard(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  );\n}\n\nfunction isScrollable(\n  node: Element | null,\n  checkForOverflow?: boolean,\n): boolean {\n  if (!node) {\n    return false;\n  }\n  const style = window.getComputedStyle(node);\n  let isScrollable = /(auto|scroll)/.test(\n    style.overflow + style.overflowX + style.overflowY,\n  );\n\n  if (isScrollable && checkForOverflow) {\n    isScrollable =\n      node.scrollHeight !== node.clientHeight ||\n      node.scrollWidth !== node.clientWidth;\n  }\n\n  return isScrollable;\n}\n\nfunction getScrollParent(node: Element, checkForOverflow?: boolean): Element {\n  let scrollableNode: Element | null = node;\n  if (isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  return (\n    scrollableNode || document.scrollingElement || document.documentElement\n  );\n}\n\nfunction testPlatform(re: RegExp) {\n  return typeof window !== \"undefined\" && window.navigator != null\n    ? re.test(\n        // @ts-expect-error userAgentData is only supported in Chrome 90+\n        window.navigator.userAgentData?.platform || window.navigator.platform,\n      )\n    : false;\n}\n\nfunction cached(fn: () => boolean) {\n  if (process.env.NODE_ENV === \"test\") {\n    return fn;\n  }\n\n  let res: boolean | null = null;\n  return () => {\n    if (res == null) {\n      res = fn();\n    }\n    return res;\n  };\n}\n\nconst isMac = cached(() => testPlatform(/^Mac/i));\n\nconst isIPhone = cached(() => testPlatform(/^iPhone/i));\n\nconst isIPad = cached(\n  () =>\n    testPlatform(/^iPad/i) ||\n    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.\n    (isMac() && navigator.maxTouchPoints > 1),\n);\n\nconst isIOS = cached(() => isIPhone() || isIPad());\n"],"names":["useIsomorphicLayoutEffect","createChainedFunction","isScrollable"],"mappings":"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"}

package/dist-cjs/utils/usePrevious.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevious.js","sources":["../src/utils/usePrevious.ts"],"sourcesContent":["import { type DependencyList, useEffect, useRef } from \"react\";\n\nexport function usePrevious<T>(\n  value: T,\n  deps: DependencyList = [],\n  initialValue?: T,\n): T | undefined {\n  const ref = useRef<T | undefined>(initialValue);\n\n  useEffect(() => {\n    ref.current = value;\n  }, deps);\n  return ref.current;\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;AAEO,SAAS,WACd,CAAA,KAAA,EACA,IAAuB,GAAA,IACvB,YACe,EAAA;AACf,EAAM,MAAA,GAAA,GAAMA,aAAsB,YAAY,CAAA;AAE9C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,KAAA;AAAA,KACb,IAAI,CAAA;AACP,EAAA,OAAO,GAAI,CAAA,OAAA;AACb;;;;"}
+{"version":3,"file":"usePrevious.js","sources":["../src/utils/usePrevious.ts"],"sourcesContent":["import { type DependencyList, useEffect, useRef } from \"react\";\n\nexport function usePrevious<T>(\n  value: T,\n  deps: DependencyList = [],\n  initialValue?: T,\n): T | undefined {\n  const ref = useRef<T | undefined>(initialValue);\n\n  useEffect(() => {\n    ref.current = value;\n    // biome-ignore lint/correctness/useExhaustiveDependencies: usePrevious is takes a dependency list to control when it updates, so we don't need to include value in the deps array.\n  }, deps);\n  return ref.current;\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;AAEO,SAAS,WACd,CAAA,KAAA,EACA,IAAuB,GAAA,IACvB,YACe,EAAA;AACf,EAAM,MAAA,GAAA,GAAMA,aAAsB,YAAY,CAAA;AAE9C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,KAAA;AAAA,KAEb,IAAI,CAAA;AACP,EAAA,OAAO,GAAI,CAAA,OAAA;AACb;;;;"}

package/dist-cjs/vertical-navigation/SubMenuContext.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+require('clsx');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const SubMenuContext = createContext.createContext(
+  "SubMenuContext",
+  { depth: -1, iconPaddingCount: 0 }
+);
+const useSubMenuContext = () => {
+  return React.useContext(SubMenuContext);
+};
+function SubMenuProvider({
+  children,
+  directIcons,
+  setDirectIcons
+}) {
+  const { depth, iconPaddingCount } = useSubMenuContext();
+  const context = React.useMemo(
+    () => ({
+      depth: depth + 1,
+      iconPaddingCount: iconPaddingCount + (directIcons.length > 0 ? 1 : 0),
+      setDirectIcons
+    }),
+    [depth, iconPaddingCount, directIcons, setDirectIcons]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SubMenuContext.Provider, { value: context, children });
+}
+
+exports.SubMenuContext = SubMenuContext;
+exports.SubMenuProvider = SubMenuProvider;
+exports.useSubMenuContext = useSubMenuContext;
+//# sourceMappingURL=SubMenuContext.js.map

package/dist-cjs/vertical-navigation/SubMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuContext.js","sources":["../src/vertical-navigation/SubMenuContext.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactNode,\n  type SetStateAction,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { createContext } from \"../utils\";\n\ntype SubMenuContextValue = {\n  depth: number;\n  iconPaddingCount: number;\n  setDirectIcons?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport const SubMenuContext = createContext<SubMenuContextValue>(\n  \"SubMenuContext\",\n  { depth: -1, iconPaddingCount: 0 },\n);\n\nexport const useSubMenuContext = () => {\n  return useContext(SubMenuContext);\n};\n\nexport function SubMenuProvider({\n  children,\n  directIcons,\n  setDirectIcons,\n}: {\n  children: ReactNode;\n  directIcons: string[];\n  setDirectIcons?: Dispatch<SetStateAction<string[]>>;\n}) {\n  const { depth, iconPaddingCount } = useSubMenuContext();\n\n  const context = useMemo(\n    () => ({\n      depth: depth + 1,\n      iconPaddingCount: iconPaddingCount + (directIcons.length > 0 ? 1 : 0),\n      setDirectIcons,\n    }),\n    [depth, iconPaddingCount, directIcons, setDirectIcons],\n  );\n\n  return (\n    <SubMenuContext.Provider value={context}>\n      {children}\n    </SubMenuContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","useMemo"],"mappings":";;;;;;;;;;;AAeO,MAAM,cAAiB,GAAAA,2BAAA;AAAA,EAC5B,gBAAA;AAAA,EACA,EAAE,KAAA,EAAO,EAAI,EAAA,gBAAA,EAAkB,CAAE;AACnC;AAEO,MAAM,oBAAoB,MAAM;AACrC,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAIG,EAAA;AACD,EAAA,MAAM,EAAE,KAAA,EAAO,gBAAiB,EAAA,GAAI,iBAAkB,EAAA;AAEtD,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,OAAO,KAAQ,GAAA,CAAA;AAAA,MACf,gBAAkB,EAAA,gBAAA,IAAoB,WAAY,CAAA,MAAA,GAAS,IAAI,CAAI,GAAA,CAAA,CAAA;AAAA,MACnE;AAAA,KACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,gBAAkB,EAAA,WAAA,EAAa,cAAc;AAAA,GACvD;AAEA,EAAA,sCACG,cAAe,CAAA,QAAA,EAAf,EAAwB,KAAA,EAAO,SAC7B,QACH,EAAA,CAAA;AAEJ;;;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigation.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltVerticalNavigation ol {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\n.saltVerticalNavigationSubMenu > .saltDivider-horizontal,\n.saltVerticalNavigationItem > .saltDivider-horizontal,\n.saltVerticalNavigation ol > .saltDivider-horizontal {\n  margin-bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltVerticalNavigation [data-has-direct-icons=\"false\"] .saltCollapsiblePanel-inner {\n  margin-bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltVerticalNavigation [data-has-direct-icons=\"false\"] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n/* Only show border at the top-level */\n\n.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,\n.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=\"true\"] .saltCollapsiblePanel-inner {\n  margin-bottom: 0;\n}\n\n.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,\n.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=\"true\"] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {\n  border-bottom: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=VerticalNavigation.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigation.css.js.map

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

package/dist-cjs/vertical-navigation/VerticalNavigation.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SubMenuContext = require('./SubMenuContext.js');
+var VerticalNavigation$1 = require('./VerticalNavigation.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigation");
+const VerticalNavigation = React.forwardRef(function VerticalNavigation2(props, ref) {
+  const { appearance = "bordered", children, className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-vertical-navigation",
+    css: VerticalNavigation$1,
+    window: targetWindow
+  });
+  const [directIcons, setDirectIcons] = React.useState([]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SubMenuContext.SubMenuProvider, { directIcons, setDirectIcons, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      ref,
+      className: clsx.clsx(withBaseName(), withBaseName(appearance), className),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-has-direct-icons": directIcons.length > 0, children })
+    }
+  ) });
+});
+
+exports.VerticalNavigation = VerticalNavigation;
+//# sourceMappingURL=VerticalNavigation.js.map

package/dist-cjs/vertical-navigation/VerticalNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.js","sources":["../src/vertical-navigation/VerticalNavigation.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useState } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { SubMenuProvider } from \"./SubMenuContext\";\nimport verticalNavigationCss from \"./VerticalNavigation.css\";\n\nexport interface VerticalNavigationProps\n  extends ComponentPropsWithoutRef<\"nav\"> {\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"indicator\" | \"bordered\";\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigation\");\n\nexport const VerticalNavigation = forwardRef<\n  HTMLElement,\n  VerticalNavigationProps\n>(function VerticalNavigation(props, ref) {\n  const { appearance = \"bordered\", children, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-vertical-navigation\",\n    css: verticalNavigationCss,\n    window: targetWindow,\n  });\n\n  const [directIcons, setDirectIcons] = useState<string[]>([]);\n\n  return (\n    <SubMenuProvider directIcons={directIcons} setDirectIcons={setDirectIcons}>\n      <nav\n        ref={ref}\n        className={clsx(withBaseName(), withBaseName(appearance), className)}\n        {...rest}\n      >\n        <ol data-has-direct-icons={directIcons.length > 0}>{children}</ol>\n      </nav>\n    </SubMenuProvider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigation","useWindow","useComponentCssInjection","verticalNavigationCss","useState","jsx","SubMenuProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,UAAa,GAAA,UAAA,EAAY,UAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAElE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAC,cAAA,CAAmB,EAAE,CAAA;AAE3D,EACE,uBAAAC,cAAA,CAACC,8BAAgB,EAAA,EAAA,WAAA,EAA0B,cACzC,EAAA,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,UAAU,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,yCAAC,IAAG,EAAA,EAAA,uBAAA,EAAuB,WAAY,CAAA,MAAA,GAAS,GAAI,QAAS,EAAA;AAAA;AAAA,GAEjE,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationItem.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SubMenuContext = require('./SubMenuContext.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigationItem");
+const VerticalNavigationItemContext = createContext.createContext(
+  "saltVerticalNavigationItemContext",
+  {
+    active: false,
+    focusVisible: false,
+    setFocusVisible: () => {
+    }
+  }
+);
+function useVerticalNavigationItem() {
+  return React.useContext(VerticalNavigationItemContext);
+}
+const VerticalNavigationItem = React.forwardRef(function VerticalNavigationItem2(props, ref) {
+  const { children, className, active = false, style, ...rest } = props;
+  const { depth } = SubMenuContext.useSubMenuContext();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const context = React.useMemo(
+    () => ({
+      active,
+      focusVisible,
+      setFocusVisible
+    }),
+    [active, focusVisible]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationItemContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      className: clsx.clsx(withBaseName(), className),
+      style: { "--verticalNavigationItem-depth": depth, ...style },
+      ...rest,
+      children
+    }
+  ) });
+});
+
+exports.VerticalNavigationItem = VerticalNavigationItem;
+exports.useVerticalNavigationItem = useVerticalNavigationItem;
+//# sourceMappingURL=VerticalNavigationItem.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationItem.js","sources":["../src/vertical-navigation/VerticalNavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  forwardRef,\n  type SetStateAction,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { createContext, makePrefixer } from \"../utils\";\nimport { useSubMenuContext } from \"./SubMenuContext\";\n\nexport interface VerticalNavigationItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItem\");\n\ntype VerticalNavigationItemContextType = {\n  active: boolean;\n  focusVisible: boolean;\n  setFocusVisible: Dispatch<SetStateAction<boolean>>;\n};\n\nconst VerticalNavigationItemContext =\n  createContext<VerticalNavigationItemContextType>(\n    \"saltVerticalNavigationItemContext\",\n    {\n      active: false,\n      focusVisible: false,\n      setFocusVisible: () => {},\n    },\n  );\n\nexport function useVerticalNavigationItem() {\n  return useContext(VerticalNavigationItemContext);\n}\n\nexport const VerticalNavigationItem = forwardRef<\n  HTMLLIElement,\n  VerticalNavigationItemProps\n>(function VerticalNavigationItem(props, ref) {\n  const { children, className, active = false, style, ...rest } = props;\n\n  const { depth } = useSubMenuContext();\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const context = useMemo(\n    () => ({\n      active,\n      focusVisible,\n      setFocusVisible,\n    }),\n    [active, focusVisible],\n  );\n\n  return (\n    <VerticalNavigationItemContext.Provider value={context}>\n      <li\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={\n          { \"--verticalNavigationItem-depth\": depth, ...style } as CSSProperties\n        }\n        {...rest}\n      >\n        {children}\n      </li>\n    </VerticalNavigationItemContext.Provider>\n  );\n});\n"],"names":["makePrefixer","createContext","useContext","forwardRef","VerticalNavigationItem","useSubMenuContext","useState","useMemo","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,4BAA4B,CAAA;AAQ9D,MAAM,6BACJ,GAAAC,2BAAA;AAAA,EACE,mCAAA;AAAA,EACA;AAAA,IACE,MAAQ,EAAA,KAAA;AAAA,IACR,YAAc,EAAA,KAAA;AAAA,IACd,iBAAiB,MAAM;AAAA;AAAC;AAE5B,CAAA;AAEK,SAAS,yBAA4B,GAAA;AAC1C,EAAA,OAAOC,iBAAW,6BAA6B,CAAA;AACjD;AAEO,MAAM,sBAAyB,GAAAC,gBAAA,CAGpC,SAASC,uBAAAA,CAAuB,OAAO,GAAK,EAAA;AAC5C,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,MAAA,GAAS,OAAO,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhE,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIC,gCAAkB,EAAA;AACpC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEtD,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,MAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,GACvB;AAEA,EAAA,uBACGC,cAAA,CAAA,6BAAA,CAA8B,QAA9B,EAAA,EAAuC,OAAO,OAC7C,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KACE,EAAA,EAAE,gCAAkC,EAAA,KAAA,EAAO,GAAG,KAAM,EAAA;AAAA,MAErD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltVerticalNavigationItemContent {\n  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  appearance: none;\n  -webkit-appearance: none;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  overflow: hidden;\n\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-h4-fontWeight);\n  font-family: var(--salt-text-h4-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-h4-lineHeight);\n  font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n  left: var(--salt-spacing-50);\n  content: \"\";\n  position: absolute;\n  height: var(--salt-size-base);\n  border-radius: var(--salt-palette-corner-strongest);\n  width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n  background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n  border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n  z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n  font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n    background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n  }\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=VerticalNavigationItemContent.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js.map

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

package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SubMenuContext = require('./SubMenuContext.js');
+var VerticalNavigationItem = require('./VerticalNavigationItem.js');
+var VerticalNavigationItemContent$1 = require('./VerticalNavigationItemContent.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigationItemContent");
+const VerticalNavigationItemContent = React.forwardRef(function VerticalNavigationItemContent2(props, ref) {
+  const { children, className, style, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-vertical-navigation-item-content",
+    css: VerticalNavigationItemContent$1,
+    window: targetWindow
+  });
+  const containerRef = React.useRef(null);
+  const handleRef = useForkRef.useForkRef(ref, containerRef);
+  const { active, focusVisible } = VerticalNavigationItem.useVerticalNavigationItem();
+  const { setDirectIcons, iconPaddingCount } = SubMenuContext.useSubMenuContext();
+  const [hasIcon, setHasIcon] = React.useState(false);
+  const iconId = useId.useId();
+  React.useEffect(() => {
+    const checkForIcons = () => {
+      var _a;
+      const iconElement = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+        ".saltIcon ~ .saltVerticalNavigationItemLabel"
+      );
+      setHasIcon(Boolean(iconElement));
+      if (iconElement && iconId && setDirectIcons) {
+        setDirectIcons((icons) => {
+          if (!icons.includes(iconId)) {
+            return icons.concat(iconId);
+          }
+          return icons;
+        });
+      } else if (!iconElement && iconId && setDirectIcons) {
+        setDirectIcons((icons) => icons.filter((id) => id !== iconId));
+      }
+    };
+    const mutationObserver = new MutationObserver(() => {
+      checkForIcons();
+    });
+    checkForIcons();
+    if (containerRef.current) {
+      mutationObserver.observe(containerRef.current, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [iconId, setDirectIcons]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: handleRef,
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          [withBaseName("active")]: active,
+          [withBaseName("focused")]: focusVisible
+        },
+        className
+      ),
+      style: {
+        "--saltVerticalNavigationItem-iconPaddingMultiplier": hasIcon ? iconPaddingCount - 1 : iconPaddingCount,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.VerticalNavigationItemContent = VerticalNavigationItemContent;
+//# sourceMappingURL=VerticalNavigationItemContent.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationItemContent.js","sources":["../src/vertical-navigation/VerticalNavigationItemContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport { useSubMenuContext } from \"./SubMenuContext\";\nimport { useVerticalNavigationItem } from \"./VerticalNavigationItem\";\nimport verticalNavigationItemContentCss from \"./VerticalNavigationItemContent.css\";\n\nexport interface VerticalNavigationItemContentProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemContent\");\n\nexport const VerticalNavigationItemContent = forwardRef<\n  HTMLSpanElement,\n  VerticalNavigationItemContentProps\n>(function VerticalNavigationItemContent(props, ref) {\n  const { children, className, style, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-vertical-navigation-item-content\",\n    css: verticalNavigationItemContentCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLSpanElement>(null);\n  const handleRef = useForkRef(ref, containerRef);\n\n  const { active, focusVisible } = useVerticalNavigationItem();\n  const { setDirectIcons, iconPaddingCount } = useSubMenuContext();\n  const [hasIcon, setHasIcon] = useState(false);\n\n  const iconId = useId();\n\n  useEffect(() => {\n    const checkForIcons = () => {\n      const iconElement = containerRef.current?.querySelector<HTMLElement>(\n        \".saltIcon ~ .saltVerticalNavigationItemLabel\",\n      );\n\n      setHasIcon(Boolean(iconElement));\n      if (iconElement && iconId && setDirectIcons) {\n        setDirectIcons((icons) => {\n          if (!icons.includes(iconId)) {\n            return icons.concat(iconId);\n          }\n          return icons;\n        });\n      } else if (!iconElement && iconId && setDirectIcons) {\n        setDirectIcons((icons) => icons.filter((id) => id !== iconId));\n      }\n    };\n\n    const mutationObserver = new MutationObserver(() => {\n      checkForIcons();\n    });\n    checkForIcons();\n\n    if (containerRef.current) {\n      mutationObserver.observe(containerRef.current, {\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [iconId, setDirectIcons]);\n\n  return (\n    <span\n      ref={handleRef}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focused\")]: focusVisible,\n        },\n        className,\n      )}\n      style={\n        {\n          \"--saltVerticalNavigationItem-iconPaddingMultiplier\": hasIcon\n            ? iconPaddingCount - 1\n            : iconPaddingCount,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigationItemContent","useWindow","useComponentCssInjection","verticalNavigationItemContentCss","useRef","useForkRef","useVerticalNavigationItem","useSubMenuContext","useState","useId","useEffect","jsx","clsx"],"mappings":"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"}

package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var CollapsibleContext = require('../collapsible/CollapsibleContext.js');
+var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
+require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigationItemExpansionIcon");
+const VerticalNavigationItemExpansionIcon = (props) => {
+  const { className, ...rest } = props;
+  const { CollapseIcon, ExpandIcon } = SemanticIconProvider.useIcon();
+  const iconExpansionMap = {
+    expanded: CollapseIcon,
+    collapsed: ExpandIcon
+  };
+  const { open } = CollapsibleContext.useCollapsibleContext();
+  const Icon = iconExpansionMap[open ? "expanded" : "collapsed"];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Icon,
+    {
+      className: clsx.clsx(withBaseName(), className),
+      "aria-hidden": "true",
+      ...rest
+    }
+  );
+};
+
+exports.VerticalNavigationItemExpansionIcon = VerticalNavigationItemExpansionIcon;
+//# sourceMappingURL=VerticalNavigationItemExpansionIcon.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationItemExpansionIcon.js","sources":["../src/vertical-navigation/VerticalNavigationItemExpansionIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { useCollapsibleContext } from \"../collapsible/CollapsibleContext\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemExpansionIcon\");\n\nexport const VerticalNavigationItemExpansionIcon = (props: IconProps) => {\n  const { className, ...rest } = props;\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const iconExpansionMap = {\n    expanded: CollapseIcon,\n    collapsed: ExpandIcon,\n  };\n\n  const { open } = useCollapsibleContext();\n\n  const Icon = iconExpansionMap[open ? \"expanded\" : \"collapsed\"];\n  return (\n    <Icon\n      className={clsx(withBaseName(), className)}\n      aria-hidden=\"true\"\n      {...rest}\n    />\n  );\n};\n"],"names":["makePrefixer","useIcon","useCollapsibleContext","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,0BAAa,yCAAyC,CAAA;AAE9D,MAAA,mCAAA,GAAsC,CAAC,KAAqB,KAAA;AACvE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAEA,EAAM,MAAA,EAAE,IAAK,EAAA,GAAIC,wCAAsB,EAAA;AAEvC,EAAA,MAAM,IAAO,GAAA,gBAAA,CAAiB,IAAO,GAAA,UAAA,GAAa,WAAW,CAAA;AAC7D,EACE,uBAAAC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,aAAY,EAAA,MAAA;AAAA,MACX,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltVerticalNavigationItemLabel {\n  flex: 1;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=VerticalNavigationItemLabel.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js.map

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

package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var VerticalNavigationItemLabel$1 = require('./VerticalNavigationItemLabel.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigationItemLabel");
+const VerticalNavigationItemLabel = React.forwardRef(function VerticalNavigationItemLabel2(props, ref) {
+  const { children, className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-vertical-navigation-item-label",
+    css: VerticalNavigationItemLabel$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
+});
+
+exports.VerticalNavigationItemLabel = VerticalNavigationItemLabel;
+//# sourceMappingURL=VerticalNavigationItemLabel.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationItemLabel.js","sources":["../src/vertical-navigation/VerticalNavigationItemLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport verticalNavigationItemLabelCss from \"./VerticalNavigationItemLabel.css\";\n\nexport interface VerticalNavigationItemLabelProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemLabel\");\n\nexport const VerticalNavigationItemLabel = forwardRef<\n  HTMLSpanElement,\n  VerticalNavigationItemLabelProps\n>(function VerticalNavigationItemLabel(props, ref) {\n  const { children, className, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-vertical-navigation-item-label\",\n    css: verticalNavigationItemLabelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {children}\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigationItemLabel","useWindow","useComponentCssInjection","verticalNavigationItemLabelCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,iCAAiC,CAAA;AAE5D,MAAM,2BAA8B,GAAAC,gBAAA,CAGzC,SAASC,4BAAAA,CAA4B,OAAO,GAAK,EAAA;AACjD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qCAAA;AAAA,IACR,GAAK,EAAAC,6BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltVerticalNavigationItemTrigger {\n  all: unset;\n  padding: var(--salt-spacing-75) 0;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n}\n\n.saltVerticalNavigationItemTrigger::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  position: absolute;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=VerticalNavigationItemTrigger.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js.map

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

package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+var renderProps = require('../utils/renderProps.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var VerticalNavigationItem = require('./VerticalNavigationItem.js');
+var VerticalNavigationItemTrigger$1 = require('./VerticalNavigationItemTrigger.css.js');
+
+function ItemAction(props) {
+  return renderProps.renderProps("a", props);
+}
+const withBaseName = makePrefixer.makePrefixer("saltVerticalNavigationItemTrigger");
+const VerticalNavigationItemTrigger = React.forwardRef(function VerticalNavigationItemTrigger2(props, ref) {
+  const {
+    className,
+    children,
+    render,
+    href,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-vertical-navigation-item-trigger",
+    css: VerticalNavigationItemTrigger$1,
+    window: targetWindow
+  });
+  const isLink = href != null;
+  const { active, setFocusVisible } = VerticalNavigationItem.useVerticalNavigationItem();
+  const wasMouseDownRef = React.useRef(false);
+  const handleFocus = (event) => {
+    if (!wasMouseDownRef.current) {
+      setFocusVisible(true);
+    }
+    wasMouseDownRef.current = false;
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setFocusVisible(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleMouseDown = (event) => {
+    wasMouseDownRef.current = true;
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ItemAction,
+    {
+      className: clsx.clsx(withBaseName(), className),
+      href,
+      "aria-current": active ? "page" : void 0,
+      render: render ?? (isLink ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" })),
+      ref,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseDown: handleMouseDown,
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.VerticalNavigationItemTrigger = VerticalNavigationItemTrigger;
+//# sourceMappingURL=VerticalNavigationItemTrigger.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationItemTrigger.js","sources":["../src/vertical-navigation/VerticalNavigationItemTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport { useVerticalNavigationItem } from \"./VerticalNavigationItem\";\nimport verticalNavigationItemTriggerCss from \"./VerticalNavigationItemTrigger.css\";\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n  return renderProps(\"a\", props);\n}\n\nexport interface VerticalNavigationItemTriggerProps\n  extends ComponentPropsWithoutRef<\"a\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemTrigger\");\n\nexport const VerticalNavigationItemTrigger = forwardRef<\n  HTMLAnchorElement,\n  VerticalNavigationItemTriggerProps\n>(function VerticalNavigationItemTrigger(props, ref) {\n  const {\n    className,\n    children,\n    render,\n    href,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-vertical-navigation-item-trigger\",\n    css: verticalNavigationItemTriggerCss,\n    window: targetWindow,\n  });\n\n  const isLink = href != null;\n  const { active, setFocusVisible } = useVerticalNavigationItem();\n\n  const wasMouseDownRef = useRef(false);\n\n  const handleFocus = (event: FocusEvent<never>) => {\n    if (!wasMouseDownRef.current) {\n      setFocusVisible(true);\n    }\n    wasMouseDownRef.current = false;\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<never>) => {\n    setFocusVisible(false);\n    onBlur?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<never>) => {\n    wasMouseDownRef.current = true;\n    onMouseDown?.(event);\n  };\n\n  return (\n    <ItemAction\n      className={clsx(withBaseName(), className)}\n      href={href}\n      aria-current={active ? \"page\" : undefined}\n      render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n      ref={ref}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n      {...rest}\n    >\n      {children}\n    </ItemAction>\n  );\n});\n"],"names":["renderProps","makePrefixer","forwardRef","VerticalNavigationItemTrigger","useWindow","useComponentCssInjection","verticalNavigationItemTriggerCss","useVerticalNavigationItem","useRef","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAS,WAAW,KAAsC,EAAA;AACxD,EAAO,OAAAA,uBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAOA,MAAM,YAAA,GAAeC,0BAAa,mCAAmC,CAAA;AAE9D,MAAM,6BAAgC,GAAAC,gBAAA,CAG3C,SAASC,8BAAAA,CAA8B,OAAO,GAAK,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uCAAA;AAAA,IACR,GAAK,EAAAC,+BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAS,IAAQ,IAAA,IAAA;AACvB,EAAA,MAAM,EAAE,MAAA,EAAQ,eAAgB,EAAA,GAAIC,gDAA0B,EAAA;AAE9D,EAAM,MAAA,eAAA,GAAkBC,aAAO,KAAK,CAAA;AAEpC,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6B,KAAA;AAChD,IAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,MAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AAEtB,IAAA,eAAA,CAAgB,OAAU,GAAA,KAAA;AAC1B,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAA6B,KAAA;AAC/C,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA6B,KAAA;AACpD,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA;AAC1B,IAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,KAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA;AAAA,MACA,cAAA,EAAc,SAAS,MAAS,GAAA,MAAA;AAAA,MAChC,QAAQ,MAAW,KAAA,MAAA,GAAS,yBAAaD,cAAA,CAAA,QAAA,EAAA,EAAO,MAAK,QAAS,EAAA,CAAA,CAAA;AAAA,MAC9D,GAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACR,WAAa,EAAA,eAAA;AAAA,MACZ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltVerticalNavigationSubMenu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: var(--salt-spacing-fixed-100) 0 0;\n  margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=VerticalNavigationSubMenu.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js.map

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