@midas-ds/components 17.27.4 → 17.28.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 17.28.0 (2026-10-08)
+
+### 🚀 Features
+
+- **components,stack:** add Stack component ([811b12f3cc2](https://github.com/migrationsverket/midas/commit/811b12f3cc2))
+
+### 🧪 Tests updated
+
+- **components,stack:** add visual regression baselines ([5653f8c8e8b](https://github.com/migrationsverket/midas/commit/5653f8c8e8b))
+- remove chromatic ([7c0e6fe5135](https://github.com/migrationsverket/midas/commit/7c0e6fe5135))
+
+## 17.27.5 (2026-10-07)
+
+### 🩹 Fixes
+
+- **storybook:** resolve a11y violations in Card and layout stories ([c11917e085a](https://github.com/migrationsverket/midas/commit/c11917e085a))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.17.6
+
 ## 17.27.4 (2026-10-05)
 
 ### 🏭 Refactoring

package/assets/stack.css

@@ -0,0 +1 @@
+@layer midas{._stack_1g0ly_7{box-sizing:border-box;justify-content:flex-start;align-items:stretch;gap:var(--midas-stack-spacing,var(--midas-space-small));flex-direction:column;display:flex}._stack_1g0ly_7:is(ul,ol){margin:0;padding:0;list-style:none}._stack_1g0ly_7:is(fieldset){border:0;min-inline-size:0;margin:0;padding:0}._stack_1g0ly_7[data-direction=row]{flex-direction:row}._stack_1g0ly_7[data-direction=row-reverse]{flex-direction:row-reverse}._stack_1g0ly_7[data-direction=column-reverse]{flex-direction:column-reverse}._stack_1g0ly_7[data-align=start]{align-items:flex-start}._stack_1g0ly_7[data-align=center]{align-items:center}._stack_1g0ly_7[data-align=end]{align-items:flex-end}._stack_1g0ly_7[data-align=baseline]{align-items:baseline}._stack_1g0ly_7[data-justify=center]{justify-content:center}._stack_1g0ly_7[data-justify=end]{justify-content:flex-end}._stack_1g0ly_7[data-justify=between]{justify-content:space-between}._stack_1g0ly_7[data-justify=around]{justify-content:space-around}._stack_1g0ly_7[data-justify=evenly]{justify-content:space-evenly}._stack_1g0ly_7[data-wrap]{flex-wrap:wrap}._stack_1g0ly_7[data-spacing=xsmall]{--midas-stack-spacing:var(--midas-space-xsmall)}._stack_1g0ly_7[data-spacing=small]{--midas-stack-spacing:var(--midas-space-small)}._stack_1g0ly_7[data-spacing=medium]{--midas-stack-spacing:var(--midas-space-medium)}._stack_1g0ly_7[data-spacing=large]{--midas-stack-spacing:var(--midas-space-large)}._stack_1g0ly_7[data-spacing=xlarge]{--midas-stack-spacing:var(--midas-space-xlarge)}}

package/chunks/stack-LF3ExhH9.js

@@ -0,0 +1,22 @@
+'use client';
+import { t as e } from "./clsx-Di52oYUU.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/stack.css';var r = { stack: "_stack_1g0ly_7" }, i = t.forwardRef(({ children: t, elementType: i = "div", direction: a = "column", spacing: o = "small", alignItems: s = "stretch", justifyContent: c = "start", wrap: l = !1, className: u, role: d, ...f }, p) => {
+	let m = i, h = i === "ul" || i === "ol";
+	return /* @__PURE__ */ n(m, {
+		...f,
+		ref: p,
+		role: d ?? (h ? "list" : void 0),
+		className: e(r.stack, u),
+		"data-direction": a,
+		"data-align": s,
+		"data-justify": c,
+		"data-wrap": l || void 0,
+		"data-spacing": o,
+		children: t
+	});
+});
+i.displayName = "Stack";
+//#endregion
+export { i as t };

package/index.d.ts

@@ -32,6 +32,7 @@ export * from './search-field';
 export * from './select';
 export * from './skeleton';
 export * from './spinner';
+export * from './stack';
 export * from './table';
 export * from './tabs';
 export * from './tag';

package/index.js

@@ -42,13 +42,14 @@ import { n as Ie, t as Le } from "./chunks/logo-DyZ2pXt7.js";
 import { t as Re } from "./chunks/progress-bar-7w_kWo2f.js";
 import { i as ze, n as Be, r as Ve, t as He } from "./chunks/radio-C-MUMGu7.js";
 import { t as Ue } from "./chunks/skeleton-B_BPRPJy.js";
-import { i as We, n as Ge, r as Ke, t as qe } from "./chunks/tabs-Co09VWvC.js";
-import { i as Je, n as Ye, r as Xe, t as Ze } from "./chunks/textfield-CXqzzOtw.js";
-import { t as Qe } from "./chunks/time-field-CmjGBQph.js";
-import { a as $e, i as et, n as tt, o as nt, r as rt, t as it } from "./chunks/toast-gJgjitZF.js";
+import { t as We } from "./chunks/stack-LF3ExhH9.js";
+import { i as Ge, n as Ke, r as qe, t as Je } from "./chunks/tabs-Co09VWvC.js";
+import { i as Ye, n as Xe, r as Ze, t as Qe } from "./chunks/textfield-CXqzzOtw.js";
+import { t as $e } from "./chunks/time-field-CmjGBQph.js";
+import { a as et, i as tt, n as nt, o as rt, r as it, t as at } from "./chunks/toast-gJgjitZF.js";
 //#endregion
 //#region src/version.ts
-var at = {
+var ot = {
 	name: "@midas-ds/components",
 	author: { name: "Migrationsverket" },
 	keywords: [
@@ -60,7 +61,7 @@ var at = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.27.4",
+	version: "17.28.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",
@@ -84,7 +85,7 @@ var at = {
 	},
 	dependencies: {
 		"@internationalized/string": "^3.2.10",
-		"@midas-ds/theme": "3.17.5",
+		"@midas-ds/theme": "3.17.6",
 		"@react-stately/utils": "3.12.1",
 		"react-aria-components": "1.21.1",
 		"react-aria": "3.52.1",
@@ -92,4 +93,4 @@ var at = {
 	}
 }.version;
 //#endregion
-export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, h as Calendar, de as Card, se as CardActionArea, ae as CardActions, le as CardBody, ue as CardContent, pe as CardHeader, fe as CardImage, oe as CardLink, ce as CardTitle, d as Cell, me as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, c as Column, we as ComboBox, he as ContrastFilled, Te as DateField, Ee as DateInput, Oe as DateInputDivider, p as DatePicker, m as DateRangePicker, De as DateSegment, U as DialogTrigger, ke as DropZone, G as FieldError, k as FileList, A as FileListItem, Ae as FileTrigger, it as GlobalToastRegion, je as Grid, Me as GridItem, b as Header, P as Heading, Ne as InfoBanner, Xe as Input, z as Label, x as Layout, a as Link, f as LinkButton, Y as ListBox, ee as ListBoxButton, te as ListBoxEmptyState, Z as ListBoxHeader, Q as ListBoxItem, $ as ListBoxLoadMoreItem, J as ListBoxPopover, X as ListBoxSection, Le as Logo, Ie as LogoContext, ve as Menu, ye as MenuItem, Se as MenuPopover, be as MenuSection, xe as MenuTrigger, V as Modal, H as ModalOverlay, y as Navbar, B as Popover, Re as ProgressBar, Be as Radio, Ve as RadioButton, ze as RadioField, He as RadioGroup, g as RangeCalendar, i as RouterProvider, u as Row, O as SearchField, q as Select, K as SelectTrigger, Ce as Separator, v as Sidebar, _ as SidebarLink, Ue as Skeleton, r as Spinner, Ke as Tab, qe as TabList, Ge as TabPanel, s as Table, o as TableBody, l as TableHeader, We as Tabs, re as Tag, ie as TagGroup, ne as TagList, W as Text, Ze as TextArea, Ye as TextField, Je as TextFieldBase, Qe as TimeField, tt as Toast, rt as ToastProvider, et as ToastRegion, ge as ToggleButton, _e as ToggleButtonGroup, Fe as Tooltip, Pe as TooltipTrigger, at as VERSION, n as clsx, $e as toastQueue, j as useLocalizedStringFormatter, nt as useToastState };
+export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, h as Calendar, de as Card, se as CardActionArea, ae as CardActions, le as CardBody, ue as CardContent, pe as CardHeader, fe as CardImage, oe as CardLink, ce as CardTitle, d as Cell, me as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, c as Column, we as ComboBox, he as ContrastFilled, Te as DateField, Ee as DateInput, Oe as DateInputDivider, p as DatePicker, m as DateRangePicker, De as DateSegment, U as DialogTrigger, ke as DropZone, G as FieldError, k as FileList, A as FileListItem, Ae as FileTrigger, at as GlobalToastRegion, je as Grid, Me as GridItem, b as Header, P as Heading, Ne as InfoBanner, Ze as Input, z as Label, x as Layout, a as Link, f as LinkButton, Y as ListBox, ee as ListBoxButton, te as ListBoxEmptyState, Z as ListBoxHeader, Q as ListBoxItem, $ as ListBoxLoadMoreItem, J as ListBoxPopover, X as ListBoxSection, Le as Logo, Ie as LogoContext, ve as Menu, ye as MenuItem, Se as MenuPopover, be as MenuSection, xe as MenuTrigger, V as Modal, H as ModalOverlay, y as Navbar, B as Popover, Re as ProgressBar, Be as Radio, Ve as RadioButton, ze as RadioField, He as RadioGroup, g as RangeCalendar, i as RouterProvider, u as Row, O as SearchField, q as Select, K as SelectTrigger, Ce as Separator, v as Sidebar, _ as SidebarLink, Ue as Skeleton, r as Spinner, We as Stack, qe as Tab, Je as TabList, Ke as TabPanel, s as Table, o as TableBody, l as TableHeader, Ge as Tabs, re as Tag, ie as TagGroup, ne as TagList, W as Text, Qe as TextArea, Xe as TextField, Ye as TextFieldBase, $e as TimeField, nt as Toast, it as ToastProvider, tt as ToastRegion, ge as ToggleButton, _e as ToggleButtonGroup, Fe as Tooltip, Pe as TooltipTrigger, ot as VERSION, n as clsx, et as toastQueue, j as useLocalizedStringFormatter, rt as useToastState };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.27.4",
+  "version": "17.28.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@internationalized/string": "^3.2.10",
-    "@midas-ds/theme": "3.17.5",
+    "@midas-ds/theme": "3.17.6",
     "@react-stately/utils": "3.12.1",
     "react-aria-components": "1.21.1",
     "react-aria": "3.52.1",

package/stack/Stack.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/** The Midas semantic space tokens, `--midas-space-*` */
+export type StackSpacing = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type StackElementType = 'div' | 'ul' | 'ol' | 'section' | 'nav' | 'fieldset' | 'form' | 'header' | 'footer' | 'aside' | 'article';
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /**
+     * The HTML element to render, e.g. `ul` for a list of items
+     * @default 'div'
+     */
+    elementType?: StackElementType;
+    /** @default 'column' */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Space between the items, from the Midas semantic space tokens
+     * @default 'small'
+     */
+    spacing?: StackSpacing;
+    /**
+     * How the items line up across the direction: horizontally in a column,
+     * vertically in a row. `stretch` makes them as wide as the Stack in a
+     * column and as tall as it in a row
+     * @default 'stretch'
+     */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * How the items are placed along the direction: vertically in a column,
+     * horizontally in a row. `between` puts the first and last item at the
+     * edges, `around` gives each item equal space on both sides and `evenly`
+     * makes every gap the same, edges included
+     * @default 'start'
+     */
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Let the items wrap onto several lines */
+    wrap?: boolean;
+}
+/**
+ * Lays out its children in one direction, with spacing from the Midas space
+ * tokens.
+ *
+ * @see {@link https://designsystem.migrationsverket.se/components/stack}
+ */
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/stack/Stack.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Stack } from '.';
+type Story = StoryObj<typeof Stack>;
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Stack').StackProps & import('react').RefAttributes<HTMLElement>>;
+    tags: string[];
+    args: {
+        children: import('react').JSX.Element[];
+        direction: "column";
+        alignItems: "stretch";
+        justifyContent: "start";
+        wrap: false;
+    };
+};
+export default _default;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+/** Every Midas semantic space token */
+export declare const Spacing: Story;
+/** A list keeps its list semantics, also without bullets */
+export declare const AsList: Story;
+export declare const Wrap: Story;
+export declare const SpaceBetween: Story;

package/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack } from './Stack';
+export type { StackElementType, StackProps, StackSpacing } from './Stack';

package/stack/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/stack-LF3ExhH9.js";
+export { e as Stack };