@flipdish/ui-library 0.30.0 → 0.31.0

package/dist/components/organisms/SidePanel/index.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var react = require('motion/react');
+var React = require('react');
+var sidePanelContent = require('./components/side-panel-content.cjs');
+var sidePanelFooter = require('./components/side-panel-footer.cjs');
+var sidePanelHeader = require('./components/side-panel-header.cjs');
+var sidePanelRegion = require('./components/side-panel-region.cjs');
+var useOpenOnMount = require('./hooks/useOpenOnMount.cjs');
+var pageCoverContext = require('./providers/page-cover-context.cjs');
+var sidePanelContext = require('./providers/side-panel-context.cjs');
+
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints.useBreakpoints('lg');
+    const setPageCovered = React.useContext(pageCoverContext.PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount.useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    React.useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsxRuntime.jsx(sidePanelContext.SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(sidePanelRegion.SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanel = SidePanelRoot;
+SidePanel.Header = sidePanelHeader.SidePanelHeader;
+SidePanel.Content = sidePanelContent.SidePanelContent;
+SidePanel.Footer = sidePanelFooter.SidePanelFooter;
+
+exports.SIDE_PANEL_WIDTH = sidePanelRegion.SIDE_PANEL_WIDTH;
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=index.cjs.map

package/dist/components/organisms/SidePanel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AAwCA;;;;;;;;;AASG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,iCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,iCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,cAAA,CAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,eAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;;"}

package/dist/components/organisms/SidePanel/index.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import { SidePanelContent } from './components/side-panel-content';
+import { SidePanelFooter } from './components/side-panel-footer';
+import { SidePanelHeader } from './components/side-panel-header';
+export type { SidePanelContentProps } from './components/side-panel-content';
+export type { SidePanelFooterProps } from './components/side-panel-footer';
+export type { SidePanelHeaderProps } from './components/side-panel-header';
+export { SIDE_PANEL_WIDTH } from './components/side-panel-region';
+export interface SidePanelProps {
+    /**
+     * Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`
+     * on `ApplicationHeader`. Opening moves focus into the panel, except when it is already open on the
+     * first render. So restore a saved open state as the initial state, as `useSidePanel` does, not in a
+     * mount effect, which would pull focus away from the page.
+     */
+    isOpen: boolean;
+    /** Called with `false` when the panel's close button is pressed. */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Names the side region for assistive technology. */
+    'aria-label': string;
+    /** Compose `SidePanel.Header`, `SidePanel.Content` and `SidePanel.Footer`. */
+    children: ReactNode;
+    /** Extra classes merged onto the panel. */
+    className?: string;
+    /** Overrides the root `data-testid` (defaults to `fd-side-panel`). Descendants derive their ids from this prefix. */
+    'data-testid'?: string;
+}
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+declare const SidePanelRoot: {
+    ({ isOpen, onOpenChange, "aria-label": ariaLabel, children, className, "data-testid": dataTestId, }: SidePanelProps): ReactNode;
+    displayName: string;
+};
+declare const SidePanel: typeof SidePanelRoot & {
+    Header: typeof SidePanelHeader;
+    Content: typeof SidePanelContent;
+    Footer: typeof SidePanelFooter;
+};
+export { SidePanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/SidePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAMjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC7E,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa;yGAOhB,cAAc,GAAG,SAAS;;CAoC5B,CAAC;AAGF,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/organisms/SidePanel/index.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
+import { AnimatePresence } from 'motion/react';
+import { useContext, useEffect } from 'react';
+import { SidePanelContent } from './components/side-panel-content.js';
+import { SidePanelFooter } from './components/side-panel-footer.js';
+import { SidePanelHeader } from './components/side-panel-header.js';
+import { SidePanelRegion } from './components/side-panel-region.js';
+export { SIDE_PANEL_WIDTH } from './components/side-panel-region.js';
+import { useOpenOnMount } from './hooks/useOpenOnMount.js';
+import { PageCoverContext } from './providers/page-cover-context.js';
+import { SidePanelContext } from './providers/side-panel-context.js';
+
+/**
+ * A side panel the user can keep open while they work, such as an AI assistant or a notifications
+ * list. It is never a modal: no backdrop, no focus trap, no scroll lock. From `lg` it is docked
+ * beside the page, which narrows to make room. Below `lg` there is no room to push, so it covers
+ * the page area under the header, which stays in reach to close it. Place it in `AppShell`'s `panel`
+ * slot, or as the last child of your own content row, and render it always: `isOpen` decides
+ * whether it shows.
+ *
+ * @summary non-modal side panel that pushes the page on desktop and covers it under the header on mobile
+ */
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
+    const isDesktop = useBreakpoints('lg');
+    const setPageCovered = useContext(PageCoverContext);
+    // Nothing renders until the viewport is known, so server and client markup agree.
+    const { canMeasureViewport, shouldFocusOnMount } = useOpenOnMount(isOpen);
+    const coversPage = canMeasureViewport && isOpen && !isDesktop;
+    useEffect(() => {
+        if (!setPageCovered || !coversPage)
+            return;
+        setPageCovered(true);
+        return () => setPageCovered(false);
+    }, [setPageCovered, coversPage]);
+    if (!canMeasureViewport)
+        return null;
+    return (jsx(SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+};
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanel = SidePanelRoot;
+SidePanel.Header = SidePanelHeader;
+SidePanel.Content = SidePanelContent;
+SidePanel.Footer = SidePanelFooter;
+
+export { SidePanel };
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/SidePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAwCA;;;;;;;;;AASG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLA,IAAC,eAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAG,eAAe;AAClC,SAAS,CAAC,OAAO,GAAG,gBAAgB;AACpC,SAAS,CAAC,MAAM,GAAG,eAAe;;;;"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = React.createContext(undefined);
+
+exports.PageCoverContext = PageCoverContext;
+//# sourceMappingURL=page-cover-context.cjs.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAIA;;;AAGG;MACU,gBAAgB,GAAGA,mBAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+export declare const PageCoverContext: import("react").Context<((isCovered: boolean) => void) | undefined>;
+//# sourceMappingURL=page-cover-context.d.ts.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,uCAA8B,OAAO,KAAK,IAAI,cAAyB,CAAC"}

package/dist/components/organisms/SidePanel/providers/page-cover-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+/**
+ * Lets the panel tell the layout around it that it is covering the page below `lg`, so the layout
+ * can take the page out of reach. `AppShell` provides it; without a provider the panel calls nothing.
+ */
+const PageCoverContext = createContext(undefined);
+
+export { PageCoverContext };
+//# sourceMappingURL=page-cover-context.js.map

package/dist/components/organisms/SidePanel/providers/page-cover-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-cover-context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/page-cover-context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;AAGG;MACU,gBAAgB,GAAG,aAAa,CAA6C,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = React.createContext(undefined);
+
+exports.SidePanelContext = SidePanelContext;
+//# sourceMappingURL=side-panel-context.cjs.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.cjs","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAUA;MACa,gBAAgB,GAAGA,mBAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.d.ts

@@ -0,0 +1,8 @@
+export interface SidePanelContextValue {
+    close: () => void;
+    /** The panel's `aria-label`, so the close button can say which panel it closes. */
+    label: string;
+}
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+export declare const SidePanelContext: import("react").Context<SidePanelContextValue | undefined>;
+//# sourceMappingURL=side-panel-context.d.ts.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,+FAA+F;AAC/F,eAAO,MAAM,gBAAgB,4DAA8D,CAAC"}

package/dist/components/organisms/SidePanel/providers/side-panel-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Provided by the panel root, read by its header, so the sections never import `../index`. */
+const SidePanelContext = createContext(undefined);
+
+export { SidePanelContext };
+//# sourceMappingURL=side-panel-context.js.map

package/dist/components/organisms/SidePanel/providers/side-panel-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-context.js","sources":["../../../../../src/components/organisms/SidePanel/providers/side-panel-context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAUA;MACa,gBAAgB,GAAG,aAAa,CAAoC,SAAS;;;;"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs

@@ -13,7 +13,7 @@ var sidebarMenuButton = require('./sidebar-menu-button.cjs');
  * Consumers who supply their own header instead should set `showMobileHeader={false}`
  * and embed a {@link SidebarMenuButton}.
  */
-const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(logoLink.LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
+const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(logoLink.LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsxRuntime.jsx(sidebarMenuButton.SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
 /**
  * The controlled slide-over drawer that holds the mobile navigation. Its open
  * state is owned by `SidebarNavigation`, so it can be driven by either the

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","LogoLink","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,cAAA,CAACC,iBAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFD,eAACE,mCAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BF,eAACG,gCAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAACM,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjON,cAAA,CAACO,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbP,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;;"}
+{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","LogoLink","SidebarMenuButton","AriaModalOverlay","cx","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHC,cAAA,CAACC,iBAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFD,eAACE,mCAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BF,eAACG,gCAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,eAAA,CAAAM,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEL,cAAA,CAACM,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjON,cAAA,CAACO,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbP,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;;"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js

@@ -11,7 +11,7 @@ import { SidebarMenuButton } from './sidebar-menu-button.js';
  * Consumers who supply their own header instead should set `showMobileHeader={false}`
  * and embed a {@link SidebarMenuButton}.
  */
-const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-secondary p-3 pl-4 lg:hidden", children: [jsx(LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
+const MobileNavigationHeader = ({ isOpen, onOpenChange, controls, homeHref, onHomePress, logoTestId, 'data-testid': dataTestId, }) => (jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsx(LogoLink, { href: homeHref, size: "sm", onClick: onHomePress, "data-testid": logoTestId }), jsx(SidebarMenuButton, { isOpen: isOpen, onPress: () => onOpenChange(!isOpen), controls: controls, "data-testid": dataTestId })] }));
 /**
  * The controlled slide-over drawer that holds the mobile navigation. Its open
  * state is owned by `SidebarNavigation`, so it can be driven by either the

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAClHC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFA,IAAC,iBAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BA,IAACC,YAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOH,GAAA,CAACI,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;"}
+{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaModalOverlay","_Fragment","AriaButton","CloseIcon","AriaModal","AriaDialog"],"mappings":";;;;;;;AA0BA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,aAAa,EAAE,UAAU,GACG,MAC5BA,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,EACrFA,IAAC,iBAAiB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAA,aAAA,EAAe,UAAU,EAAA,CAAI,CAAA,EAAA,CACjH;AAgBX;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,aAAa,EAAE,UAAU,GACG,MAC5BA,IAACC,YAAgB,EAAA,EACf,aAAa,EAAA,IAAA,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAAA,aAAA,EACrB,UAAU,EACvB,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOH,GAAA,CAACI,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,IAAC,EAAE,EAAE,EAAE,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAC7F,QAAQ,EAAA,CACE,EAAA,CACH,CAAA,EAAA,CACX,CACJ,EAAA,CACgB;;;;"}

package/dist/components/organisms/SlideoutMenu/index.cjs

@@ -6,11 +6,17 @@ var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
 
-const ModalOverlay = (props) => {
-    return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...props, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end bg-overlay/70 pl-6 outline-hidden ease-linear md:pl-10', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const ModalOverlay = ({ children, ...props }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...props, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end pl-6 outline-hidden md:pl-10', 
+        // Nothing visible changes on the overlay itself; the bare animation keeps it mounted while its children animate.
+        state.isEntering && 'duration-300 animate-in', state.isExiting && 'duration-500 animate-out', typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: cx.cx('absolute inset-0 bg-overlay/70 ease-linear', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out') }), typeof children === 'function' ? children(state) : children] })) }));
 };
 ModalOverlay.displayName = 'ModalOverlay';
-const Modal = (props) => (jsxRuntime.jsx(reactAriaComponents.Modal, { ...props, className: (state) => cx.cx('inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', state.isEntering && 'duration-300 animate-in slide-in-from-right', state.isExiting && 'duration-500 animate-out slide-out-to-right', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const Modal = (props) => (jsxRuntime.jsx(reactAriaComponents.Modal, { ...props, className: (state) => cx.cx(
+    // relative, so the panel paints above the dimmer layer.
+    'relative inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', 
+    // The distance is spelled out: the bare utilities resolve to 0.25rem here, which reads as a fade, not a slide.
+    state.isEntering && 'duration-300 animate-in slide-in-from-right-[100%]', state.isExiting && 'duration-500 animate-out slide-out-to-right-[100%]', typeof props.className === 'function' ? props.className(state) : props.className) }));
 Modal.displayName = 'Modal';
 const Dialog = ({ 'data-testid': dataTestId, ...props }) => {
     const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });

package/dist/components/organisms/SlideoutMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","cx","AriaModal","useResolvedTestId","TestIdProvider","AriaDialog","useTestIdPrefix","joinTestId","_jsxs","CloseButton","AriaDialogTrigger"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","cx","_jsxs","_Fragment","AriaModal","useResolvedTestId","TestIdProvider","AriaDialog","useTestIdPrefix","joinTestId","CloseButton","AriaDialogTrigger"],"mappings":"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"}

package/dist/components/organisms/SlideoutMenu/index.d.ts

@@ -4,7 +4,7 @@ import { DialogTrigger as AriaDialogTrigger } from 'react-aria-components';
 interface ModalOverlayProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {
 }
 export declare const ModalOverlay: {
-    (props: ModalOverlayProps): import("react").JSX.Element;
+    ({ children, ...props }: ModalOverlayProps): import("react").JSX.Element;
     displayName: string;
 };
 interface ModalProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {

package/dist/components/organisms/SlideoutMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,IAAI,qBAAqB,EAC1C,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,aAAa,IAAI,iBAAiB,EAGnC,MAAM,uBAAuB,CAAC;AAE/B,UAAU,iBAAkB,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAE3F,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAcpD,CAAC;AAGF,UAAU,UAAW,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAEpF,eAAO,MAAM,KAAK;YAAW,UAAU;;CAYtC,CAAC;AAGF,UAAU,WAAY,SAAQ,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC;IACvE,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,MAAM;8CAA6C,WAAW;;CAiB1E,CAAC;AAGF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC;IAC/G,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,oBAAoB,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,IAAI;yEAAwE,iBAAiB;;CAclG,CAAC;AAGF,QAAA,MAAM,OAAO;oDAA4D,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAYjI,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,MAAM;4EAA2E,mBAAmB;;CAezG,CAAC;AAGF,QAAA,MAAM,MAAM;8CAA6C,qBAAqB,CAAC,QAAQ,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAWpH,CAAC;AAGF,QAAA,MAAM,YAAY,EAAW,OAAO,IAAI,GAAG;IACzC,OAAO,EAAE,OAAO,iBAAiB,CAAC;IAClC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAQF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,IAAI,qBAAqB,EAC1C,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,aAAa,IAAI,iBAAiB,EAGnC,MAAM,uBAAuB,CAAC;AAE/B,UAAU,iBAAkB,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAE3F,eAAO,MAAM,YAAY;6BAA4B,iBAAiB;;CA8BrE,CAAC;AAGF,UAAU,UAAW,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAEpF,eAAO,MAAM,KAAK;YAAW,UAAU;;CActC,CAAC;AAGF,UAAU,WAAY,SAAQ,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC;IACvE,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,MAAM;8CAA6C,WAAW;;CAiB1E,CAAC;AAGF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC;IAC/G,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,oBAAoB,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,IAAI;yEAAwE,iBAAiB;;CAclG,CAAC;AAGF,QAAA,MAAM,OAAO;oDAA4D,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAYjI,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,MAAM;4EAA2E,mBAAmB;;CAezG,CAAC;AAGF,QAAA,MAAM,MAAM;8CAA6C,qBAAqB,CAAC,QAAQ,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAWpH,CAAC;AAGF,QAAA,MAAM,YAAY,EAAW,OAAO,IAAI,GAAG;IACzC,OAAO,EAAE,OAAO,iBAAiB,CAAC;IAClC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAQF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/organisms/SlideoutMenu/index.js

@@ -1,14 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, TestIdProvider, useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Dialog as Dialog$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, DialogTrigger } from 'react-aria-components';
 
-const ModalOverlay = (props) => {
-    return (jsx(ModalOverlay$1, { ...props, className: (state) => cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end bg-overlay/70 pl-6 outline-hidden ease-linear md:pl-10', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const ModalOverlay = ({ children, ...props }) => {
+    return (jsx(ModalOverlay$1, { ...props, className: (state) => cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end pl-6 outline-hidden md:pl-10', 
+        // Nothing visible changes on the overlay itself; the bare animation keeps it mounted while its children animate.
+        state.isEntering && 'duration-300 animate-in', state.isExiting && 'duration-500 animate-out', typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsxs(Fragment, { children: [jsx("div", { "aria-hidden": "true", className: cx('absolute inset-0 bg-overlay/70 ease-linear', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out') }), typeof children === 'function' ? children(state) : children] })) }));
 };
 ModalOverlay.displayName = 'ModalOverlay';
-const Modal = (props) => (jsx(Modal$1, { ...props, className: (state) => cx('inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', state.isEntering && 'duration-300 animate-in slide-in-from-right', state.isExiting && 'duration-500 animate-out slide-out-to-right', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const Modal = (props) => (jsx(Modal$1, { ...props, className: (state) => cx(
+    // relative, so the panel paints above the dimmer layer.
+    'relative inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', 
+    // The distance is spelled out: the bare utilities resolve to 0.25rem here, which reads as a fade, not a slide.
+    state.isEntering && 'duration-300 animate-in slide-in-from-right-[100%]', state.isExiting && 'duration-500 animate-out slide-out-to-right-[100%]', typeof props.className === 'function' ? props.className(state) : props.className) }));
 Modal.displayName = 'Modal';
 const Dialog = ({ 'data-testid': dataTestId, ...props }) => {
     const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });

package/dist/components/organisms/SlideoutMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","AriaModal","AriaDialog","_jsxs","AriaDialogTrigger"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","_jsxs","_Fragment","AriaModal","AriaDialog","AriaDialogTrigger"],"mappings":"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"}

package/dist/components/templates/AppShell/hooks/usePageCover.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var utils = require('@react-aria/utils');
+var React = require('react');
+
+/**
+ * Takes the page area out of reach while a `SidePanel` covers it below `lg`. The shell keeps its own
+ * handle on the scroll area while still forwarding the app's ref. `inert` is written to the element
+ * rather than held in state: the closing panel hands focus back in the same effect pass, and a page
+ * still inert would refuse it.
+ *
+ * @returns the ref to put on the scroll area, and the setter to provide through `PageCoverContext`
+ */
+const usePageCover = (forwardedRef) => {
+    const scrollAreaRef = utils.useObjectRef(forwardedRef);
+    const setPageCovered = React.useCallback((isCovered) => {
+        if (scrollAreaRef.current)
+            scrollAreaRef.current.inert = isCovered;
+    }, [scrollAreaRef]);
+    return { scrollAreaRef, setPageCovered };
+};
+
+exports.usePageCover = usePageCover;
+//# sourceMappingURL=usePageCover.cjs.map

package/dist/components/templates/AppShell/hooks/usePageCover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageCover.cjs","sources":["../../../../../src/components/templates/AppShell/hooks/usePageCover.ts"],"sourcesContent":[null],"names":["useObjectRef","useCallback"],"mappings":";;;;;AAMA;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAC,YAA6C,KAAI;AAC5E,IAAA,MAAM,aAAa,GAAGA,kBAAY,CAAC,YAAY,CAAC;AAEhD,IAAA,MAAM,cAAc,GAAGC,iBAAW,CAChC,CAAC,SAAkB,KAAI;QACrB,IAAI,aAAa,CAAC,OAAO;AAAE,YAAA,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS;AACpE,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAChB;AAED,IAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE;AAC1C;;;;"}

package/dist/components/templates/AppShell/hooks/usePageCover.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'react';
+/**
+ * Takes the page area out of reach while a `SidePanel` covers it below `lg`. The shell keeps its own
+ * handle on the scroll area while still forwarding the app's ref. `inert` is written to the element
+ * rather than held in state: the closing panel hands focus back in the same effect pass, and a page
+ * still inert would refuse it.
+ *
+ * @returns the ref to put on the scroll area, and the setter to provide through `PageCoverContext`
+ */
+export declare const usePageCover: (forwardedRef: Ref<HTMLDivElement> | undefined) => {
+    scrollAreaRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    setPageCovered: (isCovered: boolean) => void;
+};
+//# sourceMappingURL=usePageCover.d.ts.map

package/dist/components/templates/AppShell/hooks/usePageCover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageCover.d.ts","sourceRoot":"","sources":["../../../../../src/components/templates/AppShell/hooks/usePageCover.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,cAAc,GAAG,CAAC,cAAc,CAAC,GAAG,SAAS;;gCAI1D,OAAO;CAOtB,CAAC"}

package/dist/components/templates/AppShell/hooks/usePageCover.js

@@ -0,0 +1,22 @@
+import { useObjectRef } from '@react-aria/utils';
+import { useCallback } from 'react';
+
+/**
+ * Takes the page area out of reach while a `SidePanel` covers it below `lg`. The shell keeps its own
+ * handle on the scroll area while still forwarding the app's ref. `inert` is written to the element
+ * rather than held in state: the closing panel hands focus back in the same effect pass, and a page
+ * still inert would refuse it.
+ *
+ * @returns the ref to put on the scroll area, and the setter to provide through `PageCoverContext`
+ */
+const usePageCover = (forwardedRef) => {
+    const scrollAreaRef = useObjectRef(forwardedRef);
+    const setPageCovered = useCallback((isCovered) => {
+        if (scrollAreaRef.current)
+            scrollAreaRef.current.inert = isCovered;
+    }, [scrollAreaRef]);
+    return { scrollAreaRef, setPageCovered };
+};
+
+export { usePageCover };
+//# sourceMappingURL=usePageCover.js.map

package/dist/components/templates/AppShell/hooks/usePageCover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageCover.js","sources":["../../../../../src/components/templates/AppShell/hooks/usePageCover.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAMA;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAC,YAA6C,KAAI;AAC5E,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC;AAEhD,IAAA,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,SAAkB,KAAI;QACrB,IAAI,aAAa,CAAC,OAAO;AAAE,YAAA,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS;AACpE,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAChB;AAED,IAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE;AAC1C;;;;"}

package/dist/components/templates/AppShell/index.cjs

@@ -3,25 +3,31 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var pageCoverContext = require('../../organisms/SidePanel/providers/page-cover-context.cjs');
+var usePageCover = require('./hooks/usePageCover.cjs');
 
 /**
  * Layout-only template for an app shell: navigation beside a content column that stacks the
- * header above the page, with an optional side panel that pushes the page instead of covering it.
- * The shell is exactly the height of the window and the document never scrolls: the page content
- * scrolls in its own area under the header, so the header, navigation and side panel stay in place
- * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
- * app keeps ownership of navigation, search and panel state.
+ * header above the page, with an optional side panel under the header. The shell is exactly the
+ * height of the window and the document never scrolls: the page content scrolls in its own area
+ * under the header, so the header, navigation and side panel stay in place with no sticky
+ * positioning. It holds no state and renders whatever is passed to its slots, so the app keeps
+ * ownership of navigation, search and panel state.
  *
  * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
  */
 const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className, 'data-testid': dataTestId }) => {
     const appShellTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
+    // A `SidePanel` in the `panel` slot calls the setter while it covers the page area below `lg`.
+    const { scrollAreaRef, setPageCovered } = usePageCover.usePageCover(scrollAreaProps?.ref);
     return (
     // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
-    jsxRuntime.jsxs("div", { "data-testid": appShellTestId, className: cx.cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1", children: [jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(appShellTestId, 'scroll-area'), 
+    jsxRuntime.jsxs("div", { "data-testid": appShellTestId, className: cx.cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(appShellTestId, 'scroll-area'), 
                                 // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
                                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
-                                tabIndex: 0, className: "flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), panel] })] })] }));
+                                tabIndex: 0, 
+                                // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
+                                className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsxRuntime.jsx(pageCoverContext.PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }));
 };
 
 exports.AppShell = AppShell;

package/dist/components/templates/AppShell/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsxs","cx","_jsx","joinTestId"],"mappings":";;;;;;AAmCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAE7G;;IAEEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAEC,KAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5H,OAAO,EAGRD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,aAClD,MAAM,EAEPA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,aAClCE,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,eAAe,GAAG,aAAa,CAAC,IAAIC,sBAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAElI,QAAQ,EAAA,CACL,EAEL,KAAK,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","usePageCover","_jsxs","cx","_jsx","joinTestId","PageCoverContext"],"mappings":";;;;;;;;AAsCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAGC,yBAAY,CAAC,eAAe,EAAE,GAAG,CAAC;IAE5E;;IAEEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAEC,KAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,aAC5H,OAAO,EAGRD,yBAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDE,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAIC,sBAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC;;gCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAEND,cAAA,CAACE,iCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,GAA6B,CAAA,EAAA,CACjF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/templates/AppShell/index.d.ts

@@ -13,8 +13,9 @@ export interface AppShellProps {
     /** Top bar, rendered at the top of the content column. It stays in place while the page area scrolls. Compose `<ApplicationHeader>` here. */
     header?: ReactNode;
     /**
-     * Side panel rendered under the header, beside the page area, which narrows to make room. It fills
-     * the height under the header and stays in view while the page area scrolls.
+     * Side panel rendered under the header. From `lg` it sits beside the page area, which narrows to make
+     * room. Below `lg` it covers the page area, which is then out of reach of keyboard and assistive
+     * technology until the panel closes. Compose one `<SidePanel>` here and switch its content.
      */
     panel?: ReactNode;
     /** Page content, normally a `<PageLayout>`. Rendered inside the shell's scroll area. */
@@ -28,11 +29,11 @@ export interface AppShellProps {
 }
 /**
  * Layout-only template for an app shell: navigation beside a content column that stacks the
- * header above the page, with an optional side panel that pushes the page instead of covering it.
- * The shell is exactly the height of the window and the document never scrolls: the page content
- * scrolls in its own area under the header, so the header, navigation and side panel stay in place
- * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
- * app keeps ownership of navigation, search and panel state.
+ * header above the page, with an optional side panel under the header. The shell is exactly the
+ * height of the window and the document never scrolls: the page content scrolls in its own area
+ * under the header, so the header, navigation and side panel stay in place with no sticky
+ * positioning. It holds no state and renders whatever is passed to its slots, so the app keeps
+ * ownership of navigation, search and panel state.
  *
  * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
  */

package/dist/components/templates/AppShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/AppShell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,uBAAuB;IACtC,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wGAAwG;IACxG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6IAA6I;IAC7I,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,6FAA6F,aAAa,KAAG,SA8BrI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/AppShell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,uBAAuB;IACtC,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wGAAwG;IACxG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6IAA6I;IAC7I,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,6FAA6F,aAAa,KAAG,SAkCrI,CAAC"}