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

package/dist/PasswordInput/PasswordInput2.mjs

@@ -25,8 +25,8 @@ import { jsx } from "react/jsx-runtime";
 * <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);
+const PasswordInput = React.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, inlineSize, autoComplete, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ jsx("input", {
 		ref,
 		type: "password",

package/dist/PasswordInput/PasswordInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput2.mjs","names":[],"sources":["../../src/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './PasswordInput.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"}
+{"version":3,"file":"PasswordInput2.mjs","names":[],"sources":["../../src/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport './PasswordInput.css';\n\n/**\n * Inline-size variants offered by PasswordInput. xs and sm are left out: they\n * are too narrow for the content this field is meant for.\n */\nexport type PasswordInputInlineSize = Exclude<\n  FormControlInlineSize,\n  'xs' | 'sm'\n>;\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   * Inline-size variant for the input (md, lg, xl or full)\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: PasswordInputInlineSize;\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      inlineSize,\n      autoComplete,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-text-input',\n      inlineSize && `dsn-text-input--inline-size-${inlineSize}`,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAa,gBAAgB,MAAM,YAK/B,EACE,uBAAuB,oBACvB,WACA,SACA,YACA,cACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,kBACA,cAAc,+BAA+B,cAC7C,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/Popover/Popover.d.mts

@@ -1,19 +1,6 @@
+import { PopoverPlacement } from "../utils/popover.mjs";
 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.
@@ -31,10 +18,10 @@ interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'child
    * Gewenste plaatsing relatief aan het triggerelement.
    * @default 'bottom'
    */
-  placement?: Placement;
+  placement?: PopoverPlacement;
   /**
-   * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.
-   * Gebruik `aria-labelledby` via context wanneer er wél een heading is.
+   * Toegankelijke naam voor een popover zonder `PopoverHeader`/`PopoverHeading`.
+   * Een zichtbare heading heeft de voorkeur; die koppelt via `aria-labelledby`.
    */
   label?: string;
   /**
@@ -44,21 +31,26 @@ interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'child
 }
 /**
  * Popover component
- * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
+ * Niet-modaal dialoogvenster verankerd aan een triggerelement
+ * (`role="dialog"`, `aria-modal="false"`).
  *
  * Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
  * light-dismiss en top-layer gedrag. Positionering via JavaScript.
  *
+ * Voor een lijst met acties of links: gebruik `PopoverMenu`. Een lijst is
+ * geen dialoogvenster.
+ *
  * @example
  * ```tsx
  * const triggerRef = useRef<HTMLButtonElement>(null);
  * const [isOpen, setIsOpen] = useState(false);
  *
- * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
- * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
- *   <PopoverBody>
- *     <Menu>...</Menu>
- *   </PopoverBody>
+ * <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Filters</Button>
+ * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+ *   <PopoverHeader>
+ *     <PopoverHeading>Filters</PopoverHeading>
+ *   </PopoverHeader>
+ *   <PopoverBody>...</PopoverBody>
  * </Popover>
  * ```
  */
@@ -89,6 +81,7 @@ interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 /**
  * PopoverHeading
  * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+ * Krijgt `tabindex="-1"` zodat de Popover er bij openen de focus op kan zetten.
  */
 declare const PopoverHeading: React.ForwardRefExoticComponent<PopoverHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {

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

@@ -1 +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"}
+{"version":3,"file":"Popover.d.mts","names":[],"sources":["../../src/Popover/Popover.tsx"],"mappings":";;;UA0BiB,qBAAqB,KACpC,MAAM,eAAe;;;;EAMrB;;;;EAKA;;;;EAKA,YAAY,MAAM,UAAU;;;;;EAM5B,YAAY;;;;;EAMZ;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BN,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA;UAqEH,2BAA2B,MAAM,eAAe;;;;;EAK/D,WAAW,MAAM;;;;;;cAON,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAgCT,4BAA4B,MAAM,eAAe;;;;;EAKhE;;;;EAKA,WAAW,MAAM;;;;;;;cAQN,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA;UAyCV,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

@@ -1,80 +1,37 @@
 import { Icon } from "../Icon/Icon2.mjs";
 import { Button } from "../Button/Button2.mjs";
+import { usePopover } from "../utils/popover.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: "" });
+const PopoverContext = React.createContext({
+	headingId: "",
+	headingRef: { current: null }
+});
 /**
 * Popover component
-* Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
+* Niet-modaal dialoogvenster verankerd aan een triggerelement
+* (`role="dialog"`, `aria-modal="false"`).
 *
 * Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
 * light-dismiss en top-layer gedrag. Positionering via JavaScript.
 *
+* Voor een lijst met acties of links: gebruik `PopoverMenu`. Een lijst is
+* geen dialoogvenster.
+*
 * @example
 * ```tsx
 * const triggerRef = useRef<HTMLButtonElement>(null);
 * const [isOpen, setIsOpen] = useState(false);
 *
-* <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
-* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
-*   <PopoverBody>
-*     <Menu>...</Menu>
-*   </PopoverBody>
+* <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Filters</Button>
+* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+*   <PopoverHeader>
+*     <PopoverHeading>Filters</PopoverHeading>
+*   </PopoverHeader>
+*   <PopoverBody>...</PopoverBody>
 * </Popover>
 * ```
 */
@@ -82,71 +39,21 @@ const Popover = React.forwardRef(({ className, isOpen, onClose, triggerRef, plac
 	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,
+	const headingRef = React.useRef(null);
+	usePopover({
+		popoverRef,
 		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
-	]);
+		onClose,
+		placement,
+		initialFocusRef: headingRef
+	});
 	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,
+			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ jsx("div", {
@@ -190,14 +97,21 @@ PopoverHeader.displayName = "PopoverHeader";
 /**
 * PopoverHeading
 * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+* Krijgt `tabindex="-1"` zodat de Popover er bij openen de focus op kan zetten.
 */
 const PopoverHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-	const { headingId } = React.useContext(PopoverContext);
+	const { headingId, headingRef } = React.useContext(PopoverContext);
 	const Tag = `h${level}`;
+	const setRef = React.useCallback((node) => {
+		headingRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [headingRef, ref]);
 	return /* @__PURE__ */ jsx(Tag, {
-		ref,
+		ref: setRef,
 		id: headingId,
 		className: classNames("dsn-popover-heading", className),
+		tabIndex: -1,
 		...props,
 		children
 	});

package/dist/Popover/Popover2.mjs.map

@@ -1 +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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"}
+{"version":3,"file":"Popover2.mjs","names":[],"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 { usePopover, type PopoverPlacement } from '../utils/popover';\nimport './Popover.css';\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface PopoverContextValue {\n  headingId: string;\n  headingRef: React.MutableRefObject<HTMLHeadingElement | null>;\n  onClose?: () => void;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n  headingId: '',\n  headingRef: { current: null },\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?: PopoverPlacement;\n\n  /**\n   * Toegankelijke naam voor een popover zonder `PopoverHeader`/`PopoverHeading`.\n   * Een zichtbare heading heeft de voorkeur; die koppelt via `aria-labelledby`.\n   */\n  label?: string;\n\n  /**\n   * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Popover component\n * Niet-modaal dialoogvenster verankerd aan een triggerelement\n * (`role=\"dialog\"`, `aria-modal=\"false\"`).\n *\n * Gebaseerd op de HTML Popover API (`popover=\"auto\"`) voor ingebakken\n * light-dismiss en top-layer gedrag. Positionering via JavaScript.\n *\n * Voor een lijst met acties of links: gebruik `PopoverMenu`. Een lijst is\n * geen dialoogvenster.\n *\n * @example\n * ```tsx\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Filters</Button>\n * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>\n *   <PopoverHeader>\n *     <PopoverHeading>Filters</PopoverHeading>\n *   </PopoverHeader>\n *   <PopoverBody>...</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    const headingRef = React.useRef<HTMLHeadingElement | null>(null);\n\n    /*\n     * Bij openen krijgt de heading de focus, niet de sluitknop: zo wordt de\n     * titel als eerste voorgelezen, net als bij ModalDialog en Drawer. Zonder\n     * heading krijgt de popover zelf de focus (die heeft `tabindex=\"-1\"`).\n     * Zie docs/decisions/DR-2026-12-dialogs-focus-bij-openen-op-de-heading.md.\n     */\n    usePopover({\n      popoverRef,\n      triggerRef,\n      isOpen,\n      onClose,\n      placement,\n      initialFocusRef: headingRef,\n    });\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, headingRef, 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 * Krijgt `tabindex=\"-1\"` zodat de Popover er bij openen de focus op kan zetten.\n */\nexport const PopoverHeading = React.forwardRef<\n  HTMLHeadingElement,\n  PopoverHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId, headingRef } = React.useContext(PopoverContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  // De Popover heeft de heading nodig om er bij openen de focus op te zetten;\n  // een eventuele meegegeven ref blijft daarnaast gewoon werken.\n  const setRef = React.useCallback(\n    (node: HTMLHeadingElement | null) => {\n      headingRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLHeadingElement | null>).current =\n          node;\n      }\n    },\n    [headingRef, ref]\n  );\n\n  return (\n    <Tag\n      ref={setRef}\n      id={headingId}\n      className={classNames('dsn-popover-heading', className)}\n      tabIndex={-1}\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":";;;;;;;;AAiBA,MAAM,iBAAiB,MAAM,cAAmC;CAC9D,WAAW;CACX,YAAY,EAAE,SAAS,KAAK;AAC9B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AAoED,MAAa,UAAU,MAAM,YAEzB,EACE,WACA,QACA,SACA,YACA,YAAY,UACZ,OACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,OAAuB,IAAI;CACrD,MAAM,aAAc,OAA2C;CAC/D,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,aAAa,MAAM,OAAkC,IAAI;CAQ/D,WAAW;EACT;EACA;EACA;EACA;EACA;EACA,iBAAiB;CACnB,CAAC;CAED,MAAM,UAAU,WACd,eACA,0BAA0B,aAC1B,SACF;CAEA,MAAM,YAAY,QACd,EAAE,cAAc,MAAM,IACtB,EAAE,mBAAmB,UAAU;CAEnC,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;GAAE;GAAW;GAAY;EAAQ;EAC/D,UAAA,oBAAC,OAAD;GACE,KAAK;GACL,SAAQ;GACR,WAAW;GACX,MAAK;GACL,cAAW;GACX,UAAU;GACV,GAAI;GACJ,GAAI;GAEH;EACE,CAAA;CACkB,CAAA;AAE7B,CACF;AAEA,QAAQ,cAAc;;;;;AAkBtB,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,EAAE,YAAY,MAAM,WAAW,cAAc;CAEnD,OACE,qBAAC,OAAD;EACO;EACL,WAAW,WAAW,uBAAuB,SAAS;EACtD,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,SAAS;GACT,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAI,eAAA;GAAa,CAAA;GACxC,UAAA;EAEO,CAAA,CACL;;AAET,CAAC;AAED,cAAc,cAAc;;;;;;AAwB5B,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,WAAW,eAAe,MAAM,WAAW,cAAc;CACjE,MAAM,MAAM,IAAI;CAIhB,MAAM,SAAS,MAAM,aAClB,SAAoC;EACnC,WAAW,UAAU;EACrB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAA2D,UACzD;CAEN,GACA,CAAC,YAAY,GAAG,CAClB;CAEA,OACE,oBAAC,KAAD;EACE,KAAK;EACL,IAAI;EACJ,WAAW,WAAW,uBAAuB,SAAS;EACtD,UAAU;EACV,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,eAAe,cAAc;;;;;AAiB7B,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,qBAAqB,SAAS;EACpD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,YAAY,cAAc;;;;;AAiB1B,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,uBAAuB,SAAS;EACtD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,cAAc,cAAc"}

package/dist/PopoverMenu/PopoverMenu.d.mts

@@ -0,0 +1,62 @@
+import { PopoverPlacement } from "../utils/popover.mjs";
+import React from "react";
+//#region src/PopoverMenu/PopoverMenu.d.ts
+interface PopoverMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Bepaalt of het menu getoond wordt.
+   */
+  isOpen: boolean;
+  /**
+   * Callback bij sluiten: Escape, klik buiten het menu, of het activeren van
+   * een `MenuButton` of `MenuLink`.
+   */
+  onClose?: () => void;
+  /**
+   * Referentie naar het triggerelement voor positionering, `aria-expanded`
+   * en focusherstel.
+   */
+  triggerRef: React.RefObject<HTMLElement>;
+  /**
+   * Gewenste plaatsing relatief aan het triggerelement.
+   * @default 'bottom'
+   */
+  placement?: PopoverPlacement;
+  /**
+   * Doorgegeven aan `Menu`: geeft aan dat de items een `iconStart` hebben.
+   * @default false
+   */
+  iconStart?: boolean;
+  /**
+   * `MenuButton`- en/of `MenuLink`-items
+   */
+  children?: React.ReactNode;
+}
+/**
+ * PopoverMenu component
+ * Lijst met acties of links in een zwevend paneel, geopend vanuit een
+ * triggerknop.
+ *
+ * Anders dan `Popover` is dit géén dialoogvenster: het paneel heeft geen rol,
+ * de inhoud is een gewone lijst (`<ul role="list">`). Ook bewust geen
+ * `role="menu"`: die rol belooft pijltjesnavigatie en zet screenreaders in
+ * een applicatiemodus. De context komt uit het label van de trigger.
+ *
+ * Het menu sluit zichzelf zodra een item wordt geactiveerd, en zet de focus
+ * dan terug op de trigger.
+ *
+ * @example
+ * ```tsx
+ * const triggerRef = useRef<HTMLButtonElement>(null);
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Acties</Button>
+ * <PopoverMenu isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+ *   <MenuButton onClick={edit}>Bewerken</MenuButton>
+ *   <MenuButton onClick={duplicate}>Dupliceren</MenuButton>
+ * </PopoverMenu>
+ * ```
+ */
+declare const PopoverMenu: React.ForwardRefExoticComponent<PopoverMenuProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PopoverMenu, PopoverMenuProps };
+//# sourceMappingURL=PopoverMenu.d.mts.map

package/dist/PopoverMenu/PopoverMenu.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu.d.mts","names":[],"sources":["../../src/PopoverMenu/PopoverMenu.tsx"],"mappings":";;;UAaiB,yBAAyB,KACxC,MAAM,eAAe;;;;EAMrB;;;;;EAMA;;;;;EAMA,YAAY,MAAM,UAAU;;;;;EAM5B,YAAY;;;;;EAMZ;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BN,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/PopoverMenu/PopoverMenu2.mjs

@@ -0,0 +1,66 @@
+import { Menu } from "../Menu/Menu2.mjs";
+import { usePopover } from "../utils/popover.mjs";
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/PopoverMenu/PopoverMenu.tsx
+const ITEM_SELECTOR = ".dsn-menu-button__button, .dsn-menu-link__link";
+/**
+* PopoverMenu component
+* Lijst met acties of links in een zwevend paneel, geopend vanuit een
+* triggerknop.
+*
+* Anders dan `Popover` is dit géén dialoogvenster: het paneel heeft geen rol,
+* de inhoud is een gewone lijst (`<ul role="list">`). Ook bewust geen
+* `role="menu"`: die rol belooft pijltjesnavigatie en zet screenreaders in
+* een applicatiemodus. De context komt uit het label van de trigger.
+*
+* Het menu sluit zichzelf zodra een item wordt geactiveerd, en zet de focus
+* dan terug op de trigger.
+*
+* @example
+* ```tsx
+* const triggerRef = useRef<HTMLButtonElement>(null);
+* const [isOpen, setIsOpen] = useState(false);
+*
+* <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Acties</Button>
+* <PopoverMenu isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+*   <MenuButton onClick={edit}>Bewerken</MenuButton>
+*   <MenuButton onClick={duplicate}>Dupliceren</MenuButton>
+* </PopoverMenu>
+* ```
+*/
+const PopoverMenu = React.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", iconStart = false, onClick, children, ...props }, ref) => {
+	const internalRef = React.useRef(null);
+	const popoverRef = ref ?? internalRef;
+	usePopover({
+		popoverRef,
+		triggerRef,
+		isOpen,
+		onClose,
+		placement
+	});
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.target.closest(ITEM_SELECTOR)) onClose?.();
+	};
+	const classes = classNames("dsn-popover-menu", `dsn-popover-menu--placement-${placement}`, className);
+	return /* @__PURE__ */ jsx("div", {
+		ref: popoverRef,
+		popover: "auto",
+		className: classes,
+		onClick: handleClick,
+		...props,
+		children: /* @__PURE__ */ jsx(Menu, {
+			role: "list",
+			iconStart,
+			children
+		})
+	});
+});
+PopoverMenu.displayName = "PopoverMenu";
+//#endregion
+export { PopoverMenu };
+
+//# sourceMappingURL=PopoverMenu2.mjs.map

package/dist/PopoverMenu/PopoverMenu2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu2.mjs","names":[],"sources":["../../src/PopoverMenu/PopoverMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Menu } from '../Menu';\nimport { usePopover, type PopoverPlacement } from '../utils/popover';\nimport './PopoverMenu.css';\n\n/*\n * Klikken op deze elementen activeert een item en sluit het menu. De\n * uitklapknop van een MenuLink met sub-items staat er bewust niet bij: die\n * toont meer items en is dus geen keuze.\n */\nconst ITEM_SELECTOR = '.dsn-menu-button__button, .dsn-menu-link__link';\n\nexport interface PopoverMenuProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of het menu getoond wordt.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback bij sluiten: Escape, klik buiten het menu, of het activeren van\n   * een `MenuButton` of `MenuLink`.\n   */\n  onClose?: () => void;\n\n  /**\n   * Referentie naar het triggerelement voor positionering, `aria-expanded`\n   * en focusherstel.\n   */\n  triggerRef: React.RefObject<HTMLElement>;\n\n  /**\n   * Gewenste plaatsing relatief aan het triggerelement.\n   * @default 'bottom'\n   */\n  placement?: PopoverPlacement;\n\n  /**\n   * Doorgegeven aan `Menu`: geeft aan dat de items een `iconStart` hebben.\n   * @default false\n   */\n  iconStart?: boolean;\n\n  /**\n   * `MenuButton`- en/of `MenuLink`-items\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverMenu component\n * Lijst met acties of links in een zwevend paneel, geopend vanuit een\n * triggerknop.\n *\n * Anders dan `Popover` is dit géén dialoogvenster: het paneel heeft geen rol,\n * de inhoud is een gewone lijst (`<ul role=\"list\">`). Ook bewust geen\n * `role=\"menu\"`: die rol belooft pijltjesnavigatie en zet screenreaders in\n * een applicatiemodus. De context komt uit het label van de trigger.\n *\n * Het menu sluit zichzelf zodra een item wordt geactiveerd, en zet de focus\n * dan terug op de trigger.\n *\n * @example\n * ```tsx\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <Button ref={triggerRef} onClick={() => setIsOpen((v) => !v)}>Acties</Button>\n * <PopoverMenu isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>\n *   <MenuButton onClick={edit}>Bewerken</MenuButton>\n *   <MenuButton onClick={duplicate}>Dupliceren</MenuButton>\n * </PopoverMenu>\n * ```\n */\nexport const PopoverMenu = React.forwardRef<HTMLDivElement, PopoverMenuProps>(\n  (\n    {\n      className,\n      isOpen,\n      onClose,\n      triggerRef,\n      placement = 'bottom',\n      iconStart = false,\n      onClick,\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\n    usePopover({ popoverRef, triggerRef, isOpen, onClose, placement });\n\n    // Sluit na het activeren van een item. Het eigen onClick van het item is\n    // dan al uitgevoerd, want dit event bubbelt vanaf het item omhoog.\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n      const target = event.target as Element;\n      if (target.closest(ITEM_SELECTOR)) {\n        onClose?.();\n      }\n    };\n\n    const classes = classNames(\n      'dsn-popover-menu',\n      `dsn-popover-menu--placement-${placement}`,\n      className\n    );\n\n    return (\n      <div\n        ref={popoverRef}\n        popover=\"auto\"\n        className={classes}\n        onClick={handleClick}\n        {...props}\n      >\n        <Menu role=\"list\" iconStart={iconStart}>\n          {children}\n        </Menu>\n      </div>\n    );\n  }\n);\n\nPopoverMenu.displayName = 'PopoverMenu';\n"],"mappings":";;;;;;;AAWA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEtB,MAAa,cAAc,MAAM,YAE7B,EACE,WACA,QACA,SACA,YACA,YAAY,UACZ,YAAY,OACZ,SACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,OAAuB,IAAI;CACrD,MAAM,aAAc,OAA2C;CAE/D,WAAW;EAAE;EAAY;EAAY;EAAQ;EAAS;CAAU,CAAC;CAIjE,MAAM,eAAe,UAA4C;EAC/D,UAAU,KAAK;EAEf,IADe,MAAM,OACV,QAAQ,aAAa,GAC9B,UAAU;CAEd;CAEA,MAAM,UAAU,WACd,oBACA,+BAA+B,aAC/B,SACF;CAEA,OACE,oBAAC,OAAD;EACE,KAAK;EACL,SAAQ;EACR,WAAW;EACX,SAAS;EACT,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAM,MAAK;GAAkB;GAC1B;EACG,CAAA;CACH,CAAA;AAET,CACF;AAEA,YAAY,cAAc"}

package/dist/PopoverMenu/index.d.mts

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

package/dist/SearchInput/SearchInput.d.mts

@@ -1,6 +1,11 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/SearchInput/SearchInput.d.ts
+/**
+ * Inline-size variants offered by SearchInput. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type SearchInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   /**
    * Whether the input is in an invalid state
@@ -8,10 +13,10 @@ interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
    */
   invalid?: boolean;
   /**
-   * Width variant for the input
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the input (md, lg, xl or full)
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: SearchInputInlineSize;
   /**
    * Additional CSS class names
    */
@@ -37,5 +42,5 @@ interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
  */
 declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { SearchInput, SearchInputProps };
+export { SearchInput, SearchInputInlineSize, SearchInputProps };
 //# sourceMappingURL=SearchInput.d.mts.map

package/dist/SearchInput/SearchInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.mts","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"mappings":";;;UAKiB,yBAAyB,KACxC,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;;cAqBW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}
+{"version":3,"file":"SearchInput.d.mts","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"mappings":";;;;;;;KASY,wBAAwB,QAAQ;UAE3B,yBAAyB,KACxC,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,aAAa;;;;EAKb;;;;;;;;;;;;;;;;;;;;cAqBW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/SearchInput/SearchInput2.mjs

@@ -22,8 +22,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const SearchInput = React.forwardRef(({ className, invalid, width, ...props }, ref) => {
-	const wrapperClasses = classNames("dsn-search-input-wrapper", width && `dsn-search-input-wrapper--width-${width}`);
+const SearchInput = React.forwardRef(({ className, invalid, inlineSize, ...props }, ref) => {
+	const wrapperClasses = classNames("dsn-search-input-wrapper", inlineSize && `dsn-search-input-wrapper--inline-size-${inlineSize}`);
 	const inputClasses = classNames("dsn-text-input", "dsn-search-input", className);
 	return /* @__PURE__ */ jsxs("div", {
 		className: wrapperClasses,

package/dist/SearchInput/SearchInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.mjs","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './SearchInput.css';\n\nexport interface SearchInputProps 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   * 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 * Search Input component\n * Search input with a non-interactive search icon positioned at inline-start.\n * The icon has the same color as the input text (dsn-text-input-color).\n *\n * @example\n * ```tsx\n * // Basic usage\n * <SearchInput placeholder=\"Zoeken...\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"search\">Zoeken</FormFieldLabel>\n * <SearchInput id=\"search\" />\n *\n * // Invalid state\n * <SearchInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  ({ className, invalid, width, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-search-input-wrapper',\n      width && `dsn-search-input-wrapper--width-${width}`\n    );\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-search-input',\n      className\n    );\n\n    return (\n      <div className={wrapperClasses}>\n        <Icon name=\"search\" className=\"dsn-search-input__icon\" aria-hidden />\n        <input\n          ref={ref}\n          type=\"search\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearchInput.displayName = 'SearchInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,SAAS,OAAO,GAAG,SAAS,QAAQ;CAChD,MAAM,iBAAiB,WACrB,4BACA,SAAS,mCAAmC,OAC9C;CACA,MAAM,eAAe,WACnB,kBACA,oBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAS,WAAU;GAAyB,eAAA;EAAa,CAAA,GACpE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACzB,GAAI;EACL,CAAA,CACE;;AAET,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SearchInput2.mjs","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './SearchInput.css';\n\n/**\n * Inline-size variants offered by SearchInput. xs and sm are left out: they\n * are too narrow for the content this field is meant for.\n */\nexport type SearchInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;\n\nexport interface SearchInputProps 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   * Inline-size variant for the input (md, lg, xl or full)\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: SearchInputInlineSize;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Search Input component\n * Search input with a non-interactive search icon positioned at inline-start.\n * The icon has the same color as the input text (dsn-text-input-color).\n *\n * @example\n * ```tsx\n * // Basic usage\n * <SearchInput placeholder=\"Zoeken...\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"search\">Zoeken</FormFieldLabel>\n * <SearchInput id=\"search\" />\n *\n * // Invalid state\n * <SearchInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  ({ className, invalid, inlineSize, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-search-input-wrapper',\n      inlineSize && `dsn-search-input-wrapper--inline-size-${inlineSize}`\n    );\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-search-input',\n      className\n    );\n\n    return (\n      <div className={wrapperClasses}>\n        <Icon name=\"search\" className=\"dsn-search-input__icon\" aria-hidden />\n        <input\n          ref={ref}\n          type=\"search\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearchInput.displayName = 'SearchInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,SAAS,YAAY,GAAG,SAAS,QAAQ;CACrD,MAAM,iBAAiB,WACrB,4BACA,cAAc,yCAAyC,YACzD;CACA,MAAM,eAAe,WACnB,kBACA,oBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAS,WAAU;GAAyB,eAAA;EAAa,CAAA,GACpE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACzB,GAAI;EACL,CAAA,CACE;;AAET,CACF;AAEA,YAAY,cAAc"}

package/dist/Select/Select.d.mts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/Select/Select.d.ts
 interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
   /**
@@ -8,10 +8,10 @@ interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
    */
   invalid?: boolean;
   /**
-   * Width variant for the select
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the select
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: FormControlInlineSize;
   /**
    * Additional CSS class names
    */
@@ -40,8 +40,8 @@ interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  *   </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>

package/dist/Select/Select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.mts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;UAKiB,oBAAoB,MAAM,qBAAqB;;;;;EAK9D;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCW,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA"}
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;UAKiB,oBAAoB,MAAM,qBAAqB;;;;;EAK9D;;;;;EAMA,aAAa;;;;EAKb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCW,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA"}