@salt-ds/core 1.47.5 → 1.48.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @salt-ds/core
 
+## 1.48.0
+
+### Minor Changes
+
+- f1dc9fc: Added `VerticalNavigation` and related components.
+
+  `VerticalNavigation` has been introduced to replace the existing `NavigationItem` component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation. For now you can continue to use the `NavigationItem` component, but we recommend migrating to the new `VerticalNavigation` component as the `NavigationItem` component will be deprecated in a future release and removed in the future major release.
+
+  ```tsx
+  <VerticalNavigation aria-label="Basic sidebar" appearance="indicator">
+    <VerticalNavigationItem active>
+      <VerticalNavigationItemContent>
+        <VerticalNavigationItemTrigger>
+          <VerticalNavigationItemLabel>Item 1</VerticalNavigationItemLabel>
+        </VerticalNavigationItemTrigger>
+      </VerticalNavigationItemContent>
+    </VerticalNavigationItem>
+  </VerticalNavigation>
+  ```
+
+- f1dc9fc: Added `Collapsible` and related components.
+
+  `Collapsible` enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a trigger and a panel whose visibility is controlled by the button.
+
+  ```tsx
+  <Collapsible>
+    <CollapsibleTrigger>
+      <Button>Click</Button>
+    </CollapsibleTrigger>
+    <CollapsiblePanel>
+      <p>Content</p>
+    </CollapsiblePanel>
+  </Collapsible>
+  ```
+
+### Patch Changes
+
+- 9560539: Fixed foreground color not being applied explicitly to Banner.
+
 ## 1.47.5
 
 ### Patch Changes

package/css/salt-core.css

@@ -299,6 +299,7 @@
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  color: var(--salt-content-primary-foreground);
 }
 .saltBanner-icon.saltIcon {
   min-height: var(--salt-size-base);
@@ -994,6 +995,28 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transform: scale(1.01);
 }
 
+/* src/collapsible/CollapsiblePanel.css */
+.saltCollapsiblePanel {
+  display: grid;
+  transition:
+    grid-template-rows var(--salt-duration-perceptible) ease-in-out,
+    opacity var(--salt-duration-perceptible) ease-in-out,
+    visibility var(--salt-duration-perceptible) ease-in-out;
+}
+.saltCollapsiblePanel[aria-hidden=true] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+.saltCollapsiblePanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+}
+.saltCollapsiblePanel-inner {
+  overflow: hidden;
+}
+
 /* src/combo-box/ComboBox.css */
 .saltComboBox-focused {
   outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
@@ -4734,6 +4757,153 @@ label.saltText small,
   --tooltip-status-borderColor: var(--salt-status-success-borderColor);
 }
 
+/* src/vertical-navigation/VerticalNavigation.css */
+.saltVerticalNavigation ol {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.saltVerticalNavigationSubMenu > .saltDivider-horizontal,
+.saltVerticalNavigationItem > .saltDivider-horizontal,
+.saltVerticalNavigation ol > .saltDivider-horizontal {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner {
+  margin-bottom: 0;
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: none;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemContent.css */
+.saltVerticalNavigationItemContent {
+  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));
+  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));
+}
+.saltVerticalNavigationItemContent {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-h4-fontWeight);
+  font-family: var(--salt-text-h4-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-h4-lineHeight);
+  font-size: var(--salt-text-h4-fontSize);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {
+  left: var(--salt-spacing-50);
+  content: "";
+  position: absolute;
+  height: var(--salt-size-base);
+  border-radius: var(--salt-palette-corner-strongest);
+  width: var(--salt-size-indicator);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+  border-color: var(--salt-navigable-accent-borderColor-active);
+}
+.saltVerticalNavigationItemContent .saltIcon,
+.saltVerticalNavigationItemContent .saltBadge {
+  min-height: var(--salt-text-lineHeight);
+}
+.saltVerticalNavigationItemContent-focused {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  z-index: 1;
+}
+.saltVerticalNavigationItemContent:hover {
+  background: var(--salt-overlayable-background-hover);
+}
+.saltVerticalNavigation .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
+  font-weight: var(--salt-text-h4-fontWeight);
+}
+@supports selector(:has(*)) {
+  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
+    background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);
+  }
+}
+
+/* src/vertical-navigation/VerticalNavigationItemLabel.css */
+.saltVerticalNavigationItemLabel {
+  flex: 1;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
+.saltVerticalNavigationItemTrigger {
+  all: unset;
+  padding: var(--salt-spacing-75) 0;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltVerticalNavigationItemTrigger::before {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/* src/vertical-navigation/VerticalNavigationSubMenu.css */
+.saltVerticalNavigationSubMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: var(--salt-spacing-fixed-100) 0 0;
+  margin: 0;
+}
+.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
+  font-weight: var(--salt-text-h4-fontWeight-small);
+}
+
 /* src/progress/CircularProgress/CircularProgress.css */
 .saltCircularProgress {
   color: var(--salt-content-primary-foreground);
@@ -5285,4 +5455,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/4a0f5cbc-a0a0-42f9-8be1-8d5615fbd745.css */
+/* src/a3c9275d-f674-46ac-ba4b-1442197b5a6e.css */

package/dist-cjs/banner/Banner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Banner.css.js.map

package/dist-cjs/collapsible/Collapsible.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var CollapsibleContext = require('./CollapsibleContext.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltCollapsible");
+const Collapsible = React.forwardRef(
+  function Collapsible2(props, ref) {
+    const {
+      className,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      ...rest
+    } = props;
+    const [open, setOpenState] = useControlled.useControlled({
+      default: Boolean(defaultOpen),
+      controlled: openProp,
+      name: "Collapsible",
+      state: "open"
+    });
+    const [panelId, setPanelId] = React.useState(void 0);
+    const setOpen = React.useCallback(
+      (event, newOpen) => {
+        setOpenState(newOpen);
+        onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+      },
+      [onOpenChange]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        open,
+        setOpen,
+        panelId,
+        setPanelId
+      }),
+      [open, setOpen, panelId]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest }) });
+  }
+);
+
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=Collapsible.js.map

package/dist-cjs/collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sources":["../src/collapsible/Collapsible.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * Whether the accordion is open.\n   */\n  open?: boolean;\n  /**\n   * Whether the accordion is open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the accordion is opened or closed.\n   */\n  onOpenChange?: (\n    event: SyntheticEvent<HTMLButtonElement>,\n    open: boolean,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsible\");\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  function Collapsible(props, ref) {\n    const {\n      className,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      ...rest\n    } = props;\n\n    const [open, setOpenState] = useControlled({\n      default: Boolean(defaultOpen),\n      controlled: openProp,\n      name: \"Collapsible\",\n      state: \"open\",\n    });\n\n    const [panelId, setPanelId] = useState<string | undefined>(undefined);\n\n    const setOpen = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>, newOpen: boolean) => {\n        setOpenState(newOpen);\n        onOpenChange?.(event, newOpen);\n      },\n      [onOpenChange],\n    );\n\n    const contextValue = useMemo(\n      () => ({\n        open,\n        setOpen,\n        panelId,\n        setPanelId,\n      }),\n      [open, setOpen, panelId],\n    );\n\n    return (\n      <CollapsibleContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n      </CollapsibleContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Collapsible","useControlled","useState","useCallback","useMemo","CollapsibleContext","jsx","clsx"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,WAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,CAAC,IAAA,EAAM,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,MACzC,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,UAAY,EAAA,QAAA;AAAA,MACZ,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAA6B,MAAS,CAAA;AAEpE,IAAA,MAAM,OAAU,GAAAC,iBAAA;AAAA,MACd,CAAC,OAA0C,OAAqB,KAAA;AAC9D,QAAA,YAAA,CAAa,OAAO,CAAA;AACpB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAO,EAAA,OAAA,CAAA;AAAA,OACxB;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,YAAe,GAAAC,aAAA;AAAA,MACnB,OAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,IAAM,EAAA,OAAA,EAAS,OAAO;AAAA,KACzB;AAEA,IAAA,sCACGC,qCAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,cAClC,QAAC,kBAAAC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,GAAG,GAAW,EAAA,GAAG,MAAM,CACvE,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/collapsible/CollapsibleContext.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+require('clsx');
+require('react/jsx-runtime');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const CollapsibleContext = createContext.createContext(
+  "CollapsibleContext",
+  {
+    open: false,
+    setOpen: () => {
+    },
+    panelId: void 0,
+    setPanelId: () => {
+    }
+  }
+);
+function useCollapsibleContext() {
+  return React.useContext(CollapsibleContext);
+}
+
+exports.CollapsibleContext = CollapsibleContext;
+exports.useCollapsibleContext = useCollapsibleContext;
+//# sourceMappingURL=CollapsibleContext.js.map

package/dist-cjs/collapsible/CollapsibleContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContext.js","sources":["../src/collapsible/CollapsibleContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type CollapsibleContextValue = {\n  open: boolean;\n  setOpen: (event: SyntheticEvent<HTMLButtonElement>, open: boolean) => void;\n  panelId?: string;\n  setPanelId?: (panelId: string) => void;\n};\n\nexport const CollapsibleContext = createContext<CollapsibleContextValue>(\n  \"CollapsibleContext\",\n  {\n    open: false,\n    setOpen: () => {},\n    panelId: undefined,\n    setPanelId: () => {},\n  },\n);\n\nexport function useCollapsibleContext() {\n  return useContext(CollapsibleContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAUO,MAAM,kBAAqB,GAAAA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,SAAS,MAAM;AAAA,KAAC;AAAA,IAChB,OAAS,EAAA,MAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAAC;AAEvB;AAEO,SAAS,qBAAwB,GAAA;AACtC,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}

package/dist-cjs/collapsible/CollapsiblePanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CollapsiblePanel.css.js.map

package/dist-cjs/collapsible/CollapsiblePanel.css.js.map

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

package/dist-cjs/collapsible/CollapsiblePanel.js

@@ -0,0 +1,46 @@
+'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 useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var CollapsibleContext = require('./CollapsibleContext.js');
+var CollapsiblePanel$1 = require('./CollapsiblePanel.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltCollapsiblePanel");
+const CollapsiblePanel = (props) => {
+  const { children, className, id: idProp, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-collapsible-panel",
+    css: CollapsiblePanel$1,
+    window: targetWindow
+  });
+  const id = useId.useId(idProp);
+  const { open, setPanelId } = CollapsibleContext.useCollapsibleContext();
+  React.useEffect(() => {
+    if (id) {
+      setPanelId == null ? void 0 : setPanelId(id);
+    }
+  }, [id, setPanelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      id,
+      "aria-hidden": !open ? "true" : void 0,
+      hidden: !open,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children })
+    }
+  );
+};
+
+exports.CollapsiblePanel = CollapsiblePanel;
+//# sourceMappingURL=CollapsiblePanel.js.map

package/dist-cjs/collapsible/CollapsiblePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n  extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = (props: CollapsiblePanelProps) => {\n  const { children, className, id: idProp, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      id={id}\n      aria-hidden={!open ? \"true\" : undefined}\n      hidden={!open}\n      {...rest}\n    >\n      <div className={withBaseName(\"inner\")}>{children}</div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","collapsiblePanelCss","useId","useCollapsibleContext","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAE3C,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAErD,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAW,EAAA,GAAIC,wCAAsB,EAAA;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAI,EAAA;AACN,MAAa,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAA,EAAA,CAAA;AAAA;AACf,GACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA;AAEnB,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAS,GAAA,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,yCAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAS,EAAA;AAAA;AAAA,GACnD;AAEJ;;;;"}

package/dist-cjs/collapsible/CollapsibleTrigger.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+var mergeProps = require('../utils/mergeProps.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var CollapsibleContext = require('./CollapsibleContext.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltCollapsibleTrigger");
+const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger2(props, ref) {
+  const { children, className, onClick } = props;
+  const { open, setOpen, panelId } = CollapsibleContext.useCollapsibleContext();
+  const handleClick = (event) => {
+    setOpen(event, !open);
+    onClick == null ? void 0 : onClick(event);
+  };
+  if (!children || !React.isValidElement(children)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return React.cloneElement(children, {
+    ...mergeProps.mergeProps(
+      {
+        className: clsx.clsx(withBaseName(), className),
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: handleClick
+      },
+      children.props
+    ),
+    ref
+  });
+});
+
+exports.CollapsibleTrigger = CollapsibleTrigger;
+//# sourceMappingURL=CollapsibleTrigger.js.map

package/dist-cjs/collapsible/CollapsibleTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { makePrefixer, mergeProps } from \"../utils\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n  extends Pick<ComponentPropsWithoutRef<\"button\">, \"className\" | \"onClick\"> {\n  children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n  const { children, className, onClick } = props;\n\n  const { open, setOpen, panelId } = useCollapsibleContext();\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setOpen(event, !open);\n    onClick?.(event);\n  };\n\n  if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return cloneElement(children, {\n    ...mergeProps(\n      {\n        className: clsx(withBaseName(), className),\n        \"aria-expanded\": open,\n        \"aria-controls\": panelId,\n        onClick: handleClick,\n      },\n      children.props,\n    ),\n    ref,\n  });\n});\n"],"names":["makePrefixer","forwardRef","CollapsibleTrigger","useCollapsibleContext","isValidElement","cloneElement","mergeProps","clsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAY,GAAA,KAAA;AAEzC,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAEzD,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAQ,OAAA,CAAA,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAuC,QAAQ,CAAG,EAAA;AAElE,IAAA,6DAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,IAC5B,GAAGC,qBAAA;AAAA,MACD;AAAA,QACE,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,eAAiB,EAAA,IAAA;AAAA,QACjB,eAAiB,EAAA,OAAA;AAAA,QACjB,OAAS,EAAA;AAAA,OACX;AAAA,MACA,QAAS,CAAA;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}

package/dist-cjs/index.js

@@ -24,6 +24,9 @@ var Card = require('./card/Card.js');
 var Checkbox = require('./checkbox/Checkbox.js');
 var CheckboxGroup = require('./checkbox/CheckboxGroup.js');
 var CheckboxIcon = require('./checkbox/CheckboxIcon.js');
+var Collapsible = require('./collapsible/Collapsible.js');
+var CollapsiblePanel = require('./collapsible/CollapsiblePanel.js');
+var CollapsibleTrigger = require('./collapsible/CollapsibleTrigger.js');
 var ComboBox = require('./combo-box/ComboBox.js');
 var Dialog = require('./dialog/Dialog.js');
 var DialogActions = require('./dialog/DialogActions.js');
@@ -145,6 +148,13 @@ var usePrevious = require('./utils/usePrevious.js');
 var useResizeObserver = require('./utils/useResizeObserver.js');
 var useResponsiveProp = require('./utils/useResponsiveProp.js');
 var useValueEffect = require('./utils/useValueEffect.js');
+var VerticalNavigation = require('./vertical-navigation/VerticalNavigation.js');
+var VerticalNavigationItem = require('./vertical-navigation/VerticalNavigationItem.js');
+var VerticalNavigationItemContent = require('./vertical-navigation/VerticalNavigationItemContent.js');
+var VerticalNavigationItemExpansionIcon = require('./vertical-navigation/VerticalNavigationItemExpansionIcon.js');
+var VerticalNavigationItemLabel = require('./vertical-navigation/VerticalNavigationItemLabel.js');
+var VerticalNavigationItemTrigger = require('./vertical-navigation/VerticalNavigationItemTrigger.js');
+var VerticalNavigationSubMenu = require('./vertical-navigation/VerticalNavigationSubMenu.js');
 var ViewportProvider = require('./viewport/ViewportProvider.js');
 
 
@@ -178,6 +188,9 @@ exports.Card = Card.Card;
 exports.Checkbox = Checkbox.Checkbox;
 exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
 exports.CheckboxIcon = CheckboxIcon.CheckboxIcon;
+exports.Collapsible = Collapsible.Collapsible;
+exports.CollapsiblePanel = CollapsiblePanel.CollapsiblePanel;
+exports.CollapsibleTrigger = CollapsibleTrigger.CollapsibleTrigger;
 exports.ComboBox = ComboBox.ComboBox;
 exports.ConditionalScrimWrapper = Dialog.ConditionalScrimWrapper;
 exports.Dialog = Dialog.Dialog;
@@ -338,6 +351,14 @@ exports.useCurrentBreakpoint = useResponsiveProp.useCurrentBreakpoint;
 exports.useOrderedBreakpoints = useResponsiveProp.useOrderedBreakpoints;
 exports.useResponsiveProp = useResponsiveProp.useResponsiveProp;
 exports.useValueEffect = useValueEffect.useValueEffect;
+exports.VerticalNavigation = VerticalNavigation.VerticalNavigation;
+exports.VerticalNavigationItem = VerticalNavigationItem.VerticalNavigationItem;
+exports.useVerticalNavigationItem = VerticalNavigationItem.useVerticalNavigationItem;
+exports.VerticalNavigationItemContent = VerticalNavigationItemContent.VerticalNavigationItemContent;
+exports.VerticalNavigationItemExpansionIcon = VerticalNavigationItemExpansionIcon.VerticalNavigationItemExpansionIcon;
+exports.VerticalNavigationItemLabel = VerticalNavigationItemLabel.VerticalNavigationItemLabel;
+exports.VerticalNavigationItemTrigger = VerticalNavigationItemTrigger.VerticalNavigationItemTrigger;
+exports.VerticalNavigationSubMenu = VerticalNavigationSubMenu.VerticalNavigationSubMenu;
 exports.ViewportContext = ViewportProvider.ViewportContext;
 exports.ViewportProvider = ViewportProvider.ViewportProvider;
 exports.useViewport = ViewportProvider.useViewport;

package/dist-cjs/index.js.map

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

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;;;;"}