@midas-ds/layout 0.2.21 → 0.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## 0.2.22 (2026-08-21)
2
+
3
+ ### 🩹 Fixes
4
+
5
+ - **layout:** show Navbar in WithNavbar story at its default viewport ([3baf928b415](https://github.com/migrationsverket/midas/commit/3baf928b415))
6
+ - **layout:** unify mobile breakpoint at 640px across Sidebar, Navbar, Panel ([f7e5b8f6f29](https://github.com/migrationsverket/midas/commit/f7e5b8f6f29))
7
+ - **layout,navbar:** hide Navbar on desktop via CSS ([8f8f211ce0e](https://github.com/migrationsverket/midas/commit/8f8f211ce0e))
8
+
9
+ ### 🧪 Tests updated
10
+
11
+ - **layout:** add breakpoint coverage for Panel, PanelRegion, and LayoutContent ([4cf8b8348a5](https://github.com/migrationsverket/midas/commit/4cf8b8348a5))
12
+
1
13
  ## 0.2.21 (2026-08-21)
2
14
 
3
15
  ### 🧱 Updated Dependencies
package/assets/layout.css CHANGED
@@ -1 +1 @@
1
- ._layout_4r2tn_1{font-family:var(--midas-typography-font-family);flex-direction:column;width:100%;height:100dvh;display:flex}._skipToContent_yjoos_1{z-index:var(--midas-z-index-skip-to-content);position:absolute;top:0;right:100%}._skipToContent_yjoos_1[data-focus-visible]{top:5px;left:5px;right:auto}._layoutContent_rtwdj_1{height:100%;display:flex;position:relative;overflow:hidden}@media (width<800px){._layoutContent_rtwdj_1{flex-direction:column}}
1
+ ._layout_4r2tn_1{font-family:var(--midas-typography-font-family);flex-direction:column;width:100%;height:100dvh;display:flex}._skipToContent_yjoos_1{z-index:var(--midas-z-index-skip-to-content);position:absolute;top:0;right:100%}._skipToContent_yjoos_1[data-focus-visible]{top:5px;left:5px;right:auto}._layoutContent_ywnx3_1{height:100%;display:flex;position:relative;overflow:hidden}@media (width<=640px){._layoutContent_ywnx3_1{flex-direction:column}}
package/assets/navbar.css CHANGED
@@ -1 +1 @@
1
- ._navbar_18aqo_1{background-color:var(--midas-layer-01-base)}._navbar_18aqo_1 ul{justify-content:center;margin:0;padding:0;display:flex}._navbar_18aqo_1 ul li{align-items:center;list-style:none;display:flex}
1
+ ._navbar_ul0t3_1{background-color:var(--midas-layer-01-base)}@media (width>640px){._navbar_ul0t3_1{display:none}}._navbar_ul0t3_1 ul{justify-content:center;margin:0;padding:0;display:flex}._navbar_ul0t3_1 ul li{align-items:center;list-style:none;display:flex}
package/assets/panel.css CHANGED
@@ -1 +1 @@
1
- ._panelBody_1p0jk_1{background-color:var(--midas-background-base);box-sizing:border-box;flex-direction:column;gap:0;display:flex}._panelContent_1gfrc_1{padding:var(--midas-space-small) var(--midas-space-medium) 0;flex:auto;overflow:hidden auto}._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{padding:var(--midas-space-small) var(--midas-space-30) var(--midas-space-small) var(--midas-space-medium);justify-content:space-between;align-items:center;display:flex}._panelTitle_w7y4m_1{display:block}:root{--panel-width:300px;--panel-height-mobile:40vh}._panel_11eci_6{background:var(--midas-background-base);box-shadow:var(--midas-panel-shadow);height:100%;width:var(--panel-width);border-left:1px solid var(--midas-border-color-subtle);position:absolute;top:0;right:0;overflow:hidden}._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 (width<800px){._panel_11eci_6{width:100%;height:var(--panel-height-mobile);bottom:0;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{flex-shrink:0;align-items:center;display:flex}._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{height:100%;transition:width var(--midas-transition-duration-slow);flex-shrink:0;width:0;position:relative;overflow:hidden}._push_a83oo_1[data-open]{width:var(--panel-width)}@media (width<800px){._push_a83oo_1{width:100%;height:0;transition:height var(--midas-transition-duration-slow)}._push_a83oo_1[data-open]{height:var(--panel-height-mobile);width:100%}}
1
+ ._panelBody_1p0jk_1{background-color:var(--midas-background-base);box-sizing:border-box;flex-direction:column;gap:0;display:flex}._panelContent_1gfrc_1{padding:var(--midas-space-small) var(--midas-space-medium) 0;flex:auto;overflow:hidden auto}._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{padding:var(--midas-space-small) var(--midas-space-30) var(--midas-space-small) var(--midas-space-medium);justify-content:space-between;align-items:center;display:flex}._panelTitle_w7y4m_1{display:block}:root{--panel-width:300px;--panel-height-mobile:40vh}._panel_16dwe_6{background:var(--midas-background-base);box-shadow:var(--midas-panel-shadow);height:100%;width:var(--panel-width);border-left:1px solid var(--midas-border-color-subtle);position:absolute;top:0;right:0;overflow:hidden}._panel_16dwe_6[data-promoting]{animation:_promote_16dwe_1 var(--midas-transition-duration-slow) ease-out}@media (prefers-reduced-motion:reduce){._panel_16dwe_6[data-promoting]{animation-duration:1ms}}._panel_16dwe_6[data-entering]{animation:_slide-horizontally_16dwe_1 var(--midas-transition-duration-slow)}._panel_16dwe_6[data-exiting]{animation:_slide-horizontally_16dwe_1 var(--midas-transition-duration-slow) reverse ease-in}@media (prefers-reduced-motion:reduce){._panel_16dwe_6[data-entering],._panel_16dwe_6[data-exiting]{animation-duration:1ms}}@media (width<=640px){._panel_16dwe_6{width:100%;height:var(--panel-height-mobile);bottom:0;left:0;top:unset;border-left:none;border-top:1px solid var(--midas-border-color-subtle)}._panel_16dwe_6[data-entering]{animation:_slide-vertically_16dwe_1 var(--midas-transition-duration-slow)}._panel_16dwe_6[data-exiting]{animation:_slide-vertically_16dwe_1 var(--midas-transition-duration-slow) reverse ease-in}}._panelActions_16dwe_63{flex-shrink:0;align-items:center;display:flex}._panelTitle_16dwe_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_16dwe_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_16dwe_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_16dwe_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._push_xcbfl_1{height:100%;transition:width var(--midas-transition-duration-slow);flex-shrink:0;width:0;position:relative;overflow:hidden}._push_xcbfl_1[data-open]{width:var(--panel-width)}@media (width<=640px){._push_xcbfl_1{width:100%;height:0;transition:height var(--midas-transition-duration-slow)}._push_xcbfl_1[data-open]{height:var(--panel-height-mobile);width:100%}}
@@ -19,7 +19,7 @@ import '../assets/layout.css';var a = { layout: "_layout_4r2tn_1" }, o = {
19
19
  className: e(i, a.layout),
20
20
  ...o,
21
21
  children: [/* @__PURE__ */ t(c, {}), r]
22
- }), u = { layoutContent: "_layoutContent_rtwdj_1" }, d = ({ className: n, ...r }) => /* @__PURE__ */ t("div", {
22
+ }), u = { layoutContent: "_layoutContent_ywnx3_1" }, d = ({ className: n, ...r }) => /* @__PURE__ */ t("div", {
23
23
  className: e(n, u.layoutContent),
24
24
  ...r
25
25
  });
@@ -1,6 +1,6 @@
1
1
  import { t as e } from "./clsx-CbxlCXZ3.js";
2
2
  import { jsx as t } from "react/jsx-runtime";
3
- import '../assets/navbar.css';var n = { navbar: "_navbar_18aqo_1" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("footer", {
3
+ import '../assets/navbar.css';var n = { navbar: "_navbar_ul0t3_1" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("footer", {
4
4
  className: e(r, n.navbar),
5
5
  ...i
6
6
  });
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { t as e } from "./clsx-CbxlCXZ3.js";
3
3
  import { r as t } from "./header-5ItL8E3-.js";
4
- import { n } from "./sidebar--_bq6HD0.js";
4
+ import { n } from "./sidebar-B59uaWIo.js";
5
5
  import { jsx as r, jsxs as i } from "react/jsx-runtime";
6
6
  import { useContext as a } from "react";
7
7
  import { Collection as o, Focusable as s, Link as c, OverlayTriggerStateContext as l } from "react-aria-components";
@@ -32,12 +32,12 @@ import '../assets/panel.css';var y = t("x", [["path", {
32
32
  en: { closePanel: "Close panel" },
33
33
  sv: { closePanel: "Stäng panel" }
34
34
  }, k = {
35
- panel: "_panel_11eci_6",
36
- promote: "_promote_11eci_1",
37
- "slide-horizontally": "_slide-horizontally_11eci_1",
38
- "slide-vertically": "_slide-vertically_11eci_1",
39
- panelActions: "_panelActions_11eci_63",
40
- panelTitle: "_panelTitle_11eci_69"
35
+ panel: "_panel_16dwe_6",
36
+ promote: "_promote_16dwe_1",
37
+ "slide-horizontally": "_slide-horizontally_16dwe_1",
38
+ "slide-vertically": "_slide-vertically_16dwe_1",
39
+ panelActions: "_panelActions_16dwe_63",
40
+ panelTitle: "_panelTitle_16dwe_69"
41
41
  }, A = (e) => {
42
42
  let { onExited: t } = e, [r, i] = m(e.isOpen, e.defaultOpen || !1, e.onOpenChange), a = c(null), o = _(a, r);
43
43
  return s(() => {
@@ -143,7 +143,7 @@ var N = i({
143
143
  },
144
144
  children: e
145
145
  });
146
- }, F = () => o(N), I = { push: "_push_a83oo_1" }, L = ({ children: t, className: i, ...a }) => {
146
+ }, F = () => o(N), I = { push: "_push_xcbfl_1" }, L = ({ children: t, className: i, ...a }) => {
147
147
  let { panels: o, panelVariant: s, closePanel: c, removePanel: l, resetPromoting: u } = F(), d = o.length > 0;
148
148
  return /* @__PURE__ */ r("div", {
149
149
  className: e(i, s === "push" && I.push),
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { t as e } from "./clsx-CbxlCXZ3.js";
3
3
  import { t } from "./createLucideIcon-BgluSHFG.js";
4
- import { c as n, l as r, s as i, u as a } from "./panel-CJr6C1-h.js";
4
+ import { c as n, l as r, s as i, u as a } from "./panel-C16S0Sww.js";
5
5
  import { t as o } from "./utils-B0BlrR1T.js";
6
6
  import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
7
  import l, { createContext as u } from "react";
package/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./chunks/header-5ItL8E3-.js";
2
- import { n as s, t as c } from "./chunks/sidebar--_bq6HD0.js";
3
- import { a as l, c as u, i as d, l as f, n as p, o as m, r as h, s as g, t as _, u as v } from "./chunks/panel-CJr6C1-h.js";
4
- import { n as y, t as b } from "./chunks/layout-BL0juoss.js";
2
+ import { n as s, t as c } from "./chunks/sidebar-B59uaWIo.js";
3
+ import { a as l, c as u, i as d, l as f, n as p, o as m, r as h, s as g, t as _, u as v } from "./chunks/panel-C16S0Sww.js";
4
+ import { n as y, t as b } from "./chunks/layout-4Fc6PGCm.js";
5
5
  import { t as x } from "./chunks/main-C-aHrwYe.js";
6
- import { a as S, i as C, n as w, o as T, r as E, t as D } from "./chunks/navigation-BZTfVSg7.js";
7
- import { t as O } from "./chunks/navbar-C63VGKFb.js";
6
+ import { a as S, i as C, n as w, o as T, r as E, t as D } from "./chunks/navigation-D9Lh1g9b.js";
7
+ import { t as O } from "./chunks/navbar-Bb5A6Yf9.js";
8
8
  export { o as Header, r as HeaderAction, a as HeaderActions, e as HeaderLogo, t as HeaderTitle, y as Layout, b as LayoutContent, x as Main, n as MobileMenu, i as MobileMenuContext, O as Navbar, T as Navigation, S as NavigationHeader, C as NavigationItem, E as NavigationLink, w as NavigationSection, D as NavigationSubMenu, m as Panel, v as PanelBody, f as PanelContent, d as PanelContext, u as PanelHeader, h as PanelProvider, _ as PanelRegion, g as PanelTitle, c as Sidebar, s as SidebarContext, l as UsePanels, p as usePanels };
package/layout/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../chunks/layout-BL0juoss.js";
1
+ import { n as e, t } from "../chunks/layout-4Fc6PGCm.js";
2
2
  export { e as Layout, t as LayoutContent };
@@ -9,6 +9,11 @@ declare const _default: {
9
9
  layout: string;
10
10
  rootElement: string;
11
11
  };
12
+ globals: {
13
+ viewport: {
14
+ value: string;
15
+ };
16
+ };
12
17
  args: {
13
18
  children: import("react/jsx-runtime").JSX.Element;
14
19
  };
package/navbar/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "../chunks/navbar-C63VGKFb.js";
1
+ import { t as e } from "../chunks/navbar-Bb5A6Yf9.js";
2
2
  export { e as Navbar };
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/navigation-BZTfVSg7.js";
1
+ import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/navigation-D9Lh1g9b.js";
2
2
  export { r as Navigation, e as NavigationHeader, t as NavigationItem, i as NavigationLink, n as NavigationSection, a as NavigationSubMenu };
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Layout components",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "0.2.21",
17
+ "version": "0.2.22",
18
18
  "module": "./index.js",
19
19
  "type": "module",
20
20
  "main": "./index.js",
package/panel/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../chunks/panel-CJr6C1-h.js";
1
+ import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../chunks/panel-C16S0Sww.js";
2
2
  export { a as Panel, l as PanelBody, r as PanelContent, n as PanelContext, t as PanelHeader, o as PanelProvider, c as PanelRegion, s as PanelTitle, e as UsePanels, i as usePanels };
package/sidebar/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../chunks/sidebar--_bq6HD0.js";
1
+ import { n as e, t } from "../chunks/sidebar-B59uaWIo.js";
2
2
  export { t as Sidebar, e as SidebarContext };