@midas-ds/layout 0.2.10 → 0.2.11

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.2.11 (2026-07-10)
+
+### 🚀 Features
+
+- **layout,header:** responsive header with HeaderLogo, HeaderActions, live docs examples ([33a1a41691e](https://github.com/migrationsverket/midas/commit/33a1a41691e))
+
+### 🩹 Fixes
+
+- **layout,header:** fix left edge spacing, system name padding, action gap, and mobile icon sizing ([18422bbafd6](https://github.com/migrationsverket/midas/commit/18422bbafd6))
+
 ## 0.2.10 (2026-07-08)
 
 ### 🧱 Updated Dependencies

package/assets/header.css

@@ -1 +1 @@
-._headerActions_1rka5_1{align-items:center;gap:.25rem;margin-inline-start:auto;display:flex}@media (width<=640px){._label_1sror_1{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}._overlay_yrp40_1{display:block}._overlay_yrp40_1[data-entering]{animation:_drawer-blur_yrp40_1 var(--midas-transition-duration-quick)}._overlay_yrp40_1[data-exiting]{animation:_drawer-blur_yrp40_1 var(--midas-transition-duration-quick) reverse var(--midas-transition-timing-ease-in)}._drawer_yrp40_14{background-color:var(--midas-background-base);border-right:1px solid var(--midas-border-color-subtle);outline:none;width:clamp(10rem,15rem,90%);height:calc(100dvh + 200px);margin-right:auto;position:sticky;top:-100px;left:0;overflow-y:auto;box-shadow:-8px 0 20px #0000001a}._drawer_yrp40_14[data-entering]{animation:_drawer-slide_yrp40_1 var(--midas-transition-duration-quick)}._drawer_yrp40_14[data-exiting]{animation:_drawer-slide_yrp40_1 var(--midas-transition-duration-quick) reverse var(--midas-transition-timing-ease-in)}._dialog_yrp40_39:focus-visible{outline:none}._header_yrp40_45{background-color:var(--midas-background-base);margin-bottom:var(--midas-space-medium);padding:var(--midas-space-medium);display:block;position:sticky;top:0}@keyframes _drawer-blur_yrp40_1{0%{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:0 0}to{background:var(--midas-overlay-background);-webkit-backdrop-filter:var(--midas-overlay-blur);backdrop-filter:var(--midas-overlay-blur)}}@keyframes _drawer-slide_yrp40_1{0%{transform:translate(-100%)}to{transform:translate(0)}}._header_i5439_1{background-color:var(--midas-background-base);border-bottom:1px solid var(--midas-border-color-subtle);gap:var(--midas-space-xlarge);display:flex}
+._headerActions_zpqnd_1{align-items:center;gap:0;margin-inline-start:auto;display:flex}._headerAction_dgfa1_1{color:var(--midas-text-primary);position:relative}@media (width<=768px){._label_dgfa1_7{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._headerAction_dgfa1_1{padding-inline:calc(var(--midas-space-50) - var(--border-width))}}._mobile_vwr3x_1{aspect-ratio:100/92;flex-shrink:0;height:2.25rem}@media (width>640px){._mobile_vwr3x_1{display:none}}._desktop_vwr3x_11{aspect-ratio:112/40;flex-shrink:0;height:2.5rem}@media (width<=640px){._desktop_vwr3x_11{display:none}}._headerTitle_cw9hi_1{font-family:var(--midas-typography-font-family);font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-semi-bold);line-height:var(--midas-typography-line-height-50);color:var(--midas-text-primary);white-space:nowrap;margin-inline-start:var(--midas-space-medium);padding-inline-end:var(--midas-space-medium)}._triggerButton_1k2eg_1{margin-inline-start:calc(-1 * var(--midas-space-50))}._overlay_1k2eg_5{display:block}._overlay_1k2eg_5[data-entering]{animation:_drawer-blur_1k2eg_1 var(--midas-transition-duration-quick)}._overlay_1k2eg_5[data-exiting]{animation:_drawer-blur_1k2eg_1 var(--midas-transition-duration-quick) reverse var(--midas-transition-timing-ease-in)}._drawer_1k2eg_18{background-color:var(--midas-background-base);border-right:1px solid var(--midas-border-color-subtle);outline:none;width:clamp(10rem,15rem,90%);height:calc(100dvh + 200px);margin-right:auto;position:sticky;top:-100px;left:0;overflow-y:auto;box-shadow:-8px 0 20px #0000001a}._drawer_1k2eg_18[data-entering]{animation:_drawer-slide_1k2eg_1 var(--midas-transition-duration-quick)}._drawer_1k2eg_18[data-exiting]{animation:_drawer-slide_1k2eg_1 var(--midas-transition-duration-quick) reverse var(--midas-transition-timing-ease-in)}._dialog_1k2eg_43:focus-visible{outline:none}._header_1k2eg_49{background-color:var(--midas-background-base);margin-bottom:var(--midas-space-medium);padding:var(--midas-space-medium);display:block;position:sticky;top:0}@keyframes _drawer-blur_1k2eg_1{0%{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:0 0}to{background:var(--midas-overlay-background);-webkit-backdrop-filter:var(--midas-overlay-blur);backdrop-filter:var(--midas-overlay-blur)}}@keyframes _drawer-slide_1k2eg_1{0%{transform:translate(-100%)}to{transform:translate(0)}}._header_s0sjn_1{background-color:var(--midas-background-base);border-bottom:1px solid var(--midas-border-color-subtle);min-height:4.5rem;padding-inline:var(--midas-space-medium);align-items:center;display:flex}

package/chunks/header-5ItL8E3-.js

@@ -0,0 +1,103 @@
+'use client';
+import { t as e } from "./clsx-CbxlCXZ3.js";
+import { t } from "./createLucideIcon-BgluSHFG.js";
+import { t as n } from "./utils-B0BlrR1T.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, forwardRef as s } from "react";
+import { Dialog as c, Modal as l, composeRenderProps as u } from "react-aria-components";
+import { Button as d, DialogTrigger as f, Logo as p, ModalOverlay as m, Text as h, clsx as g, useLocalizedStringFormatter as _ } from "@midas-ds/components";
+import '../assets/header.css';var v = { headerActions: "_headerActions_zpqnd_1" }, y = ({ children: t, className: n }) => /* @__PURE__ */ i("div", {
+	className: e(v.headerActions, n),
+	children: t
+}), b = {
+	headerAction: "_headerAction_dgfa1_1",
+	label: "_label_dgfa1_7"
+}, x = s(({ children: t, icon: n, className: o, ...s }, c) => (!t && !s["aria-label"] && process.env.NODE_ENV !== "production" && console.warn("Please provide an 'aria-label' for HeaderAction components that doesnt have a visible label (children)"), /* @__PURE__ */ i(d, {
+	ref: c,
+	size: "medium",
+	variant: "tertiary",
+	className: e(b.headerAction, o),
+	...s,
+	children: u(t, (e) => /* @__PURE__ */ a(r, { children: [n, e !== void 0 && /* @__PURE__ */ i("span", {
+		className: b.label,
+		children: e
+	})] }))
+})));
+x.displayName = "HeaderAction";
+var S = {
+	mobile: "_mobile_vwr3x_1",
+	desktop: "_desktop_vwr3x_11"
+}, C = ({ primary: e }) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(p, {
+	size: "x-small",
+	primary: e,
+	padding: !1,
+	className: S.mobile
+}), /* @__PURE__ */ i(p, {
+	size: "small",
+	primary: e,
+	padding: !1,
+	className: S.desktop
+})] }), w = { headerTitle: "_headerTitle_cw9hi_1" }, T = ({ className: t, ...n }) => /* @__PURE__ */ i("span", {
+	className: e(w.headerTitle, t),
+	...n
+}), E = t("menu", [
+	["path", {
+		d: "M4 5h16",
+		key: "1tepv9"
+	}],
+	["path", {
+		d: "M4 12h16",
+		key: "1lakjw"
+	}],
+	["path", {
+		d: "M4 19h16",
+		key: "1djgab"
+	}]
+]), D = o(void 0), O = {
+	en: { openMenu: "Open menu" },
+	sv: { openMenu: "Öppna meny" }
+}, k = {
+	triggerButton: "_triggerButton_1k2eg_1",
+	overlay: "_overlay_1k2eg_5",
+	"drawer-blur": "_drawer-blur_1k2eg_1",
+	drawer: "_drawer_1k2eg_18",
+	"drawer-slide": "_drawer-slide_1k2eg_1",
+	dialog: "_dialog_1k2eg_43",
+	header: "_header_1k2eg_49"
+}, A = ({ children: e, className: t, defaultOpen: r, isOpen: o, onOpenChange: s, title: p, ...v }) => {
+	let y = n(), b = _(O);
+	return y ? /* @__PURE__ */ i(D.Provider, {
+		value: {},
+		children: /* @__PURE__ */ a(f, {
+			isOpen: o,
+			onOpenChange: s,
+			defaultOpen: r,
+			children: [/* @__PURE__ */ i(d, {
+				"aria-label": b.format("openMenu"),
+				icon: E,
+				variant: "icon",
+				size: "medium",
+				className: k.triggerButton
+			}), /* @__PURE__ */ i(m, {
+				className: g(t, k.overlay),
+				isDismissable: !0,
+				...v,
+				children: u(e, (e) => /* @__PURE__ */ i(l, {
+					className: k.drawer,
+					children: /* @__PURE__ */ a(c, {
+						className: k.dialog,
+						children: [p && /* @__PURE__ */ i(h, {
+							className: k.header,
+							children: p
+						}), e]
+					})
+				}))
+			})]
+		})
+	}) : null;
+}, j = { header: "_header_s0sjn_1" }, M = ({ className: t, ...n }) => /* @__PURE__ */ i("header", {
+	className: e(t, j.header),
+	...n
+});
+//#endregion
+export { C as a, T as i, A as n, x as o, D as r, y as s, M as t };

package/chunks/{navigation-hnDP7Bj_.js → navigation-C7NE8eU6.js}

@@ -1,6 +1,6 @@
 'use client';
 import { t as e } from "./clsx-CbxlCXZ3.js";
-import { r as t } from "./header-C2zESp2o.js";
+import { r as t } from "./header-5ItL8E3-.js";
 import { n } from "./sidebar-c0uIh8ge.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useContext as a } from "react";

package/header/Header.stories.d.ts

@@ -11,5 +11,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Primary: Story;
-export declare const WithMobileMenu: Story;
+export declare const Desktop: Story;
+export declare const Mobile: Story;

package/header/header-actions/HeaderActions.d.ts

@@ -1,3 +1,6 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
-export type HeaderActionsProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare const HeaderActions: ({ className, ...rest }: HeaderActionsProps) => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface HeaderActionsProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const HeaderActions: ({ children, className }: HeaderActionsProps) => import("react/jsx-runtime").JSX.Element;

package/header/header-actions/HeaderActions.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { HeaderActions } from './HeaderActions';
 type Story = StoryObj<typeof HeaderActions>;
 declare const _default: {
-    component: ({ className, ...rest }: import('./HeaderActions').HeaderActionsProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, className }: import('./HeaderActions').HeaderActionsProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     parameters: {

package/header/header-logo/HeaderLogo.d.ts

@@ -0,0 +1,4 @@
+export interface HeaderLogoProps {
+    primary?: boolean;
+}
+export declare const HeaderLogo: ({ primary }: HeaderLogoProps) => import("react/jsx-runtime").JSX.Element;

package/header/header-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './HeaderLogo';

package/header/header-title/HeaderTitle.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type HeaderTitleProps = HTMLAttributes<HTMLSpanElement>;
+export declare const HeaderTitle: ({ className, ...rest }: HeaderTitleProps) => import("react/jsx-runtime").JSX.Element;

package/header/header-title/index.d.ts

@@ -0,0 +1,2 @@
+export { HeaderTitle } from './HeaderTitle';
+export type { HeaderTitleProps } from './HeaderTitle';

package/header/index.d.ts

@@ -1,4 +1,6 @@
 export * from './header-actions';
 export * from './header-action';
+export * from './header-logo';
+export * from './header-title';
 export * from './mobile-menu';
 export * from './Header';

package/header/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "../chunks/header-C2zESp2o.js";
-export { i as Header, t as HeaderAction, e as HeaderActions, n as MobileMenu, r as MobileMenuContext };
+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";
+export { o as Header, r as HeaderAction, a as HeaderActions, e as HeaderLogo, t as HeaderTitle, n as MobileMenu, i as MobileMenuContext };

package/index.js

@@ -1,8 +1,8 @@
-import { a as e, i as t, n, r, t as i } from "./chunks/header-C2zESp2o.js";
-import { n as a, t as o } from "./chunks/sidebar-c0uIh8ge.js";
-import { a as s, c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./chunks/panel-CJr6C1-h.js";
-import { n as _, t as v } from "./chunks/layout-BL0juoss.js";
-import { t as y } from "./chunks/main-BHQLIt4r.js";
-import { a as b, i as x, n as S, o as C, r as w, t as T } from "./chunks/navigation-hnDP7Bj_.js";
-import { t as E } from "./chunks/navbar-C63VGKFb.js";
-export { i as Header, t as HeaderAction, e as HeaderActions, _ as Layout, v as LayoutContent, y as Main, n as MobileMenu, r as MobileMenuContext, E as Navbar, C as Navigation, b as NavigationHeader, x as NavigationItem, w as NavigationLink, S as NavigationSection, T as NavigationSubMenu, f as Panel, g as PanelBody, u as PanelContent, l as PanelContext, c as PanelHeader, p as PanelProvider, h as PanelRegion, m as PanelTitle, o as Sidebar, a as SidebarContext, s as UsePanels, d as usePanels };
+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";
+import { n as s, t as c } from "./chunks/sidebar-c0uIh8ge.js";
+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";
+import { n as y, t as b } from "./chunks/layout-BL0juoss.js";
+import { t as x } from "./chunks/main-BHQLIt4r.js";
+import { a as S, i as C, n as w, o as T, r as E, t as D } from "./chunks/navigation-C7NE8eU6.js";
+import { t as O } from "./chunks/navbar-C63VGKFb.js";
+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/navigation/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/navigation-hnDP7Bj_.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/navigation-C7NE8eU6.js";
 export { r as Navigation, e as NavigationHeader, t as NavigationItem, i as NavigationLink, n as NavigationSection, a as NavigationSubMenu };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/header-C2zESp2o.js

@@ -1,86 +0,0 @@
-'use client';
-import { t as e } from "./clsx-CbxlCXZ3.js";
-import { t } from "./createLucideIcon-BgluSHFG.js";
-import { t as n } from "./utils-B0BlrR1T.js";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createContext as o, forwardRef as s } from "react";
-import { Dialog as c, Modal as l, composeRenderProps as u } from "react-aria-components";
-import { Button as d, DialogTrigger as f, LogoContext as p, ModalOverlay as m, Text as h, clsx as g, useLocalizedStringFormatter as _ } from "@midas-ds/components";
-import '../assets/header.css';var v = { headerActions: "_headerActions_1rka5_1" }, y = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
-	className: e(t, v.headerActions),
-	...n
-}), b = { label: "_label_1sror_1" }, x = s(({ children: e, icon: t, ...n }, o) => (!e && !n["aria-label"] && process.env.NODE_ENV !== "production" && console.warn("Please provide an 'aria-label' for HeaderAction components that doesnt have a visible label (children)"), /* @__PURE__ */ i(d, {
-	ref: o,
-	size: "medium",
-	variant: "tertiary",
-	...n,
-	children: u(e, (e) => /* @__PURE__ */ a(r, { children: [t, e !== void 0 && /* @__PURE__ */ i("span", {
-		className: b.label,
-		children: e
-	})] }))
-})));
-x.displayName = "HeaderAction";
-var S = t("menu", [
-	["path", {
-		d: "M4 5h16",
-		key: "1tepv9"
-	}],
-	["path", {
-		d: "M4 12h16",
-		key: "1lakjw"
-	}],
-	["path", {
-		d: "M4 19h16",
-		key: "1djgab"
-	}]
-]), C = o(void 0), w = {
-	en: { openMenu: "Open menu" },
-	sv: { openMenu: "Öppna meny" }
-}, T = {
-	overlay: "_overlay_yrp40_1",
-	"drawer-blur": "_drawer-blur_yrp40_1",
-	drawer: "_drawer_yrp40_14",
-	"drawer-slide": "_drawer-slide_yrp40_1",
-	dialog: "_dialog_yrp40_39",
-	header: "_header_yrp40_45"
-}, E = ({ children: e, className: t, defaultOpen: r, isOpen: o, onOpenChange: s, title: p, ...v }) => {
-	let y = n(), b = _(w);
-	return y ? /* @__PURE__ */ i(C.Provider, {
-		value: {},
-		children: /* @__PURE__ */ a(f, {
-			isOpen: o,
-			onOpenChange: s,
-			defaultOpen: r,
-			children: [/* @__PURE__ */ i(d, {
-				"aria-label": b.format("openMenu"),
-				icon: S,
-				variant: "icon"
-			}), /* @__PURE__ */ i(m, {
-				className: g(t, T.overlay),
-				isDismissable: !0,
-				...v,
-				children: u(e, (e) => /* @__PURE__ */ i(l, {
-					className: T.drawer,
-					children: /* @__PURE__ */ a(c, {
-						className: T.dialog,
-						children: [p && /* @__PURE__ */ i(h, {
-							className: T.header,
-							children: p
-						}), e]
-					})
-				}))
-			})]
-		})
-	}) : null;
-}, D = { header: "_header_i5439_1" }, O = ({ className: t, ...r }) => {
-	let a = n();
-	return /* @__PURE__ */ i(p.Provider, {
-		value: { size: a ? "x-small" : "large" },
-		children: /* @__PURE__ */ i("header", {
-			className: e(t, D.header),
-			...r
-		})
-	});
-};
-//#endregion
-export { y as a, x as i, E as n, C as r, O as t };