@dsn-starter-kit/components-react 2.0.0 → 3.1.0

package/dist/Paragraph/Paragraph.d.mts

@@ -0,0 +1,37 @@
+import React from "react";
+//#region src/Paragraph/Paragraph.d.ts
+type ParagraphVariant = 'default' | 'lead' | 'small-print';
+interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Paragraph visual style
+   * @default 'default'
+   */
+  variant?: ParagraphVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Paragraph content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Paragraph component with multiple variants
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Paragraph>Body text content</Paragraph>
+ *
+ * // Lead paragraph
+ * <Paragraph variant="lead">Introductory text</Paragraph>
+ *
+ * // Small print
+ * <Paragraph variant="small-print">Terms and conditions apply.</Paragraph>
+ * ```
+ */
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Paragraph, ParagraphProps, ParagraphVariant };
+//# sourceMappingURL=Paragraph.d.mts.map

package/dist/Paragraph/Paragraph.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.mts","names":[],"sources":["../../src/Paragraph/Paragraph.tsx"],"mappings":";;KAIY;UAEK,uBAAuB,MAAM,eAAe;;;;;EAK3D,UAAU;;;;EAKV;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;cAkBN,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/Paragraph/Paragraph2.mjs

@@ -0,0 +1,34 @@
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Paragraph/Paragraph.tsx
+/**
+* Paragraph component with multiple variants
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Paragraph>Body text content</Paragraph>
+*
+* // Lead paragraph
+* <Paragraph variant="lead">Introductory text</Paragraph>
+*
+* // Small print
+* <Paragraph variant="small-print">Terms and conditions apply.</Paragraph>
+* ```
+*/
+const Paragraph = React.forwardRef(({ variant = "default", className, children, ...props }, ref) => {
+	const classes = classNames("dsn-paragraph", variant !== "default" && `dsn-paragraph--${variant}`, className);
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+Paragraph.displayName = "Paragraph";
+//#endregion
+export { Paragraph };
+
+//# sourceMappingURL=Paragraph2.mjs.map

package/dist/Paragraph/Paragraph2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph2.mjs","names":[],"sources":["../../src/Paragraph/Paragraph.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Paragraph.css';\n\nexport type ParagraphVariant = 'default' | 'lead' | 'small-print';\n\nexport interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Paragraph visual style\n   * @default 'default'\n   */\n  variant?: ParagraphVariant;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Paragraph content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Paragraph component with multiple variants\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Paragraph>Body text content</Paragraph>\n *\n * // Lead paragraph\n * <Paragraph variant=\"lead\">Introductory text</Paragraph>\n *\n * // Small print\n * <Paragraph variant=\"small-print\">Terms and conditions apply.</Paragraph>\n * ```\n */\nexport const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\n  ({ variant = 'default', className, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-paragraph',\n      variant !== 'default' && `dsn-paragraph--${variant}`,\n      className\n    );\n\n    return (\n      <p ref={ref} className={classes} {...props}>\n        {children}\n      </p>\n    );\n  }\n);\n\nParagraph.displayName = 'Paragraph';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,YAAY,MAAM,YAC5B,EAAE,UAAU,WAAW,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC/D,MAAM,UAAU,WACd,iBACA,YAAY,aAAa,kBAAkB,WAC3C,SACF;CAEA,OACE,oBAAC,KAAD;EAAQ;EAAK,WAAW;EAAS,GAAI;EAClC;CACA,CAAA;AAEP,CACF;AAEA,UAAU,cAAc"}

package/dist/Paragraph/index.d.mts

@@ -0,0 +1,2 @@
+import { Paragraph, ParagraphProps, ParagraphVariant } from "./Paragraph.mjs";
+export { Paragraph, type ParagraphProps, type ParagraphVariant };

package/dist/PasswordInput/PasswordInput.d.mts

@@ -0,0 +1,54 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/PasswordInput/PasswordInput.d.ts
+type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Autocomplete hint for password managers
+   * - 'current-password': voor inlogformulieren (default)
+   * - 'new-password': voor registratie- en wachtwoord wijzigformulieren
+   * - 'off': autocomplete uitschakelen
+   * @default 'current-password'
+   */
+  passwordAutocomplete?: PasswordAutocomplete;
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the input
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Password Input component
+ * Uses type="password" for secure text entry.
+ * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —
+ * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.
+ *
+ * @example
+ * ```tsx
+ * // Login form (current password)
+ * <PasswordInput placeholder="Wachtwoord" />
+ *
+ * // Registration form (new password)
+ * <PasswordInput passwordAutocomplete="new-password" placeholder="Nieuw wachtwoord" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="password">Wachtwoord</FormFieldLabel>
+ * <PasswordInput id="password" />
+ *
+ * // Invalid state
+ * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { PasswordAutocomplete, PasswordInput, PasswordInputProps };
+//# sourceMappingURL=PasswordInput.d.mts.map

package/dist/PasswordInput/PasswordInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.mts","names":[],"sources":["../../src/PasswordInput/PasswordInput.tsx"],"mappings":";;;KAIY;UAEK,2BAA2B,KAC1C,MAAM,oBAAoB;;;;;;;;EAU1B,uBAAuB;;;;;EAMvB;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;;;;;;cAyBW,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/PasswordInput/PasswordInput.mjs

@@ -0,0 +1,43 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/PasswordInput/PasswordInput.tsx
+/**
+* Password Input component
+* Uses type="password" for secure text entry.
+* Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —
+* dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.
+*
+* @example
+* ```tsx
+* // Login form (current password)
+* <PasswordInput placeholder="Wachtwoord" />
+*
+* // Registration form (new password)
+* <PasswordInput passwordAutocomplete="new-password" placeholder="Nieuw wachtwoord" />
+*
+* // With label
+* <FormFieldLabel htmlFor="password">Wachtwoord</FormFieldLabel>
+* <PasswordInput id="password" />
+*
+* // Invalid state
+* <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const PasswordInput = React.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, width, autoComplete, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "password",
+		className: classes,
+		autoComplete: autoComplete || passwordAutocomplete,
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+PasswordInput.displayName = "PasswordInput";
+//#endregion
+export { PasswordInput };
+
+//# sourceMappingURL=PasswordInput.mjs.map

package/dist/PasswordInput/PasswordInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.mjs","names":[],"sources":["../../src/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';\n\nexport interface PasswordInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Autocomplete hint for password managers\n   * - 'current-password': voor inlogformulieren (default)\n   * - 'new-password': voor registratie- en wachtwoord wijzigformulieren\n   * - 'off': autocomplete uitschakelen\n   * @default 'current-password'\n   */\n  passwordAutocomplete?: PasswordAutocomplete;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\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 * Password Input component\n * Uses type=\"password\" for secure text entry.\n * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —\n * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.\n *\n * @example\n * ```tsx\n * // Login form (current password)\n * <PasswordInput placeholder=\"Wachtwoord\" />\n *\n * // Registration form (new password)\n * <PasswordInput passwordAutocomplete=\"new-password\" placeholder=\"Nieuw wachtwoord\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"password\">Wachtwoord</FormFieldLabel>\n * <PasswordInput id=\"password\" />\n *\n * // Invalid state\n * <PasswordInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      passwordAutocomplete = 'current-password',\n      className,\n      invalid,\n      width,\n      autoComplete,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"password\"\n        className={classes}\n        autoComplete={autoComplete || passwordAutocomplete}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nPasswordInput.displayName = 'PasswordInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAa,gBAAgB,MAAM,YAK/B,EACE,uBAAuB,oBACvB,WACA,SACA,OACA,cACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,cAAc,cAAc"}

package/dist/PasswordInput/index.d.mts

@@ -0,0 +1,2 @@
+import { PasswordAutocomplete, PasswordInput, PasswordInputProps } from "./PasswordInput.mjs";
+export { type PasswordAutocomplete, PasswordInput, type PasswordInputProps };

package/dist/Popover/Popover.d.mts

@@ -0,0 +1,118 @@
+import React from "react";
+//#region src/Popover/Popover.d.ts
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    popover?: 'auto' | 'manual' | '' | undefined;
+    popoverTarget?: string | undefined;
+    popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;
+  }
+}
+declare global {
+  interface HTMLElement {
+    showPopover(): void;
+    hidePopover(): void;
+  }
+}
+type Placement = 'top' | 'bottom' | 'start' | 'end';
+interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Bepaalt of de popover getoond wordt.
+   */
+  isOpen: boolean;
+  /**
+   * Callback bij sluiten (Escape, klik buiten, sluitknop in header).
+   */
+  onClose?: () => void;
+  /**
+   * Referentie naar het triggerelement voor positionering en focus-herstel.
+   */
+  triggerRef: React.RefObject<HTMLElement>;
+  /**
+   * Gewenste plaatsing relatief aan het triggerelement.
+   * @default 'bottom'
+   */
+  placement?: Placement;
+  /**
+   * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.
+   * Gebruik `aria-labelledby` via context wanneer er wél een heading is.
+   */
+  label?: string;
+  /**
+   * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`
+   */
+  children?: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Inhoud van de header — doorgaans een `PopoverHeading`.
+   * De sluitknop wordt automatisch geïnjecteerd.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * PopoverHeader
+ * De headerstrook van de popover met heading en sluitknop.
+ */
+declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Semantisch heading-niveau. Kies op basis van documenthiërarchie.
+   * @default 2
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * De zichtbare heading-tekst.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * PopoverHeading
+ * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+declare const PopoverHeading: React.ForwardRefExoticComponent<PopoverHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De hoofdinhoud van de popover — willekeurige slot-content.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * PopoverBody
+ * De inhoudssectie van de popover.
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Actieknoppen of slotzin van de popover.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * PopoverFooter
+ * De voettekst van de popover met actieknoppen.
+ */
+declare const PopoverFooter: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Popover, PopoverBody, PopoverBodyProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverHeading, PopoverHeadingProps, PopoverProps };
+//# sourceMappingURL=Popover.d.mts.map

package/dist/Popover/Popover.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.mts","names":[],"sources":["../../src/Popover/Popover.tsx"],"mappings":";;;YAYY,eAAe;IACvB;IACA;IACA;;;QAQI;YACI;IACR;IACA;;;KAQC;UAwGY,qBAAqB,KACpC,MAAM,eAAe;;;;EAMrB;;;;EAKA;;;;EAKA,YAAY,MAAM,UAAU;;;;;EAM5B,YAAY;;;;;EAMZ;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;cAuBN,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA;UAmIH,2BAA2B,MAAM,eAAe;;;;;EAK/D,WAAW,MAAM;;;;;;cAON,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAgCT,4BAA4B,MAAM,eAAe;;;;;EAKhE;;;;EAKA,WAAW,MAAM;;;;;;cAON,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA;UAyBV,yBAAyB,MAAM,eAAe;;;;EAI7D,WAAW,MAAM;;;;;;cAON,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;UAoBP,2BAA2B,MAAM,eAAe;;;;EAI/D,WAAW,MAAM;;;;;;cAON,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/Popover/Popover2.mjs

@@ -0,0 +1,235 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+/* empty css         */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Popover/Popover.tsx
+const GAP = 4;
+function positionPopover(popover, trigger, placement) {
+	const triggerRect = trigger.getBoundingClientRect();
+	const popoverRect = {
+		width: popover.offsetWidth,
+		height: popover.offsetHeight
+	};
+	const isRTL = document.documentElement.dir === "rtl" || getComputedStyle(trigger).direction === "rtl";
+	let top;
+	let left;
+	switch (placement) {
+		case "bottom":
+			top = triggerRect.bottom + GAP;
+			left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;
+			break;
+		case "top":
+			top = triggerRect.top - popoverRect.height - GAP;
+			left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;
+			break;
+		case "end":
+			top = triggerRect.top;
+			left = isRTL ? triggerRect.left - popoverRect.width - GAP : triggerRect.right + GAP;
+			break;
+		case "start":
+			top = triggerRect.top;
+			left = isRTL ? triggerRect.right + GAP : triggerRect.left - popoverRect.width - GAP;
+			break;
+		default:
+			top = triggerRect.bottom + GAP;
+			left = triggerRect.left;
+	}
+	const margin = 8;
+	left = Math.max(margin, Math.min(left, window.innerWidth - popoverRect.width - margin));
+	top = Math.max(margin, Math.min(top, window.innerHeight - popoverRect.height - margin));
+	popover.style.top = `${top}px`;
+	popover.style.left = `${left}px`;
+	popover.style.right = "auto";
+	popover.style.bottom = "auto";
+}
+function focusFirstInteractive(container) {
+	const selector = [
+		"button:not(:disabled)",
+		"a[href]",
+		"input:not(:disabled)",
+		"select:not(:disabled)",
+		"textarea:not(:disabled)",
+		"[tabindex]:not([tabindex=\"-1\"])"
+	].join(", ");
+	const first = container.querySelector(selector);
+	if (first) first.focus();
+	else container.focus();
+}
+const PopoverContext = React.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>
+* ```
+*/
+const Popover = React.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", label, children, ...props }, ref) => {
+	const internalRef = React.useRef(null);
+	const popoverRef = ref ?? internalRef;
+	const headingId = React.useId();
+	React.useEffect(() => {
+		const el = popoverRef.current;
+		if (!el) return;
+		if (isOpen) {
+			el.showPopover();
+			const trigger = triggerRef.current;
+			if (trigger) positionPopover(el, trigger, placement);
+			focusFirstInteractive(el);
+		} else try {
+			el.hidePopover();
+		} catch {}
+	}, [
+		isOpen,
+		placement,
+		triggerRef,
+		popoverRef
+	]);
+	React.useEffect(() => {
+		const trigger = triggerRef.current;
+		if (!trigger) return;
+		trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+		return () => {
+			trigger.setAttribute("aria-expanded", "false");
+		};
+	}, [isOpen, triggerRef]);
+	const onCloseRef = React.useRef(onClose);
+	onCloseRef.current = onClose;
+	React.useEffect(() => {
+		const el = popoverRef.current;
+		if (!el) return;
+		const handleToggle = (event) => {
+			if (event.newState === "closed") {
+				onCloseRef.current?.();
+				triggerRef.current?.focus();
+			}
+		};
+		el.addEventListener("toggle", handleToggle);
+		return () => {
+			el.removeEventListener("toggle", handleToggle);
+		};
+	}, [triggerRef, popoverRef]);
+	React.useEffect(() => {
+		if (!isOpen) return;
+		const el = popoverRef.current;
+		if (!el) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (el.contains(target) || triggerRef.current?.contains(target)) return;
+			onCloseRef.current?.();
+			triggerRef.current?.focus();
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [
+		isOpen,
+		triggerRef,
+		popoverRef
+	]);
+	const classes = classNames("dsn-popover", `dsn-popover--placement-${placement}`, className);
+	const ariaProps = label ? { "aria-label": label } : { "aria-labelledby": headingId };
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value: {
+			headingId,
+			onClose
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: popoverRef,
+			popover: "auto",
+			className: classes,
+			role: "dialog",
+			"aria-modal": "false",
+			tabIndex: -1,
+			...ariaProps,
+			...props,
+			children
+		})
+	});
+});
+Popover.displayName = "Popover";
+/**
+* PopoverHeader
+* De headerstrook van de popover met heading en sluitknop.
+*/
+const PopoverHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { onClose } = React.useContext(PopoverContext);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("dsn-popover__header", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "small",
+			iconOnly: true,
+			onClick: onClose,
+			iconStart: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
+				"aria-hidden": true
+			}),
+			children: "Sluiten"
+		})]
+	});
+});
+PopoverHeader.displayName = "PopoverHeader";
+/**
+* PopoverHeading
+* De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+*/
+const PopoverHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+	const { headingId } = React.useContext(PopoverContext);
+	const Tag = `h${level}`;
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		id: headingId,
+		className: classNames("dsn-popover-heading", className),
+		...props,
+		children
+	});
+});
+PopoverHeading.displayName = "PopoverHeading";
+/**
+* PopoverBody
+* De inhoudssectie van de popover.
+*/
+const PopoverBody = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-popover__body", className),
+		...props,
+		children
+	});
+});
+PopoverBody.displayName = "PopoverBody";
+/**
+* PopoverFooter
+* De voettekst van de popover met actieknoppen.
+*/
+const PopoverFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-popover__footer", className),
+		...props,
+		children
+	});
+});
+PopoverFooter.displayName = "PopoverFooter";
+//#endregion
+export { Popover, PopoverBody, PopoverFooter, PopoverHeader, PopoverHeading };
+
+//# sourceMappingURL=Popover2.mjs.map

package/dist/Popover/Popover2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover2.mjs","names":["toggleEvent"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './Popover.css';\n\n/*\n * React 18 ondersteunt het `popover`-attribuut en `onToggle` niet natively in de\n * JSX-types. Module-uitbreiding voegt de ontbrekende types toe.\n */\ndeclare module 'react' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface HTMLAttributes<T> {\n    popover?: 'auto' | 'manual' | '' | undefined;\n    popoverTarget?: string | undefined;\n    popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;\n  }\n}\n\n/*\n * HTMLElement.showPopover / hidePopover zijn nog niet in alle TypeScript DOM-libs.\n * Declaratie toegevoegd voor veilig gebruik.\n */\ndeclare global {\n  interface HTMLElement {\n    showPopover(): void;\n    hidePopover(): void;\n  }\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype Placement = 'top' | 'bottom' | 'start' | 'end';\n\n// =============================================================================\n// Positioneringshelper\n// =============================================================================\n\nconst GAP = 4; // px afstand tussen trigger en popover\n\nfunction positionPopover(\n  popover: HTMLElement,\n  trigger: HTMLElement,\n  placement: Placement\n): void {\n  const triggerRect = trigger.getBoundingClientRect();\n  // offsetWidth/offsetHeight — onaangepast door CSS transforms (zoals @starting-style scale).\n  // getBoundingClientRect geeft de getransformeerde afmetingen, wat leidt tot onjuiste clamping.\n  const popoverWidth = popover.offsetWidth;\n  const popoverHeight = popover.offsetHeight;\n  const popoverRect = { width: popoverWidth, height: popoverHeight };\n  const isRTL =\n    document.documentElement.dir === 'rtl' ||\n    getComputedStyle(trigger).direction === 'rtl';\n\n  let top: number;\n  let left: number;\n\n  switch (placement) {\n    case 'bottom':\n      top = triggerRect.bottom + GAP;\n      left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;\n      break;\n    case 'top':\n      top = triggerRect.top - popoverRect.height - GAP;\n      left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;\n      break;\n    case 'end':\n      top = triggerRect.top;\n      left = isRTL\n        ? triggerRect.left - popoverRect.width - GAP\n        : triggerRect.right + GAP;\n      break;\n    case 'start':\n      top = triggerRect.top;\n      left = isRTL\n        ? triggerRect.right + GAP\n        : triggerRect.left - popoverRect.width - GAP;\n      break;\n    default:\n      top = triggerRect.bottom + GAP;\n      left = triggerRect.left;\n  }\n\n  // Klamp binnen het viewport (8px marge)\n  const margin = 8;\n  left = Math.max(\n    margin,\n    Math.min(left, window.innerWidth - popoverRect.width - margin)\n  );\n  top = Math.max(\n    margin,\n    Math.min(top, window.innerHeight - popoverRect.height - margin)\n  );\n\n  popover.style.top = `${top}px`;\n  popover.style.left = `${left}px`;\n  popover.style.right = 'auto';\n  popover.style.bottom = 'auto';\n}\n\n// Zet focus op het eerste interactieve element in de popover\nfunction focusFirstInteractive(container: HTMLElement): void {\n  const selector = [\n    'button:not(:disabled)',\n    'a[href]',\n    'input:not(:disabled)',\n    'select:not(:disabled)',\n    'textarea:not(:disabled)',\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ].join(', ');\n  const first = container.querySelector<HTMLElement>(selector);\n  if (first) {\n    first.focus();\n  } else {\n    container.focus();\n  }\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface PopoverContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// Popover (root)\n// =============================================================================\n\nexport interface PopoverProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of de popover getoond wordt.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback bij sluiten (Escape, klik buiten, sluitknop in header).\n   */\n  onClose?: () => void;\n\n  /**\n   * Referentie naar het triggerelement voor positionering en focus-herstel.\n   */\n  triggerRef: React.RefObject<HTMLElement>;\n\n  /**\n   * Gewenste plaatsing relatief aan het triggerelement.\n   * @default 'bottom'\n   */\n  placement?: Placement;\n\n  /**\n   * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.\n   * Gebruik `aria-labelledby` via context wanneer er wél een heading is.\n   */\n  label?: string;\n\n  /**\n   * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Popover component\n * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.\n *\n * Gebaseerd op de HTML Popover API (`popover=\"auto\"`) voor ingebakken\n * light-dismiss en top-layer gedrag. Positionering via JavaScript.\n *\n * @example\n * ```tsx\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>\n * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label=\"Opties\">\n *   <PopoverBody>\n *     <Menu>...</Menu>\n *   </PopoverBody>\n * </Popover>\n * ```\n */\nexport const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      className,\n      isOpen,\n      onClose,\n      triggerRef,\n      placement = 'bottom',\n      label,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const popoverRef = (ref as React.RefObject<HTMLDivElement>) ?? internalRef;\n    const headingId = React.useId();\n\n    // Toon/verberg popover via de Popover API\n    React.useEffect(() => {\n      const el = popoverRef.current;\n      if (!el) return;\n\n      if (isOpen) {\n        el.showPopover();\n        const trigger = triggerRef.current;\n        if (trigger) {\n          positionPopover(el, trigger, placement);\n        }\n        focusFirstInteractive(el);\n      } else {\n        // hidePopover gooit een fout als de popover al gesloten is\n        try {\n          el.hidePopover();\n        } catch {\n          // popover was al gesloten — geen actie nodig\n        }\n      }\n    }, [isOpen, placement, triggerRef, popoverRef]);\n\n    // Synchroniseer aria-expanded op het triggerelement\n    React.useEffect(() => {\n      const trigger = triggerRef.current;\n      if (!trigger) return;\n      trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n      return () => {\n        trigger.setAttribute('aria-expanded', 'false');\n      };\n    }, [isOpen, triggerRef]);\n\n    // Verwerk het toggle-event van de Popover API (Escape / klik buiten binnen hetzelfde document)\n    // onToggle is niet beschikbaar als JSX-prop op div in React 18 — gebruik addEventListener.\n    // Gebruik een ref voor onClose zodat de listener stabiel blijft en nooit stale is.\n    const onCloseRef = React.useRef(onClose);\n    onCloseRef.current = onClose;\n\n    React.useEffect(() => {\n      const el = popoverRef.current;\n      if (!el) return;\n\n      const handleToggle = (event: Event) => {\n        const toggleEvent = event as Event & { newState?: string };\n        if (toggleEvent.newState === 'closed') {\n          onCloseRef.current?.();\n          triggerRef.current?.focus();\n        }\n      };\n\n      el.addEventListener('toggle', handleToggle);\n      return () => {\n        el.removeEventListener('toggle', handleToggle);\n      };\n    }, [triggerRef, popoverRef]);\n\n    // Fallback light-dismiss via pointerdown — vangt klikken buiten het popover op\n    // in contexten waar de Popover API's native light-dismiss niet bereikbaar is\n    // (bijv. iframe-grenzen, of oudere browsers zonder Popover API).\n    React.useEffect(() => {\n      if (!isOpen) return;\n      const el = popoverRef.current;\n      if (!el) return;\n\n      const handlePointerDown = (event: PointerEvent) => {\n        const target = event.target as Node;\n        // Sluit niet als er op de popover zelf of het triggerelement geklikt wordt\n        if (el.contains(target) || triggerRef.current?.contains(target)) return;\n        onCloseRef.current?.();\n        triggerRef.current?.focus();\n      };\n\n      document.addEventListener('pointerdown', handlePointerDown);\n      return () => {\n        document.removeEventListener('pointerdown', handlePointerDown);\n      };\n    }, [isOpen, triggerRef, popoverRef]);\n\n    const classes = classNames(\n      'dsn-popover',\n      `dsn-popover--placement-${placement}`,\n      className\n    );\n\n    const ariaProps = label\n      ? { 'aria-label': label }\n      : { 'aria-labelledby': headingId };\n\n    return (\n      <PopoverContext.Provider value={{ headingId, onClose }}>\n        <div\n          ref={popoverRef}\n          popover=\"auto\"\n          className={classes}\n          role=\"dialog\"\n          aria-modal=\"false\"\n          tabIndex={-1}\n          {...ariaProps}\n          {...props}\n        >\n          {children}\n        </div>\n      </PopoverContext.Provider>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\n// =============================================================================\n// PopoverHeader\n// =============================================================================\n\nexport interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `PopoverHeading`.\n   * De sluitknop wordt automatisch geïnjecteerd.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverHeader\n * De headerstrook van de popover met heading en sluitknop.\n */\nexport const PopoverHeader = React.forwardRef<\n  HTMLDivElement,\n  PopoverHeaderProps\n>(({ className, children, ...props }, ref) => {\n  const { onClose } = React.useContext(PopoverContext);\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-popover__header', className)}\n      {...props}\n    >\n      {children}\n      <Button\n        variant=\"subtle\"\n        size=\"small\"\n        iconOnly\n        onClick={onClose}\n        iconStart={<Icon name=\"x\" aria-hidden />}\n      >\n        Sluiten\n      </Button>\n    </div>\n  );\n});\n\nPopoverHeader.displayName = 'PopoverHeader';\n\n// =============================================================================\n// PopoverHeading\n// =============================================================================\n\nexport interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverHeading\n * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const PopoverHeading = React.forwardRef<\n  HTMLHeadingElement,\n  PopoverHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(PopoverContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-popover-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nPopoverHeading.displayName = 'PopoverHeading';\n\n// =============================================================================\n// PopoverBody\n// =============================================================================\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van de popover — willekeurige slot-content.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverBody\n * De inhoudssectie van de popover.\n */\nexport const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-popover__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nPopoverBody.displayName = 'PopoverBody';\n\n// =============================================================================\n// PopoverFooter\n// =============================================================================\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Actieknoppen of slotzin van de popover.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverFooter\n * De voettekst van de popover met actieknoppen.\n */\nexport const PopoverFooter = React.forwardRef<\n  HTMLDivElement,\n  PopoverFooterProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-popover__footer', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nPopoverFooter.displayName = 'PopoverFooter';\n"],"mappings":"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"}

package/dist/Popover/index.d.mts

@@ -0,0 +1,2 @@
+import { Popover, PopoverBody, PopoverBodyProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverHeading, PopoverHeadingProps, PopoverProps } from "./Popover.mjs";
+export { Popover, PopoverBody, type PopoverBodyProps, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, PopoverHeading, type PopoverHeadingProps, type PopoverProps };

package/dist/PreHeading/PreHeading.d.mts

@@ -0,0 +1,10 @@
+import React from "react";
+//#region src/PreHeading/PreHeading.d.ts
+interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+declare const PreHeading: React.ForwardRefExoticComponent<PreHeadingProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { PreHeading, PreHeadingProps };
+//# sourceMappingURL=PreHeading.d.mts.map

package/dist/PreHeading/PreHeading.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreHeading.d.mts","names":[],"sources":["../../src/PreHeading/PreHeading.tsx"],"mappings":";;UAIiB,wBAAwB,MAAM,eAAe;EAC5D,WAAW,MAAM;EACjB;;cAGW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/PreHeading/PreHeading2.mjs

@@ -0,0 +1,18 @@
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/PreHeading/PreHeading.tsx
+const PreHeading = React.forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classNames("dsn-pre-heading", className),
+		...props,
+		children
+	});
+});
+PreHeading.displayName = "PreHeading";
+//#endregion
+export { PreHeading };
+
+//# sourceMappingURL=PreHeading2.mjs.map

package/dist/PreHeading/PreHeading2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreHeading2.mjs","names":[],"sources":["../../src/PreHeading/PreHeading.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PreHeading.css';\n\nexport interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const PreHeading = React.forwardRef<HTMLSpanElement, PreHeadingProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={classNames('dsn-pre-heading', className)}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nPreHeading.displayName = 'PreHeading';\n"],"mappings":";;;;;AASA,MAAa,aAAa,MAAM,YAC7B,EAAE,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,QAAD;EACO;EACL,WAAW,WAAW,mBAAmB,SAAS;EAClD,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,WAAW,cAAc"}

package/dist/PreHeading/index.d.mts

@@ -0,0 +1,2 @@
+import { PreHeading, PreHeadingProps } from "./PreHeading.mjs";
+export { PreHeading, type PreHeadingProps };