@dbcdk/react-components 0.0.12 → 0.0.14

package/dist/components/interval-select/IntervalSelect.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonVariant } from '../../components/button/Button';
 import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { UtcIsoString } from '../datetime-picker/dateTimeHelpers';
 type InputContainerProps = React.ComponentProps<typeof InputContainer>;
 export type IntervalOption = {
     label: string;
@@ -12,9 +13,14 @@ export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFo
     id?: string;
     options: IntervalOption[];
     selectedValue: IntervalSelectValue;
-    onChange: (date: Date, meta: {
+    /**
+     * Emits a UTC instant as ISO string (Z), consistent with DateTimePicker when enableTime=true.
+     * Also includes the computed local Date for convenience.
+     */
+    onChange: (isoUtc: UtcIsoString, meta: {
         minutesAgo: number;
         option: IntervalOption;
+        dateLocal: Date;
     }) => void;
     /** Base date for the calculation; defaults to "now". */
     baseDate?: Date;
@@ -23,8 +29,9 @@ export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFo
     variant?: ButtonVariant;
     onClear?: () => void;
     dataCy?: string;
+    disabled?: boolean;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, }: IntervalSelectProps): React.ReactNode;
+export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, disabled, }: IntervalSelectProps): React.ReactNode;
 export {};

package/dist/components/interval-select/IntervalSelect.js

@@ -8,20 +8,23 @@ import { InputContainer } from '../../components/forms/input-container/InputCont
 import { Menu } from '../../components/menu/Menu';
 import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
 import { Popover } from '../../components/popover/Popover';
+import { isoFromLocalDate } from '../datetime-picker/dateTimeHelpers';
 export function IntervalSelect({ 
 // InputContainer props
 label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
 // tooltip
 tooltip, tooltipPlacement = 'right', 
 // IntervalSelect props
-id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, }) {
+id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, disabled, }) {
     const generatedId = useId();
     const controlId = id !== null && id !== void 0 ? id : `interval-select-${generatedId}`;
     const describedById = `${controlId}-desc`;
+    const listboxId = `${controlId}-listbox`;
     const popoverRef = useRef(null);
     const optionRefs = useRef([]);
     const selectedIndex = useMemo(() => options.findIndex(o => o.minutesAgo === selectedValue), [options, selectedValue]);
     const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    // Focus active option when opened (simple version: always focus when index changes)
     useEffect(() => {
         var _a;
         (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -44,8 +47,9 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
     const handleCommit = (opt) => {
         var _a;
         const base = baseDate !== null && baseDate !== void 0 ? baseDate : new Date();
-        const dt = new Date(base.getTime() - opt.minutesAgo * 60000);
-        onChange(dt, { minutesAgo: opt.minutesAgo, option: opt });
+        const dateLocal = new Date(base.getTime() - opt.minutesAgo * 60000);
+        const isoUtc = isoFromLocalDate(dateLocal);
+        onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
         (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     const handleKeyDown = (e) => {
@@ -59,6 +63,14 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                 e.preventDefault();
                 setActiveIndex(i => Math.max(i - 1, 0));
                 break;
+            case 'Home':
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                setActiveIndex(options.length - 1);
+                break;
             case 'Enter':
             case ' ':
                 e.preventDefault();
@@ -71,12 +83,15 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                 break;
         }
     };
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, contentId: listboxId, trigger: (onClick, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+                        // Reset active to selected when opening
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = opt.minutesAgo === selectedValue;
                         const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
+                        return (_jsx(Menu.Item, { active: isActive, 
+                            // IMPORTANT: listbox uses role="option"
+                            itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
                     }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
 }

package/dist/components/menu/Menu.d.ts

@@ -1,16 +1,23 @@
 import * as React from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     children: React.ReactNode;
+    /**
+     * Default role for items rendered by Menu.Item when it clones/wraps content.
+     * - default: "menuitem" (for role="menu")
+     * - for Select/listbox usage, pass itemRole="option" and role="listbox" on Menu.
+     */
+    itemRole?: 'menuitem' | 'option';
 }
-/**
- * Use when you need a visual divider inside a Menu.
- * Renders a non-interactive <li role="separator" />
- */
 export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
+    /**
+     * Override the role applied to the interactive element for this item only.
+     * If not set, Menu's `itemRole` is used.
+     */
+    itemRole?: 'menuitem' | 'option';
 }
 export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     label: React.ReactNode;
@@ -19,18 +26,8 @@ export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     onCheckedChange?: (checked: boolean) => void;
 }
 export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
-    /**
-     * Shared group name for the radio items in this menu section.
-     * (Required by your RadioButton component)
-     */
     name: string;
-    /**
-     * This option's value.
-     */
     value: string;
-    /**
-     * Whether this radio option is selected.
-     */
     checked: boolean;
     disabled?: boolean;
     label: string;

package/dist/components/menu/Menu.js

@@ -4,29 +4,24 @@ import * as React from 'react';
 import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
-const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
+const MenuBase = React.forwardRef(({ children, className, itemRole = 'menuitem', ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", "data-itemrole": itemRole, className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
 MenuBase.displayName = 'Menu';
 const isInteractiveEl = (el) => React.isValidElement(el) &&
     (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
-/**
- * Apply menu styles not only to the interactive element itself,
- * but also to immediate children (covers cases where the direct child is a <div>
- * wrapping a button-like thing, or components that render a wrapper).
- */
 function applyMenuItemPropsToElement(child, opts) {
-    const { active, disabled, role = 'menuitem', tabIndex = -1, className } = opts;
+    var _a, _b, _c, _d;
+    const { active, disabled, role, tabIndex = -1, className } = opts;
     const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
-    // Always apply styling to the immediate child
     const nextImmediate = React.cloneElement(child, {
         className: [child.props.className, styles.interactiveChild, className]
             .filter(Boolean)
             .join(' '),
     });
-    // If the immediate child is already interactive, we can apply full a11y+styles there
+    // If immediate child is interactive, apply a11y+styles there
     if (typeof child.type === 'string' && (child.type === 'a' || child.type === 'button')) {
         return React.cloneElement(child, {
-            role,
-            tabIndex,
+            role: (_a = child.props.role) !== null && _a !== void 0 ? _a : role,
+            tabIndex: (_b = child.props.tabIndex) !== null && _b !== void 0 ? _b : tabIndex,
             'aria-selected': active || undefined,
             'aria-disabled': disabled || undefined,
             className: [child.props.className, styles.interactive, childClass, className]
@@ -35,10 +30,10 @@ function applyMenuItemPropsToElement(child, opts) {
             ...(child.type === 'button' ? { disabled } : {}),
         });
     }
-    // For custom components, we *assume* they forward props.
+    // For custom components, assume they forward props
     return React.cloneElement(nextImmediate, {
-        role,
-        tabIndex,
+        role: (_c = nextImmediate.props.role) !== null && _c !== void 0 ? _c : role,
+        tabIndex: (_d = nextImmediate.props.tabIndex) !== null && _d !== void 0 ? _d : tabIndex,
         'aria-selected': active || undefined,
         'aria-disabled': disabled || undefined,
         className: [nextImmediate.props.className, styles.interactive, childClass]
@@ -47,36 +42,26 @@ function applyMenuItemPropsToElement(child, opts) {
         disabled,
     });
 }
-const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
+const MenuItem = React.forwardRef(({ children, active, disabled, className, itemRole, ...liProps }, ref) => {
+    // If caller sets itemRole prop, use it; otherwise attempt to inherit from parent Menu via data attr.
+    // (We can’t reliably read parent props here without context; simplest is: caller passes itemRole on Menu.Item when needed.)
+    const resolvedRole = itemRole !== null && itemRole !== void 0 ? itemRole : 'menuitem';
     if (isInteractiveEl(children)) {
         const child = children;
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled, role: resolvedRole }) }));
     }
-    // Fallback: we wrap non-interactive children in a <button>
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
+    // Fallback: wrap non-interactive children in a <button>
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
                 .filter(Boolean)
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });
 MenuItem.displayName = 'Menu.Item';
-/**
- * Menu checkbox row that uses your Checkbox component.
- * Note: this is a *control inside a menu*, so we lean on your Checkbox a11y (`role="checkbox"`)
- * rather than forcing `menuitemcheckbox` roles.
- */
 const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, 
-                // Your Checkbox emits (checked, mouseEvent)
-                onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
 });
 MenuCheckItem.displayName = 'Menu.CheckItem';
-/**
- * Menu radio row that uses your RadioButton component.
- * Same note as above: we keep your native radio semantics.
- */
 const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, 
-                // Your RadioButton emits (value, changeEvent)
-                onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
 });
 MenuRadioItem.displayName = 'Menu.RadioItem';
 const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));

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

@@ -29,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;
@@ -62,7 +62,7 @@
   display: flex;
   align-items: center;
   inline-size: 100%;
-  padding-block: calc(var(--spacing-xxs) + var(--density-comfortable));
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-sm);
 }

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;
 }
 
@@ -22,6 +22,7 @@
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
   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

@@ -79,5 +79,5 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
                                                 }, 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

@@ -157,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/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,