@midas-ds/layout 0.0.55 → 0.1.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 0.1.0 (2026-04-22)
+
+### 🚀 Features
+
+- **layout,sidebar:** animate PanelTitle on collapse ([58f4491068a](https://github.com/migrationsverket/midas/commit/58f4491068a))
+
+### 🩹 Fixes
+
+- **layout,sidebar:** remove deferred display transition to prevent end-of-animation jump ([63b910fa3d1](https://github.com/migrationsverket/midas/commit/63b910fa3d1))
+- **layout,sidebar:** update tests to reflect in-DOM title animation ([136a2a9863e](https://github.com/migrationsverket/midas/commit/136a2a9863e))
+- **layout,navigation:** animate nav label collapse in sidebar ([98018f0ae41](https://github.com/migrationsverket/midas/commit/98018f0ae41))
+- **layout,sidebar:** prevent width shift when scrollbar appears ([a50f58c1b9f](https://github.com/migrationsverket/midas/commit/a50f58c1b9f))
+
+### 🔧 Maintenance
+
+- **layout:** fix prettier formatting in NavigationLink.module.css ([22830c62173](https://github.com/migrationsverket/midas/commit/22830c62173))
+
+## 0.0.58 (2026-04-22)
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.13.2
+
+## 0.0.57 (2026-04-22)
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.13.1
+
+## 0.0.56 (2026-04-20)
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.13.0
+
 ## 0.0.55 (2026-04-17)
 
 ### 🩹 Fixes

package/assets/Main.css

@@ -1 +1 @@
-._main_mhmrb_1{box-sizing:border-box;flex:1 1 auto;min-width:0;height:100%;overflow:hidden auto;padding:1rem}._main_mhmrb_1:focus-visible{box-shadow:var(--midas-state-focus-inset);outline:none}@media(forced-colors:active){._main_mhmrb_1:focus-visible{outline:var(--midas-state-focus-contrast-mode-outline) solid highlight;outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1)}}
+._main_ue6hm_1{box-sizing:border-box;flex:1 1 auto;min-width:0;height:100%;overflow:hidden auto;scrollbar-gutter:stable;padding:1rem}._main_ue6hm_1:focus-visible{box-shadow:var(--midas-state-focus-inset);outline:none}@media(forced-colors:active){._main_ue6hm_1:focus-visible{outline:var(--midas-state-focus-contrast-mode-outline) solid highlight;outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1)}}

package/assets/NavigationSubMenu.css

@@ -1 +1 @@
-._rootList_l3v98_1{margin:0;padding:0}._navigationHeader_j94pq_1{color:var(--midas-text-secondary);font-size:var(--midas-typography-font-size-20);padding:var(--midas-spacing-30)}._navigationHeader_j94pq_1._collapsed_j94pq_6{display:none}._navigationItem_1jt2l_1{list-style:none}._navigationLink_14vyt_1{align-items:center;align-self:stretch;border-left:var(--midas-size-10) solid transparent;color:var(--midas-text-primary);display:flex;flex-direction:column;flex:1 0 0%;font-family:var(--midas-typography-font-family);gap:var(--midas-spacing-30);justify-content:flex-end;padding:var(--midas-spacing-50);text-decoration:none}._navigationLink_14vyt_1[data-hovered],._navigationLink_14vyt_1:hover,._navigationLink_14vyt_1[data-active]{background-color:var(--midas-menu-item-background-hover)}._navigationLink_14vyt_1._sidebar_14vyt_21{flex-direction:row;justify-content:flex-start;padding:.625rem var(--midas-spacing-30)}._navigationLink_14vyt_1._sidebar_14vyt_21[data-active]{border-color:var(--midas-border-color-tertiary);font-weight:var(--midas-typography-weight-bold)}._navigationLink_14vyt_1 svg{height:var(--midas-size-90);width:var(--midas-size-90)}._navigationLink_14vyt_1._collapsed_14vyt_37{justify-content:center}._navigationLink_14vyt_1._collapsed_14vyt_37 ._title_14vyt_40{display:none}._navigationSection_1ae77_1{padding:0;margin:0 0 1rem}._navigationSection_1ae77_1._collapsed_1ae77_5{margin-bottom:0}._navigationSubMenu_vfyl6_1{padding:0;margin:0 0 1rem 1rem}._navigationSubMenu_vfyl6_1._collapsed_vfyl6_5{margin-left:0}
+._rootList_l3v98_1{margin:0;padding:0}._navigationHeader_j94pq_1{color:var(--midas-text-secondary);font-size:var(--midas-typography-font-size-20);padding:var(--midas-spacing-30)}._navigationHeader_j94pq_1._collapsed_j94pq_6{display:none}._navigationItem_1jt2l_1{list-style:none}._navigationLink_1787b_1{align-items:center;align-self:stretch;border-left:var(--midas-size-10) solid transparent;color:var(--midas-text-primary);display:flex;flex-direction:column;flex:1 0 0%;font-family:var(--midas-typography-font-family);gap:var(--midas-spacing-30);justify-content:flex-end;padding:var(--midas-spacing-50);text-decoration:none}._navigationLink_1787b_1[data-hovered],._navigationLink_1787b_1:hover,._navigationLink_1787b_1[data-active]{background-color:var(--midas-menu-item-background-hover)}._navigationLink_1787b_1._sidebar_1787b_21{align-items:flex-start;flex-direction:row;justify-content:flex-start;padding:.625rem var(--midas-spacing-30);transition:padding-inline-start var(--midas-transition-duration-fast) ease-out}._navigationLink_1787b_1._sidebar_1787b_21[data-active]{border-color:var(--midas-border-color-tertiary);font-weight:var(--midas-typography-weight-bold)}._navigationLink_1787b_1._sidebar_1787b_21._collapsed_1787b_34{padding-inline-start:calc((80px - 2 * var(--midas-space-small) - var(--midas-size-90)) / 2)}._navigationLink_1787b_1 svg{flex-shrink:0;height:var(--midas-size-90);width:var(--midas-size-90)}._navigationLink_1787b_1 ._title_1787b_49{display:block;height:auto;interpolate-size:allow-keywords;opacity:1;overflow:hidden;transition:display var(--midas-transition-duration-fast) allow-discrete,height var(--midas-transition-duration-fast) ease-out,opacity var(--midas-transition-duration-instant) ease-out}@starting-style{._navigationLink_1787b_1 ._title_1787b_49{height:0;opacity:0}}._navigationLink_1787b_1._collapsed_1787b_34 ._title_1787b_49{display:none;height:0;opacity:0}._navigationSection_1ae77_1{padding:0;margin:0 0 1rem}._navigationSection_1ae77_1._collapsed_1ae77_5{margin-bottom:0}._navigationSubMenu_vfyl6_1{padding:0;margin:0 0 1rem 1rem}._navigationSubMenu_vfyl6_1._collapsed_vfyl6_5{margin-left:0}

package/assets/Sidebar.css

@@ -1 +1 @@
-._sidebar_6a190_1{background-color:var(--midas-background-base);border-right:1px solid var(--midas-border-color-subtle);transition:width var(--midas-transition-duration-fast) ease-out;width:15rem}._sidebar_6a190_1._collapsed_6a190_7{width:80px}@media(max-width:640px){._sidebar_6a190_1{display:none}}._sidebarHeader_6a190_16{gap:0}._sidebarHeader_6a190_16._collapsed_6a190_7{justify-content:center;padding:var(--midas-space-small)}._sidebarTitle_6a190_25{font-size:var(--midas-typography-font-size-20);display:block}._sidebarContent_6a190_30{padding:var(--midas-space-small)}
+._sidebar_c9frf_1{background-color:var(--midas-background-base);border-right:1px solid var(--midas-border-color-subtle);flex-shrink:0;transition:width var(--midas-transition-duration-fast) ease-out;width:15rem}._sidebar_c9frf_1._collapsed_c9frf_8{width:80px}@media(max-width:640px){._sidebar_c9frf_1{display:none}}._sidebarHeader_c9frf_17{gap:0}._sidebarHeader_c9frf_17._collapsed_c9frf_8{justify-content:center;padding:var(--midas-space-small)}._sidebarTitle_c9frf_26{display:block;font-size:var(--midas-typography-font-size-20);height:auto;interpolate-size:allow-keywords;opacity:1;overflow:hidden;transition:height var(--midas-transition-duration-fast) ease-out,opacity var(--midas-transition-duration-instant) ease-out}@starting-style{._sidebarTitle_c9frf_26{height:0;opacity:0}}._sidebarTitle_c9frf_26._collapsed_c9frf_8{display:none;height:0;opacity:0}._sidebarContent_c9frf_49{padding:var(--midas-space-small)}

package/chunks/{Main-CM4QXTmL.js → Main-CyaHtpCj.js}

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { c as n } from "./clsx-OuTLNxxd.js";
-import '../assets/Main.css';const i = "_main_mhmrb_1", o = {
+import '../assets/Main.css';const i = "_main_ue6hm_1", o = {
   main: i
 }, r = ({ className: m, ...s }) => /* @__PURE__ */ a(
   "main",

package/chunks/{NavigationSubMenu-D3hvuVFG.js → NavigationSubMenu-DabVRyqI.js}

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { Collection as k, OverlayTriggerStateContext as M, Focusable as j, Link as H } from "react-aria-components";
 import { useContext as s } from "react";
 import { Text as I, clsx as S, TooltipTrigger as T, Tooltip as D } from "@midas-ds/components";
@@ -10,19 +10,19 @@ import { Collection as h } from "@react-aria/collections";
 import '../assets/NavigationSubMenu.css';const q = "_rootList_l3v98_1", w = {
   rootList: q
 }, io = ({
-  className: n,
+  className: t,
   items: o,
   children: e,
   dependencies: i,
   idScope: c,
   addIdAndValue: a,
   ...l
-}) => /* @__PURE__ */ t(
+}) => /* @__PURE__ */ n(
   "nav",
   {
-    className: n,
+    className: t,
     ...l,
-    children: /* @__PURE__ */ t("ul", { className: w.rootList, children: /* @__PURE__ */ t(
+    children: /* @__PURE__ */ n("ul", { className: w.rootList, children: /* @__PURE__ */ n(
       k,
       {
         items: o,
@@ -36,12 +36,12 @@ import '../assets/NavigationSubMenu.css';const q = "_rootList_l3v98_1", w = {
 ), E = "_navigationHeader_j94pq_1", P = "_collapsed_j94pq_6", f = {
   navigationHeader: E,
   collapsed: P
-}, A = ({ className: n, ...o }) => {
+}, A = ({ className: t, ...o }) => {
   const e = s(r);
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ n(
     I,
     {
-      className: S(n, f.navigationHeader, {
+      className: S(t, f.navigationHeader, {
         [f.collapsed]: e?.isCollapsed
       }),
       ...o
@@ -49,24 +49,24 @@ import '../assets/NavigationSubMenu.css';const q = "_rootList_l3v98_1", w = {
   );
 }, F = "_navigationItem_1jt2l_1", x = {
   navigationItem: F
-}, V = ({ className: n, ...o }) => {
+}, V = ({ className: t, ...o }) => {
   const e = s(r);
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ n(
     "li",
     {
-      className: m(n, x.navigationItem, {
+      className: m(t, x.navigationItem, {
         [x.collapsed]: e?.isCollapsed
       }),
       ...o
     }
   );
-}, z = "_navigationLink_14vyt_1", B = "_sidebar_14vyt_21", G = "_collapsed_14vyt_37", J = "_title_14vyt_40", p = {
+}, z = "_navigationLink_1787b_1", B = "_sidebar_1787b_21", G = "_collapsed_1787b_34", J = "_title_1787b_49", p = {
   navigationLink: z,
   sidebar: B,
   collapsed: G,
   title: J
 }, ao = ({
-  as: n,
+  as: t,
   children: o,
   className: e,
   isActive: i,
@@ -74,78 +74,78 @@ import '../assets/NavigationSubMenu.css';const q = "_rootList_l3v98_1", w = {
   "aria-label": a,
   ...l
 }) => {
-  const L = s(O), u = s(r), v = u?.isCollapsed, C = s(M), $ = n || H, b = () => {
-    C?.isOpen && C?.setOpen(!1);
+  const L = s(O), u = s(r), g = u?.isCollapsed, b = s(M), $ = t || H, C = () => {
+    b?.isOpen && b?.setOpen(!1);
   }, d = typeof o == "string" ? o : void 0;
   return !d && !a && process.env.NODE_ENV !== "production" && console.warn(
     "An 'aria-label' is required for <NavigationLink> elements with non plain text children"
-  ), /* @__PURE__ */ _(T, { isDisabled: !v || !d && !a, children: [
-    /* @__PURE__ */ t(j, { children: /* @__PURE__ */ _(
+  ), /* @__PURE__ */ v(T, { isDisabled: !g || !d && !a, children: [
+    /* @__PURE__ */ n(j, { children: /* @__PURE__ */ v(
       $,
       {
         "aria-current": i && "page",
-        "aria-label": a || (v ? d : void 0),
+        "aria-label": a || (g ? d : void 0),
         className: S(e, p.navigationLink, {
           [p.sidebar]: u || L,
-          [p.collapsed]: v
+          [p.collapsed]: g
         }),
         "data-active": i || void 0,
-        ...n ? {
-          onClick: (g) => {
-            b(), l.onClick?.(g);
+        ...t ? {
+          onClick: (_) => {
+            C(), l.onClick?.(_);
           }
         } : {
-          onPress: (g) => {
-            b(), l.onPress?.(g);
+          onPress: (_) => {
+            C(), l.onPress?.(_);
           }
         },
         ...l,
         children: [
           c,
-          /* @__PURE__ */ t("span", { className: p.title, children: o })
+          /* @__PURE__ */ n("span", { className: p.title, children: o })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(D, { placement: "right", children: d })
+    /* @__PURE__ */ n(D, { placement: "right", children: d })
   ] });
-}, K = "_navigationSection_1ae77_1", Q = "_collapsed_1ae77_5", y = {
+}, K = "_navigationSection_1ae77_1", Q = "_collapsed_1ae77_5", N = {
   navigationSection: K,
   collapsed: Q
 }, so = ({
-  className: n,
+  className: t,
   title: o,
   ...e
 }) => {
   const i = s(r);
-  return /* @__PURE__ */ t(V, { children: /* @__PURE__ */ _(
+  return /* @__PURE__ */ n(V, { children: /* @__PURE__ */ v(
     "ul",
     {
-      className: m(n, y.navigationSection, {
-        [y.collapsed]: i?.isCollapsed
+      className: m(t, N.navigationSection, {
+        [N.collapsed]: i?.isCollapsed
       }),
       children: [
-        o && /* @__PURE__ */ t(A, { children: o }),
-        /* @__PURE__ */ t(h, { ...e })
+        o && /* @__PURE__ */ n(A, { children: o }),
+        /* @__PURE__ */ n(h, { ...e })
       ]
     }
   ) });
-}, R = "_navigationSubMenu_vfyl6_1", U = "_collapsed_vfyl6_5", N = {
+}, R = "_navigationSubMenu_vfyl6_1", U = "_collapsed_vfyl6_5", y = {
   navigationSubMenu: R,
   collapsed: U
 }, lo = ({
-  className: n,
+  className: t,
   children: o,
   items: e,
   ...i
 }) => {
   const c = s(r), { length: a } = Array.from(e || []);
-  return typeof o == "function" && a === 0 ? null : /* @__PURE__ */ t(
+  return typeof o == "function" && a === 0 ? null : /* @__PURE__ */ n(
     "ul",
     {
-      className: m(n, N.navigationSubMenu, {
-        [N.collapsed]: c?.isCollapsed
+      className: m(t, y.navigationSubMenu, {
+        [y.collapsed]: c?.isCollapsed
       }),
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ n(
         h,
         {
           items: e,

package/chunks/{Sidebar-C-d-jJbX.js → Sidebar-DDglufEI.js}

@@ -1,68 +1,71 @@
 'use client';
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import { c as l } from "./clsx-OuTLNxxd.js";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { c as o } from "./clsx-OuTLNxxd.js";
 import { useLocalizedStringFormatter as h, Button as _ } from "@midas-ds/components";
 import { useControlledState as C } from "@react-stately/utils";
 import { filterDOMProps as x } from "@react-aria/utils";
 import { u as S } from "./useIsMobileDevice-D0iMVFPx.js";
 import { S as u } from "./SidebarContext-CoDRKR2m.js";
-import { c as n } from "./createLucideIcon-CP-mMPfa.js";
+import { c as d } from "./createLucideIcon-CP-mMPfa.js";
 import { P as v, b as y, c as P, a as g } from "./PanelTitle-j0OTJVF9.js";
 import '../assets/Sidebar.css';const k = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-], M = n("panel-left-close", k);
+], M = d("panel-left-close", k);
 const N = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
-], z = n("panel-left-open", N), H = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar" }, L = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel" }, D = {
+], z = d("panel-left-open", N), H = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar" }, T = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel" }, L = {
   en: H,
-  sv: L
-}, I = "_sidebar_6a190_1", j = "_collapsed_6a190_7", q = "_sidebarHeader_6a190_16", w = "_sidebarContent_6a190_30", s = {
-  sidebar: I,
-  collapsed: j,
-  sidebarHeader: q,
+  sv: T
+}, D = "_sidebar_c9frf_1", I = "_collapsed_c9frf_8", j = "_sidebarHeader_c9frf_17", q = "_sidebarTitle_c9frf_26", w = "_sidebarContent_c9frf_49", s = {
+  sidebar: D,
+  collapsed: I,
+  sidebarHeader: j,
+  sidebarTitle: q,
   sidebarContent: w
-}, K = ({
-  children: d,
+}, Q = ({
+  children: n,
   className: c,
   title: t,
-  ...o
+  ...r
 }) => {
-  const r = h(D), p = S(), [e, m] = C(
-    o.isCollapsed,
-    o.defaultCollapsed || !1,
-    o.onCollapseChange
-  ), b = () => m((f) => !f);
-  return p ? null : /* @__PURE__ */ a(u.Provider, { value: { isCollapsed: e }, children: /* @__PURE__ */ i(
+  const i = h(L), p = S(), [e, f] = C(
+    r.isCollapsed,
+    r.defaultCollapsed || !1,
+    r.onCollapseChange
+  ), m = () => f((b) => !b);
+  return p ? null : /* @__PURE__ */ a(u.Provider, { value: { isCollapsed: e }, children: /* @__PURE__ */ l(
     v,
     {
-      className: l(c, s.sidebar, {
+      className: o(c, s.sidebar, {
         [s.collapsed]: e
       }),
-      ...x(o),
+      ...x(r),
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           y,
           {
-            className: l(s.sidebarHeader, {
+            className: o(s.sidebarHeader, {
               [s.collapsed]: e
             }),
             children: [
-              !e && t ? /* @__PURE__ */ a(
+              t ? /* @__PURE__ */ a(
                 P,
                 {
-                  className: s.panelTitle,
+                  className: o(s.sidebarTitle, {
+                    [s.collapsed]: e
+                  }),
                   title: t
                 }
               ) : /* @__PURE__ */ a("div", {}),
               /* @__PURE__ */ a(
                 _,
                 {
-                  "aria-label": e ? r.format("expandSidebar") : r.format("collapseSidebar"),
-                  onPress: b,
+                  "aria-label": e ? i.format("expandSidebar") : i.format("collapseSidebar"),
+                  onPress: m,
                   variant: "icon",
                   size: e ? "large" : "medium",
                   children: e ? /* @__PURE__ */ a(z, { size: 20 }) : /* @__PURE__ */ a(M, { size: 20 })
@@ -71,11 +74,11 @@ const N = [
             ]
           }
         ),
-        /* @__PURE__ */ a(g, { className: s.sidebarContent, children: d })
+        /* @__PURE__ */ a(g, { className: s.sidebarContent, children: n })
       ]
     }
   ) });
 };
 export {
-  K as S
+  Q as S
 };

package/index.js

@@ -1,9 +1,9 @@
 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 { M as P } from "./chunks/Main-CM4QXTmL.js";
-import { N as b, a as d, b as f, c as p, d as M, e as N } from "./chunks/NavigationSubMenu-D3hvuVFG.js";
+import { M as P } from "./chunks/Main-CyaHtpCj.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-C-d-jJbX.js";
+import { S as L } from "./chunks/Sidebar-DDglufEI.js";
 import { S as A } from "./chunks/SidebarContext-CoDRKR2m.js";
 import { N as B } from "./chunks/Navbar-Do2dFMRr.js";
 import { M as R } from "./chunks/MobileMenuContext-Coj0sJ0N.js";

package/main/index.js

@@ -1,4 +1,4 @@
-import { M as r } from "../chunks/Main-CM4QXTmL.js";
+import { M as r } from "../chunks/Main-CyaHtpCj.js";
 export {
   r as Main
 };

package/navigation/index.js

@@ -1,4 +1,4 @@
-import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-D3hvuVFG.js";
+import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-DabVRyqI.js";
 export {
   n as Navigation,
   o as NavigationHeader,

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.0.55",
+  "version": "0.1.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -37,6 +37,6 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/components": "17.12.1"
+    "@midas-ds/components": "17.13.2"
   }
 }

package/sidebar/index.js

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