@midas-ds/layout 0.1.7 → 0.1.9

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.1.9 (2026-05-11)
+
+### 🩹 Fixes
+
+- **components,layout:** add badge pattern to navigation docs and fix sidebar transition ([b46ae8a3141](https://github.com/migrationsverket/midas/commit/b46ae8a3141))
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.14.7
+
+## 0.1.8 (2026-05-11)
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.14.6
+
 ## 0.1.7 (2026-05-11)
 
 ### 🧱 Updated Dependencies

package/assets/Sidebar.css

@@ -1 +1 @@
-._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)}
+._sidebar_zlaev_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_zlaev_1._collapsed_zlaev_8{width:80px}@media(max-width:640px){._sidebar_zlaev_1{display:none}}._sidebarHeader_zlaev_17{gap:0}._sidebarHeader_zlaev_17._collapsed_zlaev_8{justify-content:center;padding:var(--midas-space-small)}._sidebarTitle_zlaev_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_zlaev_26{height:0;opacity:0}}._sidebarTitle_zlaev_26._collapsed_zlaev_8{display:none;height:0;opacity:0}._sidebarContent_zlaev_49{padding:var(--midas-space-small)}._sidebar_zlaev_1[data-transitioning] [data-badge]{opacity:0;transition:none}._sidebar_zlaev_1 [data-badge]{transition:opacity var(--midas-transition-duration-normal) ease var(--midas-transition-duration-fast)}@media(prefers-reduced-motion:reduce){._sidebar_zlaev_1[data-transitioning] [data-badge],._sidebar_zlaev_1 [data-badge]{transition:none}}

package/chunks/Sidebar-CjS41s7C.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import C from "react";
+import { c as o } from "./clsx-OuTLNxxd.js";
+import { useLocalizedStringFormatter as u, Button as x } from "@midas-ds/components";
+import { useControlledState as S } from "@react-stately/utils";
+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 '../assets/Sidebar.css';const M = [
+  ["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" }]
+], H = c("panel-left-close", M);
+const E = [
+  ["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" }]
+], I = c("panel-left-open", E), L = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar" }, w = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel" }, D = {
+  en: L,
+  sv: w
+}, $ = "_sidebar_zlaev_1", j = "_collapsed_zlaev_8", q = "_sidebarHeader_zlaev_17", B = "_sidebarTitle_zlaev_26", F = "_sidebarContent_zlaev_49", s = {
+  sidebar: $,
+  collapsed: j,
+  sidebarHeader: q,
+  sidebarTitle: B,
+  sidebarContent: F
+}, X = ({
+  children: p,
+  className: m,
+  title: r,
+  ...i
+}) => {
+  const n = u(D), b = y(), [e, f] = S(
+    i.isCollapsed,
+    i.defaultCollapsed || !1,
+    i.onCollapseChange
+  ), [h, l] = C.useState(!1), _ = () => {
+    l(!0), f((t) => !t);
+  }, v = (t) => {
+    t.propertyName === "width" && t.target === t.currentTarget && l(!1);
+  };
+  return b ? null : /* @__PURE__ */ a(P.Provider, { value: { isCollapsed: e }, children: /* @__PURE__ */ d(
+    z,
+    {
+      className: o(m, s.sidebar, {
+        [s.collapsed]: e
+      }),
+      "data-transitioning": h || void 0,
+      onTransitionEnd: v,
+      ...g(i),
+      children: [
+        /* @__PURE__ */ d(
+          T,
+          {
+            className: o(s.sidebarHeader, {
+              [s.collapsed]: e
+            }),
+            children: [
+              r ? /* @__PURE__ */ a(
+                N,
+                {
+                  className: o(s.sidebarTitle, {
+                    [s.collapsed]: e
+                  }),
+                  title: r
+                }
+              ) : /* @__PURE__ */ a("div", {}),
+              /* @__PURE__ */ a(
+                x,
+                {
+                  "aria-label": e ? n.format("expandSidebar") : n.format("collapseSidebar"),
+                  onPress: _,
+                  variant: "icon",
+                  size: e ? "large" : "medium",
+                  children: e ? /* @__PURE__ */ a(I, { size: 20 }) : /* @__PURE__ */ a(H, { size: 20 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(k, { className: s.sidebarContent, children: p })
+      ]
+    }
+  ) });
+};
+export {
+  X as S
+};

package/index.js

@@ -3,7 +3,7 @@ import { L as i, a as x } from "./chunks/LayoutContent-jW-93mu7.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-DDglufEI.js";
+import { S as L } from "./chunks/Sidebar-CjS41s7C.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/navigation/navigation-link/NavigationLink.stories.d.ts

@@ -19,3 +19,7 @@ export declare const Primary: Story;
 export declare const Active: Story;
 export declare const Disabled: Story;
 export declare const Collapsed: Story;
+export declare const WithBadge: Story;
+export declare const WithBadgeLabel: Story;
+export declare const WithBadgeActive: Story;
+export declare const WithBadgeCollapsed: Story;

package/package.json

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

package/sidebar/Sidebar.stories.d.ts

@@ -17,4 +17,6 @@ declare const _default: {
 export default _default;
 export declare const Primary: Story;
 export declare const Collapsed: Story;
+export declare const WithBadge: Story;
+export declare const WithBadgeCollapsed: Story;
 export declare const Controlled: Story;

package/sidebar/index.js

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

package/chunks/Sidebar-DDglufEI.js

@@ -1,84 +0,0 @@
-'use client';
-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 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 = 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 = d("panel-left-open", N), H = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar" }, T = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel" }, L = {
-  en: H,
-  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
-}, Q = ({
-  children: n,
-  className: c,
-  title: t,
-  ...r
-}) => {
-  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: o(c, s.sidebar, {
-        [s.collapsed]: e
-      }),
-      ...x(r),
-      children: [
-        /* @__PURE__ */ l(
-          y,
-          {
-            className: o(s.sidebarHeader, {
-              [s.collapsed]: e
-            }),
-            children: [
-              t ? /* @__PURE__ */ a(
-                P,
-                {
-                  className: o(s.sidebarTitle, {
-                    [s.collapsed]: e
-                  }),
-                  title: t
-                }
-              ) : /* @__PURE__ */ a("div", {}),
-              /* @__PURE__ */ a(
-                _,
-                {
-                  "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 })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ a(g, { className: s.sidebarContent, children: n })
-      ]
-    }
-  ) });
-};
-export {
-  Q as S
-};