@salt-ds/core 1.61.0 → 1.62.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @salt-ds/core
 
+## 1.62.0
+
+### Minor Changes
+
+- 8980f01: A side panel is a persistent, side-by-side workspace that keeps supporting information and controls available while users continue their main task. It’s intended for ongoing parallel work—such as referencing details, inspecting data, filtering results, or editing attributes—where maintaining visibility and context improves accuracy and efficiency.
+
+  ```tsx
+  <SidePanelProvider>
+    <SidePanelTrigger>
+      <Button />
+    </SidePanelTrigger>
+    <SidePanel>
+      <SidePanelHeader>
+        <SidePanelTitle>Section Title</SidePanelTitle>
+        <SidePanelCloseButton />
+      </SidePanelHeader>
+      <SidePanelContent>
+        <Text>Side panel content goes here.</Text>
+      </SidePanelContent>
+    </SidePanel>
+  </SidePanelProvider>
+  ```
+
 ## 1.61.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -3859,6 +3859,132 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-top-right-radius: 0;
 }
 
+/* src/side-panel/SidePanel.css */
+.saltSidePanel {
+  --saltSidePanel-width: 300px;
+  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));
+  --saltSidePanel-padding: var(--salt-spacing-300);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  width: var(--saltSidePanel-width);
+  height: 100%;
+  min-height: 0;
+  align-self: stretch;
+}
+.saltSidePanel-primary {
+  --sidePanel-background: var(--salt-container-primary-background);
+  --sidePanel-borderColor: var(--salt-container-primary-borderColor);
+}
+.saltSidePanel-secondary {
+  --sidePanel-background: var(--salt-container-secondary-background);
+  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);
+}
+.saltSidePanel-tertiary {
+  --sidePanel-background: var(--salt-container-tertiary-background);
+  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);
+}
+.saltSidePanel-none {
+  --sidePanel-background: none;
+  --saltSidePanel-padding: var(--salt-spacing-200);
+}
+.saltSidePanel-inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: var(--saltSidePanel-padding);
+  width: 100%;
+  background-color: var(--sidePanel-background, var(--salt-container-primary-background));
+}
+.saltSidePanel-left .saltSidePanel-inner {
+  border-right: var(--sidePanel-border);
+}
+.saltSidePanel-right .saltSidePanel-inner {
+  border-left: var(--sidePanel-border);
+}
+.saltSidePanel-none .saltSidePanel-inner {
+  border: none;
+}
+.saltSidePanel-enterAnimation,
+.saltSidePanel-exitAnimation {
+  contain: paint;
+}
+.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  flex: none;
+  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));
+}
+.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  right: 0;
+}
+.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  left: 0;
+}
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  pointer-events: none;
+}
+.saltSidePanel-enterAnimation {
+  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);
+}
+.saltSidePanel-exitAnimation {
+  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;
+}
+@keyframes saltSidePanel-open {
+  from {
+    width: 0;
+  }
+}
+@keyframes saltSidePanel-close {
+  to {
+    width: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .saltSidePanel-enterAnimation,
+  .saltSidePanel-exitAnimation {
+    animation: none;
+  }
+}
+
+/* src/side-panel/SidePanelContent.css */
+.saltSidePanelContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.saltSidePanelContent-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* src/side-panel/SidePanelHeader.css */
+.saltSidePanelHeader {
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  gap: var(--salt-spacing-100);
+  padding: 0 0 var(--salt-spacing-300);
+}
+
+/* src/side-panel/SidePanelTitle.css */
+.saltSidePanelTitle {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--salt-size-base);
+  display: flex;
+  align-items: center;
+}
+
 /* src/skip-link/SkipLink.css */
 .saltSkipLink {
   top: 0;
@@ -6203,4 +6329,4 @@ label.saltText small,
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
-/* src/79885058-087e-4d2c-b20a-41af8dda6a7e.css */
+/* src/e5e7d410-cd0b-435a-a247-782117a31674.css */

package/dist-cjs/index.js

@@ -95,6 +95,14 @@ var SaltProvider = require('./salt-provider/SaltProvider.js');
 var Scrim = require('./scrim/Scrim.js');
 var SegmentedButtonGroup = require('./segmented-button-group/SegmentedButtonGroup.js');
 var SemanticIconProvider = require('./semantic-icon-provider/SemanticIconProvider.js');
+var SidePanel = require('./side-panel/SidePanel.js');
+var SidePanelCloseButton = require('./side-panel/SidePanelCloseButton.js');
+var SidePanelContent = require('./side-panel/SidePanelContent.js');
+var SidePanelHeader = require('./side-panel/SidePanelHeader.js');
+var SidePanelProvider = require('./side-panel/SidePanelProvider.js');
+var SidePanelTitle = require('./side-panel/SidePanelTitle.js');
+var SidePanelTrigger = require('./side-panel/SidePanelTrigger.js');
+var useSidePanel = require('./side-panel/useSidePanel.js');
 var SkipLink = require('./skip-link/SkipLink.js');
 var RangeSlider = require('./slider/RangeSlider.js');
 var Slider = require('./slider/Slider.js');
@@ -299,6 +307,14 @@ exports.Scrim = Scrim.Scrim;
 exports.SegmentedButtonGroup = SegmentedButtonGroup.SegmentedButtonGroup;
 exports.SemanticIconProvider = SemanticIconProvider.SemanticIconProvider;
 exports.useIcon = SemanticIconProvider.useIcon;
+exports.SidePanel = SidePanel.SidePanel;
+exports.SidePanelCloseButton = SidePanelCloseButton.SidePanelCloseButton;
+exports.SidePanelContent = SidePanelContent.SidePanelContent;
+exports.SidePanelHeader = SidePanelHeader.SidePanelHeader;
+exports.SidePanelProvider = SidePanelProvider.SidePanelProvider;
+exports.SidePanelTitle = SidePanelTitle.SidePanelTitle;
+exports.SidePanelTrigger = SidePanelTrigger.SidePanelTrigger;
+exports.useSidePanel = useSidePanel.useSidePanel;
 exports.SkipLink = SkipLink.SkipLink;
 exports.RangeSlider = RangeSlider.RangeSlider;
 exports.Slider = Slider.Slider;

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/side-panel/SidePanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSidePanel {\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  /* Outer wrapper. Idle: a normal flex column whose width comes from\n     --saltSidePanel-width (supports any CSS length, including %).\n     During enter/exit animation: animates `width` between 0 and the\n     panel width and clips the absolutely-positioned inner via\n     `contain: paint`. The inner uses a JS-resolved px width during\n     animation (--saltSidePanel-animation-width) so percentage widths\n     don't compound against the animating outer. */\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n  width: 100%;\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n  border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n   and anchored to the gap's GROWING edge so the leading edge tracks the\n   gap's expansion — content visibly pushes the sibling rather than being\n   revealed in place. Left grows rightward → anchor inner right; right\n   grows leftward → anchor inner left.\n\n   During animation the outer's width is interpolating, so the inner can't\n   rely on --saltSidePanel-width (which may be a percentage that would\n   resolve against the animating outer). Instead the JS layer measures the\n   resolved width once and exposes it as --saltSidePanel-animation-width\n   (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  flex: none;\n  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n  from {\n    width: 0;\n  }\n}\n\n@keyframes saltSidePanel-close {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-enterAnimation,\n  .saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SidePanel.css.js.map

package/dist-cjs/side-panel/SidePanel.css.js.map

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

package/dist-cjs/side-panel/SidePanel.js

@@ -0,0 +1,205 @@
+'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 tabbable = require('tabbable');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useEventCallback = require('../utils/useEventCallback.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+var useId = require('../utils/useId.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
+var usePrevious = require('../utils/usePrevious.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SidePanelContext = require('./internal/SidePanelContext.js');
+var SidePanel$1 = require('./SidePanel.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltSidePanel");
+const SidePanel = React.forwardRef(
+  function SidePanel2(props, ref) {
+    const {
+      disableAnimation = false,
+      position = "right",
+      initialFocus,
+      variant = "primary",
+      children,
+      id: idProp,
+      className,
+      "aria-labelledby": ariaLabelledBy,
+      onAnimationEnd,
+      ...rest
+    } = props;
+    const sidePanelContext = SidePanelContext.useSidePanelContext();
+    const { openState, setFloating, setPanelId, titleId } = sidePanelContext;
+    const positionedContext = React.useMemo(
+      () => ({ ...sidePanelContext, position }),
+      [sidePanelContext, position]
+    );
+    const id = useId.useId(idProp);
+    const [showComponent, setShowComponent] = React.useState(openState);
+    const [animating, setAnimating] = React.useState(false);
+    const shouldAnimateOpen = React.useRef(!openState);
+    const initialMountRef = React.useRef(true);
+    const panelRef = React.useRef(null);
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-side-panel",
+      css: SidePanel$1,
+      window: targetWindow
+    });
+    const initialFocusDoneRef = React.useRef(false);
+    React.useEffect(() => {
+      if (!openState) {
+        initialFocusDoneRef.current = false;
+      }
+    }, [openState]);
+    const handleInitialFocus = useEventCallback.useEventCallback((el) => {
+      var _a, _b;
+      if (!el || !openState || initialFocusDoneRef.current) {
+        return;
+      }
+      if (initialMountRef.current) {
+        const reference2 = sidePanelContext.floatingRootContext.elements.reference;
+        const activeElement = reference2 instanceof Element ? (_a = reference2.ownerDocument) == null ? void 0 : _a.activeElement : null;
+        const focusCameFromTrigger = reference2 instanceof Element && activeElement instanceof Node && reference2.contains(activeElement);
+        if (!focusCameFromTrigger) {
+          return;
+        }
+        initialMountRef.current = false;
+      }
+      initialFocusDoneRef.current = true;
+      const raf = ((_b = el.ownerDocument.defaultView) == null ? void 0 : _b.requestAnimationFrame) ?? (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) ?? requestAnimationFrame;
+      raf(() => {
+        if (!el.isConnected) return;
+        const focusTarget = resolveInitialFocusTarget(el, initialFocus);
+        focusTarget == null ? void 0 : focusTarget.focus();
+      });
+    });
+    const setPanelEl = useEventCallback.useEventCallback((el) => {
+      panelRef.current = el;
+      setFloating(el);
+      handleInitialFocus(el);
+    });
+    const handleRef = useForkRef.useForkRef(setPanelEl, ref);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (!animating || disableAnimation) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const previousAnimation = panel.style.animation;
+      panel.style.animation = "none";
+      const widthPx = panel.getBoundingClientRect().width;
+      panel.style.animation = previousAnimation;
+      panel.style.setProperty(
+        "--saltSidePanel-animation-width",
+        `${widthPx}px`
+      );
+      return () => {
+        panel.style.removeProperty("--saltSidePanel-animation-width");
+      };
+    }, [animating, disableAnimation]);
+    const handleAnimationEnd = useEventCallback.useEventCallback(
+      (event) => {
+        onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+        if (event.currentTarget !== event.target || disableAnimation) return;
+        setAnimating(false);
+        if (!openState) {
+          setShowComponent(false);
+        }
+      }
+    );
+    React.useEffect(() => {
+      setPanelId(id);
+      return () => {
+        setPanelId(void 0);
+      };
+    }, [id, setPanelId]);
+    const reference = sidePanelContext.floatingRootContext.elements.reference;
+    const previousOpenState = usePrevious.usePrevious(openState, [openState], false);
+    React.useEffect(() => {
+      if (!previousOpenState || openState) return;
+      const panel = panelRef.current;
+      if (!(reference instanceof HTMLElement)) return;
+      const doc = reference.ownerDocument;
+      const active = doc == null ? void 0 : doc.activeElement;
+      const focusInsidePanel = panel && active instanceof Node && panel.contains(active);
+      const focusOnBody = active === (doc == null ? void 0 : doc.body) || active == null;
+      if (focusInsidePanel || focusOnBody) {
+        reference.focus();
+      }
+    }, [openState, previousOpenState, reference]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      var _a, _b;
+      if (disableAnimation) {
+        setShowComponent(openState);
+        setAnimating(false);
+        if (!openState) shouldAnimateOpen.current = true;
+        return;
+      }
+      if (!openState) {
+        shouldAnimateOpen.current = true;
+      }
+      if (openState && !shouldAnimateOpen.current) {
+        setShowComponent(true);
+        setAnimating(false);
+        return;
+      }
+      const prefersReducedMotion = (_b = (_a = targetWindow == null ? void 0 : targetWindow.matchMedia) == null ? void 0 : _a.call(
+        targetWindow,
+        "(prefers-reduced-motion: reduce)"
+      )) == null ? void 0 : _b.matches;
+      if (openState) {
+        setShowComponent(true);
+      }
+      if (prefersReducedMotion) {
+        setAnimating(false);
+        if (!openState) {
+          setShowComponent(false);
+        }
+      } else {
+        setAnimating(true);
+      }
+    }, [openState, targetWindow, disableAnimation]);
+    if (!showComponent) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "region",
+        "aria-labelledby": clsx.clsx(ariaLabelledBy, titleId) || void 0,
+        ref: handleRef,
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName(position)]: position,
+            [withBaseName(variant)]: variant,
+            [withBaseName("enterAnimation")]: !disableAnimation && openState && animating,
+            [withBaseName("exitAnimation")]: !disableAnimation && !openState && animating
+          },
+          className
+        ),
+        onAnimationEnd: handleAnimationEnd,
+        tabIndex: -1,
+        ...rest,
+        id,
+        children: /* @__PURE__ */ jsxRuntime.jsx(SidePanelContext.SidePanelContext.Provider, { value: positionedContext, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children }) })
+      }
+    );
+  }
+);
+function resolveInitialFocusTarget(panel, initialFocus) {
+  if (initialFocus && typeof initialFocus === "object") {
+    return initialFocus.current ?? null;
+  }
+  const managed = Array.from(
+    panel.querySelectorAll("[data-salt-original-tabindex]")
+  );
+  const candidates = managed.length ? managed : tabbable.tabbable(panel, { displayCheck: "none" });
+  const index = typeof initialFocus === "number" ? initialFocus : 0;
+  return candidates[index] ?? candidates[0] ?? panel;
+}
+
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=SidePanel.js.map

package/dist-cjs/side-panel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../src/side-panel/SidePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnimationEvent,\n  type ComponentPropsWithRef,\n  forwardRef,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport {\n  makePrefixer,\n  useEventCallback,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n  usePrevious,\n} from \"../utils\";\nimport { SidePanelContext, useSidePanelContext } from \"./internal\";\nimport sidePanelCss from \"./SidePanel.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanel\");\n\nexport interface SidePanelProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Disable the panel's own open/close animation.\n   * Set to `true` when the parent controls sizing and animation (e.g. inside a splitter).\n   * @default false\n   */\n  disableAnimation?: boolean;\n  /**\n   * Edge the panel is anchored to; controls animation direction and divider side.\n   * @default \"right\"\n   */\n  position?: \"right\" | \"left\";\n  /**\n   * Which element receives focus when the panel opens.\n   * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.\n   * Defaults to the first tabbable element inside the panel (close button if present).\n   */\n  initialFocus?: number | RefObject<HTMLElement | null>;\n  /**\n   * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n}\n\nexport const SidePanel = forwardRef<HTMLDivElement, SidePanelProps>(\n  function SidePanel(props, ref) {\n    const {\n      disableAnimation = false,\n      position = \"right\",\n      initialFocus,\n      variant = \"primary\",\n      children,\n      id: idProp,\n      className,\n      \"aria-labelledby\": ariaLabelledBy,\n      onAnimationEnd,\n      ...rest\n    } = props;\n\n    const sidePanelContext = useSidePanelContext();\n    const { openState, setFloating, setPanelId, titleId } = sidePanelContext;\n    const positionedContext = useMemo(\n      () => ({ ...sidePanelContext, position }),\n      [sidePanelContext, position],\n    );\n\n    const id = useId(idProp);\n\n    const [showComponent, setShowComponent] = useState(openState);\n    const [animating, setAnimating] = useState(false);\n    const shouldAnimateOpen = useRef(!openState);\n    // Stays true until a ref-callback invocation observes focus already\n    // inside the trigger (a user-driven open). Flipping this from a mount\n    // effect would break under React 18 strict-mode double-mounting.\n    const initialMountRef = useRef(true);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel\",\n      css: sidePanelCss,\n      window: targetWindow,\n    });\n\n    // Guards against re-focusing the panel multiple times per open session.\n    const initialFocusDoneRef = useRef(false);\n    useEffect(() => {\n      if (!openState) {\n        initialFocusDoneRef.current = false;\n      }\n    }, [openState]);\n\n    // useEventCallback keeps a stable identity while always reading the\n    // latest closure, so React doesn't tear down and re-invoke the ref\n    // callback per render.\n    const handleInitialFocus = useEventCallback((el: HTMLDivElement | null) => {\n      if (!el || !openState || initialFocusDoneRef.current) {\n        return;\n      }\n\n      // On first mount, only auto-focus if focus is already in the trigger\n      // (the common click path). For defaultOpen without user interaction\n      // we leave focus alone.\n      if (initialMountRef.current) {\n        const reference =\n          sidePanelContext.floatingRootContext.elements.reference;\n        const activeElement =\n          reference instanceof Element\n            ? reference.ownerDocument?.activeElement\n            : null;\n        const focusCameFromTrigger =\n          reference instanceof Element &&\n          activeElement instanceof Node &&\n          reference.contains(activeElement);\n        if (!focusCameFromTrigger) {\n          return;\n        }\n        initialMountRef.current = false;\n      }\n\n      initialFocusDoneRef.current = true;\n      // Defer one frame so useSidePanelTabOrder has marked descendants\n      // with data-salt-original-tabindex and any child layout effects\n      // (e.g. SidePanelContent's scrollable-body tabIndex toggle) have\n      // settled. Scoped to the panel's owner window for iframe/shadow-root\n      // hosts.\n      const raf =\n        el.ownerDocument.defaultView?.requestAnimationFrame ??\n        targetWindow?.requestAnimationFrame ??\n        requestAnimationFrame;\n      raf(() => {\n        if (!el.isConnected) return;\n        const focusTarget = resolveInitialFocusTarget(el, initialFocus);\n        focusTarget?.focus();\n      });\n    });\n\n    const setPanelEl = useEventCallback((el: HTMLDivElement | null) => {\n      panelRef.current = el;\n      setFloating(el);\n      handleInitialFocus(el);\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(setPanelEl, ref);\n\n    // Snapshot the panel's natural width (in px) into a CSS variable so the\n    // inner can keep its full size while the outer animates between 0 and\n    // its target width. This makes percentage values for\n    // --saltSidePanel-width work, since the inner no longer resolves a\n    // percentage against the outer's animating width.\n    useIsomorphicLayoutEffect(() => {\n      if (!animating || disableAnimation) return;\n      const panel = panelRef.current;\n      if (!panel) return;\n\n      // Read the natural width with the animation suspended so we see the\n      // resting size rather than the in-flight interpolated value.\n      // getBoundingClientRect() flushes style/layout, so the inline\n      // `animation: none` takes effect for this read.\n      const previousAnimation = panel.style.animation;\n      panel.style.animation = \"none\";\n      const widthPx = panel.getBoundingClientRect().width;\n      panel.style.animation = previousAnimation;\n\n      panel.style.setProperty(\n        \"--saltSidePanel-animation-width\",\n        `${widthPx}px`,\n      );\n\n      return () => {\n        panel.style.removeProperty(\"--saltSidePanel-animation-width\");\n      };\n    }, [animating, disableAnimation]);\n\n    const handleAnimationEnd = useEventCallback(\n      (event: AnimationEvent<HTMLDivElement>) => {\n        onAnimationEnd?.(event);\n\n        if (event.currentTarget !== event.target || disableAnimation) return;\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      },\n    );\n\n    useEffect(() => {\n      setPanelId(id);\n      return () => {\n        setPanelId(undefined);\n      };\n    }, [id, setPanelId]);\n\n    // Return focus to the trigger on close (mirrors floating-ui's\n    // returnFocus). Initial previousOpenState of `false` ensures we never\n    // restore on mount — only on a real true→false transition.\n    const reference = sidePanelContext.floatingRootContext.elements.reference;\n    const previousOpenState = usePrevious(openState, [openState], false);\n    useEffect(() => {\n      if (!previousOpenState || openState) return;\n      const panel = panelRef.current;\n      if (!(reference instanceof HTMLElement)) return;\n      const doc = reference.ownerDocument;\n      const active = doc?.activeElement;\n      const focusInsidePanel =\n        panel && active instanceof Node && panel.contains(active);\n      const focusOnBody = active === doc?.body || active == null;\n      if (focusInsidePanel || focusOnBody) {\n        reference.focus();\n      }\n    }, [openState, previousOpenState, reference]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (disableAnimation) {\n        setShowComponent(openState);\n        setAnimating(false);\n        if (!openState) shouldAnimateOpen.current = true;\n        return;\n      }\n\n      if (!openState) {\n        shouldAnimateOpen.current = true;\n      }\n\n      // Skip enter animation when the panel was open from the start.\n      if (openState && !shouldAnimateOpen.current) {\n        setShowComponent(true);\n        setAnimating(false);\n        return;\n      }\n\n      const prefersReducedMotion = targetWindow?.matchMedia?.(\n        \"(prefers-reduced-motion: reduce)\",\n      )?.matches;\n\n      if (openState) {\n        setShowComponent(true);\n      }\n\n      if (prefersReducedMotion) {\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      } else {\n        setAnimating(true);\n      }\n    }, [openState, targetWindow, disableAnimation]);\n\n    if (!showComponent) return null;\n\n    return (\n      <div\n        role=\"region\"\n        aria-labelledby={clsx(ariaLabelledBy, titleId) || undefined}\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(position)]: position,\n            [withBaseName(variant)]: variant,\n            [withBaseName(\"enterAnimation\")]:\n              !disableAnimation && openState && animating,\n            [withBaseName(\"exitAnimation\")]:\n              !disableAnimation && !openState && animating,\n          },\n          className,\n        )}\n        onAnimationEnd={handleAnimationEnd}\n        tabIndex={-1}\n        {...rest}\n        id={id}\n      >\n        <SidePanelContext.Provider value={positionedContext}>\n          <div className={withBaseName(\"inner\")}>{children}</div>\n        </SidePanelContext.Provider>\n      </div>\n    );\n  },\n);\n\nfunction resolveInitialFocusTarget(\n  panel: HTMLElement,\n  initialFocus: SidePanelProps[\"initialFocus\"],\n): HTMLElement | null {\n  if (initialFocus && typeof initialFocus === \"object\") {\n    return initialFocus.current ?? null;\n  }\n\n  // Prefer the panel's \"managed\" sequence (elements detached from the\n  // natural tab order by useSidePanelTabOrder), falling back to a fresh\n  // tabbable() scan when detachment hasn't run yet.\n  const managed = Array.from(\n    panel.querySelectorAll<HTMLElement>(\"[data-salt-original-tabindex]\"),\n  );\n\n  const candidates = managed.length\n    ? managed\n    : (tabbable(panel, { displayCheck: \"none\" }) as HTMLElement[]);\n\n  const index = typeof initialFocus === \"number\" ? initialFocus : 0;\n  return candidates[index] ?? candidates[0] ?? panel;\n}\n"],"names":["makePrefixer","forwardRef","SidePanel","useSidePanelContext","useMemo","useId","useState","useRef","useWindow","useComponentCssInjection","sidePanelCss","useEffect","useEventCallback","reference","useForkRef","useIsomorphicLayoutEffect","usePrevious","jsx","clsx","SidePanelContext","tabbable"],"mappings":"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"}

package/dist-cjs/side-panel/SidePanelCloseButton.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var Button = require('../button/Button.js');
+var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
+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 SidePanelContext = require('./internal/SidePanelContext.js');
+require('tabbable');
+
+const withBaseName = makePrefixer.makePrefixer("saltSidePanelCloseButton");
+const SidePanelCloseButton = React.forwardRef(
+  function SidePanelCloseButton2({ className, onClick, id: idProp, ...rest }, ref) {
+    const { CollapseLeftIcon, CollapseRightIcon } = SemanticIconProvider.useIcon();
+    const { setOpen, titleId, position } = SidePanelContext.useSidePanelContext();
+    const closeButtonId = useId.useId(idProp);
+    const handleClick = (event) => {
+      onClick == null ? void 0 : onClick(event);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        ref,
+        id: closeButtonId,
+        "aria-label": "Close",
+        "aria-labelledby": titleId ? clsx.clsx(closeButtonId, titleId) : void 0,
+        appearance: "transparent",
+        className: clsx.clsx(withBaseName(), className),
+        onClick: handleClick,
+        ...rest,
+        children: position === "left" ? /* @__PURE__ */ jsxRuntime.jsx(CollapseLeftIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(CollapseRightIcon, { "aria-hidden": true })
+      }
+    );
+  }
+);
+
+exports.SidePanelCloseButton = SidePanelCloseButton;
+//# sourceMappingURL=SidePanelCloseButton.js.map

package/dist-cjs/side-panel/SidePanelCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelCloseButton.js","sources":["../src/side-panel/SidePanelCloseButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, type MouseEvent } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelCloseButton\");\n\nexport const SidePanelCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function SidePanelCloseButton(\n    { className, onClick, id: idProp, ...rest },\n    ref,\n  ) {\n    const { CollapseLeftIcon, CollapseRightIcon } = useIcon();\n    const { setOpen, titleId, position } = useSidePanelContext();\n    const closeButtonId = useId(idProp);\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      setOpen(false);\n    };\n\n    return (\n      <Button\n        ref={ref}\n        id={closeButtonId}\n        aria-label=\"Close\"\n        aria-labelledby={titleId ? clsx(closeButtonId, titleId) : undefined}\n        appearance=\"transparent\"\n        className={clsx(withBaseName(), className)}\n        onClick={handleClick}\n        {...rest}\n      >\n        {position === \"left\" ? (\n          <CollapseLeftIcon aria-hidden />\n        ) : (\n          <CollapseRightIcon aria-hidden />\n        )}\n      </Button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelCloseButton","useIcon","useSidePanelContext","useId","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAA,GAAuBC,gBAAA;AAAA,EAClC,SAASC,qBAAAA,CACP,EAAE,SAAA,EAAW,OAAA,EAAS,IAAI,MAAA,EAAQ,GAAG,IAAA,EAAK,EAC1C,GAAA,EACA;AACA,IAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAA,EAAkB,GAAIC,4BAAA,EAAQ;AACxD,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,KAAaC,oCAAA,EAAoB;AAC3D,IAAA,MAAM,aAAA,GAAgBC,YAAM,MAAM,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,aAAA;AAAA,QACJ,YAAA,EAAW,OAAA;AAAA,QACX,iBAAA,EAAiB,OAAA,GAAUC,SAAA,CAAK,aAAA,EAAe,OAAO,CAAA,GAAI,MAAA;AAAA,QAC1D,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWA,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,OAAA,EAAS,WAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,KAAa,MAAA,mBACZF,cAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAW,MAAC,CAAA,mBAE9BA,cAAA,CAAC,iBAAA,EAAA,EAAkB,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAEnC;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/side-panel/SidePanelContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSidePanelContent {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saltSidePanelContent-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SidePanelContent.css.js.map

package/dist-cjs/side-panel/SidePanelContent.css.js.map

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

package/dist-cjs/side-panel/SidePanelContent.js

@@ -0,0 +1,70 @@
+'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 SidePanelContext = require('./internal/SidePanelContext.js');
+var useIsScrollable = require('./internal/useIsScrollable.js');
+require('tabbable');
+var SidePanelContent$1 = require('./SidePanelContent.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltSidePanelContent");
+const SidePanelContent = React.forwardRef(function SidePanelContent2(props, ref) {
+  const {
+    children,
+    className,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const { titleId } = SidePanelContext.useSidePanelContext();
+  const targetWindow = window.useWindow();
+  const contentSuffixId = useId.useId();
+  const bodyRef = React.useRef(null);
+  const isScrollable = useIsScrollable.useIsScrollable(bodyRef);
+  styles.useComponentCssInjection({
+    testId: "salt-side-panel-content",
+    css: SidePanelContent$1,
+    window: targetWindow
+  });
+  const explicitLabelledBy = ariaLabelledBy;
+  const explicitLabel = ariaLabel;
+  let bodyAriaLabelledBy;
+  let bodyAriaLabel;
+  if (isScrollable) {
+    if (explicitLabelledBy) {
+      bodyAriaLabelledBy = explicitLabelledBy;
+    } else if (titleId) {
+      bodyAriaLabelledBy = clsx.clsx(titleId, contentSuffixId) || void 0;
+    } else {
+      bodyAriaLabel = explicitLabel ?? "Content";
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: [
+    isScrollable ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: contentSuffixId, hidden: true, children: "content" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: bodyRef,
+        className: withBaseName("body"),
+        ...isScrollable && {
+          role: "region",
+          tabIndex: 0,
+          "aria-labelledby": bodyAriaLabelledBy,
+          "aria-label": bodyAriaLabel
+        },
+        children
+      }
+    )
+  ] });
+});
+
+exports.SidePanelContent = SidePanelContent;
+//# sourceMappingURL=SidePanelContent.js.map

package/dist-cjs/side-panel/SidePanelContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelContent.js","sources":["../src/side-panel/SidePanelContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef, useRef } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useIsScrollable, useSidePanelContext } from \"./internal\";\nimport sidePanelContentCss from \"./SidePanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelContent\");\n\nexport type SidePanelContentProps = ComponentPropsWithRef<\"div\">;\n\nexport const SidePanelContent = forwardRef<\n  HTMLDivElement,\n  SidePanelContentProps\n>(function SidePanelContent(props, ref) {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n\n  const { titleId } = useSidePanelContext();\n  const targetWindow = useWindow();\n  const contentSuffixId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const isScrollable = useIsScrollable(bodyRef);\n\n  useComponentCssInjection({\n    testId: \"salt-side-panel-content\",\n    css: sidePanelContentCss,\n    window: targetWindow,\n  });\n\n  const explicitLabelledBy = ariaLabelledBy;\n  const explicitLabel = ariaLabel;\n\n  let bodyAriaLabelledBy: string | undefined;\n  let bodyAriaLabel: string | undefined;\n\n  if (isScrollable) {\n    if (explicitLabelledBy) {\n      bodyAriaLabelledBy = explicitLabelledBy;\n    } else if (titleId) {\n      bodyAriaLabelledBy = clsx(titleId, contentSuffixId) || undefined;\n    } else {\n      bodyAriaLabel = explicitLabel ?? \"Content\";\n    }\n  }\n\n  return (\n    <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n      {isScrollable ? (\n        <span id={contentSuffixId} hidden>\n          content\n        </span>\n      ) : null}\n      <div\n        ref={bodyRef}\n        className={withBaseName(\"body\")}\n        {...(isScrollable && {\n          role: \"region\",\n          tabIndex: 0,\n          \"aria-labelledby\": bodyAriaLabelledBy,\n          \"aria-label\": bodyAriaLabel,\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SidePanelContent","useSidePanelContext","useWindow","useId","useRef","useIsScrollable","useComponentCssInjection","sidePanelContentCss","clsx","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAIjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIC,oCAAA,EAAoB;AACxC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,kBAAkBC,WAAA,EAAM;AAC9B,EAAA,MAAM,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAeC,gCAAgB,OAAO,CAAA;AAE5C,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,cAAA;AAC3B,EAAA,MAAM,aAAA,GAAgB,SAAA;AAEtB,EAAA,IAAI,kBAAA;AACJ,EAAA,IAAI,aAAA;AAEJ,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,GAAqB,kBAAA;AAAA,IACvB,WAAW,OAAA,EAAS;AAClB,MAAA,kBAAA,GAAqBC,SAAA,CAAK,OAAA,EAAS,eAAe,CAAA,IAAK,MAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,aAAA,GAAgB,aAAA,IAAiB,SAAA;AAAA,IACnC;AAAA,EACF;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWD,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EAAA;AAAA,IAAA,YAAA,kCACE,MAAA,EAAA,EAAK,EAAA,EAAI,iBAAiB,MAAA,EAAM,IAAA,EAAC,qBAElC,CAAA,GACE,IAAA;AAAA,oBACJE,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC7B,GAAI,YAAA,IAAgB;AAAA,UACnB,IAAA,EAAM,QAAA;AAAA,UACN,QAAA,EAAU,CAAA;AAAA,UACV,iBAAA,EAAmB,kBAAA;AAAA,UACnB,YAAA,EAAc;AAAA,SAChB;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/side-panel/SidePanelHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSidePanelHeader {\n  display: flex;\n  align-items: flex-start;\n  flex-shrink: 0;\n  gap: var(--salt-spacing-100);\n  padding: 0 0 var(--salt-spacing-300);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SidePanelHeader.css.js.map

package/dist-cjs/side-panel/SidePanelHeader.css.js.map

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

package/dist-cjs/side-panel/SidePanelHeader.js

@@ -0,0 +1,30 @@
+'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 SidePanelHeader$1 = require('./SidePanelHeader.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltSidePanelHeader");
+const SidePanelHeader = React.forwardRef(
+  function SidePanelHeader2(props, ref) {
+    const { children, className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-side-panel-header",
+      css: SidePanelHeader$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children });
+  }
+);
+
+exports.SidePanelHeader = SidePanelHeader;
+//# sourceMappingURL=SidePanelHeader.js.map