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

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/index.cjs

@@ -3562,14 +3562,28 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
 	const headingRef = react.default.useRef(null);
+	const popoverShownRef = react.default.useRef(false);
+	const previousFocusRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
 		if (!dialog) return;
-		if (isOpen && !dialog.open) {
+		const isShown = dialog.open || popoverShownRef.current;
+		if (isOpen && !isShown) {
 			if (modal) dialog.showModal();
-			else dialog.show();
+			else {
+				previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				dialog.showPopover();
+				popoverShownRef.current = true;
+			}
 			(headingRef.current ?? dialog).focus();
-		} else if (!isOpen && dialog.open) dialog.close();
+		} else if (!isOpen && isShown) {
+			if (popoverShownRef.current) {
+				const focusWasInside = dialog.contains(document.activeElement);
+				dialog.hidePopover();
+				popoverShownRef.current = false;
+				if (focusWasInside) previousFocusRef.current?.focus();
+			} else dialog.close();
+		}
 	}, [
 		isOpen,
 		modal,
@@ -3616,6 +3630,7 @@ const Drawer = react.default.forwardRef(({ className, isOpen, onClose, modal = t
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
 			tabIndex: -1,
+			popover: modal ? void 0 : "manual",
 			...props,
 			children
 		})
@@ -4711,6 +4726,7 @@ CardGroup.displayName = "CardGroup";
 //#region src/ModalDialog/ModalDialog.tsx
 const ModalDialogContext = react.default.createContext({
 	headingId: "",
+	bodyId: "",
 	headingRef: { current: null }
 });
 /**
@@ -4724,7 +4740,7 @@ const ModalDialogContext = react.default.createContext({
 *
 * @example
 * ```tsx
-* <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+* <ModalDialog alert isOpen={isOpen} onClose={() => setIsOpen(false)}>
 *   <ModalDialogHeader>
 *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
 *   </ModalDialogHeader>
@@ -4733,17 +4749,18 @@ const ModalDialogContext = react.default.createContext({
 *   </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>
 * </ModalDialog>
 * ```
 */
-const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, children, ...props }, ref) => {
+const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, alert = false, children, ...props }, ref) => {
 	const internalRef = react.default.useRef(null);
 	const dialogRef = ref ?? internalRef;
 	const headingId = react.default.useId();
+	const bodyId = react.default.useId();
 	const headingRef = react.default.useRef(null);
 	react.default.useEffect(() => {
 		const dialog = dialogRef.current;
@@ -4770,13 +4787,16 @@ const ModalDialog = react.default.forwardRef(({ className, isOpen, onClose, trig
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalDialogContext.Provider, {
 		value: {
 			headingId,
+			bodyId,
 			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
 			ref: dialogRef,
 			className: classes,
+			role: alert ? "alertdialog" : void 0,
 			"aria-labelledby": headingId,
+			"aria-describedby": alert ? bodyId : void 0,
 			onCancel: handleCancel,
 			tabIndex: -1,
 			...props,
@@ -4837,8 +4857,10 @@ ModalDialogHeading.displayName = "ModalDialogHeading";
 * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
 */
 const ModalDialogBody = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	const { bodyId } = react.default.useContext(ModalDialogContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
+		id: bodyId,
 		className: (0, _dsn_starter_kit_core.classNames)("dsn-modal-dialog__body", className),
 		...props,
 		children
@@ -4859,7 +4881,7 @@ const ModalDialogFooter = react.default.forwardRef(({ className, children, ...pr
 });
 ModalDialogFooter.displayName = "ModalDialogFooter";
 //#endregion
-//#region src/Popover/Popover.tsx
+//#region src/utils/popover.ts
 const GAP = 4;
 function positionPopover(popover, trigger, placement) {
 	const triggerRect = trigger.getBoundingClientRect();
@@ -4912,39 +4934,32 @@ function focusFirstInteractive(container) {
 	if (first) first.focus();
 	else container.focus();
 }
-const PopoverContext = react.default.createContext({ headingId: "" });
 /**
-* Popover component
-* Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
-*
-* Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
-* light-dismiss en top-layer gedrag. Positionering via JavaScript.
-*
-* @example
-* ```tsx
-* const triggerRef = useRef<HTMLButtonElement>(null);
-* const [isOpen, setIsOpen] = useState(false);
-*
-* <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
-* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
-*   <PopoverBody>
-*     <Menu>...</Menu>
-*   </PopoverBody>
-* </Popover>
-* ```
+* Opent en sluit een element met `popover="auto"` synchroon met `isOpen`,
+* positioneert het bij de trigger en houdt `aria-expanded` op de trigger bij.
+*
+* Bij openen gaat de focus naar `initialFocusRef` (of de popover zelf als die
+* ref leeg is), en anders naar het eerste interactieve element. Bij sluiten
+* gaat de focus alleen terug naar de trigger wanneer dat zinvol is: als de
+* focus op dat moment nog in de popover stond (Escape, een sluitknop, een
+* actie in de popover). Klikt de gebruiker ergens anders, dan blijft de focus
+* daar; terugspringen naar de trigger zou die klik tenietdoen.
 */
-const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", label, children, ...props }, ref) => {
-	const internalRef = react.default.useRef(null);
-	const popoverRef = ref ?? internalRef;
-	const headingId = react.default.useId();
+function usePopover({ popoverRef, triggerRef, isOpen, onClose, placement, initialFocusRef }) {
+	const restoreFocusRef = react.default.useRef(false);
+	const dismissedByPointerRef = react.default.useRef(false);
+	const onCloseRef = react.default.useRef(onClose);
+	onCloseRef.current = onClose;
 	react.default.useEffect(() => {
 		const el = popoverRef.current;
 		if (!el) return;
 		if (isOpen) {
+			dismissedByPointerRef.current = false;
 			el.showPopover();
 			const trigger = triggerRef.current;
 			if (trigger) positionPopover(el, trigger, placement);
-			focusFirstInteractive(el);
+			if (initialFocusRef) (initialFocusRef.current ?? el).focus();
+			else focusFirstInteractive(el);
 		} else try {
 			el.hidePopover();
 		} catch {}
@@ -4952,7 +4967,8 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		isOpen,
 		placement,
 		triggerRef,
-		popoverRef
+		popoverRef,
+		initialFocusRef
 	]);
 	react.default.useEffect(() => {
 		const trigger = triggerRef.current;
@@ -4962,19 +4978,23 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 			trigger.setAttribute("aria-expanded", "false");
 		};
 	}, [isOpen, triggerRef]);
-	const onCloseRef = react.default.useRef(onClose);
-	onCloseRef.current = onClose;
 	react.default.useEffect(() => {
 		const el = popoverRef.current;
 		if (!el) return;
+		const handleBeforeToggle = (event) => {
+			if (event.newState === "closed") restoreFocusRef.current = !dismissedByPointerRef.current && el.contains(document.activeElement);
+		};
 		const handleToggle = (event) => {
 			if (event.newState === "closed") {
 				onCloseRef.current?.();
-				triggerRef.current?.focus();
+				if (restoreFocusRef.current) triggerRef.current?.focus();
+				restoreFocusRef.current = false;
 			}
 		};
+		el.addEventListener("beforetoggle", handleBeforeToggle);
 		el.addEventListener("toggle", handleToggle);
 		return () => {
+			el.removeEventListener("beforetoggle", handleBeforeToggle);
 			el.removeEventListener("toggle", handleToggle);
 		};
 	}, [triggerRef, popoverRef]);
@@ -4985,8 +5005,8 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		const handlePointerDown = (event) => {
 			const target = event.target;
 			if (el.contains(target) || triggerRef.current?.contains(target)) return;
+			dismissedByPointerRef.current = true;
 			onCloseRef.current?.();
-			triggerRef.current?.focus();
 		};
 		document.addEventListener("pointerdown", handlePointerDown);
 		return () => {
@@ -4997,11 +5017,57 @@ const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerR
 		triggerRef,
 		popoverRef
 	]);
+}
+//#endregion
+//#region src/Popover/Popover.tsx
+const PopoverContext = react.default.createContext({
+	headingId: "",
+	headingRef: { current: null }
+});
+/**
+* Popover component
+* 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((v) => !v)}>Filters</Button>
+* <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef}>
+*   <PopoverHeader>
+*     <PopoverHeading>Filters</PopoverHeading>
+*   </PopoverHeader>
+*   <PopoverBody>...</PopoverBody>
+* </Popover>
+* ```
+*/
+const Popover = react.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", label, children, ...props }, ref) => {
+	const internalRef = react.default.useRef(null);
+	const popoverRef = ref ?? internalRef;
+	const headingId = react.default.useId();
+	const headingRef = react.default.useRef(null);
+	usePopover({
+		popoverRef,
+		triggerRef,
+		isOpen,
+		onClose,
+		placement,
+		initialFocusRef: headingRef
+	});
 	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-popover", `dsn-popover--placement-${placement}`, className);
 	const ariaProps = label ? { "aria-label": label } : { "aria-labelledby": headingId };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContext.Provider, {
 		value: {
 			headingId,
+			headingRef,
 			onClose
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -5045,14 +5111,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.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-	const { headingId } = react.default.useContext(PopoverContext);
+	const { headingId, headingRef } = react.default.useContext(PopoverContext);
 	const Tag = `h${level}`;
+	const setRef = react.default.useCallback((node) => {
+		headingRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [headingRef, ref]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
-		ref,
+		ref: setRef,
 		id: headingId,
 		className: (0, _dsn_starter_kit_core.classNames)("dsn-popover-heading", className),
+		tabIndex: -1,
 		...props,
 		children
 	});
@@ -5085,6 +5158,63 @@ const PopoverFooter = react.default.forwardRef(({ className, children, ...props
 });
 PopoverFooter.displayName = "PopoverFooter";
 //#endregion
+//#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.default.forwardRef(({ className, isOpen, onClose, triggerRef, placement = "bottom", iconStart = false, onClick, children, ...props }, ref) => {
+	const internalRef = react.default.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 = (0, _dsn_starter_kit_core.classNames)("dsn-popover-menu", `dsn-popover-menu--placement-${placement}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: popoverRef,
+		popover: "auto",
+		className: classes,
+		onClick: handleClick,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu, {
+			role: "list",
+			iconStart,
+			children
+		})
+	});
+});
+PopoverMenu.displayName = "PopoverMenu";
+//#endregion
 //#region src/File/File.tsx
 /**
 * File component
@@ -5351,6 +5481,7 @@ exports.PopoverBody = PopoverBody;
 exports.PopoverFooter = PopoverFooter;
 exports.PopoverHeader = PopoverHeader;
 exports.PopoverHeading = PopoverHeading;
+exports.PopoverMenu = PopoverMenu;
 exports.PreHeading = PreHeading;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;