@dbcdk/react-components 0.0.10 → 0.0.13

package/dist/components/menu/Menu.module.css

@@ -1,3 +1,4 @@
+/* Menu.module.css */
 .container {
   list-style: none;
   margin: 0;
@@ -17,6 +18,7 @@
   display: contents;
 }
 
+/* Applied to actual interactive elements (button/a/custom that forwards className) */
 .interactive {
   display: flex;
   align-items: center;
@@ -27,7 +29,7 @@
   text-decoration: none;
 
   /* choose your density */
-  padding-block: calc(var(--spacing-xs) + var(--density-comfortable));
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
 
   background: transparent;
@@ -45,29 +47,95 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
-.interactive:hover {
+/*
+  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
+  so that menu row styling still works for components that render a wrapper.
+*/
+.interactiveChild {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
+.row > .interactiveChild {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: let Checkbox/Radio consume full width so the hover area feels right */
+.row > .interactiveChild > * {
+  inline-size: 100%;
+}
+
+/* NEW: add consistent gap between control and label inside Checkbox/Radio
+   Both components use a root element with className={styles.container}.
+   Because they're CSS modules, we must target it with :global(.container). */
+.row :global(.container) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* Hover: support both cases (interactive element, or wrapper child) */
+.interactive:hover,
+.row:hover > .interactiveChild {
   background-color: var(--color-bg-hover-subtle);
 }
 
+/* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
+/* If wrapper contains a focusable element, show ring when any child is focused */
+.row:focus-within > .interactiveChild {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Selected/active (legacy + item variant) */
 .active,
-.interactive[aria-selected='true'] {
+.interactive[aria-selected='true'],
+.row > .interactiveChild.active,
+.row > .interactiveChild[aria-selected='true'] {
   background-color: var(--color-bg-selected);
   color: var(--color-fg-default);
 }
 
+/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
+.interactive[aria-checked='true'],
+.row > .interactiveChild[aria-checked='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Disabled: support both cases */
 .interactive[aria-disabled='true'],
-.interactive:disabled {
+.interactive:disabled,
+.row > .interactiveChild[aria-disabled='true'] {
   color: var(--color-disabled-fg);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.interactive svg {
+/* Icons inside either interactive element or wrapper */
+.interactive svg,
+.interactiveChild svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
 }
+
+/* Visual separator row (used by <Menu.Separator />) */
+.separator {
+  block-size: 1px;
+  margin-block: var(--spacing-2xs);
+  background: var(--color-border-subtle);
+  opacity: 0.8;
+  border-radius: 999px;
+}

package/dist/components/overlay/modal/Modal.module.css

@@ -7,7 +7,7 @@
   justify-content: center;
   padding-top: clamp(var(--spacing-md), 12vh, 24vh);
   padding-bottom: var(--spacing-md);
-  z-index: var(--z-modal);
+  z-index: var(--z-backdrop-modal);
   overflow-y: auto;
 }
 
@@ -15,13 +15,14 @@
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
   min-width: 320px;
-  max-width: 540px;
+  max-width: 700px;
   max-height: calc(100vh - (2 * var(--spacing-md)));
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
-  min-width: 400px;
+  min-width: 500px;
+  z-index: var(--z-modal);
   color: var(--color-fg-default);
 }
 

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -43,20 +43,18 @@ export function ModalProvider({ children }) {
                     label: confirmLabel,
                     onClick: () => {
                         resolvePending(true);
-                        closeModal();
                     },
                 },
                 secondaryAction: {
                     label: cancelLabel,
                     onClick: () => {
                         resolvePending(false);
-                        closeModal();
                     },
                 },
             });
             setIsOpen(true);
         });
-    }, [closeModal, resolvePending]);
+    }, [resolvePending]);
     const modalNode = (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, mounted &&
                 createPortal(_jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children }), document.body)] }));
     return modalNode;

package/dist/components/overlay/side-panel/SidePanel.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
+import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
 export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
     const [mounted, setMounted] = useState(false);
@@ -16,6 +17,21 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
         if (isOpen)
             setShouldRender(true);
     }, [isOpen]);
+    // Close on ESC key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
     // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
     useEffect(() => {
         if (!shouldRender)
@@ -56,11 +72,12 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
                 } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
                     '--side-panel-width': width,
                     '--details-width': detailsWidth,
+                    '--panel-dur': MOTION_MS.panelSlide + 'ms',
                 }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
                                                     e.stopPropagation();
                                                     onCloseDetails();
                                                 }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: e => {
                                                         e.stopPropagation();
                                                         onClose(e);
-                                                    }, "aria-label": "Close panel", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
+                                                    }, "aria-label": "Luk panel", "data-cy": "side-panel-close-button", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
 }

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,8 +1,6 @@
 .sidePanel {
   --col-pad: var(--spacing-md);
 
-  /* Dial these for “feel” */
-  --panel-dur: 220ms;
   --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
 
   /* Shadow + edge */
@@ -159,7 +157,7 @@
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.45);
-  z-index: var(--z-backdrop);
+  z-index: var(--z-backdrop-drawer);
 
   opacity: 0;
   transition: opacity var(--panel-dur) var(--panel-ease);

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
+import { MOTION_MS } from '../../../styles/animation';
 import { TooltipContext } from './TooltipProvider';
 export function useTooltipTrigger(options) {
     const ctx = useContext(TooltipContext);
@@ -45,7 +46,6 @@ export function useTooltipTrigger(options) {
         }
         show();
     }, [isOpen, show, hide]);
-    // ✅ Only call update if THIS tooltip is the active one AND something changed
     useEffect(() => {
         var _a;
         if (!isOpen)
@@ -84,7 +84,9 @@ export function useTooltipTrigger(options) {
     const onFocus = () => {
         clearTimers();
         if (!isControlled)
-            setOpen(true);
+            setTimeout(() => {
+                setOpen(true);
+            }, MOTION_MS.tooltipOpen);
     };
     const onBlur = () => {
         clearTimers();

package/dist/components/page-layout/PageLayout.d.ts

@@ -1,11 +1,14 @@
-import type { PropsWithChildren, ReactNode, FC } from 'react';
-import { PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { type PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
 type Orientation = 'vertical' | 'horizontal';
 export interface PageLayoutProps extends PropsWithChildren {
+    /**
+     * If true, PageLayout becomes a self-contained app shell (100vh) and
+     * scroll is contained inside the intended regions (sidebar/content).
+     * If false, the document scrolls normally (body scroll).
+     */
     containScrolling?: boolean;
     orientation?: Orientation;
-    sidebar?: ReactNode;
-    header?: ReactNode;
 }
 export interface PageLayoutHeaderProps {
     maxWidth?: boolean;
@@ -18,7 +21,16 @@ export interface PageLayoutContentProps {
 export interface PageLayoutFooterProps {
     children: ReactNode;
 }
+export interface PageLayoutSidebarProps {
+    children: ReactNode;
+    /**
+     * Optional: if your sidebar contains navigation, you might wrap your nav in <nav>.
+     * This component will render an <aside>.
+     */
+    ariaLabel?: string;
+}
 export declare const PageLayout: FC<PageLayoutProps> & {
+    Sidebar: FC<PageLayoutSidebarProps>;
     Header: FC<PageLayoutHeaderProps>;
     Hero: FC<PageLayoutHeroProps>;
     Content: FC<PageLayoutContentProps>;

package/dist/components/page-layout/PageLayout.js

@@ -1,38 +1,67 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { PageLayoutHero, } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
-const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
-    if (orientation === 'vertical') {
-        return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
-                            flex: 1,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            maxHeight: '100vh',
-                            overflow: 'auto',
-                        }, children: [header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    padding: 'var(--spacing-md)',
-                                    backgroundColor: 'var(--color-bg-surface)',
-                                    overflow: 'auto',
-                                }, children: children })] })] }) }));
-    }
-    return (_jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ''}`, children: children }));
+function getSlotName(el) {
+    var _a;
+    const t = el.type;
+    return (_a = t === null || t === void 0 ? void 0 : t.__PAGE_LAYOUT_SLOT__) !== null && _a !== void 0 ? _a : null;
+}
+function splitSlots(children) {
+    const slots = {};
+    const rest = [];
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) {
+            if (child != null)
+                rest.push(child);
+            return;
+        }
+        const slot = getSlotName(child);
+        if (!slot) {
+            rest.push(child);
+            return;
+        }
+        // If multiple of same slot are provided, last wins (simple + predictable).
+        slots[slot] = child;
+    });
+    return { slots, rest };
+}
+/** Slot components */
+const PageLayoutSidebar = ({ children, }) => {
+    // This returns children; layout wrapper decides how to render.
+    // We keep this as a slot marker component.
+    return _jsx(_Fragment, { children: children });
 };
-/** Subcomponents */
-const PageLayoutHeader = ({ maxWidth = true, children, }) => {
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = 'Sidebar';
+const PageLayoutHeader = ({ maxWidth = false, children, }) => {
     return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ''}`, children: children }) }));
 };
-const PageLayoutContent = ({ maxWidth = true, children, }) => {
-    return _jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ''}`, children: children });
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = 'Header';
+const PageLayoutContent = ({ maxWidth = false, children, }) => {
+    return (_jsx("div", { className: `${styles.contentInner} ${maxWidth ? styles.maxWidth : ''}`, children: children }));
 };
-const PageLayoutFooter = ({ children }) => {
-    return _jsx("footer", { className: styles.footer, children: children });
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = 'Content';
+const PageLayoutFooter = ({ children, }) => {
+    return _jsx(_Fragment, { children: children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = 'Footer';
+PageLayoutHero.__PAGE_LAYOUT_SLOT__ = 'Hero';
+const PageLayoutBase = ({ children, containScrolling = false, orientation = 'vertical', }) => {
+    var _a, _b;
+    const { slots, rest } = splitSlots(children);
+    // If no explicit <PageLayout.Content>, we’ll treat remaining children as content.
+    const content = (_a = slots.Content) !== null && _a !== void 0 ? _a : (rest.length ? _jsx(PageLayoutContent, { maxWidth: true, children: rest }) : undefined);
+    const rootClass = [
+        styles.root,
+        orientation === 'vertical' ? styles.vertical : styles.horizontal,
+        containScrolling ? styles.containScrolling : styles.documentScrolling,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: rootClass, children: [slots.Sidebar ? (_jsx("aside", { className: styles.sidebar, "aria-label": (_b = slots.Sidebar.props) === null || _b === void 0 ? void 0 : _b.ariaLabel, children: slots.Sidebar })) : null, _jsxs("div", { className: styles.mainColumn, children: [slots.Header ? _jsx("header", { className: styles.header, children: slots.Header }) : null, slots.Hero ? _jsx("div", { className: styles.hero, children: slots.Hero }) : null, content || slots.Footer ? (_jsxs("div", { className: styles.mainScroll, children: [content ? _jsx("main", { className: styles.content, children: content }) : null, slots.Footer ? _jsx("footer", { className: styles.footer, children: slots.Footer }) : null] })) : null] })] }));
 };
 export const PageLayout = Object.assign(PageLayoutBase, {
+    Sidebar: PageLayoutSidebar,
     Header: PageLayoutHeader,
     Hero: PageLayoutHero,
     Content: PageLayoutContent,

package/dist/components/page-layout/PageLayout.module.css

@@ -1,66 +1,186 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 100vw;
+/* Root shell */
+.root {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  gap: 0;
+}
+
+/* Viewport handling:
+   - containScrolling => app-shell: lock to viewport and manage scroll in regions
+   - documentScrolling => let page scroll normally
+*/
+.containScrolling {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  min-height: 100%;
+  overflow: visible;
 }
 
+/* Orientation layouts */
 .vertical {
-  flex-direction: row;
-  align-items: flex-start;
+  grid-template-columns: auto minmax(0, 1fr);
 }
 
-.container.containScrolling {
-  height: 100vh;
+.horizontal {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Sidebar */
+.sidebar {
+  min-width: 0;
+  overflow: hidden;
+  border-right: var(--border-width-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-surface);
+}
+
+.containScrolling .sidebar {
   overflow: auto;
-  position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
-@media screen and (max-height: 400px) {
-  .container {
-    height: unset;
-  }
+/* In horizontal orientation, sidebar becomes a top block if used */
+.horizontal .sidebar {
+  grid-column: 1 / -1;
+  border-right: none;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
 }
 
-.headerContainer {
+/* Main column:
+   Use flex so the "rest of space" logic works reliably.
+*/
+.mainColumn {
+  min-width: 0;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  background: var(--color-bg-surface);
+}
+
+/* In containScrolling mode, mainColumn must fill the viewport height
+   so the flex "remaining space" can be computed.
+*/
+.containScrolling .mainColumn {
+  height: 100%;
+  min-height: 0; /* important: allows children to shrink */
 }
 
-.container:not(.containScrolling) .headerContainer {
+/* Regions */
+.header {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Sticky header only when the document is scrolling (body scroll) */
+.documentScrolling .header {
   position: sticky;
-  z-index: 1000;
   top: 0;
+  z-index: var(--z-sticky);
 }
 
-.headerContent {
+.hero {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Scroll wrapper: contains content + footer */
+.mainScroll {
+  min-width: 0;
+  min-height: 0; /* CRITICAL for nested flex/scroll */
+  display: flex;
+  flex-direction: column;
+
+  /* This is the "take all remaining space" bit */
+  flex: 1 1 auto;
+
+  /* default: documentScrolling uses normal page flow */
+  overflow: visible;
+}
+
+/* Contained scrolling: mainScroll scrolls (includes footer) */
+.containScrolling .mainScroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Content area (not a scroll container anymore) */
+.content {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto; /* take remaining space inside mainScroll */
+  display: flex; /* lets contentInner stretch */
+  flex-direction: column;
+
+  background: var(--color-bg-surface);
+  padding: var(--spacing-md);
+  overflow: visible;
+}
+
+.footer {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-top: var(--border-width-thin) solid var(--color-border-subtle);
+
+  /* When there is extra space (content is short), this pushes footer to the bottom.
+     When content is long, footer follows content normally and is reached by scrolling.
+  */
+  margin-top: auto;
   flex: 0 0 auto;
+}
+
+/* Header slot wrappers */
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.headerContent {
   width: 100%;
   box-sizing: border-box;
 }
 
 .maxWidth {
   max-width: 1600px;
-  margin: auto;
+  margin-inline: auto;
   width: 100%;
   box-sizing: border-box;
 }
 
-.content {
-  flex: 1 1 auto;
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-md) var(--spacing-xl);
-  padding-top: 0;
-  min-height: 0;
+/* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
+.contentInner {
   display: flex;
   flex-direction: column;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  gap: var(--spacing-xl);
+
+  box-sizing: border-box;
+  min-width: 0;
+
+  /* This is what makes your "main content" actually expand to fill */
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.footer {
-  flex: 0 0 auto;
+/* Optional: for small viewport heights, avoid forced viewport locking */
+@media (max-height: 400px) {
+  .containScrolling {
+    height: auto;
+    overflow: visible;
+  }
+
+  /* In this mode, avoid forcing a nested scroll region */
+  .containScrolling .mainScroll {
+    overflow: visible;
+  }
+
+  .containScrolling .mainColumn {
+    height: auto;
+  }
 }

package/dist/components/popover/Popover.d.ts

@@ -1,12 +1,26 @@
 import * as React from 'react';
-interface PopoverProps {
-    trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
-    children: ((close?: () => void) => React.ReactNode) | React.ReactNode;
+export interface PopoverProps {
+    trigger: (toggle: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode, open?: boolean) => React.ReactNode;
+    children: ((close: () => void) => React.ReactNode) | React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentId?: string;
+    /**
+     * CSS length, recommended "NNpx" for predictability.
+     * Used as a minimum, not as a forced width unless matchTriggerWidth=true.
+     */
     minWidth?: string;
+    /**
+     * If true, force the overlay width to at least the trigger width.
+     * If false, overlay width is content-driven (calendar-friendly).
+     */
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
     dataCy?: string;
+    autoFocusContent?: boolean;
+    returnFocus?: boolean;
 }
 export interface PopoverHandle {
     close: () => void;
@@ -14,4 +28,3 @@ export interface PopoverHandle {
     isOpen: () => boolean;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
-export {};