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

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/ActionGroup/ActionGroup.d.ts
 interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {
   /**
@@ -927,10 +927,10 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    */
   invalid?: boolean;
   /**
-   * Width variant for the input
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the input
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: FormControlInlineSize;
 }
 /**
  * Text Input component
@@ -993,6 +993,11 @@ interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/EmailInput/EmailInput.d.ts
+/**
+ * Inline-size variants offered by EmailInput. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type EmailInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface EmailInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   /**
    * Whether the input is in an invalid state
@@ -1000,10 +1005,10 @@ interface EmailInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
    */
   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?: EmailInputInlineSize;
   /**
    * Additional CSS class names
    */
@@ -1029,6 +1034,11 @@ interface EmailInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
 declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/PasswordInput/PasswordInput.d.ts
+/**
+ * Inline-size variants offered by PasswordInput. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type PasswordInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   /**
@@ -1045,10 +1055,10 @@ interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
    */
   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?: PasswordInputInlineSize;
   /**
    * Additional CSS class names
    */
@@ -1086,10 +1096,10 @@ interface NumberInputProps 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
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: FormControlInlineSize;
   /**
    * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:
    * inputmode="numeric" + pattern="[0-9]*" for a numeric-only keyboard.
@@ -1122,6 +1132,11 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/TelephoneInput/TelephoneInput.d.ts
+/**
+ * Inline-size variants offered by TelephoneInput. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type TelephoneInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   /**
    * Whether the input is in an invalid state
@@ -1129,10 +1144,10 @@ interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
    */
   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 'md'
    */
-  width?: FormControlWidth;
+  inlineSize?: TelephoneInputInlineSize;
   /**
    * Additional CSS class names
    */
@@ -1158,6 +1173,11 @@ interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
 declare const TelephoneInput: React.ForwardRefExoticComponent<TelephoneInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#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
@@ -1165,10 +1185,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
    */
@@ -1209,7 +1229,7 @@ interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 /**
  * Time Input component
  * Time input with an interactive clock button at inline-end that opens the native time picker.
- * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+ * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
  *
  * @example
  * ```tsx
@@ -1244,7 +1264,7 @@ interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 /**
  * Date Input component
  * Date input with an interactive calendar button at inline-end that opens the native date picker.
- * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+ * Fixed inline-size (md): not configurable, as date inputs have a predictable content length.
  *
  * @example
  * ```tsx
@@ -1336,10 +1356,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
    */
@@ -1368,8 +1388,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>
@@ -1378,6 +1398,11 @@ interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 //#endregion
 //#region src/TextArea/TextArea.d.ts
+/**
+ * Inline-size variants offered by TextArea. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type TextAreaInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Additional CSS class names
@@ -1389,10 +1414,10 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
    */
   invalid?: boolean;
   /**
-   * Width variant for the textarea
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the textarea (md, lg, xl or full)
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: TextAreaInlineSize;
 }
 /**
  * Text Area component
@@ -3331,58 +3356,81 @@ declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttri
 //#region src/Card/Card.d.ts
 interface CardProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch
-   * via React context en wraps de heading-tekst in een `<a>`.
+   * URL voor de stretched link. `CardHeading` en `CardLabel` ontvangen `href`
+   * automatisch via React context en zetten hun tekst in een `<a>`.
    */
   href?: string;
-  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */
+  /** Secties: `CardHeader`, `CardPreHeader`, `CardBody`, `CardFooter` */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * Card component
- * Configureerbare container voor gestructureerde content met header, body en footer.
- * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
- * Screenreaders lezen alleen de heading-tekst als linknaam.
+ * Configureerbare container met vier optionele secties: `CardPreHeader`,
+ * `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).
+ *
+ * Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een
+ * screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.
+ *
+ * Met `href` wordt de heading een stretched link: de link dekt de volledige
+ * card, en screenreaders lezen alleen de heading-tekst als linknaam.
  *
  * @example
  * ```tsx
  * <Card href="/artikel/slug">
  *   <CardHeader>
- *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *     <CardHeading level={2}>Artikeltitel</CardHeading>
  *   </CardHeader>
+ *   <CardPreHeader>
+ *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *   </CardPreHeader>
  *   <CardBody>
- *     <CardHeading level={2}>Artikeltitel</CardHeading>
  *     <Paragraph>Korte beschrijving.</Paragraph>
  *   </CardBody>
  *   <CardFooter>
- *     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+ *     <CardAffordance>Lees meer</CardAffordance>
  *   </CardFooter>
  * </Card>
  * ```
  */
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
-interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardPreHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Afbeelding (`Image` component). Zonder children → toont placeholder
-   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.
+   * Afbeelding, badge, logo of icoon. Een `Image` als direct kind loopt door
+   * tot de rand van de card. Zonder children → toont een placeholder met
+   * `aspect-ratio: 16 / 9` voor visuele consistentie in een groep.
+   *
+   * Zet hier geen focusbare elementen in: de pre-header staat in de DOM ná de
+   * header, dus de focusvolgorde zou afwijken van de visuele volgorde.
    */
   children?: React.ReactNode;
   className?: string;
 }
 /**
- * CardHeader sub-component
+ * CardPreHeader sub-component
+ * Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.
  * Zonder children → toont automatisch een afbeeldingsplaceholder.
  */
+declare const CardPreHeader: React.ForwardRefExoticComponent<CardPreHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** `CardHeading` of `CardLabel`, optioneel gevolgd door een `StatusBadge` */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardHeader sub-component
+ * Bevat de heading of het label van de card. Zet hem in de JSX vóór
+ * `CardPreHeader`.
+ */
 declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
 interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */
+  /** `Paragraph`, `CardDescription`, `CardMeta` of andere inhoud */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * CardBody sub-component
- * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+ * Inhoudssectie onder de header.
  */
 declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
 interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -3398,22 +3446,64 @@ interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 /**
  * CardHeading sub-component
  * Ontvangt `href` automatisch via React context van de parent `Card`.
- * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+ * Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class="dsn-card__link">`.
  * Het `::before` pseudo-element dekt de volledige card (stretched link).
  */
 declare const CardHeading: React.ForwardRefExoticComponent<CardHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface CardLabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Label-tekst */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardLabel sub-component
+ * Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp
+ * introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via
+ * context, net als `CardHeading`.
+ */
+declare const CardLabel: React.ForwardRefExoticComponent<CardLabelProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardDescription sub-component
+ * Korte omschrijving met eigen typografie-tokens.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardMetaProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Bijv. een `<time>`-element of een auteur */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardMeta sub-component
+ * Aanvullende gegevens bij de card, zoals een datum.
+ */
+declare const CardMeta: React.ForwardRefExoticComponent<CardMetaProps & React.RefAttributes<HTMLParagraphElement>>;
 interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */
+  /** `CardAffordance`, of een `Link` / `ButtonLink` naar een andere bestemming */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * CardFooter sub-component
- * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
- * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
- * bestemming heeft als de card — vermijdt een dubbele tabstop.
+ * Staat altijd onderaan de card. Links en buttons staan boven de stretched
+ * link en blijven zelfstandig klikbaar. Voor een visuele "Lees meer" naar
+ * dezelfde bestemming als de card: gebruik `CardAffordance`.
  */
 declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface CardAffordanceProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Bijv. "Lees meer" */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardAffordance sub-component
+ * Een `<span aria-hidden="true">` die eruitziet als een link. De stretched
+ * link vangt de klik al af, dus er is geen tweede tabstop nodig.
+ */
+declare const CardAffordance: React.ForwardRefExoticComponent<CardAffordanceProps & React.RefAttributes<HTMLSpanElement>>;
 interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Semantisch container-element.
@@ -3441,7 +3531,8 @@ interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>,
   isOpen: boolean;
   /**
    * Callback die wordt aangeroepen wanneer het dialoogvenster sluit
-   * (sluitknop, Escape-toets of klik buiten het venster).
+   * (sluitknop of Escape-toets). Een klik op de backdrop sluit het venster
+   * bewust niet.
    */
   onClose?: () => void;
   /**
@@ -3451,6 +3542,15 @@ interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>,
    * open staat.
    */
   triggerRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * Markeert het venster als alertdialog: een dringende melding die een
+   * reactie vraagt, zoals de bevestiging van een destructieve actie. Zet
+   * `role="alertdialog"` op het `<dialog>` en koppelt de `ModalDialogBody`
+   * via `aria-describedby`, zodat de boodschap bij openen wordt voorgelezen.
+   * De focus komt net als anders op de heading.
+   * @default false
+   */
+  alert?: boolean;
   /**
    * De subcomponenten van het dialoogvenster:
    * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`
@@ -3468,7 +3568,7 @@ interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>,
  *
  * @example
  * ```tsx
- * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ * <ModalDialog alert isOpen={isOpen} onClose={() => setIsOpen(false)}>
  *   <ModalDialogHeader>
  *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
  *   </ModalDialogHeader>
@@ -3477,7 +3577,7 @@ interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>,
  *   </ModalDialogBody>
  *   <ModalDialogFooter>
  *     <ActionGroup>
- *       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+ *       <Button variant="strong-negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
  *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
  *     </ActionGroup>
  *   </ModalDialogFooter>
@@ -3551,8 +3651,11 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'chi
    * Modaal of non-modaal gedrag.
    * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
    *   focus blijft binnen het paneel, Escape sluit via `cancel`-event.
-   * - `false`: opent via `.show()` — achtergrond blijft interactief en de
-   *   gebruiker kan er met Tab naartoe, Escape sluit via `keydown`-listener.
+   * - `false`: `<dialog popover="manual">`, opent via `.showPopover()` —
+   *   achtergrond blijft interactief en de gebruiker kan er met Tab naartoe,
+   *   Escape sluit via `keydown`-listener. Het paneel staat in de top layer,
+   *   dus een sticky header of een voorouder met `transform` valt er niet
+   *   overheen.
    * @default true
    */
   modal?: boolean;
@@ -3652,7 +3755,15 @@ interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-//#region src/Popover/Popover.d.ts
+//#region src/utils/popover.d.ts
+/**
+ * Gedeeld gedrag voor componenten op basis van de HTML Popover API.
+ *
+ * `Popover` (niet-modale dialog) en `PopoverMenu` (lijst zonder rol) zien er
+ * anders uit en hebben andere semantiek, maar openen, positioneren, sluiten en
+ * de focus terugzetten gaat bij beide hetzelfde. Dat gedrag staat hier op één
+ * plek. Deze module wordt niet geëxporteerd uit het package.
+ */
 declare module 'react' {
   interface HTMLAttributes<T> {
     popover?: 'auto' | 'manual' | '' | undefined;
@@ -3666,7 +3777,9 @@ declare global {
     hidePopover(): void;
   }
 }
-type Placement = 'top' | 'bottom' | 'start' | 'end';
+type PopoverPlacement = 'top' | 'bottom' | 'start' | 'end';
+//#endregion
+//#region src/Popover/Popover.d.ts
 interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   /**
    * Bepaalt of de popover getoond wordt.
@@ -3684,10 +3797,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;
   /**
@@ -3697,21 +3810,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>
  * ```
  */
@@ -3742,6 +3860,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> {
@@ -3767,6 +3886,64 @@ interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const PopoverFooter: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
+//#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
 //#region src/File/File.d.ts
 type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';
 type FileCtaVariant = 'view' | 'download';
@@ -3888,5 +4065,5 @@ interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {
  */
 declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLUListElement>>;
 //#endregion
-export { ActionGroup, type ActionGroupProps, Alert, type AlertProps, type AlertVariant, Backdrop, type BackdropProps, Body, type BodyProps, BreadcrumbNavigation, BreadcrumbNavigationItem, BreadcrumbNavigationItemProps, BreadcrumbNavigationProps, BreakoutSection, type BreakoutSectionAs, type BreakoutSectionProps, Button, ButtonLink, type ButtonLinkProps, type ButtonLinkSize, type ButtonLinkVariant, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxOption, type CheckboxOptionProps, type CheckboxProps, Container, type ContainerAs, type ContainerProps, DateInput, DateInputGroup, type DateInputGroupProps, type DateInputGroupValue, type DateInputProps, Details, type DetailsProps, DotBadge, DotBadgeProps, DotBadgeVariant, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerHeading, type DrawerHeadingProps, type DrawerProps, EmailInput, type EmailInputProps, File, type FileCtaVariant, FileInput, type FileInputProps, FileList, type FileListProps, type FileMediaType, type FileProps, type FileStatus, FormField, FormFieldDescription, type FormFieldDescriptionProps, FormFieldErrorMessage, type FormFieldErrorMessageProps, FormFieldLabel, type FormFieldLabelProps, FormFieldLegend, FormFieldLegendProps, type FormFieldProps, FormFieldStatus, type FormFieldStatusProps, type FormFieldStatusVariant, FormFieldset, FormFieldsetProps, Grid, type GridColSpan, GridItem, type GridItemProps, type GridProps, Heading, type HeadingAppearance, HeadingGroup, type HeadingGroupProps, type HeadingLevel, type HeadingProps, Hero, type HeroAlign, type HeroProps, type HeroVariant, Icon, IconList, IconListItem, type IconListItemProps, type IconListProps, type IconName, type IconProps, type IconSize, Image, type ImageProps, Link, LinkButton, type LinkButtonProps, type LinkButtonSize, type LinkProps, type LinkSize, Logo, LogoProps, Menu, MenuButton, MenuButtonProps, MenuLink, MenuLinkLevel, MenuLinkProps, MenuOrientation, MenuProps, ModalDialog, ModalDialogBody, type ModalDialogBodyProps, ModalDialogFooter, type ModalDialogFooterProps, ModalDialogHeader, type ModalDialogHeaderProps, ModalDialogHeading, type ModalDialogHeadingProps, type ModalDialogProps, Note, type NoteAs, type NoteProps, type NoteVariant, NumberBadge, NumberBadgeProps, NumberBadgeVariant, NumberInput, type NumberInputProps, OptionLabel, type OptionLabelProps, OrderedList, type OrderedListProps, PageBody, PageBodyProps, PageFooter, PageFooterColorScheme, PageFooterProps, PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky, PageLayout, PageLayoutProps, Paragraph, type ParagraphProps, type ParagraphVariant, type PasswordAutocomplete, PasswordInput, type PasswordInputProps, Popover, PopoverBody, type PopoverBodyProps, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, PopoverHeading, type PopoverHeadingProps, type PopoverProps, PreHeading, type PreHeadingProps, ProgressBar, ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, SkipLink, SkipLinkProps, Spinner, SpinnerProps, SpinnerSize, Stack, type StackProps, type StackSpace, StatusBadge, StatusBadgeProps, StatusBadgeVariant, SummaryList, SummaryListActions, type SummaryListActionsProps, SummaryListKey, type SummaryListKeyProps, type SummaryListProps, SummaryListRow, type SummaryListRowProps, SummaryListValue, type SummaryListValueProps, Table, TableOfContents, type TableOfContentsAppearance, type TableOfContentsItem, type TableOfContentsProps, type TableProps, TelephoneInput, type TelephoneInputProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, UnorderedList, type UnorderedListProps, iconMap };
+export { ActionGroup, type ActionGroupProps, Alert, type AlertProps, type AlertVariant, Backdrop, type BackdropProps, Body, type BodyProps, BreadcrumbNavigation, BreadcrumbNavigationItem, BreadcrumbNavigationItemProps, BreadcrumbNavigationProps, BreakoutSection, type BreakoutSectionAs, type BreakoutSectionProps, Button, ButtonLink, type ButtonLinkProps, type ButtonLinkSize, type ButtonLinkVariant, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAffordance, type CardAffordanceProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, CardLabel, type CardLabelProps, CardMeta, type CardMetaProps, CardPreHeader, type CardPreHeaderProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxOption, type CheckboxOptionProps, type CheckboxProps, Container, type ContainerAs, type ContainerProps, DateInput, DateInputGroup, type DateInputGroupProps, type DateInputGroupValue, type DateInputProps, Details, type DetailsProps, DotBadge, DotBadgeProps, DotBadgeVariant, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerHeading, type DrawerHeadingProps, type DrawerProps, EmailInput, type EmailInputProps, File, type FileCtaVariant, FileInput, type FileInputProps, FileList, type FileListProps, type FileMediaType, type FileProps, type FileStatus, FormField, FormFieldDescription, type FormFieldDescriptionProps, FormFieldErrorMessage, type FormFieldErrorMessageProps, FormFieldLabel, type FormFieldLabelProps, FormFieldLegend, FormFieldLegendProps, type FormFieldProps, FormFieldStatus, type FormFieldStatusProps, type FormFieldStatusVariant, FormFieldset, FormFieldsetProps, Grid, type GridColSpan, GridItem, type GridItemProps, type GridProps, Heading, type HeadingAppearance, HeadingGroup, type HeadingGroupProps, type HeadingLevel, type HeadingProps, Hero, type HeroAlign, type HeroProps, type HeroVariant, Icon, IconList, IconListItem, type IconListItemProps, type IconListProps, type IconName, type IconProps, type IconSize, Image, type ImageProps, Link, LinkButton, type LinkButtonProps, type LinkButtonSize, type LinkProps, type LinkSize, Logo, LogoProps, Menu, MenuButton, MenuButtonProps, MenuLink, MenuLinkLevel, MenuLinkProps, MenuOrientation, MenuProps, ModalDialog, ModalDialogBody, type ModalDialogBodyProps, ModalDialogFooter, type ModalDialogFooterProps, ModalDialogHeader, type ModalDialogHeaderProps, ModalDialogHeading, type ModalDialogHeadingProps, type ModalDialogProps, Note, type NoteAs, type NoteProps, type NoteVariant, NumberBadge, NumberBadgeProps, NumberBadgeVariant, NumberInput, type NumberInputProps, OptionLabel, type OptionLabelProps, OrderedList, type OrderedListProps, PageBody, PageBodyProps, PageFooter, PageFooterColorScheme, PageFooterProps, PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky, PageLayout, PageLayoutProps, Paragraph, type ParagraphProps, type ParagraphVariant, type PasswordAutocomplete, PasswordInput, type PasswordInputProps, Popover, PopoverBody, type PopoverBodyProps, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, PopoverHeading, type PopoverHeadingProps, PopoverMenu, type PopoverMenuProps, type PopoverProps, PreHeading, type PreHeadingProps, ProgressBar, ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, SkipLink, SkipLinkProps, Spinner, SpinnerProps, SpinnerSize, Stack, type StackProps, type StackSpace, StatusBadge, StatusBadgeProps, StatusBadgeVariant, SummaryList, SummaryListActions, type SummaryListActionsProps, SummaryListKey, type SummaryListKeyProps, type SummaryListProps, SummaryListRow, type SummaryListRowProps, SummaryListValue, type SummaryListValueProps, Table, TableOfContents, type TableOfContentsAppearance, type TableOfContentsItem, type TableOfContentsProps, type TableProps, TelephoneInput, type TelephoneInputProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, UnorderedList, type UnorderedListProps, iconMap };
 //# sourceMappingURL=index.d.cts.map