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

package/dist/Select/Select2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select2.mjs","names":[],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './Select.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Whether the select is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the select\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Select component\n * Dropdown select with a custom chevron-down icon at inline-end.\n * The native select arrow is hidden; the custom icon is decorative and non-interactive.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Select>\n *   <option value=\"\">Kies een optie</option>\n *   <option value=\"1\">Optie 1</option>\n *   <option value=\"2\">Optie 2</option>\n * </Select>\n *\n * // With label\n * <FormField label=\"Land\" htmlFor=\"land\">\n *   <Select id=\"land\">\n *     <option value=\"\">Kies een land</option>\n *     <option value=\"nl\">Nederland</option>\n *     <option value=\"be\">België</option>\n *   </Select>\n * </FormField>\n *\n * // Width variant\n * <Select width=\"lg\">...</Select>\n *\n * // Invalid state\n * <Select invalid aria-invalid=\"true\" aria-describedby=\"error\">...</Select>\n * ```\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, invalid, width, disabled, children, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-select-wrapper',\n      width && `dsn-select-wrapper--width-${width}`\n    );\n\n    const selectClasses = classNames('dsn-text-input', 'dsn-select', className);\n\n    return (\n      <div className={wrapperClasses}>\n        <select\n          ref={ref}\n          className={selectClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          {...props}\n        >\n          {children}\n        </select>\n        {!disabled && (\n          <Icon name=\"chevron-down\" className=\"dsn-select__icon\" aria-hidden />\n        )}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,SAAS,MAAM,YACzB,EAAE,WAAW,SAAS,OAAO,UAAU,UAAU,GAAG,SAAS,QAAQ;CACpE,MAAM,iBAAiB,WACrB,sBACA,SAAS,6BAA6B,OACxC;CAEA,MAAM,gBAAgB,WAAW,kBAAkB,cAAc,SAAS;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,UAAD;GACO;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACV,GAAI;GAEH;EACK,CAAA,GACP,CAAC,YACA,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;GAAmB,eAAA;EAAa,CAAA,CAEnE;;AAET,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Select2.mjs","names":[],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Select.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Whether the select is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the select\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Select component\n * Dropdown select with a custom chevron-down icon at inline-end.\n * The native select arrow is hidden; the custom icon is decorative and non-interactive.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Select>\n *   <option value=\"\">Kies een optie</option>\n *   <option value=\"1\">Optie 1</option>\n *   <option value=\"2\">Optie 2</option>\n * </Select>\n *\n * // With label\n * <FormField label=\"Land\" htmlFor=\"land\">\n *   <Select id=\"land\">\n *     <option value=\"\">Kies een land</option>\n *     <option value=\"nl\">Nederland</option>\n *     <option value=\"be\">België</option>\n *   </Select>\n * </FormField>\n *\n * // Width variant\n * <Select width=\"lg\">...</Select>\n *\n * // Invalid state\n * <Select invalid aria-invalid=\"true\" aria-describedby=\"error\">...</Select>\n * ```\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, invalid, width, disabled, children, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-select-wrapper',\n      width && `dsn-select-wrapper--width-${width}`\n    );\n\n    const selectClasses = classNames('dsn-text-input', 'dsn-select', className);\n\n    return (\n      <div className={wrapperClasses}>\n        <select\n          ref={ref}\n          className={selectClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          {...props}\n        >\n          {children}\n        </select>\n        {!disabled && (\n          <Icon name=\"chevron-down\" className=\"dsn-select__icon\" aria-hidden />\n        )}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,SAAS,MAAM,YACzB,EAAE,WAAW,SAAS,OAAO,UAAU,UAAU,GAAG,SAAS,QAAQ;CACpE,MAAM,iBAAiB,WACrB,sBACA,SAAS,6BAA6B,OACxC;CAEA,MAAM,gBAAgB,WAAW,kBAAkB,cAAc,SAAS;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,UAAD;GACO;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACV,GAAI;GAEH;EACK,CAAA,GACP,CAAC,YACA,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;GAAmB,eAAA;EAAa,CAAA,CAEnE;;AAET,CACF;AAEA,OAAO,cAAc"}

package/dist/TimeInput/TimeInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.mts","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"mappings":";;UAOiB,uBAAuB,KACtC,MAAM,oBAAoB;;;;;EAO1B;;;;EAKA;;;;;;;;;;;;;;;;;;;;;;;cAwBW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}
+{"version":3,"file":"TimeInput.d.mts","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"mappings":";;UAMiB,uBAAuB,KACtC,MAAM,oBAAoB;;;;;EAO1B;;;;EAKA;;;;;;;;;;;;;;;;;;;;;;;cAwBW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/TimeInput/TimeInput2.mjs

@@ -1,6 +1,5 @@
 import { Icon } from "../Icon/Icon2.mjs";
 import { Button } from "../Button/Button2.mjs";
-/* empty css                      */
 /* empty css           */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";

package/dist/TimeInput/TimeInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/index.cjs

@@ -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
 	});
@@ -3827,6 +3945,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", {
@@ -4490,13 +4609,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 +4640,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 +4670,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 +4678,7 @@ const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, chil
 			className: classes,
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
+			tabIndex: -1,
 			...props,
 			children
 		})
@@ -4574,14 +4712,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
 	});