@midas-ds/components 17.28.2 → 17.29.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 17.29.0 (2026-10-09)
+
+### 🚀 Features
+
+- **components,file-list:** name the file in screen reader output and announce upload errors ([37b3d4545b6](https://github.com/migrationsverket/midas/commit/37b3d4545b6))
+- **components,file-list:** animate the upload-complete and upload-failed transitions ([76157f5d350](https://github.com/migrationsverket/midas/commit/76157f5d350))
+- **components,file-list:** auto-restore focus to a sibling row on removal ([c5356b073ef](https://github.com/migrationsverket/midas/commit/c5356b073ef))
+- **components,file-list,progress-bar:** add upload progress states and a circular ProgressBar ([935847ee8ce](https://github.com/migrationsverket/midas/commit/935847ee8ce))
+
+### 🩹 Fixes
+
+- **components,file-list:** read the upload state first in each row and separate name and size ([4ce25f2de0c](https://github.com/migrationsverket/midas/commit/4ce25f2de0c))
+- **components,file-list:** only render the progress bar and checkmark in their own state ([d7a8371ed70](https://github.com/migrationsverket/midas/commit/d7a8371ed70))
+
+### 🧪 Tests updated
+
+- update visual regression screenshots ([7052703314c](https://github.com/migrationsverket/midas/commit/7052703314c))
+- update visual regression screenshots ([c7c1aeca056](https://github.com/migrationsverket/midas/commit/c7c1aeca056))
+
 ## 17.28.2 (2026-10-08)
 
 ### 🩹 Fixes

package/assets/file-list.css

@@ -1 +1 @@
-._fileList_1jd3b_1{gap:var(--midas-space-small);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}._fileListItem_1jd3b_10{background-color:var(--midas-layer-01-base);box-sizing:border-box;font-family:var(--midas-typography-font-family);height:var(--midas-size-control);align-items:center;padding-inline-start:var(--midas-space-medium);display:flex}._fileInfo_1jd3b_20{align-items:baseline;gap:var(--midas-space-small);flex:1;min-width:0;display:flex}._fileName_1jd3b_28{color:var(--midas-text-primary);font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._fileSize_1jd3b_37{color:var(--midas-text-secondary);font-size:var(--midas-typography-font-size-30);flex-shrink:0}._deleteButton_1jd3b_43{color:var(--midas-icon-primary);flex-shrink:0}
+._fileList_mb5n3_1{gap:var(--midas-space-small);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}._fileListItem_mb5n3_18{--file-list-success-duration:2s;flex-direction:column;display:flex}._row_mb5n3_25{background-color:var(--midas-layer-01-base);box-sizing:border-box;font-family:var(--midas-typography-font-family);height:var(--midas-size-control);transition:box-shadow var(--midas-transition-duration-fast) var(--midas-transition-timing-ease-out);align-items:center;padding-inline-start:var(--midas-space-medium);display:flex}._fileListItem_mb5n3_18[data-status=error] ._row_mb5n3_25{box-shadow:var(--midas-state-invalid)}._iconSlot_mb5n3_46{height:var(--midas-size-icon-sm);opacity:0;transition:margin-inline-end var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out), opacity var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out), width var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out);flex-shrink:0;width:0;margin-inline-end:0;position:relative}._fileListItem_mb5n3_18[data-status=uploading] ._iconSlot_mb5n3_46,._fileListItem_mb5n3_18[data-status=success] ._iconSlot_mb5n3_46{opacity:1;width:var(--midas-size-icon-sm);margin-inline-end:var(--midas-space-small)}._progressIcon_mb5n3_70{position:absolute;inset:0}._ring_mb5n3_82{border:2px solid var(--midas-icon-success);box-sizing:border-box;opacity:0;border-radius:50%;position:absolute;inset:0}._fileListItem_mb5n3_18[data-status=success] ._ring_mb5n3_82{animation:_successRing_mb5n3_1 var(--file-list-success-duration) var(--midas-transition-timing-ease-out) forwards}._checkmark_mb5n3_106{height:var(--midas-size-icon-sm);opacity:0;width:var(--midas-size-icon-sm);margin:auto;position:absolute;inset:0;transform:scale(.4)}._fileListItem_mb5n3_18[data-status=success] ._checkmark_mb5n3_106{animation:_successCheckmark_mb5n3_1 var(--file-list-success-duration) var(--midas-transition-timing-ease-out) forwards}._successIcon_mb5n3_121{color:var(--midas-icon-success)}@keyframes _successRing_mb5n3_1{0%,30%{opacity:1}55%,to{opacity:0}}@keyframes _successCheckmark_mb5n3_1{0%,30%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(.65)}65%,to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){._row_mb5n3_25,._iconSlot_mb5n3_46,._ring_mb5n3_82,._checkmark_mb5n3_106,._errorReveal_mb5n3_163{transition-duration:1ms!important;animation-duration:1ms!important}}._fileInfo_mb5n3_169{align-items:baseline;gap:var(--midas-space-small);flex:1;min-width:0;display:flex}._fileName_mb5n3_177{color:var(--midas-text-primary);font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._fileSize_mb5n3_186{color:var(--midas-text-secondary);font-size:var(--midas-typography-font-size-30);flex-shrink:0}._deleteButton_mb5n3_192{color:var(--midas-icon-primary);flex-shrink:0;margin-inline-start:var(--midas-space-small)}._errorReveal_mb5n3_163{max-height:0;transition:max-height var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out);overflow:clip}._fileListItem_mb5n3_18[data-status=error] ._errorReveal_mb5n3_163{max-height:6.25rem}

package/assets/progress-bar.css

@@ -1 +1 @@
-._progressBar_13dw9_1{grid-template-columns:1fr auto;grid-template-areas:"label value""track track";gap:.5rem;display:grid}._progressBar_13dw9_1 ._label_13dw9_9{grid-area:label;margin:0}._progressBar_13dw9_1 ._value_13dw9_14{grid-area:value;margin:0}._progressBar_13dw9_1 ._track_13dw9_19{background:var(--midas-progress-bar-track-background);grid-area:track;height:.25rem;overflow:hidden}@media (forced-colors:active){._progressBar_13dw9_1 ._track_13dw9_19{border:1px solid}}._progressBar_13dw9_1 ._track_13dw9_19 ._indicator_13dw9_29{background:var(--midas-progress-bar-indicator-background);height:100%}@media (forced-colors:active){._progressBar_13dw9_1 ._track_13dw9_19 ._indicator_13dw9_29{background:highlight}}._progressBar_13dw9_1:not([aria-valuenow]) ._indicator_13dw9_29{will-change:transform;background:var(--midas-progress-bar-indicator-background);height:100%;animation:2s var(--midas-transition-timing-ease-in-out) infinite _indeterminate_13dw9_1}@media (forced-colors:active){._progressBar_13dw9_1:not([aria-valuenow]) ._indicator_13dw9_29{background:highlight}}@keyframes _indeterminate_13dw9_1{0%{transform:translate(-100%)}to{transform:translate(200%)}}@media (prefers-reduced-motion){._progressBar_13dw9_1:not([aria-valuenow]) ._indicator_13dw9_29{animation-duration:6s}}
+._progressBar_15k4b_1{column-gap:var(--midas-space-small);grid-template-columns:1fr auto;grid-template-areas:"label value""track track";display:grid}._progressBar_15k4b_1 ._label_15k4b_9{margin:0 0 var(--midas-space-small);grid-area:label}._progressBar_15k4b_1 ._value_15k4b_14{margin:0 0 var(--midas-space-small);grid-area:value}._progressBar_15k4b_1 ._track_15k4b_19{background:var(--midas-progress-bar-track-background);grid-area:track;height:.25rem;overflow:hidden}@media (forced-colors:active){._progressBar_15k4b_1 ._track_15k4b_19{border:1px solid}}._progressBar_15k4b_1 ._track_15k4b_19 ._indicator_15k4b_29{background:var(--midas-progress-bar-indicator-background);height:100%}@media (forced-colors:active){._progressBar_15k4b_1 ._track_15k4b_19 ._indicator_15k4b_29{background:highlight}}._progressBar_15k4b_1:not([aria-valuenow]) ._indicator_15k4b_29{will-change:transform;background:var(--midas-progress-bar-indicator-background);height:100%;animation:2s var(--midas-transition-timing-ease-in-out) infinite _indeterminate_15k4b_1}@media (forced-colors:active){._progressBar_15k4b_1:not([aria-valuenow]) ._indicator_15k4b_29{background:highlight}}._progressBar_15k4b_1 ._circular_15k4b_53{height:var(--midas-size-icon);width:var(--midas-size-icon);grid-area:track;transform:rotate(-90deg)}._progressBar_15k4b_1 ._circular_15k4b_53._circularSmall_15k4b_59{height:var(--midas-size-icon-sm);width:var(--midas-size-icon-sm)}._progressBar_15k4b_1 ._circularTrack_15k4b_65{fill:none;stroke:var(--midas-progress-bar-track-background);stroke-width:2px}@media (forced-colors:active){._progressBar_15k4b_1 ._circularTrack_15k4b_65{stroke:canvastext}}._progressBar_15k4b_1 ._circularIndicator_15k4b_75{fill:none;stroke:var(--midas-progress-bar-indicator-background);stroke-linecap:round;stroke-width:2px;transition:stroke-dashoffset var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out)}@media (forced-colors:active){._progressBar_15k4b_1 ._circularIndicator_15k4b_75{stroke:highlight}}._progressBar_15k4b_1 ._circularIndicator_15k4b_75._circularIndeterminate_15k4b_87{stroke-linecap:square;transform-origin:50%;animation:1s linear infinite _circularRotate_15k4b_1}@media (prefers-reduced-motion:reduce){._progressBar_15k4b_1 ._circularIndicator_15k4b_75._circularIndeterminate_15k4b_87{animation-duration:2s}}@keyframes _indeterminate_15k4b_1{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes _circularRotate_15k4b_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){._progressBar_15k4b_1:not([aria-valuenow]) ._indicator_15k4b_29{animation-duration:6s}}

package/chunks/file-list-B4vG_egr.js

@@ -0,0 +1,161 @@
+'use client';
+import { t as e } from "./clsx-Di52oYUU.js";
+import { t } from "./createLucideIcon-BgluSHFG.js";
+import { t as n } from "./FeedbackStatusIcon-DRI7WrSU.js";
+import { t as r } from "./x-BJAOO5a5.js";
+import { t as i } from "./useLocalizedStringFormatter-CeyBc0x0.js";
+import { n as a } from "./button-CenXTGXL.js";
+import { t as o } from "./field-error-LtNtEKDp.js";
+import { t as s } from "./progress-bar-CknF4qAm.js";
+import { useEffect as c, useId as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { FocusScope as m, VisuallyHidden as h, useFocusManager as g } from "react-aria";
+import '../assets/file-list.css';var _ = t("trash-2", [
+	["path", {
+		d: "M10 11v6",
+		key: "nco0om"
+	}],
+	["path", {
+		d: "M14 11v6",
+		key: "outv1u"
+	}],
+	["path", {
+		d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+		key: "miytrc"
+	}],
+	["path", {
+		d: "M3 6h18",
+		key: "d0wm0j"
+	}],
+	["path", {
+		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+		key: "e791ji"
+	}]
+]), v = {
+	fileList: "_fileList_mb5n3_1",
+	fileListItem: "_fileListItem_mb5n3_18",
+	row: "_row_mb5n3_25",
+	iconSlot: "_iconSlot_mb5n3_46",
+	progressIcon: "_progressIcon_mb5n3_70",
+	ring: "_ring_mb5n3_82",
+	successRing: "_successRing_mb5n3_1",
+	checkmark: "_checkmark_mb5n3_106",
+	successCheckmark: "_successCheckmark_mb5n3_1",
+	successIcon: "_successIcon_mb5n3_121",
+	errorReveal: "_errorReveal_mb5n3_163",
+	fileInfo: "_fileInfo_mb5n3_169",
+	fileName: "_fileName_mb5n3_177",
+	fileSize: "_fileSize_mb5n3_186",
+	deleteButton: "_deleteButton_mb5n3_192"
+}, y = ({ className: t, children: n, ...r }) => {
+	let i = u(null);
+	return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ p("ul", {
+		...r,
+		ref: i,
+		tabIndex: -1,
+		className: e(v.fileList, t),
+		children: [/* @__PURE__ */ f(b, { containerRef: i }), n]
+	}) });
+}, b = ({ containerRef: e }) => {
+	let t = g(), n = u(t);
+	return c(() => {
+		n.current = t;
+	}), c(() => {
+		let t = e.current;
+		if (!t) return;
+		let r = new MutationObserver((e) => {
+			e.some((e) => e.removedNodes.length > 0) && document.activeElement === document.body && (n.current?.focusFirst({ tabbable: !0 }) || t.focus());
+		});
+		return r.observe(t, { childList: !0 }), () => r.disconnect();
+	}, [e]), null;
+}, x = {
+	en: {
+		removeFile: "Remove",
+		cancelUpload: "Cancel",
+		uploading: "Uploading",
+		uploadComplete: "Upload complete",
+		uploadFailed: "Upload failed"
+	},
+	sv: {
+		removeFile: "Ta bort",
+		cancelUpload: "Avbryt",
+		uploading: "Laddar upp",
+		uploadComplete: "Uppladdning klar",
+		uploadFailed: "Uppladdning misslyckades"
+	}
+}, S = ({ fileName: t, fileSize: c, status: u = "idle", progress: m, errorMessage: g, onCancel: y, onDelete: b, className: S }) => {
+	let C = i(x), w = u === "uploading", T = u === "success", E = u === "error", D = E && !!g, O = l(), k = l(), A = T ? C.format("uploadComplete") : E ? C.format("uploadFailed") : void 0, j = [A && k, D && O].filter(Boolean).join(" ") || void 0, M = w ? y ?? b : b;
+	return /* @__PURE__ */ p("li", {
+		className: e(v.fileListItem, S),
+		"data-status": u,
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: v.row,
+				children: [
+					/* @__PURE__ */ p("span", {
+						className: v.iconSlot,
+						children: [
+							w && /* @__PURE__ */ f(s, {
+								shape: "circular",
+								small: !0,
+								value: m,
+								isIndeterminate: m === void 0,
+								"aria-label": `${C.format("uploading")} ${t}`,
+								className: v.progressIcon
+							}),
+							/* @__PURE__ */ f("span", {
+								className: v.ring,
+								"aria-hidden": !0
+							}),
+							T && /* @__PURE__ */ f(n, {
+								status: "success",
+								"aria-hidden": !0,
+								size: 16,
+								className: e(v.checkmark, v.successIcon)
+							})
+						]
+					}),
+					A && /* @__PURE__ */ f(h, {
+						id: k,
+						children: A
+					}),
+					/* @__PURE__ */ p("span", {
+						className: v.fileInfo,
+						children: [/* @__PURE__ */ f("span", {
+							className: v.fileName,
+							children: t
+						}), c && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(h, { children: ", " }), /* @__PURE__ */ f("span", {
+							className: v.fileSize,
+							children: c
+						})] })]
+					}),
+					M && /* @__PURE__ */ f(a, {
+						variant: "icon",
+						onPress: M,
+						"aria-label": `${C.format(w ? "cancelUpload" : "removeFile")} ${t}`,
+						"aria-describedby": j,
+						className: v.deleteButton,
+						children: f(w ? r : _, {
+							size: 20,
+							"aria-hidden": !0
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				id: O,
+				className: v.errorReveal,
+				children: g && /* @__PURE__ */ f(o, {
+					isInvalid: !0,
+					children: g
+				})
+			}),
+			/* @__PURE__ */ p(h, {
+				role: "status",
+				children: [T && `${C.format("uploadComplete")}: ${t}`, D && `${t}: ${g}`]
+			})
+		]
+	});
+};
+//#endregion
+export { y as n, S as t };

package/chunks/progress-bar-CknF4qAm.js

@@ -0,0 +1,65 @@
+import { t as e } from "./clsx-Di52oYUU.js";
+import { t } from "./label-LWlgvAwz.js";
+import "react";
+import { ProgressBar as n } from "react-aria-components";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import '../assets/progress-bar.css';var o = {
+	progressBar: "_progressBar_15k4b_1",
+	indeterminate: "_indeterminate_15k4b_1",
+	circularRotate: "_circularRotate_15k4b_1",
+	label: "_label_15k4b_9",
+	value: "_value_15k4b_14",
+	track: "_track_15k4b_19",
+	indicator: "_indicator_15k4b_29",
+	circular: "_circular_15k4b_53",
+	circularSmall: "_circularSmall_15k4b_59",
+	circularTrack: "_circularTrack_15k4b_65",
+	circularIndicator: "_circularIndicator_15k4b_75",
+	circularIndeterminate: "_circularIndeterminate_15k4b_87"
+}, s = 8, c = 2 * Math.PI * s, l = c * .25, u = ({ label: u, labelProps: d, showValueLabel: f = !1, shape: p = "linear", small: m = !1, ...h }) => /* @__PURE__ */ i(n, {
+	...h,
+	className: e(o.progressBar, h.className),
+	children: ({ percentage: n, valueText: h, isIndeterminate: g }) => /* @__PURE__ */ a(r, { children: [
+		u && /* @__PURE__ */ i(t, {
+			elementType: "span",
+			...d,
+			className: e(d?.className, o.label),
+			children: u
+		}),
+		f && /* @__PURE__ */ i(t, {
+			elementType: "span",
+			...d,
+			id: u ? "" : d?.id,
+			className: e(d?.className, o.value),
+			children: h
+		}),
+		p === "circular" ? /* @__PURE__ */ a("svg", {
+			className: e(o.circular, m && o.circularSmall),
+			viewBox: "0 0 20 20",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ i("circle", {
+				className: o.circularTrack,
+				cx: 10,
+				cy: 10,
+				r: s
+			}), /* @__PURE__ */ i("circle", {
+				className: e(o.circularIndicator, g && o.circularIndeterminate),
+				cx: 10,
+				cy: 10,
+				r: s,
+				style: g ? { strokeDasharray: `${l} ${c}` } : {
+					strokeDasharray: c,
+					strokeDashoffset: c * (1 - (n ?? 0) / 100)
+				}
+			})]
+		}) : /* @__PURE__ */ i("div", {
+			className: o.track,
+			children: /* @__PURE__ */ i("div", {
+				className: o.indicator,
+				style: { width: `${g ? 50 : n}%` }
+			})
+		})
+	] })
+});
+//#endregion
+export { u as t };

package/file-list/FileList.stories.d.ts

@@ -1,19 +1,31 @@
 import { StoryObj } from '@storybook/react-vite';
+import { default as React } from 'react';
 import { FileList } from './FileList';
 type Story = StoryObj<typeof FileList>;
 declare const _default: {
-    component: ({ className, children, ...props }: import('./FileList').FileListProps) => import('react').JSX.Element;
+    component: ({ className, children, ...props }: import('./FileList').FileListProps) => React.JSX.Element;
     subcomponents: {
-        FileListItem: ({ fileName, fileSize, onDelete, className, }: import('./FileListItem').FileListItemProps) => import('react').JSX.Element;
+        FileListItem: ({ fileName, fileSize, status, progress, errorMessage, onCancel, onDelete, className, }: import('./FileListItem').FileListItemProps) => React.JSX.Element;
     };
     title: string;
     tags: string[];
     args: {
         'aria-label': string;
     };
-    render: (args: import('./FileList').FileListProps) => import('react').JSX.Element;
+    render: (args: import('./FileList').FileListProps) => React.JSX.Element;
 };
 export default _default;
 export declare const Default: Story;
 export declare const WithoutFileSize: Story;
 export declare const Empty: Story;
+export declare const Uploading: Story;
+export declare const UploadingDeterminate: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const MixedStates: Story;
+export declare const AnimatedCompletion: StoryObj;
+export declare const AnimatedFailure: StoryObj;
+interface FocusTestContainerProps {
+    initialFiles: string[];
+}
+export declare const FocusManagementTest: StoryObj<FocusTestContainerProps>;

package/file-list/FileListItem.d.ts

@@ -1,7 +1,27 @@
 export interface FileListItemProps {
     fileName: string;
     fileSize?: string;
+    /** @default 'idle' */
+    status?: 'idle' | 'uploading' | 'success' | 'error';
+    /** 0-100. Only meaningful when `status='uploading'`; omit for indeterminate. */
+    progress?: number;
+    /** Shown below the row when `status='error'`. */
+    errorMessage?: string;
+    /**
+     * Called when the cancel button is pressed while `status='uploading'` —
+     * this is where you'd abort the in-flight request (e.g.
+     * `XMLHttpRequest.abort()` or `AbortController.abort()`). Falls back to
+     * `onDelete` if omitted, so an in-progress upload isn't silently left
+     * running in the background with no way to stop it.
+     */
+    onCancel?: () => void;
+    /**
+     * Called when the delete button is pressed for any status other than
+     * `uploading` (use `onCancel` for that). `FileList` has no concept of
+     * "uploaded" vs "local only" — if the file is already persisted
+     * server-side by the time this fires, deleting it there too is your call.
+     */
     onDelete?: () => void;
     className?: string;
 }
-export declare const FileListItem: ({ fileName, fileSize, onDelete, className, }: FileListItemProps) => import('react').JSX.Element;
+export declare const FileListItem: ({ fileName, fileSize, status, progress, errorMessage, onCancel, onDelete, className, }: FileListItemProps) => import('react').JSX.Element;

package/file-list/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/file-list-TmEuO1fJ.js";
+import { n as e, t } from "../chunks/file-list-B4vG_egr.js";
 export { e as FileList, t as FileListItem };

package/file-list/intl/translations.json.d.ts

@@ -1,9 +1,17 @@
 declare const _default: {
   "en": {
-    "removeFile": "Remove"
+    "removeFile": "Remove",
+    "cancelUpload": "Cancel",
+    "uploading": "Uploading",
+    "uploadComplete": "Upload complete",
+    "uploadFailed": "Upload failed"
   },
   "sv": {
-    "removeFile": "Ta bort"
+    "removeFile": "Ta bort",
+    "cancelUpload": "Avbryt",
+    "uploading": "Laddar upp",
+    "uploadComplete": "Uppladdning klar",
+    "uploadFailed": "Uppladdning misslyckades"
   }
 }
 ;

package/index.js

@@ -12,7 +12,7 @@ import { a as _, i as v, n as y, r as b, t as x } from "./chunks/layout-Db5um0f7
 import { i as S, n as C, r as w, t as T } from "./chunks/checkbox-Bqd8B58G.js";
 import { n as E, t as D } from "./chunks/color-scheme-switch-DVZjdwc9.js";
 import { t as O } from "./chunks/search-field-GNTRFpzf.js";
-import { n as k, t as A } from "./chunks/file-list-TmEuO1fJ.js";
+import { n as k, t as A } from "./chunks/file-list-B4vG_egr.js";
 import { t as j } from "./chunks/useLocalizedStringFormatter-CeyBc0x0.js";
 import { n as M, t as N } from "./chunks/button-CenXTGXL.js";
 import { t as P } from "./chunks/heading-BEl_z-5T.js";
@@ -34,12 +34,12 @@ import { a as ve, i as ye, n as be, o as xe, r as Se, t as Ce } from "./chunks/m
 import { t as we } from "./chunks/combobox-DIou4Z-d.js";
 import { i as Te, n as Ee, r as De, t as Oe } from "./chunks/date-field-BF2f9bSf.js";
 import { t as ke } from "./chunks/drop-zone-DH3ZyHsr.js";
-import { t as Ae } from "./chunks/file-trigger-Dp5nH8oS.js";
-import { n as je, t as Me } from "./chunks/grid-Cn_8RSvj.js";
-import { t as Ne } from "./chunks/info-banner-osR4e6nB.js";
-import { n as Pe, t as Fe } from "./chunks/tooltip-BkesIUIF.js";
-import { n as Ie, t as Le } from "./chunks/logo-DyZ2pXt7.js";
-import { t as Re } from "./chunks/progress-bar-7w_kWo2f.js";
+import { t as Ae } from "./chunks/progress-bar-CknF4qAm.js";
+import { t as je } from "./chunks/file-trigger-Dp5nH8oS.js";
+import { n as Me, t as Ne } from "./chunks/grid-Cn_8RSvj.js";
+import { t as Pe } from "./chunks/info-banner-osR4e6nB.js";
+import { n as Fe, t as Ie } from "./chunks/tooltip-BkesIUIF.js";
+import { n as Le, t as Re } from "./chunks/logo-DyZ2pXt7.js";
 import { i as ze, n as Be, r as Ve, t as He } from "./chunks/radio-BD1EuxSa.js";
 import { t as Ue } from "./chunks/skeleton-B_BPRPJy.js";
 import { t as We } from "./chunks/stack-LF3ExhH9.js";
@@ -61,7 +61,7 @@ var ot = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.28.2",
+	version: "17.29.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",
@@ -93,4 +93,4 @@ var ot = {
 	}
 }.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, 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 };
+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, je as FileTrigger, at as GlobalToastRegion, Me as Grid, Ne as GridItem, b as Header, P as Heading, Pe 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, Re as Logo, Le 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, Ae 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, Ie as Tooltip, Fe 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.28.2",
+  "version": "17.29.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/progress-bar/ProgressBar.d.ts

@@ -13,5 +13,16 @@ export interface ProgressBarProps extends AriaProgressBarProps {
      * Show the value label
      */
     showValueLabel?: boolean;
+    /**
+     * Renders a linear bar or a small circular ring.
+     * @default 'linear'
+     */
+    shape?: 'linear' | 'circular';
+    /**
+     * Renders a smaller (20px) circular indicator, matching Spinner's `small` size.
+     * Only meaningful when `shape='circular'`.
+     * @default false
+     */
+    small?: boolean;
 }
 export declare const ProgressBar: React.FC<ProgressBarProps>;

package/progress-bar/ProgressBar.stories.d.ts

@@ -13,3 +13,6 @@ export default _default;
 export declare const Primary: Story;
 export declare const WithoutLabels: Story;
 export declare const IsIndeterminate: Story;
+export declare const Circular: Story;
+export declare const CircularSmall: Story;
+export declare const CircularIndeterminate: Story;

package/progress-bar/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/progress-bar-7w_kWo2f.js";
+import { t as e } from "../chunks/progress-bar-CknF4qAm.js";
 export { e as ProgressBar };

package/chunks/file-list-TmEuO1fJ.js

@@ -1,68 +0,0 @@
-'use client';
-import { t as e } from "./clsx-Di52oYUU.js";
-import { t } from "./createLucideIcon-BgluSHFG.js";
-import { t as n } from "./useLocalizedStringFormatter-CeyBc0x0.js";
-import { n as r } from "./button-CenXTGXL.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import '../assets/file-list.css';var o = t("trash-2", [
-	["path", {
-		d: "M10 11v6",
-		key: "nco0om"
-	}],
-	["path", {
-		d: "M14 11v6",
-		key: "outv1u"
-	}],
-	["path", {
-		d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
-		key: "miytrc"
-	}],
-	["path", {
-		d: "M3 6h18",
-		key: "d0wm0j"
-	}],
-	["path", {
-		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
-		key: "e791ji"
-	}]
-]), s = {
-	fileList: "_fileList_1jd3b_1",
-	fileListItem: "_fileListItem_1jd3b_10",
-	fileInfo: "_fileInfo_1jd3b_20",
-	fileName: "_fileName_1jd3b_28",
-	fileSize: "_fileSize_1jd3b_37",
-	deleteButton: "_deleteButton_1jd3b_43"
-}, c = ({ className: t, children: n, ...r }) => /* @__PURE__ */ i("ul", {
-	...r,
-	className: e(s.fileList, t),
-	children: n
-}), l = {
-	en: { removeFile: "Remove" },
-	sv: { removeFile: "Ta bort" }
-}, u = ({ fileName: t, fileSize: c, onDelete: u, className: d }) => {
-	let f = n(l);
-	return /* @__PURE__ */ a("li", {
-		className: e(s.fileListItem, d),
-		children: [/* @__PURE__ */ a("span", {
-			className: s.fileInfo,
-			children: [/* @__PURE__ */ i("span", {
-				className: s.fileName,
-				children: t
-			}), c && /* @__PURE__ */ i("span", {
-				className: s.fileSize,
-				children: c
-			})]
-		}), u && /* @__PURE__ */ i(r, {
-			variant: "icon",
-			onPress: u,
-			"aria-label": `${f.format("removeFile")} ${t}`,
-			className: s.deleteButton,
-			children: /* @__PURE__ */ i(o, {
-				size: 20,
-				"aria-hidden": !0
-			})
-		})]
-	});
-};
-//#endregion
-export { c as n, u as t };

package/chunks/progress-bar-7w_kWo2f.js

@@ -1,40 +0,0 @@
-import { t as e } from "./clsx-Di52oYUU.js";
-import { t } from "./label-LWlgvAwz.js";
-import "react";
-import { ProgressBar as n } from "react-aria-components";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import '../assets/progress-bar.css';var o = {
-	progressBar: "_progressBar_13dw9_1",
-	indeterminate: "_indeterminate_13dw9_1",
-	label: "_label_13dw9_9",
-	value: "_value_13dw9_14",
-	track: "_track_13dw9_19",
-	indicator: "_indicator_13dw9_29"
-}, s = ({ label: s, labelProps: c, showValueLabel: l = !1, ...u }) => /* @__PURE__ */ i(n, {
-	...u,
-	className: e(o.progressBar, u.className),
-	children: ({ percentage: n, valueText: u, isIndeterminate: d }) => /* @__PURE__ */ a(r, { children: [
-		s && /* @__PURE__ */ i(t, {
-			elementType: "span",
-			...c,
-			className: e(c?.className, o.label),
-			children: s
-		}),
-		l && /* @__PURE__ */ i(t, {
-			elementType: "span",
-			...c,
-			id: s ? "" : c?.id,
-			className: e(c?.className, o.value),
-			children: u
-		}),
-		/* @__PURE__ */ i("div", {
-			className: o.track,
-			children: /* @__PURE__ */ i("div", {
-				className: o.indicator,
-				style: { width: `${d ? 50 : n}%` }
-			})
-		})
-	] })
-});
-//#endregion
-export { s as t };