@midas-ds/layout 0.1.14 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.2.0 (2026-06-10)
+
+### 🚀 Features
+
+- **layout,panel:** visual polish, actions prop, push variant and replace behavior ([1211ac8899c](https://github.com/migrationsverket/midas/commit/1211ac8899c))
+
+### 🩹 Fixes
+
+- **layout,panel:** fix push variant on mobile with height transition ([10f74a57f9e](https://github.com/migrationsverket/midas/commit/10f74a57f9e))
+- **layout,panel:** fix header gap, panel width and content padding ([78f682e5400](https://github.com/migrationsverket/midas/commit/78f682e5400))
+- **layout,panel:** a11y improvements and remove data-debug ([b817a0d4a0b](https://github.com/migrationsverket/midas/commit/b817a0d4a0b))
+
+### 📖 Documentation changes
+
+- **layout,panel:** document detail view pattern with stable panel id ([dae5474d423](https://github.com/migrationsverket/midas/commit/dae5474d423))
+
+### 🔧 Maintenance
+
+- **layout,panel:** reset paragraph margin in scrollable story ([9875af7e685](https://github.com/migrationsverket/midas/commit/9875af7e685))
+- **layout,panel:** fix CI lint errors ([ee2ccb4d122](https://github.com/migrationsverket/midas/commit/ee2ccb4d122))
+
+### 🧪 Tests updated
+
+- **layout,panel:** add DetailView story for in-place content updates ([1ca23991169](https://github.com/migrationsverket/midas/commit/1ca23991169))
+- **layout,panel:** add panel stories and spec ([2d5d43a66ec](https://github.com/migrationsverket/midas/commit/2d5d43a66ec))
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.15.2
+
 ## 0.1.14 (2026-06-09)
 
 ### 🩹 Fixes

package/assets/LayoutContent.css

@@ -1 +1 @@
-._layout_4r2tn_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._skipToContent_yjoos_1{position:absolute;top:0;right:100%;z-index:var(--midas-z-index-skip-to-content)}._skipToContent_yjoos_1[data-focus-visible]{right:auto;left:5px;top:5px}._layoutContent_yqjxz_1{display:flex;position:relative;height:100%;overflow:hidden}
+._layout_4r2tn_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._skipToContent_yjoos_1{position:absolute;top:0;right:100%;z-index:var(--midas-z-index-skip-to-content)}._skipToContent_yjoos_1[data-focus-visible]{right:auto;left:5px;top:5px}._layoutContent_rtwdj_1{display:flex;position:relative;height:100%;overflow:hidden}@media not (min-width:800px){._layoutContent_rtwdj_1{flex-direction:column}}

package/assets/PanelRegion.css

@@ -1 +1 @@
-._panel_kpvat_1{background:var(--midas-background-base);height:100%;overflow:hidden;position:absolute!important;right:0;top:0;width:320px;border-left:1px solid var(--midas-border-color-subtle)}._panel_kpvat_1[data-promoting]{animation:_promote_kpvat_1 var(--midas-transition-duration-fast) ease-out}@media(prefers-reduced-motion:reduce){._panel_kpvat_1[data-promoting]{animation-duration:1ms}}._panel_kpvat_1[data-entering]{animation:_slide-horizontally_kpvat_1 var(--midas-transition-duration-fast)}._panel_kpvat_1[data-exiting]{animation:_slide-horizontally_kpvat_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._panel_kpvat_1[data-entering],._panel_kpvat_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._panel_kpvat_1{bottom:0;width:100%;height:25%;left:0;top:unset;border-left:none;border-top:1px solid var(--midas-border-color-subtle)}._panel_kpvat_1[data-entering]{animation:_slide-vertically_kpvat_1 var(--midas-transition-duration-fast)}._panel_kpvat_1[data-exiting]{animation:_slide-vertically_kpvat_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_kpvat_59{font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-semi-bold);line-height:var(--midas-typography-line-height-50);display:block}@keyframes _promote_kpvat_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_kpvat_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_kpvat_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}
+:root{--panel-width: 300px;--panel-height-mobile: 40vh}._panel_11eci_6{background:var(--midas-background-base);box-shadow:var(--midas-panel-shadow);height:100%;overflow:hidden;position:absolute;right:0;top:0;width:var(--panel-width);border-left:1px solid var(--midas-border-color-subtle)}._panel_11eci_6[data-promoting]{animation:_promote_11eci_1 var(--midas-transition-duration-slow) ease-out}@media(prefers-reduced-motion:reduce){._panel_11eci_6[data-promoting]{animation-duration:1ms}}._panel_11eci_6[data-entering]{animation:_slide-horizontally_11eci_1 var(--midas-transition-duration-slow)}._panel_11eci_6[data-exiting]{animation:_slide-horizontally_11eci_1 var(--midas-transition-duration-slow) reverse ease-in}@media(prefers-reduced-motion:reduce){._panel_11eci_6[data-entering],._panel_11eci_6[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._panel_11eci_6{bottom:0;width:100%;height:var(--panel-height-mobile);left:0;top:unset;border-left:none;border-top:1px solid var(--midas-border-color-subtle)}._panel_11eci_6[data-entering]{animation:_slide-vertically_11eci_1 var(--midas-transition-duration-slow)}._panel_11eci_6[data-exiting]{animation:_slide-vertically_11eci_1 var(--midas-transition-duration-slow) reverse ease-in}}._panelActions_11eci_63{align-items:center;display:flex;flex-shrink:0}._panelTitle_11eci_69{font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-semi-bold);line-height:var(--midas-typography-line-height-50);display:block}@keyframes _promote_11eci_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_11eci_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_11eci_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._push_a83oo_1{flex-shrink:0;height:100%;overflow:hidden;position:relative;transition:width var(--midas-transition-duration-slow);width:0}._push_a83oo_1[data-open]{width:var(--panel-width)}@media not (min-width:800px){._push_a83oo_1{height:0;width:100%;transition:height var(--midas-transition-duration-slow)}._push_a83oo_1[data-open]{height:var(--panel-height-mobile);width:100%}}

package/assets/PanelTitle.css

@@ -1 +1 @@
-._panelBody_2cx45_1{background-color:var(--midas-background-base);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--midas-space-medium)}._panelContent_ahpqn_1{padding:var(--midas-space-small) var(--midas-space-medium) var(--midas-space-medium) var(--midas-space-medium)}._panelHeader_xyjgl_1{align-items:center;display:flex;justify-content:space-between;padding:var(--midas-space-small) var(--midas-space-small) var(--midas-space-small) var(--midas-space-medium)}._panelTitle_w7y4m_1{display:block}
+._panelBody_1p0jk_1{background-color:var(--midas-background-base);box-sizing:border-box;display:flex;flex-direction:column;gap:0}._panelContent_1gfrc_1{flex:1 1 auto;overflow:hidden auto;padding:var(--midas-space-small) var(--midas-space-medium) 0}._panelContent_1gfrc_1:focus-visible{box-shadow:var(--midas-state-focus-inset);outline:none}@media(forced-colors:active){._panelContent_1gfrc_1:focus-visible{outline:var(--midas-state-focus-contrast-mode-outline) solid highlight;outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1)}}._panelHeader_1g1ux_1{align-items:center;display:flex;justify-content:space-between;padding:var(--midas-space-small) var(--midas-space-30) var(--midas-space-small) var(--midas-space-medium)}._panelTitle_w7y4m_1{display:block}

package/chunks/{LayoutContent-jW-93mu7.js → LayoutContent-DDWtDRL5.js}

@@ -4,11 +4,11 @@ import { c as a } from "./clsx-OuTLNxxd.js";
 import { useLocalizedStringFormatter as c, Button as i } from "@midas-ds/components";
 import '../assets/LayoutContent.css';const l = "_layout_4r2tn_1", u = {
   layout: l
-}, y = { skipToContent: "Skip to main content" }, m = { skipToContent: "Hoppa till huvudinnehåll" }, p = {
-  en: y,
-  sv: m
-}, C = "_skipToContent_yjoos_1", d = {
-  skipToContent: C
+}, m = { skipToContent: "Skip to main content" }, p = { skipToContent: "Hoppa till huvudinnehåll" }, y = {
+  en: m,
+  sv: p
+}, d = "_skipToContent_yjoos_1", C = {
+  skipToContent: d
 }, k = ({
   selector: t = "main:first-of-type"
 }) => {
@@ -19,12 +19,12 @@ import '../assets/LayoutContent.css';const l = "_layout_4r2tn_1", u = {
       () => n.removeAttribute("tabindex"),
       { once: !0 }
     ));
-  }, s = c(p);
+  }, s = c(y);
   return /* @__PURE__ */ e(
     i,
     {
       onPress: o,
-      className: d.skipToContent,
+      className: C.skipToContent,
       children: s.format("skipToContent")
     }
   );
@@ -38,7 +38,7 @@ import '../assets/LayoutContent.css';const l = "_layout_4r2tn_1", u = {
       t
     ]
   }
-), _ = "_layoutContent_yqjxz_1", f = {
+), _ = "_layoutContent_rtwdj_1", f = {
   layoutContent: _
 }, L = ({ className: t, ...o }) => /* @__PURE__ */ e(
   "div",

package/chunks/PanelRegion-X9t7HDPS.js

@@ -0,0 +1,193 @@
+'use client';
+import { jsx as f, jsxs as g } from "react/jsx-runtime";
+import { useRef as E, useEffect as b, forwardRef as y, createContext as A, useState as C, useContext as N } from "react";
+import { c as O } from "./clsx-OuTLNxxd.js";
+import { useLocalizedStringFormatter as T, Button as I } from "@midas-ds/components";
+import { useControlledState as R } from "@react-stately/utils";
+import { useExitAnimation as j, useObjectRef as S, useEnterAnimation as k, filterDOMProps as z } from "@react-aria/utils";
+import { P as L, b as M, c as U, a as V } from "./PanelTitle-CSjU7dUj.js";
+import { c as w } from "./createLucideIcon-CP-mMPfa.js";
+import '../assets/PanelRegion.css';const D = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], F = w("x", D), H = { closePanel: "Close panel" }, X = { closePanel: "Stäng panel" }, $ = {
+  en: H,
+  sv: X
+}, q = "_panel_11eci_6", B = "_panelActions_11eci_63", G = "_panelTitle_11eci_69", h = {
+  panel: q,
+  panelActions: B,
+  panelTitle: G
+}, J = (a) => {
+  const { onExited: l } = a, [o, d] = R(
+    a.isOpen,
+    a.defaultOpen || !1,
+    a.onOpenChange
+  ), r = E(null), s = j(r, o), m = () => d((u) => !u);
+  return b(() => {
+    !o && !s && l?.();
+  }, [o, s, l]), !o && !s ? null : /* @__PURE__ */ f(
+    K,
+    {
+      isExiting: s,
+      onPress: m,
+      ref: r,
+      ...a
+    }
+  );
+}, K = y(
+  ({
+    className: a,
+    title: l,
+    actions: o,
+    onPress: d,
+    children: r,
+    isExiting: s,
+    defaultOpen: m,
+    promoting: u,
+    onPromotionEnd: p,
+    "aria-hidden": c,
+    ...t
+  }, e) => {
+    const n = T($), i = S(e), P = k(i, !m), v = (x) => {
+      x.target === x.currentTarget && u && p?.();
+    };
+    return /* @__PURE__ */ g(
+      L,
+      {
+        "aria-hidden": c || void 0,
+        "aria-label": l,
+        className: O(a, h.panel),
+        ref: i,
+        "data-entering": P || void 0,
+        "data-exiting": s || void 0,
+        "data-promoting": u || void 0,
+        onAnimationEnd: v,
+        ...z(t),
+        children: [
+          /* @__PURE__ */ g(M, { children: [
+            /* @__PURE__ */ f(
+              U,
+              {
+                className: h.panelTitle,
+                title: l
+              }
+            ),
+            /* @__PURE__ */ g("div", { className: h.panelActions, children: [
+              o,
+              /* @__PURE__ */ f(
+                I,
+                {
+                  "aria-label": n.format("closePanel"),
+                  onPress: d,
+                  size: "medium",
+                  variant: "icon",
+                  children: /* @__PURE__ */ f(F, { size: 20 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ f(V, { children: r })
+        ]
+      }
+    );
+  }
+), Q = (a) => null;
+Q.displayName = "usePanels";
+const _ = A({
+  panels: [],
+  panelVariant: "overlay",
+  addPanel: () => {
+  },
+  closePanel: () => {
+  },
+  removePanel: () => {
+  },
+  resetPromoting: () => {
+  }
+}), re = ({
+  children: a,
+  defaultPanels: l = [],
+  panelBehavior: o = "replace",
+  panelVariant: d = "overlay"
+}) => {
+  const [r, s] = C(
+    l.map((t) => ({ ...t, isOpen: !0, defaultOpen: !0 }))
+  ), m = (t) => {
+    s((e) => {
+      if (o === "replace")
+        return [{ ...t, isOpen: !0 }];
+      const n = e.findIndex((i) => i.id === t.id);
+      if (n === -1)
+        return [...e, { ...t, isOpen: !0 }];
+      if (o === "bring-to-front") {
+        if (n === e.length - 1) return e;
+        const i = e[n];
+        return [
+          ...e.filter((P) => P.id !== t.id),
+          { ...i, isOpen: !0, promoting: !0 }
+        ];
+      }
+      return o === "pop-to" ? e.map(
+        (i, P) => P > n ? { ...i, isOpen: !1 } : i
+      ) : e;
+    });
+  }, u = (t) => {
+    s(
+      (e) => e.map((n) => n.id === t ? { ...n, isOpen: !1 } : n)
+    );
+  }, p = (t) => {
+    s((e) => e.filter((n) => n.id !== t));
+  }, c = (t) => {
+    s(
+      (e) => e.map((n) => n.id === t ? { ...n, promoting: !1 } : n)
+    );
+  };
+  return /* @__PURE__ */ f(
+    _.Provider,
+    {
+      value: { panels: r, panelVariant: d, addPanel: m, closePanel: u, removePanel: p, resetPromoting: c },
+      children: a
+    }
+  );
+}, W = () => N(_), Y = "_push_a83oo_1", Z = {
+  push: Y
+}, ce = ({
+  children: a,
+  className: l,
+  ...o
+}) => {
+  const { panels: d, panelVariant: r, closePanel: s, removePanel: m, resetPromoting: u } = W(), p = d.length > 0;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: O(l, r === "push" && Z.push),
+      "data-open": r === "push" && p ? !0 : void 0,
+      ...o,
+      children: [
+        d.map(({ id: c, ...t }, e, { length: n }) => /* @__PURE__ */ f(
+          J,
+          {
+            "aria-hidden": e < n - 1 || void 0,
+            id: c,
+            onOpenChange: (i) => {
+              i || s(c);
+            },
+            onExited: () => m(c),
+            onPromotionEnd: () => u(c),
+            ...t
+          },
+          c
+        )),
+        a
+      ]
+    }
+  );
+};
+export {
+  J as P,
+  Q as U,
+  _ as a,
+  re as b,
+  ce as c,
+  W as u
+};

package/chunks/{PanelTitle-j0OTJVF9.js → PanelTitle-CSjU7dUj.js}

@@ -1,35 +1,36 @@
 import { jsx as s } from "react/jsx-runtime";
-import { c as l } from "./clsx-OuTLNxxd.js";
-import { forwardRef as t } from "react";
+import { c as t } from "./clsx-OuTLNxxd.js";
+import { forwardRef as l } from "react";
 import { Text as o, clsx as c } from "@midas-ds/components";
-import '../assets/PanelTitle.css';const p = "_panelBody_2cx45_1", r = {
+import '../assets/PanelTitle.css';const p = "_panelBody_1p0jk_1", r = {
   panelBody: p
-}, H = t(
+}, H = l(
   ({ className: e, ...n }, a) => /* @__PURE__ */ s(
     "aside",
     {
       ref: a,
-      className: l(e, r.panelBody),
+      className: t(e, r.panelBody),
       ...n
     }
   )
-), d = "_panelContent_ahpqn_1", i = {
+), d = "_panelContent_1gfrc_1", i = {
   panelContent: d
-}, P = t(
+}, P = l(
   ({ className: e, ...n }, a) => /* @__PURE__ */ s(
     "div",
     {
       ref: a,
-      className: l(e, i.panelContent),
+      tabIndex: 0,
+      className: t(e, i.panelContent),
       ...n
     }
   )
-), m = "_panelHeader_xyjgl_1", _ = {
+), m = "_panelHeader_1g1ux_1", _ = {
   panelHeader: m
 }, N = ({ className: e, ...n }) => /* @__PURE__ */ s(
   "div",
   {
-    className: l(e, _.panelHeader),
+    className: t(e, _.panelHeader),
     ...n
   }
 ), y = "_panelTitle_w7y4m_1", x = {

package/chunks/{Sidebar-CjS41s7C.js → Sidebar-uZAklu0a.js}

@@ -8,7 +8,7 @@ import { filterDOMProps as g } from "@react-aria/utils";
 import { u as y } from "./useIsMobileDevice-D0iMVFPx.js";
 import { S as P } from "./SidebarContext-CoDRKR2m.js";
 import { c } from "./createLucideIcon-CP-mMPfa.js";
-import { P as z, b as T, c as N, a as k } from "./PanelTitle-j0OTJVF9.js";
+import { P as z, b as T, c as N, a as k } from "./PanelTitle-CSjU7dUj.js";
 import '../assets/Sidebar.css';const M = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],

package/index.js

@@ -1,21 +1,21 @@
-import { H as o, a as t, b as n, M as r } from "./chunks/Header-Wswx-yQj.js";
-import { L as i, a as x } from "./chunks/LayoutContent-jW-93mu7.js";
+import { H as o, a as t, b as n, M as s } from "./chunks/Header-Wswx-yQj.js";
+import { L as i, a as l } from "./chunks/LayoutContent-DDWtDRL5.js";
 import { M as P } from "./chunks/Main-BVvbCTMX.js";
 import { N as b, a as d, b as f, c as p, d as M, e as N } from "./chunks/NavigationSubMenu-DabVRyqI.js";
-import { P as v, a as g, b as c, c as H, u as S } from "./chunks/PanelRegion-D7EnJBY_.js";
-import { S as L } from "./chunks/Sidebar-CjS41s7C.js";
-import { S as A } from "./chunks/SidebarContext-CoDRKR2m.js";
+import { P as v, a as g, b as c, c as H, U as S, u as C } from "./chunks/PanelRegion-X9t7HDPS.js";
+import { S as y } from "./chunks/Sidebar-uZAklu0a.js";
+import { S as U } from "./chunks/SidebarContext-CoDRKR2m.js";
 import { N as B } from "./chunks/Navbar-Do2dFMRr.js";
 import { M as R } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
-import { P as h, a as j, b as q, c as w } from "./chunks/PanelTitle-j0OTJVF9.js";
+import { P as h, a as j, b as q, c as w } from "./chunks/PanelTitle-CSjU7dUj.js";
 export {
   o as Header,
   t as HeaderAction,
   n as HeaderActions,
   i as Layout,
-  x as LayoutContent,
+  l as LayoutContent,
   P as Main,
-  r as MobileMenu,
+  s as MobileMenu,
   R as MobileMenuContext,
   B as Navbar,
   b as Navigation,
@@ -32,7 +32,8 @@ export {
   c as PanelProvider,
   H as PanelRegion,
   w as PanelTitle,
-  L as Sidebar,
-  A as SidebarContext,
-  S as usePanels
+  y as Sidebar,
+  U as SidebarContext,
+  S as UsePanels,
+  C as usePanels
 };

package/layout/index.js

@@ -1,4 +1,4 @@
-import { L as t, a as L } from "../chunks/LayoutContent-jW-93mu7.js";
+import { L as t, a as L } from "../chunks/LayoutContent-DDWtDRL5.js";
 export {
   t as Layout,
   L as LayoutContent

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -37,7 +37,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/components": "17.15.1",
+    "@midas-ds/components": "17.15.2",
     "@react-aria/collections": "^3.0.3",
     "@react-aria/utils": "^3.33.1",
     "@react-stately/utils": "^3.11.0"

package/panel/Panel.d.ts

@@ -1,12 +1,21 @@
+import { ReactNode } from 'react';
 import { PanelBodyProps } from './panel-body';
-import { PanelTitleProps } from './panel-title';
-export interface PanelProps extends PanelBodyProps, Pick<PanelTitleProps, 'title'> {
+export interface PanelProps extends PanelBodyProps {
+    /** Required unique id used to manage panel state. */
     id: string;
+    /** Panel title displayed in the header. */
+    title: string;
+    /** Controlled open state. */
     isOpen?: boolean;
+    /** Uncontrolled initial open state. */
     defaultOpen?: boolean;
+    /** Callback fired when the panel opens or closes. */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Callback fired when the exit animation completes. */
     onExited?: () => void;
     promoting?: boolean;
     onPromotionEnd?: () => void;
+    /** Custom actions rendered in the panel header, to the right of the title. */
+    actions?: ReactNode;
 }
 export declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/panel/Panel.stories.d.ts

@@ -14,12 +14,14 @@ declare const _default: {
     };
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         id: string;
+        title: string;
         isOpen?: boolean | undefined;
         defaultOpen?: boolean | undefined;
         onOpenChange?: ((isOpen: boolean) => void) | undefined;
         onExited?: (() => void) | undefined;
         promoting?: boolean | undefined;
         onPromotionEnd?: (() => void) | undefined;
+        actions?: import('react').ReactNode;
         ref?: import('react').Ref<HTMLElement> | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
@@ -42,7 +44,6 @@ declare const _default: {
         spellCheck?: (boolean | "true" | "false") | undefined;
         style?: import('react').CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
-        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import('react').AriaRole | undefined;
@@ -306,3 +307,11 @@ declare const _default: {
 export default _default;
 export declare const Primary: Story;
 export declare const Controlled: Story;
+export declare const WithActions: Story;
+export declare const WithScrollableContent: Story;
+export declare const BehaviorReplace: Story;
+export declare const BehaviorBringToFront: Story;
+export declare const BehaviorPopTo: Story;
+export declare const VariantOverlay: Story;
+export declare const VariantPush: Story;
+export declare const DetailView: Story;

package/panel/PanelContext.d.ts

@@ -1,12 +1,24 @@
 import { PanelProps } from './Panel';
+import { PanelVariant } from './PanelProvider';
 export interface PanelItem extends PanelProps {
     promoting?: boolean;
 }
 export interface PanelContextValue {
+    /** The current list of panels. */
     panels: PanelItem[];
+    /** The active panel variant inherited from `PanelProvider`. */
+    panelVariant: PanelVariant;
+    /** Opens or activates a panel. If a panel with the same id exists, it is updated in place. */
     addPanel: (panel: Omit<PanelItem, 'isOpen' | 'defaultOpen'>) => void;
+    /** Closes a panel, triggering the exit animation. */
     closePanel: (id: string) => void;
+    /** Permanently removes a panel from state. */
     removePanel: (id: string) => void;
     resetPromoting: (id: string) => void;
 }
+/** @internal — exists solely for PropTable introspection of usePanels return value */
+export declare const UsePanels: {
+    (_: PanelContextValue): null;
+    displayName: string;
+};
 export declare const PanelContext: import('react').Context<PanelContextValue>;

package/panel/PanelProvider.d.ts

@@ -1,9 +1,32 @@
 import { ReactNode } from 'react';
 import { PanelItem } from './PanelContext';
-export type PanelBehavior = 'bring-to-front' | 'pop-to';
+export type PanelBehavior = 'replace' | 'bring-to-front' | 'pop-to';
+export type PanelVariant = 'overlay' | 'push';
 export interface PanelProviderProps {
     children: ReactNode;
+    /** Panels to open on mount. */
     defaultPanels?: PanelItem[];
+    /**
+     * Behaviour when opening a panel that is already open.
+     *
+     * - `replace` — Replaces all existing panels. Recommended for most use cases.
+     * - `bring-to-front` — Panels stack; opening an existing panel moves it to the front.
+     * - `pop-to` — Opening an existing panel closes all panels above it.
+     *
+     * Showing one panel at a time is recommended. `replace` reflects this as the default.
+     * Use `bring-to-front` or `pop-to` only when multiple simultaneous panels are justified.
+     *
+     * @default 'replace'
+     */
     panelBehavior?: PanelBehavior;
+    /**
+     * How the panel is displayed relative to the main content.
+     *
+     * - `overlay` — Panel overlays the main content without affecting its width.
+     * - `push` — Panel pushes the main content aside, reducing its available width.
+     *
+     * @default 'overlay'
+     */
+    panelVariant?: PanelVariant;
 }
-export declare const PanelProvider: ({ children, defaultPanels, panelBehavior, }: PanelProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelProvider: ({ children, defaultPanels, panelBehavior, panelVariant, }: PanelProviderProps) => import("react/jsx-runtime").JSX.Element;

package/panel/index.js

@@ -1,13 +1,14 @@
-import { P as n, a as P, b as s, c as l, u as o } from "../chunks/PanelRegion-D7EnJBY_.js";
-import { P as t, a as d, b as i, c as x } from "../chunks/PanelTitle-j0OTJVF9.js";
+import { P as n, a as s, b as P, c as l, U as o, u as r } from "../chunks/PanelRegion-X9t7HDPS.js";
+import { P as d, a as i, b as x, c as b } from "../chunks/PanelTitle-CSjU7dUj.js";
 export {
   n as Panel,
-  t as PanelBody,
-  d as PanelContent,
-  P as PanelContext,
-  i as PanelHeader,
-  s as PanelProvider,
+  d as PanelBody,
+  i as PanelContent,
+  s as PanelContext,
+  x as PanelHeader,
+  P as PanelProvider,
   l as PanelRegion,
-  x as PanelTitle,
-  o as usePanels
+  b as PanelTitle,
+  o as UsePanels,
+  r as usePanels
 };

package/sidebar/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../chunks/Sidebar-CjS41s7C.js";
+import { S as o } from "../chunks/Sidebar-uZAklu0a.js";
 import { S as t } from "../chunks/SidebarContext-CoDRKR2m.js";
 export {
   o as Sidebar,

package/chunks/PanelRegion-D7EnJBY_.js

@@ -1,178 +0,0 @@
-'use client';
-import { jsx as m, jsxs as p } from "react/jsx-runtime";
-import { useRef as b, useEffect as v, forwardRef as E, createContext as C, useState as _, useContext as T } from "react";
-import { c as k } from "./clsx-OuTLNxxd.js";
-import { useLocalizedStringFormatter as I, Button as R } from "@midas-ds/components";
-import { useControlledState as j } from "@react-stately/utils";
-import { useExitAnimation as y, useObjectRef as A, useEnterAnimation as S, filterDOMProps as z } from "@react-aria/utils";
-import { P as N, b as L, c as M, a as w } from "./PanelTitle-j0OTJVF9.js";
-import { c as B } from "./createLucideIcon-CP-mMPfa.js";
-import '../assets/PanelRegion.css';const D = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], F = B("x", D), H = { closePanel: "Close panel" }, X = { closePanel: "Stäng panel" }, q = {
-  en: H,
-  sv: X
-}, G = "_panel_kpvat_1", J = "_panelTitle_kpvat_59", x = {
-  panel: G,
-  panelTitle: J
-}, K = (o) => {
-  const { onExited: l } = o, [a, f] = j(
-    o.isOpen,
-    o.defaultOpen || !1,
-    o.onOpenChange
-  ), s = b(null), r = y(s, a), d = () => f((i) => !i);
-  return v(() => {
-    !a && !r && l?.();
-  }, [a, r, l]), !a && !r ? null : /* @__PURE__ */ m(
-    Q,
-    {
-      isExiting: r,
-      onPress: d,
-      ref: s,
-      ...o
-    }
-  );
-}, Q = E(
-  ({
-    className: o,
-    title: l,
-    onPress: a,
-    children: f,
-    isExiting: s,
-    defaultOpen: r,
-    promoting: d,
-    onPromotionEnd: i,
-    "aria-hidden": u,
-    ...t
-  }, e) => {
-    const n = I(q), c = A(e), P = S(c, !r), h = (g) => {
-      g.target === g.currentTarget && d && i?.();
-    };
-    return /* @__PURE__ */ p(
-      N,
-      {
-        "aria-hidden": u || void 0,
-        className: k(o, x.panel),
-        ref: c,
-        "data-entering": P || void 0,
-        "data-exiting": s || void 0,
-        "data-promoting": d || void 0,
-        onAnimationEnd: h,
-        ...z(t),
-        children: [
-          /* @__PURE__ */ p(L, { children: [
-            l ? /* @__PURE__ */ m(
-              M,
-              {
-                className: x.panelTitle,
-                title: l
-              }
-            ) : /* @__PURE__ */ m("div", {}),
-            /* @__PURE__ */ m(
-              R,
-              {
-                "aria-label": n.format("closePanel"),
-                onPress: a,
-                size: "medium",
-                variant: "icon",
-                children: /* @__PURE__ */ m(F, { size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ m(w, { children: f })
-        ]
-      }
-    );
-  }
-), O = C({
-  panels: [],
-  addPanel: () => {
-  },
-  closePanel: () => {
-  },
-  removePanel: () => {
-  },
-  resetPromoting: () => {
-  }
-}), oe = ({
-  children: o,
-  defaultPanels: l = [],
-  panelBehavior: a = "bring-to-front"
-}) => {
-  const [f, s] = _(
-    l.map((t) => ({ ...t, isOpen: !0, defaultOpen: !0 }))
-  ), r = (t) => {
-    s((e) => {
-      const n = e.findIndex((c) => c.id === t.id);
-      if (n === -1)
-        return [...e, { ...t, isOpen: !0 }];
-      if (a === "bring-to-front") {
-        if (n === e.length - 1) return e;
-        const c = e[n];
-        return [
-          ...e.filter((P) => P.id !== t.id),
-          { ...c, isOpen: !0, promoting: !0 }
-        ];
-      }
-      return a === "pop-to" ? e.map(
-        (c, P) => P > n ? { ...c, isOpen: !1 } : c
-      ) : e;
-    });
-  }, d = (t) => {
-    s(
-      (e) => e.map((n) => n.id === t ? { ...n, isOpen: !1 } : n)
-    );
-  }, i = (t) => {
-    s((e) => e.filter((n) => n.id !== t));
-  }, u = (t) => {
-    s(
-      (e) => e.map((n) => n.id === t ? { ...n, promoting: !1 } : n)
-    );
-  };
-  return /* @__PURE__ */ m(
-    O.Provider,
-    {
-      value: { panels: f, addPanel: r, closePanel: d, removePanel: i, resetPromoting: u },
-      children: o
-    }
-  );
-}, U = () => T(O), ae = ({
-  children: o,
-  className: l,
-  ...a
-}) => {
-  const { panels: f, closePanel: s, removePanel: r, resetPromoting: d } = U();
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      className: l,
-      ...a,
-      children: [
-        f.map(({ id: i, ...u }, t, { length: e }) => /* @__PURE__ */ m(
-          K,
-          {
-            "aria-hidden": t < e - 1 || void 0,
-            id: i,
-            "data-debug": "Panel",
-            onOpenChange: (n) => {
-              n || s(i);
-            },
-            onExited: () => r(i),
-            onPromotionEnd: () => d(i),
-            ...u
-          },
-          i
-        )),
-        o
-      ]
-    }
-  );
-};
-export {
-  K as P,
-  O as a,
-  oe as b,
-  ae as c,
-  U as u
-};