@dsn-starter-kit/components-react 3.4.0 → 4.0.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,
@@ -3431,8 +3431,106 @@ const PageFooter = react.default.forwardRef(({ className, slot1, slot2, slot3, s
 });
 PageFooter.displayName = "PageFooter";
 //#endregion
+//#region src/utils/focusTrap.ts
+/**
+* Focus-trap hulpfuncties voor dialoogachtige componenten.
+*
+* Gebaseerd op de techniek van Hidde de Vries:
+* https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
+*
+* Het native `<dialog>` element trapt de focus zelf zodra het via `.showModal()`
+* geopend wordt. Die native trap is echter niet overal betrouwbaar: zodra het
+* dialoogvenster in een `<iframe>` staat (Storybook, embeds, previews) laat
+* Safari de focus alsnog over de iframe-grens ontsnappen naar de pagina
+* eromheen. Deze expliciete trap staat daarbovenop en maakt het gedrag
+* browseronafhankelijk.
+*/
+/**
+* Selector voor elementen die standaard in de tabvolgorde staan.
+* Uitgeschakelde controls en `tabindex="-1"` vallen er bewust buiten.
+*/
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"area[href]",
+	"button:not(:disabled)",
+	"input:not(:disabled):not([type=\"hidden\"])",
+	"select:not(:disabled)",
+	"textarea:not(:disabled)",
+	"details > summary:first-of-type",
+	"iframe",
+	"audio[controls]",
+	"video[controls]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not([tabindex^=\"-\"])"
+].join(", ");
+/**
+* Elementen die de focus niet kunnen krijgen omdat ze (of een voorouder)
+* verborgen of inert zijn. `[hidden]` en `[inert]` halen een element uit de
+* tabvolgorde, `[aria-hidden="true"]` hoort geen focusbare inhoud te bevatten.
+*/
+function isReachable(element) {
+	return !element.closest("[hidden], [inert], [aria-hidden=\"true\"]");
+}
+/**
+* Alle bereikbare focusbare elementen binnen een container, in DOM-volgorde.
+*
+* De trap staat of valt met die volgorde: het eerste en het laatste element
+* bepalen waar Tab en Shift+Tab omslaan. Daarom lopen we alle elementen langs
+* en toetsen we ze met `matches`, in plaats van `querySelectorAll` met de hele
+* selectorlijst. Browsers geven daar documentvolgorde bij terug, maar jsdom
+* groepeert het resultaat per losse selector, en dan zou de trap in tests
+* ander gedrag vertonen dan in het echt.
+*/
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll("*")).filter((element) => element.matches(FOCUSABLE_SELECTOR) && isReachable(element));
+}
+/**
+* Houdt de toetsenbordfocus binnen `containerRef` zolang `active` waar is.
+*
+* De listener hangt aan de container zelf, niet aan het document: hij grijpt
+* alleen in wanneer de focus al binnen de container zit, en laat de rest van de
+* pagina met rust.
+*
+* Elementen met `tabindex="-1"` (zoals de heading die bij openen focus krijgt)
+* staan niet in de tabvolgorde. Vanaf zo'n element wrapt Shift+Tab naar het
+* laatste focusbare element, zodat de focus ook daar niet naar buiten valt.
+*/
+function useFocusTrap(containerRef, active) {
+	react.default.useEffect(() => {
+		if (!active) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const focusable = getFocusableElements(container);
+			if (focusable.length === 0) {
+				event.preventDefault();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const current = document.activeElement;
+			const isInTabOrder = current ? focusable.includes(current) : false;
+			if (event.shiftKey) {
+				if (current === first || !isInTabOrder) {
+					event.preventDefault();
+					last.focus();
+				}
+			} else if (current === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		container.addEventListener("keydown", handleKeyDown);
+		return () => container.removeEventListener("keydown", handleKeyDown);
+	}, [active, containerRef]);
+}
+//#endregion
 //#region src/Drawer/Drawer.tsx
-const DrawerContext = react.default.createContext({ headingId: "" });
+const DrawerContext = react.default.createContext({
+	headingId: "",
+	headingRef: { current: null }
+});
 /**
 * Drawer component
 * Zijpaneel dat vanuit links of rechts de viewport inschuift.
@@ -3459,22 +3557,33 @@ const DrawerContext = react.default.createContext({ headingId: "" });
 * </Drawer>
 * ```
 */
-const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = true, side = "right", children, ...props }, ref) => {
+const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = true, triggerRef, side = "right", children, ...props }, ref) => {
 	const internalRef = react.default.useRef(null);
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
+	const headingRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
 		if (!dialog) return;
 		if (isOpen && !dialog.open) {
 			if (modal) dialog.showModal();
 			else dialog.show();
+			(headingRef.current ?? dialog).focus();
 		} else if (!isOpen && dialog.open) dialog.close();
 	}, [
 		isOpen,
 		modal,
 		dialogRef
 	]);
+	useFocusTrap(dialogRef, isOpen && modal);
+	react.default.useEffect(() => {
+		const trigger = triggerRef?.current;
+		if (!trigger) return;
+		trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+		return () => {
+			trigger.setAttribute("aria-expanded", "false");
+		};
+	}, [isOpen, triggerRef]);
 	react.default.useEffect(() => {
 		if (modal) return;
 		const dialog = dialogRef.current;
@@ -3498,6 +3607,7 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext.Provider, {
 		value: {
 			headingId,
+			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
@@ -3505,6 +3615,7 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 			className: classes,
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
+			tabIndex: -1,
 			...props,
 			children
 		})
@@ -3538,14 +3649,21 @@ DrawerHeader.displayName = "DrawerHeader";
 /**
 * DrawerHeading
 * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
+* Krijgt `tabindex="-1"` zodat de Drawer er bij openen de focus op kan zetten.
 */
 const DrawerHeading = react.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-	const { headingId } = react.default.useContext(DrawerContext);
+	const { headingId, headingRef } = react.default.useContext(DrawerContext);
 	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-drawer-heading", className),
+		tabIndex: -1,
 		...props,
 		children
 	});
@@ -3579,6 +3697,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.
@@ -3626,11 +3748,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);
@@ -3827,6 +3962,7 @@ const PageHeader = react.default.forwardRef(({ className, logoSlot, sticky = "no
 		isOpen: isMenuOpen,
 		onClose: handleMenuClose,
 		side: "left",
+		triggerRef: menuButtonRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerHeading, { children: menuButtonLabel }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
 			space: "5xl",
 			children: [primaryNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
@@ -4375,22 +4511,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>
 * ```
@@ -4408,13 +4551,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",
@@ -4422,10 +4566,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", {
@@ -4439,7 +4597,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) => {
@@ -4447,21 +4605,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", {
@@ -4473,6 +4677,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.
@@ -4490,13 +4709,18 @@ const CardGroup = react.default.forwardRef(({ className, as: Tag = "ul", childre
 CardGroup.displayName = "CardGroup";
 //#endregion
 //#region src/ModalDialog/ModalDialog.tsx
-const ModalDialogContext = react.default.createContext({ headingId: "" });
+const ModalDialogContext = react.default.createContext({
+	headingId: "",
+	headingRef: { current: null }
+});
 /**
 * ModalDialog component
 * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
 *
-* Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
-* Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
+* Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop), nooit `.show()`.
+* Dit garandeert aria-modal semantiek en het inert-attribuut op de achtergrond.
+* De focus blijft binnen het venster via de native focus-trap plus een
+* expliciete trap, en komt bij openen op de heading te staan.
 *
 * @example
 * ```tsx
@@ -4516,16 +4740,28 @@ const ModalDialogContext = react.default.createContext({ headingId: "" });
 * </ModalDialog>
 * ```
 */
-const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, children, ...props }, ref) => {
+const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, children, ...props }, ref) => {
 	const internalRef = react.default.useRef(null);
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
+	const headingRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
 		if (!dialog) return;
-		if (isOpen && !dialog.open) dialog.showModal();
-		else if (!isOpen && dialog.open) dialog.close();
+		if (isOpen && !dialog.open) {
+			dialog.showModal();
+			(headingRef.current ?? dialog).focus();
+		} else if (!isOpen && dialog.open) dialog.close();
 	}, [isOpen, dialogRef]);
+	useFocusTrap(dialogRef, isOpen);
+	react.default.useEffect(() => {
+		const trigger = triggerRef?.current;
+		if (!trigger) return;
+		trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+		return () => {
+			trigger.setAttribute("aria-expanded", "false");
+		};
+	}, [isOpen, triggerRef]);
 	const handleCancel = (event) => {
 		event.preventDefault();
 		onClose?.();
@@ -4534,6 +4770,7 @@ const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, chil
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalDialogContext.Provider, {
 		value: {
 			headingId,
+			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
@@ -4541,6 +4778,7 @@ const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, chil
 			className: classes,
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
+			tabIndex: -1,
 			...props,
 			children
 		})
@@ -4574,14 +4812,21 @@ ModalDialogHeader.displayName = "ModalDialogHeader";
 /**
 * ModalDialogHeading
 * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
+* Krijgt `tabindex="-1"` zodat het ModalDialog er bij openen de focus op kan zetten.
 */
 const ModalDialogHeading = react.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-	const { headingId } = react.default.useContext(ModalDialogContext);
+	const { headingId, headingRef } = react.default.useContext(ModalDialogContext);
 	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-modal-dialog-heading", className),
+		tabIndex: -1,
 		...props,
 		children
 	});
@@ -5036,11 +5281,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;