@dsn-starter-kit/components-react 3.5.0 → 4.1.0

package/dist/index.cjs

@@ -1630,8 +1630,8 @@ LinkButton.displayName = "LinkButton";
 * <TextInput readOnly value="Cannot edit this" />
 * ```
 */
-const TextInput = react.default.forwardRef(({ className, invalid, width, type = "text", ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TextInput = react.default.forwardRef(({ className, invalid, inlineSize, type = "text", ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type,
@@ -1694,8 +1694,8 @@ FileInput.displayName = "FileInput";
 * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const EmailInput = react.default.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const EmailInput = react.default.forwardRef(({ className, invalid, inlineSize, autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "email",
@@ -1731,8 +1731,8 @@ EmailInput.displayName = "EmailInput";
 * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const PasswordInput = react.default.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const PasswordInput = react.default.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, inlineSize, autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "password",
@@ -1762,8 +1762,8 @@ PasswordInput.displayName = "PasswordInput";
 * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const NumberInput = react.default.forwardRef(({ className, invalid, width, allowDecimals = false, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const NumberInput = react.default.forwardRef(({ className, invalid, inlineSize, allowDecimals = false, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "text",
@@ -1795,8 +1795,8 @@ NumberInput.displayName = "NumberInput";
 * <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const TelephoneInput = react.default.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TelephoneInput = react.default.forwardRef(({ className, invalid, inlineSize = "md", autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "tel",
@@ -1828,8 +1828,8 @@ TelephoneInput.displayName = "TelephoneInput";
 * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const SearchInput = react.default.forwardRef(({ className, invalid, width, ...props }, ref) => {
-	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-search-input-wrapper", width && `dsn-search-input-wrapper--width-${width}`);
+const SearchInput = react.default.forwardRef(({ className, invalid, inlineSize, ...props }, ref) => {
+	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-search-input-wrapper", inlineSize && `dsn-search-input-wrapper--inline-size-${inlineSize}`);
 	const inputClasses = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", "dsn-search-input", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: wrapperClasses,
@@ -1852,7 +1852,7 @@ SearchInput.displayName = "SearchInput";
 /**
 * Time Input component
 * Time input with an interactive clock button at inline-end that opens the native time picker.
-* Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+* Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
 *
 * @example
 * ```tsx
@@ -1911,7 +1911,7 @@ TimeInput.displayName = "TimeInput";
 /**
 * Date Input component
 * Date input with an interactive calendar button at inline-end that opens the native date picker.
-* Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+* Fixed inline-size (md): not configurable, as date inputs have a predictable content length.
 *
 * @example
 * ```tsx
@@ -2024,7 +2024,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Dag"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: dayId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.day ?? "",
 					onChange: handleChange("day"),
 					invalid,
@@ -2043,7 +2043,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Maand"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: monthId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.month ?? "",
 					onChange: handleChange("month"),
 					invalid,
@@ -2062,7 +2062,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Jaar"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: yearId,
-					width: "sm",
+					inlineSize: "sm",
 					value: value?.year ?? "",
 					onChange: handleChange("year"),
 					invalid,
@@ -2102,15 +2102,15 @@ DateInputGroup.displayName = "DateInputGroup";
 *   </Select>
 * </FormField>
 *
-* // Width variant
-* <Select width="lg">...</Select>
+* // Inline-size variant
+* <Select inlineSize="lg">...</Select>
 *
 * // Invalid state
 * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
 * ```
 */
-const Select = react.default.forwardRef(({ className, invalid, width, disabled, children, ...props }, ref) => {
-	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-select-wrapper", width && `dsn-select-wrapper--width-${width}`);
+const Select = react.default.forwardRef(({ className, invalid, inlineSize, disabled, children, ...props }, ref) => {
+	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-select-wrapper", inlineSize && `dsn-select-wrapper--inline-size-${inlineSize}`);
 	const selectClasses = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", "dsn-select", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: wrapperClasses,
@@ -2154,8 +2154,8 @@ Select.displayName = "Select";
 * <TextArea readOnly value="View only" rows={3} />
 * ```
 */
-const TextArea = react.default.forwardRef(({ className, invalid, width, rows = 4, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-area", width && `dsn-text-area--width-${width}`, className);
+const TextArea = react.default.forwardRef(({ className, invalid, inlineSize, rows = 4, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-area", inlineSize && `dsn-text-area--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		ref,
 		className: classes,
@@ -3562,14 +3562,28 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
 	const headingRef = react.default.useRef(null);
+	const popoverShownRef = react.default.useRef(false);
+	const previousFocusRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
 		if (!dialog) return;
-		if (isOpen && !dialog.open) {
+		const isShown = dialog.open || popoverShownRef.current;
+		if (isOpen && !isShown) {
 			if (modal) dialog.showModal();
-			else dialog.show();
+			else {
+				previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				dialog.showPopover();
+				popoverShownRef.current = true;
+			}
 			(headingRef.current ?? dialog).focus();
-		} else if (!isOpen && dialog.open) dialog.close();
+		} else if (!isOpen && isShown) {
+			if (popoverShownRef.current) {
+				const focusWasInside = dialog.contains(document.activeElement);
+				dialog.hidePopover();
+				popoverShownRef.current = false;
+				if (focusWasInside) previousFocusRef.current?.focus();
+			} else dialog.close();
+		}
 	}, [
 		isOpen,
 		modal,
@@ -3616,6 +3630,7 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
 			tabIndex: -1,
+			popover: modal ? void 0 : "manual",
 			...props,
 			children
 		})
@@ -3697,6 +3712,10 @@ const DrawerFooter = react.default.forwardRef(({ className, children, ...props }
 DrawerFooter.displayName = "DrawerFooter";
 //#endregion
 //#region src/PageHeader/PageHeader.tsx
+/** Auto-hide: boven deze scrollpositie (px) blijft de header altijd zichtbaar */
+const AUTO_HIDE_OFFSET = 100;
+/** Auto-hide: zoveel px omhoog scrollen voordat de header terugkomt */
+const AUTO_HIDE_REVEAL_DISTANCE = 64;
 /**
 * PageHeader component
 * Primaire navigatieheader voor een pagina. Mobile-first implementatie.
@@ -3744,11 +3763,24 @@ const PageHeader = react.default.forwardRef(({ className, logoSlot, sticky = "no
 	react.default.useEffect(() => {
 		if (sticky !== "auto-hide") return;
 		let lastScrollY = window.scrollY;
+		let scrolledUp = 0;
 		const handleScroll = () => {
 			const currentScrollY = window.scrollY;
-			const isScrollingDown = currentScrollY > lastScrollY && currentScrollY > 100;
-			combinedRef.current?.setAttribute("data-hidden", String(isScrollingDown));
+			const delta = currentScrollY - lastScrollY;
 			lastScrollY = currentScrollY;
+			let hidden;
+			if (currentScrollY <= AUTO_HIDE_OFFSET) {
+				hidden = false;
+				scrolledUp = 0;
+			} else if (delta > 0) {
+				hidden = true;
+				scrolledUp = 0;
+			} else if (delta < 0) {
+				scrolledUp -= delta;
+				if (scrolledUp < AUTO_HIDE_REVEAL_DISTANCE) return;
+				hidden = false;
+			} else return;
+			combinedRef.current?.setAttribute("data-hidden", String(hidden));
 		};
 		window.addEventListener("scroll", handleScroll, { passive: true });
 		return () => window.removeEventListener("scroll", handleScroll);
@@ -4494,22 +4526,29 @@ Image.displayName = "Image";
 const CardContext = react.default.createContext({});
 /**
 * Card component
-* Configureerbare container voor gestructureerde content met header, body en footer.
-* Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
-* Screenreaders lezen alleen de heading-tekst als linknaam.
+* Configureerbare container met vier optionele secties: `CardPreHeader`,
+* `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).
+*
+* Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een
+* screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.
+*
+* Met `href` wordt de heading een stretched link: de link dekt de volledige
+* card, en screenreaders lezen alleen de heading-tekst als linknaam.
 *
 * @example
 * ```tsx
 * <Card href="/artikel/slug">
 *   <CardHeader>
-*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *   </CardHeader>
+*   <CardPreHeader>
+*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*   </CardPreHeader>
 *   <CardBody>
-*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *     <Paragraph>Korte beschrijving.</Paragraph>
 *   </CardBody>
 *   <CardFooter>
-*     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+*     <CardAffordance>Lees meer</CardAffordance>
 *   </CardFooter>
 * </Card>
 * ```
@@ -4527,13 +4566,14 @@ const Card = react.default.forwardRef(({ className, href, children, ...props },
 });
 Card.displayName = "Card";
 /**
-* CardHeader sub-component
+* CardPreHeader sub-component
+* Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.
 * Zonder children → toont automatisch een afbeeldingsplaceholder.
 */
-const CardHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
+const CardPreHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
-		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__header", className),
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__pre-header", className),
 		...props,
 		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "dsn-card__image-placeholder",
@@ -4541,10 +4581,24 @@ const CardHeader = react.default.forwardRef(({ className, children, ...props },
 		})
 	});
 });
+CardPreHeader.displayName = "CardPreHeader";
+/**
+* CardHeader sub-component
+* Bevat de heading of het label van de card. Zet hem in de JSX vóór
+* `CardPreHeader`.
+*/
+const CardHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__header", className),
+		...props,
+		children
+	});
+});
 CardHeader.displayName = "CardHeader";
 /**
 * CardBody sub-component
-* Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+* Inhoudssectie onder de header.
 */
 const CardBody = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4558,7 +4612,7 @@ CardBody.displayName = "CardBody";
 /**
 * CardHeading sub-component
 * Ontvangt `href` automatisch via React context van de parent `Card`.
-* Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+* Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class="dsn-card__link">`.
 * Het `::before` pseudo-element dekt de volledige card (stretched link).
 */
 const CardHeading = react.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
@@ -4566,21 +4620,67 @@ const CardHeading = react.default.forwardRef(({ className, level = 2, children,
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
 		ref,
-		className: (0, _dsn_starter_kit_core.classNames)("dsn-card-heading", className),
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__heading", className),
 		...props,
 		children: href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 			href,
-			className: "dsn-card-heading__link",
+			className: "dsn-card__link",
 			children
 		}) : children
 	});
 });
 CardHeading.displayName = "CardHeading";
 /**
+* CardLabel sub-component
+* Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp
+* introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via
+* context, net als `CardHeading`.
+*/
+const CardLabel = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	const { href } = react.default.useContext(CardContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__label", className),
+		...props,
+		children: href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href,
+			className: "dsn-card__link",
+			children
+		}) : children
+	});
+});
+CardLabel.displayName = "CardLabel";
+/**
+* CardDescription sub-component
+* Korte omschrijving met eigen typografie-tokens.
+*/
+const CardDescription = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__description", className),
+		...props,
+		children
+	});
+});
+CardDescription.displayName = "CardDescription";
+/**
+* CardMeta sub-component
+* Aanvullende gegevens bij de card, zoals een datum.
+*/
+const CardMeta = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__meta", className),
+		...props,
+		children
+	});
+});
+CardMeta.displayName = "CardMeta";
+/**
 * CardFooter sub-component
-* Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
-* Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
-* bestemming heeft als de card — vermijdt een dubbele tabstop.
+* Staat altijd onderaan de card. Links en buttons staan boven de stretched
+* link en blijven zelfstandig klikbaar. Voor een visuele "Lees meer" naar
+* dezelfde bestemming als de card: gebruik `CardAffordance`.
 */
 const CardFooter = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4592,6 +4692,21 @@ const CardFooter = react.default.forwardRef(({ className, children, ...props },
 });
 CardFooter.displayName = "CardFooter";
 /**
+* CardAffordance sub-component
+* Een `<span aria-hidden="true">` die eruitziet als een link. De stretched
+* link vangt de klik al af, dus er is geen tweede tabstop nodig.
+*/
+const CardAffordance = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__affordance", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+});
+CardAffordance.displayName = "CardAffordance";
+/**
 * CardGroup sub-component
 * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
 * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
@@ -4611,6 +4726,7 @@ CardGroup.displayName = "CardGroup";
 //#region src/ModalDialog/ModalDialog.tsx
 const ModalDialogContext = react.default.createContext({
 	headingId: "",
+	bodyId: "",
 	headingRef: { current: null }
 });
 /**
@@ -4624,7 +4740,7 @@ const ModalDialogContext = react.default.createContext({
 *
 * @example
 * ```tsx
-* <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+* <ModalDialog alert isOpen={isOpen} onClose={() => setIsOpen(false)}>
 *   <ModalDialogHeader>
 *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
 *   </ModalDialogHeader>
@@ -4633,17 +4749,18 @@ const ModalDialogContext = react.default.createContext({
 *   </ModalDialogBody>
 *   <ModalDialogFooter>
 *     <ActionGroup>
-*       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+*       <Button variant="strong-negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
 *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
 *     </ActionGroup>
 *   </ModalDialogFooter>
 * </ModalDialog>
 * ```
 */
-const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, children, ...props }, ref) => {
+const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, alert = false, children, ...props }, ref) => {
 	const internalRef = react.default.useRef(null);
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
+	const bodyId = react.default.useId();
 	const headingRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
@@ -4670,13 +4787,16 @@ const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, trig
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalDialogContext.Provider, {
 		value: {
 			headingId,
+			bodyId,
 			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
 			ref: dialogRef,
 			className: classes,
+			role: alert ? "alertdialog" : void 0,
 			"aria-labelledby": headingId,
+			"aria-describedby": alert ? bodyId : void 0,
 			onCancel: handleCancel,
 			tabIndex: -1,
 			...props,
@@ -4737,8 +4857,10 @@ ModalDialogHeading.displayName = "ModalDialogHeading";
 * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
 */
 const ModalDialogBody = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	const { bodyId } = react.default.useContext(ModalDialogContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
+		id: bodyId,
 		className: (0, _dsn_starter_kit_core.classNames)("dsn-modal-dialog__body", className),
 		...props,
 		children
@@ -4759,7 +4881,7 @@ const ModalDialogFooter = react.default.forwardRef(({ className, children, ...pr
 });
 ModalDialogFooter.displayName = "ModalDialogFooter";
 //#endregion
-//#region src/Popover/Popover.tsx
+//#region src/utils/popover.ts
 const GAP = 4;
 function positionPopover(popover, trigger, placement) {
 	const triggerRect = trigger.getBoundingClientRect();
@@ -4812,39 +4934,32 @@ function focusFirstInteractive(container) {
 	if (first) first.focus();
 	else container.focus();
 }
-const PopoverContext = react.default.createContext({ headingId: "" });
 /**
-* Popover component
-* Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
-*
-* Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
-* light-dismiss en top-layer gedrag. Positionering via JavaScript.
-*
-* @example
-* ```tsx
-* const triggerRef = useRef<HTMLButtonElement>(null);
-* const [isOpen, setIsOpen] = useState(false);
-*
-* <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
-* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
-*   <PopoverBody>
-*     <Menu>...</Menu>
-*   </PopoverBody>
-* </Popover>
-* ```
+* Opent en sluit een element met `popover="auto"` synchroon met `isOpen`,
+* positioneert het bij de trigger en houdt `aria-expanded` op de trigger bij.
+*
+* Bij openen gaat de focus naar `initialFocusRef` (of de popover zelf als die
+* ref leeg is), en anders naar het eerste interactieve element. Bij sluiten
+* gaat de focus alleen terug naar de trigger wanneer dat zinvol is: als de
+* focus op dat moment nog in de popover stond (Escape, een sluitknop, een
+* actie in de popover). Klikt de gebruiker ergens anders, dan blijft de focus
+* daar; terugspringen naar de trigger zou die klik tenietdoen.
 */
-const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", label, children, ...props }, ref) => {
-	const internalRef = react.default.useRef(null);
-	const popoverRef = ref ?? internalRef;
-	const headingId = react.default.useId();
+function usePopover({ popoverRef, triggerRef, isOpen, onClose, placement, initialFocusRef }) {
+	const restoreFocusRef = react.default.useRef(false);
+	const dismissedByPointerRef = react.default.useRef(false);
+	const onCloseRef = react.default.useRef(onClose);
+	onCloseRef.current = onClose;
 	react.default.useEffect(() => {
 		const el = popoverRef.current;
 		if (!el) return;
 		if (isOpen) {
+			dismissedByPointerRef.current = false;
 			el.showPopover();
 			const trigger = triggerRef.current;
 			if (trigger) positionPopover(el, trigger, placement);
-			focusFirstInteractive(el);
+			if (initialFocusRef) (initialFocusRef.current ?? el).focus();
+			else focusFirstInteractive(el);
 		} else try {
 			el.hidePopover();
 		} catch {}
@@ -4852,7 +4967,8 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		isOpen,
 		placement,
 		triggerRef,
-		popoverRef
+		popoverRef,
+		initialFocusRef
 	]);
 	react.default.useEffect(() => {
 		const trigger = triggerRef.current;
@@ -4862,19 +4978,23 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 			trigger.setAttribute("aria-expanded", "false");
 		};
 	}, [isOpen, triggerRef]);
-	const onCloseRef = react.default.useRef(onClose);
-	onCloseRef.current = onClose;
 	react.default.useEffect(() => {
 		const el = popoverRef.current;
 		if (!el) return;
+		const handleBeforeToggle = (event) => {
+			if (event.newState === "closed") restoreFocusRef.current = !dismissedByPointerRef.current && el.contains(document.activeElement);
+		};
 		const handleToggle = (event) => {
 			if (event.newState === "closed") {
 				onCloseRef.current?.();
-				triggerRef.current?.focus();
+				if (restoreFocusRef.current) triggerRef.current?.focus();
+				restoreFocusRef.current = false;
 			}
 		};
+		el.addEventListener("beforetoggle", handleBeforeToggle);
 		el.addEventListener("toggle", handleToggle);
 		return () => {
+			el.removeEventListener("beforetoggle", handleBeforeToggle);
 			el.removeEventListener("toggle", handleToggle);
 		};
 	}, [triggerRef, popoverRef]);
@@ -4885,8 +5005,8 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		const handlePointerDown = (event) => {
 			const target = event.target;
 			if (el.contains(target) || triggerRef.current?.contains(target)) return;
+			dismissedByPointerRef.current = true;
 			onCloseRef.current?.();
-			triggerRef.current?.focus();
 		};
 		document.addEventListener("pointerdown", handlePointerDown);
 		return () => {
@@ -4897,11 +5017,57 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		triggerRef,
 		popoverRef
 	]);
+}
+//#endregion
+//#region src/Popover/Popover.tsx
+const PopoverContext = react.default.createContext({
+	headingId: "",
+	headingRef: { current: null }
+});
+/**
+* Popover component
+* Niet-modaal dialoogvenster verankerd aan een triggerelement
+* (`role="dialog"`, `aria-modal="false"`).
+*
+* Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
+* light-dismiss en top-layer gedrag. Positionering via JavaScript.
+*
+* Voor een lijst met acties of links: gebruik `PopoverMenu`. Een lijst is
+* geen dialoogvenster.
+*
+* @example
+* ```tsx
+* const triggerRef = useRef<HTMLButtonElement>(null);
+* const [isOpen, setIsOpen] = useState(false);
+*
+* <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Filters</Button>
+* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+*   <PopoverHeader>
+*     <PopoverHeading>Filters</PopoverHeading>
+*   </PopoverHeader>
+*   <PopoverBody>...</PopoverBody>
+* </Popover>
+* ```
+*/
+const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", label, children, ...props }, ref) => {
+	const internalRef = react.default.useRef(null);
+	const popoverRef = ref ?? internalRef;
+	const headingId = react.default.useId();
+	const headingRef = react.default.useRef(null);
+	usePopover({
+		popoverRef,
+		triggerRef,
+		isOpen,
+		onClose,
+		placement,
+		initialFocusRef: headingRef
+	});
 	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-popover", `dsn-popover--placement-${placement}`, className);
 	const ariaProps = label ? { "aria-label": label } : { "aria-labelledby": headingId };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContext.Provider, {
 		value: {
 			headingId,
+			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4945,14 +5111,21 @@ PopoverHeader.displayName = "PopoverHeader";
 /**
 * PopoverHeading
 * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+* Krijgt `tabindex="-1"` zodat de Popover er bij openen de focus op kan zetten.
 */
 const PopoverHeading = react.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-	const { headingId } = react.default.useContext(PopoverContext);
+	const { headingId, headingRef } = react.default.useContext(PopoverContext);
 	const Tag = `h${level}`;
+	const setRef = react.default.useCallback((node) => {
+		headingRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [headingRef, ref]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
-		ref,
+		ref: setRef,
 		id: headingId,
 		className: (0, _dsn_starter_kit_core.classNames)("dsn-popover-heading", className),
+		tabIndex: -1,
 		...props,
 		children
 	});
@@ -4985,6 +5158,63 @@ const PopoverFooter = react.default.forwardRef(({ className, children, ...props
 });
 PopoverFooter.displayName = "PopoverFooter";
 //#endregion
+//#region src/PopoverMenu/PopoverMenu.tsx
+const ITEM_SELECTOR = ".dsn-menu-button__button, .dsn-menu-link__link";
+/**
+* PopoverMenu component
+* Lijst met acties of links in een zwevend paneel, geopend vanuit een
+* triggerknop.
+*
+* Anders dan `Popover` is dit géén dialoogvenster: het paneel heeft geen rol,
+* de inhoud is een gewone lijst (`<ul role="list">`). Ook bewust geen
+* `role="menu"`: die rol belooft pijltjesnavigatie en zet screenreaders in
+* een applicatiemodus. De context komt uit het label van de trigger.
+*
+* Het menu sluit zichzelf zodra een item wordt geactiveerd, en zet de focus
+* dan terug op de trigger.
+*
+* @example
+* ```tsx
+* const triggerRef = useRef<HTMLButtonElement>(null);
+* const [isOpen, setIsOpen] = useState(false);
+*
+* <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Acties</Button>
+* <PopoverMenu isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+*   <MenuButton onClick={edit}>Bewerken</MenuButton>
+*   <MenuButton onClick={duplicate}>Dupliceren</MenuButton>
+* </PopoverMenu>
+* ```
+*/
+const PopoverMenu = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", iconStart = false, onClick, children, ...props }, ref) => {
+	const internalRef = react.default.useRef(null);
+	const popoverRef = ref ?? internalRef;
+	usePopover({
+		popoverRef,
+		triggerRef,
+		isOpen,
+		onClose,
+		placement
+	});
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.target.closest(ITEM_SELECTOR)) onClose?.();
+	};
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-popover-menu", `dsn-popover-menu--placement-${placement}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: popoverRef,
+		popover: "auto",
+		className: classes,
+		onClick: handleClick,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu, {
+			role: "list",
+			iconStart,
+			children
+		})
+	});
+});
+PopoverMenu.displayName = "PopoverMenu";
+//#endregion
 //#region src/File/File.tsx
 /**
 * File component
@@ -5181,11 +5411,16 @@ exports.BreakoutSection = BreakoutSection;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
 exports.Card = Card;
+exports.CardAffordance = CardAffordance;
 exports.CardBody = CardBody;
+exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardGroup = CardGroup;
 exports.CardHeader = CardHeader;
 exports.CardHeading = CardHeading;
+exports.CardLabel = CardLabel;
+exports.CardMeta = CardMeta;
+exports.CardPreHeader = CardPreHeader;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CheckboxOption = CheckboxOption;
@@ -5246,6 +5481,7 @@ exports.PopoverBody = PopoverBody;
 exports.PopoverFooter = PopoverFooter;
 exports.PopoverHeader = PopoverHeader;
 exports.PopoverHeading = PopoverHeading;
+exports.PopoverMenu = PopoverMenu;
 exports.PreHeading = PreHeading;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;