@amboss/design-system 4.8.0 → 4.8.1-canary.0

package/build/cjs/components/Internal/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps } from "react-resizable-panels";
+import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps, PanelSize } from "react-resizable-panels";
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
@@ -37,8 +37,12 @@ export type PanelProps = {
     /** Persist sizes (keyed by `persistenceKey` + the current panel-id set). */
     persistenceKey?: string;
     storage?: LayoutStorage;
-    /** Reports a settled drag-resize (size as a "%" string). */
-    onResize: (id: string, size: string) => void;
+    /** Reports a panel's size whenever its column is measured at a new one -
+     *  after a drag, a window resize, or a sibling opening. Both units come from
+     *  the library's own measurement of the column, so a consumer remembering
+     *  a width never has to read the DOM for it. Collapses are reported through
+     *  `onCollapse` instead, never as a size. */
+    onResize: (id: string, size: PanelSize) => void;
     /** Reports a drag past `minSize` on a collapsible panel. */
     onCollapse: (id: string) => void;
     /** Ref callback for a panel's imperative handle (resize/getSize), used to

package/build/cjs/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e1q4b9dw0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e1q4b9dw1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"ervy0ss0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"ervy0ss1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}

package/build/cjs/components/Internal/PanelHeader/PanelHeader.d.ts

@@ -5,8 +5,9 @@ import type { IconProps } from "../../Icon/Icon";
  * panel's accessible name comes from its `aria-label`.
  */
 export type PanelHeaderTitle = {
-    /** Visible title label. */
-    label: string;
+    /** Visible title label. Clamped, so a label that outruns the header
+     *  truncates on one line rather than reflowing the panel body beneath it. */
+    label: React.ReactNode;
     /** Optional leading icon. Decorative — the visible label names it. */
     icon?: Omit<IconProps, "size" | "aria-label" | "aria-labelledby" | "role">;
     /** Show the title block. Default `true`. */
@@ -17,8 +18,11 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, vertically centered. */
+    /** Rendered at the header end, aligned to the top of multi-line content. */
     rightSlot?: React.ReactNode;
+    /** Fade the leading group out. `rightSlot` is left solid: it is the control
+     *  that travels down onto the left bar's own and has to survive the dissolve. */
+    isContentFaded?: boolean;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -28,4 +32,4 @@ export type PanelHeaderProps = {
  * carries the semantics (heading, buttons). Place it inside `Sandwich.Header`
  * to get the sticky positioning and scroll separator.
  */
-export declare function PanelHeader({ leftSlot, title, rightSlot, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;
+export declare function PanelHeader({ leftSlot, title, rightSlot, isContentFaded, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;

package/build/cjs/components/Internal/PanelHeader/PanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e1ck2tjp0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e1ck2tjp1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e1ck2tjp2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e1ck2tjp3",label:"StyledSlotContent"})({width:"max-content"}),StyledTrailingGroup=(0,_styled.default)("div",{target:"e1ck2tjp4",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}

package/build/cjs/components/Internal/Sandwich/-types.d.ts

@@ -7,6 +7,11 @@ export type SandwichProps = {
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Forwarded to the scroll container element (e.g. for scroll restoration). */
     scrollRef?: React.Ref<HTMLDivElement>;
+    /** Hides the scroll region's scrollbar and stops it scrolling sideways. For
+     *  frames too narrow to spare a scrollbar's width - which are the frames
+     *  holding content wider than themselves, clipped at the edge. The region
+     *  still scrolls vertically by wheel and keyboard. */
+    hideScrollbar?: boolean;
 };
 /**
  * Separator visibility:

package/build/cjs/components/Internal/Sandwich/Sandwich.d.ts

@@ -12,7 +12,7 @@ import { SandwichFooter } from "./SandwichFooter";
  * content is scrolled under them; edge state is shared through context (see
  * `useSandwichContext.tsx`).
  */
-declare function SandwichRoot({ children, scrollRef, onScroll, }: SandwichProps): React.ReactElement;
+declare function SandwichRoot({ children, scrollRef, onScroll, hideScrollbar, }: SandwichProps): React.ReactElement;
 /**
  * Compound export: `Sandwich` with `.Header` / `.Footer` attached.
  * Object.assign keeps the static sub-components typed on the root

package/build/cjs/components/Internal/Sandwich/Sandwich.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"ejnp4220",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"ejnp4221",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"ejnp4222",label:"StyledScrollBody"})({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative"}),StyledScrollContent=(0,_styled.default)("div",{target:"ejnp4223",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"e13bq2vk0",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"e13bq2vk1",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"e13bq2vk2",label:"StyledScrollBody"})(({hideScrollbar})=>({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative",...hideScrollbar&&{scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},overflowX:"hidden"}})),StyledScrollContent=(0,_styled.default)("div",{target:"e13bq2vk3",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll,hideScrollbar=!1}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,hideScrollbar:hideScrollbar,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});

package/build/cjs/components/Layout/-types.d.ts

@@ -15,7 +15,9 @@ import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 export type Size = number | string;
 /**
  * - `sidebar` - in-flow resizable panel.
- * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED - not implemented yet.**
+ * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED on the right panel -
+ *   not implemented there yet.** Implemented for the left panel, which declares
+ *   it through {@link LeftPanelVariant}.
  *   Currently treated like `sidebar` (renders in-flow); the overlay
  *   implementation lands in a later commit.
  * - `float` - detached floating window pinned to the bottom-right viewport
@@ -29,11 +31,15 @@ export type Variant = "sidebar" | "offcanvas" | "float";
 export type RightPanelVariant = Variant;
 /**
  * - `sidebar` - in-flow resizable column.
- * - `drawer` - modal overlay pinned to the left edge. Out of the resizable row,
- *   so it costs no docked column - the mobile presentation, and what a rule
- *   switches to when the budget has no column left.
+ * - `drawer` - modal overlay pinned to the left edge, with a backdrop and a
+ *   focus trap. Out of the resizable row, so it costs no docked column - the
+ *   mobile presentation.
+ * - `offcanvas` - the same overlay without the dialog: no backdrop, no focus
+ *   trap, the page behind stays live. Also out of the row, so it is what a rule
+ *   switches to when the docked budget has no column left but the panel should
+ *   stay reachable rather than be hidden.
  */
-export type LeftPanelVariant = "sidebar" | "drawer";
+export type LeftPanelVariant = "sidebar" | "drawer" | "offcanvas";
 export type { PanelKey, SidePanelKey, SlotKey };
 /** Everything both side panels hold. `variant` is declared per slot below, so
  *  each panel's state only admits the variants it can actually render. */
@@ -245,7 +251,8 @@ export type LeftPanelHandle = PanelHandleActions & {
     state: LeftPanelState & {
         variant: LeftPanelVariant;
     };
-    /** Switch render variant: an in-flow column, or the modal drawer. */
+    /** Switch render variant: an in-flow column, the modal drawer, or the
+     *  non-modal offcanvas overlay. */
     setVariant: (variant: LeftPanelVariant) => void;
 };
 export type RightPanelHandle = PanelHandleActions & {
@@ -302,7 +309,28 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
 };
-export type LeftPanelProps = SidePanelProps & {
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize"> & {
+    /** Pixels. Unlike the other panels the left panel takes no percentage: with a
+     *  left bar its content is pinned to this width and clipped as the column narrows,
+     *  and a percentage would resolve against the narrowing column instead of the
+     *  width it opens to - so the content would reflow mid-slide, which is the one
+     *  thing the pin exists to prevent.
+     *
+     *  Sets the column's starting width only: the docked panel keeps that width
+     *  when the window resizes, and `Layout.Content` grows and shrinks around it.
+     *  Drag-resizing is a separate story - see `resizable`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** Props forwarded to the panel's internal parts. Required: the left bar
+     *  always carries the button that opens the panel, and it is icon-only, so its
+     *  accessible name can only come from here. Give it the action - the panel's
+     *  own `aria-label` already names the region it opens. */
+    slotProps: {
+        toggleButton: {
+            "aria-label": string;
+        };
+    };
     /** Accessible name for the panel. Used to label the modal drawer it renders
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
@@ -377,8 +405,31 @@ export type PanelSlotFooterProps = {
     children: React.ReactNode;
     "data-e2e-test-id"?: string;
 };
-export type LeftPanelHeaderProps = PanelSlotHeaderProps;
+export type LeftPanelHeaderProps = PanelSlotHeaderProps & {
+    /** Title block (icon + heading), rendered after `leftSlot`. Reach for it
+     *  rather than `leftSlot` for a title that can outrun the header: the block
+     *  clamps, where `leftSlot` keeps its content at full width and lets the
+     *  header clip it. */
+    title?: PanelHeaderTitle;
+    /** Rendered beneath the title row, still inside the header: content that
+     *  belongs with the header rather than with the scrolling body, such as a
+     *  progress strip or a filter row. It sticks with the header and dissolves
+     *  with it when the panel narrows to its bar. */
+    children?: React.ReactNode;
+};
 export type LeftPanelFooterProps = PanelSlotFooterProps;
+/**
+ * Left bar contents for a `Layout.LeftPanel` whose left bar differs from its panel.
+ * Holds the button that opens the panel, plus the consumer's own navigation.
+ */
+export type LeftNavBarProps = {
+    /** Content in source order; `Layout.LeftNavBarFooter` sticks to the bottom,
+     *  everything else scrolls. Optional - a left bar that carries nothing but the
+     *  button that opens the panel is a left bar too. */
+    children?: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+export type LeftNavBarFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the right panel header, after `leftSlot`. Visual only — the
  * panel's accessible name comes from `Layout.RightPanel`'s `aria-label`.
@@ -441,12 +492,17 @@ export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
+    /** DOM id of the container, so a control outside the panel can reference it. */
+    id?: string;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
     showBorderRight?: boolean;
+    /** Hides the scroll region's scrollbar - for panels too narrow to spare its
+     *  width. */
+    hideScrollbar?: boolean;
     "data-e2e-test-id"?: string;
 };
 export type RightPanelProps = SidePanelProps & {

package/build/cjs/components/Layout/Layout.d.ts

@@ -7,6 +7,8 @@ import { RightPanelFooter } from "./RightPanel/RightPanelFooter";
 import { LeftPanel } from "./LeftPanel/LeftPanel";
 import { LeftPanelHeader } from "./LeftPanel/LeftPanelHeader";
 import { LeftPanelFooter } from "./LeftPanel/LeftPanelFooter";
+import { LeftNavBar } from "./LeftNavBar/LeftNavBar";
+import { LeftNavBarFooter } from "./LeftNavBar/LeftNavBarFooter";
 import { Split } from "./Split/Split";
 import { SplitHeader } from "./Split/SplitHeader";
 import { SplitFooter } from "./Split/SplitFooter";
@@ -19,6 +21,8 @@ declare function LayoutBase({ children, persistenceKey, storage, rules, addition
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
     LeftPanel: typeof LeftPanel;
+    LeftNavBar: typeof LeftNavBar;
+    LeftNavBarFooter: typeof LeftNavBarFooter;
     LeftPanelHeader: typeof LeftPanelHeader;
     LeftPanelFooter: typeof LeftPanelFooter;
     RightPanel: typeof RightPanel;

package/build/cjs/components/Layout/Layout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1kuzc310",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"e1kuzc311",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kuzc312",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e1kuzc313",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1kuzc314",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},isSolo?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1no219g0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1no219g1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1no219g2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1no219g3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e1no219g4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1no219g5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===_constants.Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

package/build/cjs/components/Layout/LeftNavBar/LeftNavBar.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { LeftNavBarProps } from "../-types";
+/**
+ * What `Layout.LeftPanel` shows in the left bar beneath the button that opens
+ * it, for panels whose left bar carries something other than the panel's own
+ * leading column - persistent destinations beside an article outline, say.
+ * Author it among the panel's children; it renders into the layer behind the
+ * panel, so opening widens that one column rather than adding a second box.
+ *
+ * Optional: the bar keeps its open button either way. This only fills the strip
+ * below it, on its own terms - scrolling, and sticking a
+ * `Layout.LeftNavBarFooter` to the bottom.
+ *
+ * Renders nothing where the panel has no left bar, so the mobile drawer shows
+ * the panel's own content alone even though the left bar is authored among it.
+ */
+export declare function LeftNavBar({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarProps): React.ReactElement | null;

package/build/cjs/components/Layout/LeftNavBar/LeftNavBar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBar",{enumerable:!0,get:function(){return LeftNavBar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_reactdom=require("react-dom"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftBarContext=require("../LeftPanel/useLeftBarContext"),StyledNavBarFrame=(0,_styled.default)("div",{target:"e1e9dsmx0",label:"StyledNavBarFrame"})({height:"100%"});function LeftNavBar({children,"data-e2e-test-id":dataE2eTestId}){let{slotNode}=(0,_useLeftBarContext.useLeftBarContext)();return slotNode?(0,_reactdom.createPortal)(_react.default.createElement(StyledNavBarFrame,{"data-ds-id":"LeftNavBar","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0},children)),slotNode):null}

package/build/cjs/components/Layout/LeftNavBar/LeftNavBarFooter.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { LeftNavBarFooterProps } from "../-types";
+/**
+ * Optional sticky footer for `Layout.LeftNavBar` - place it among the left bar's
+ * children; it sticks to the bottom while the rest of the content scrolls.
+ */
+export declare function LeftNavBarFooter({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarFooterProps): React.ReactElement;

package/build/cjs/components/Layout/LeftNavBar/LeftNavBarFooter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBarFooter",{enumerable:!0,get:function(){return LeftNavBarFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftNavBarFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}

package/build/cjs/components/Layout/LeftPanel/LeftBarLayers.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { CSSObject, Theme } from "@emotion/react";
+import type { ForwardedScrollProps } from "../-types";
+/**
+ * The box the layers live in: one surface, one divider, and a clip. Shared by
+ * the two presentations that carry a left bar - the in-row column and the offcanvas
+ * overlay - which differ only in how they are positioned and sized.
+ *
+ * The surface is painted here, once and constantly, so nothing new appears
+ * mid-collapse: were each layer to paint its own, fading the panel's would only
+ * uncover the left bar's, identical and full-width, and the dissolve would reveal
+ * nothing.
+ *
+ * The divider is overlaid on the trailing edge rather than declared as a border,
+ * so it costs the box no width - the left bar's leading column and the header's
+ * trailing button are placed against the full width, and a border would put them
+ * half a pixel out.
+ */
+export declare const getLeftBarColumnStyles: (theme: Theme) => CSSObject;
+/**
+ * Where the box's top edge sits: below a sticky subnav, by the offset the subnav
+ * publishes, and at the host's top when no subnav is mounted. The edge moves
+ * with the subnav, so the transition is the one the subnav slides with, and
+ * the two travel as one. `RightPanelDocked` tracks the same var the same way,
+ * so the two side panels stay level.
+ */
+export declare const LEFT_BAR_TOP_INSET: string;
+export declare const getLeftBarTopTransition: (theme: Theme) => string;
+export type LeftBarLayersProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    isVisible: boolean;
+    /** Width the panel's content holds on to while the box is narrower. */
+    openWidth: string;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    "aria-label"?: string;
+};
+/**
+ * The left bar and the panel, stacked in one box. Whichever of the two is showing,
+ * the box's width alone does the animating: content and footer hold `openWidth`
+ * and are clipped as it narrows, so nothing in them moves, while the header is
+ * left to narrow with the box - which walks its trailing control down into the
+ * left bar.
+ */
+export declare const LeftBarLayers: React.FC<LeftBarLayersProps>;

package/build/cjs/components/Layout/LeftPanel/LeftBarLayers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LEFT_BAR_TOP_INSET(){return LEFT_BAR_TOP_INSET},get LeftBarLayers(){return LeftBarLayers},get getLeftBarColumnStyles(){return getLeftBarColumnStyles},get getLeftBarTopTransition(){return getLeftBarTopTransition}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useDocument=require("../../../shared/useDocument"),_mixins=require("../../../shared/mixins"),_constants=require("../-constants"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelId=require("../useLeftPanelId"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),_useLeftBarContext=require("./useLeftBarContext"),_LeftBarToggle=require("./LeftBarToggle"),getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}}),LEFT_BAR_TOP_INSET=`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`},StyledLeftBarLayer=(0,_styled.default)("div",{target:"e1oedn8k0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=(0,_styled.default)("div",{target:"e1oedn8k1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=(0,_styled.default)("div",{target:"e1oedn8k2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=(0,_styled.default)("div",{target:"e1oedn8k3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()},LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),document=(0,_useDocument.useDocument)(),leftBarLayerRef=(0,_react.useRef)(null),panelLayerRef=(0,_react.useRef)(null),toggleRef=(0,_react.useRef)(null),[leftBarSlotNode,setLeftBarSlotNode]=(0,_react.useState)(null),leftBarSlot=(0,_react.useMemo)(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=(0,_react.useMemo)(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=(0,_react.useRef)(isVisible);return(0,_react.useEffect)(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),_react.default.createElement(_useLeftBarContext.LeftBarProvider,{value:leftBarSlot},_react.default.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},_react.default.createElement(_LeftBarToggle.LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),_react.default.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),_react.default.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(_useLeftPanelCollapseContext.LeftPanelCollapseProvider,{value:collapseState},_react.default.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};

package/build/cjs/components/Layout/LeftPanel/LeftBarToggle.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export type LeftBarToggleProps = {
+    /** Accessible name for the button, which is icon-only. */
+    "aria-label"?: string;
+    /** Handed out so the layer above can put focus here when the panel closes -
+     *  this is the control that replaces the one the panel is taking away. */
+    buttonRef?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * The one control the left bar always carries: the button that opens the panel
+ * back up. It belongs to the bar rather than to `Layout.LeftNavBar` - which only
+ * adds content beneath it - because a panel that authored no nav bar would
+ * otherwise close to a strip with no way back out of it.
+ */
+export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;

package/build/cjs/components/Layout/LeftPanel/LeftBarToggle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

package/build/cjs/components/Layout/LeftPanel/LeftPanel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)();(0,_registry.useVisibleChange)(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),_LeftPanelOffcanvas=require("./LeftPanelOffcanvas"),pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320,LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)(),leftPanelId=(0,_react.useId)(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if((0,_registry.useVisibleChange)(isVisible,onVisibleChange),!canRender)return null;let drawer=_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=_react.default.createElement(_LeftPanelOffcanvas.LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{toggleButtonLabel:slotProps.toggleButton["aria-label"],"aria-label":ariaLabel,defaultSize:resolvedDefaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return _react.default.createElement(_useLeftPanelId.LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};

package/build/cjs/components/Layout/LeftPanel/LeftPanelDocked.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
-import type { ForwardedScrollProps, Size } from "../-types";
+import type { ForwardedScrollProps } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
     "aria-label"?: string;
-    defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
+    /** Pixel width the column widens to. Resolved by `LeftPanel` from its own
+     *  prop and the provider config, so it is always a width. */
+    defaultSize: number;
+    minSize?: number;
+    maxSize?: number;
     collapsible?: boolean;
     resizable?: boolean;
 };
@@ -13,9 +17,15 @@ export type LeftPanelDockedProps = ForwardedScrollProps & {
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
  * content into the Group's host - an in-flow, resizable column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
- * lives in a {@link PanelContainer} so `Layout.LeftPanelHeader` /
+ * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation
  * lives in {@link LeftPanelDrawer}; `LeftPanel` picks between the two by
  * breakpoint.
+ *
+ * The column never leaves the row: it rests at the left bar's width and widens
+ * to `defaultSize`. Content and footer hold the open width and are clipped, so
+ * nothing in them moves - the panel simply shows less of itself. The header is
+ * left to narrow with the column, which walks a control at its trailing edge
+ * down into the left bar.
  */
 export declare const LeftPanelDocked: React.FC<LeftPanelDockedProps>;

package/build/cjs/components/Layout/LeftPanel/LeftPanelDocked.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_LeftBarLayers=require("./LeftBarLayers"),_useLayout=require("../useLayout"),StyledLeftBarColumn=(0,_styled.default)("div",{target:"e1apd56i0",label:"StyledLeftBarColumn"})(({theme})=>({position:"absolute",left:0,right:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,transition:(0,_LeftBarLayers.getLeftBarTopTransition)(theme),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)})),LeftPanelDocked=({children,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel];return(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,_react.default.createElement(StyledLeftBarColumn,null,_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/cjs/components/Layout/LeftPanel/LeftPanelDrawer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e158aetq0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/cjs/components/Layout/LeftPanel/LeftPanelFooter.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_mixins=require("../../../shared/mixins"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledFadingFooter=(0,_styled.default)("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

package/build/cjs/components/Layout/LeftPanel/LeftPanelHeader.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import type { LeftPanelHeaderProps } from "../-types";
 /**
- * Optional sticky header for `Layout.LeftPanel` - place it among the panel's
- * children; it sticks to the top while the rest of the content scrolls.
+ * Header for the left panel. Place among `Layout.LeftPanel`'s children; it
+ * sticks to the top while the rest of the content scrolls. Content is a left
+ * slot, an optional title, a right slot, and beneath them whatever is passed as
+ * `children`.
  */
-export declare function LeftPanelHeader({ leftSlot, rightSlot, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;
+export declare function LeftPanelHeader({ leftSlot, title, rightSlot, children, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;

package/build/cjs/components/Layout/LeftPanel/LeftPanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader");function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_getLeftPanelFadeStyles=require("../../../shared/mixins/getLeftPanelFadeStyles"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledHeaderStrip=(0,_styled.default)("div",{target:"e1asip2n0",label:"StyledHeaderStrip"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_getLeftPanelFadeStyles.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:rightSlot,isContentFaded:isContentFaded}),children&&_react.default.createElement(StyledHeaderStrip,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

package/build/cjs/components/Layout/LeftPanel/LeftPanelOffcanvas.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ForwardedScrollProps } from "../-types";
+export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    isVisible: boolean;
+    hide: () => void;
+    openWidth: string;
+    "aria-label"?: string;
+};
+/**
+ * Left panel as a non-modal overlay: a drawer without the dialog. Used when the
+ * docked budget has no column left but the panel should stay reachable - it
+ * opens over the row instead of taking a column from it, and instead of being
+ * hidden outright. The left bar stays on screen throughout; only the mobile drawer
+ * gives it up.
+ *
+ * Deliberately not a {@link Drawer}: a Drawer traps focus, claims `aria-modal`
+ * and covers the viewport with a click-catching layer. Here the page behind
+ * stays live and usable, so the panel is a plain `region` (named by
+ * `aria-label`) that happens to be layered - nothing about it is modal.
+ *
+ * It still dismisses like something laid over the page, because that is what it
+ * is: Escape and a click beyond its edge both close it back to its left bar. Only
+ * while it is open - closed, it is just the left bar, and the left bar is not something
+ * to dismiss.
+ */
+export declare const LeftPanelOffcanvas: React.FC<LeftPanelOffcanvasProps>;

package/build/cjs/components/Layout/LeftPanel/LeftPanelOffcanvas.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelOffcanvas",{enumerable:!0,get:function(){return LeftPanelOffcanvas}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_LeftBarLayers=require("./LeftBarLayers"),_constants=require("../-constants"),_registry=require("../registry"),_useOnEscapePress=require("../../../shared/useOnEscapePress"),_useOutsideClick=require("../../../shared/useOutsideClick"),getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=(0,_styled.default)("div",{target:"exeyzov0",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=(0,_styled.default)("div",{target:"exeyzov1",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)}}),LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)();(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{});let columnRef=(0,_react.useRef)(null);(0,_useOnEscapePress.useOnEscapePress)(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),(0,_useOutsideClick.useOutsideClick)(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),_react.default.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/cjs/components/Layout/LeftPanel/useLeftBarContext.d.ts

@@ -0,0 +1,11 @@
+export type LeftBarSlot = {
+    /** Static host the left bar's content portals into. Null until the layer
+     *  behind the panel has mounted, and never provided at all by the
+     *  presentations that carry no left bar - which is how `Layout.LeftNavBar`
+     *  knows to render nothing on mobile, where the drawer shows the panel's own
+     *  content alone. */
+    slotNode: HTMLElement | null;
+};
+export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
+/** The left bar slot behind the left panel, if this presentation has one. */
+export declare function useLeftBarContext(): LeftBarSlot;