@amboss/design-system 4.6.4 → 4.6.6-canary.0

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

@@ -0,0 +1 @@
+import React,{useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{useDocument}from"../../../shared/useDocument";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{PAGE_BOTTOM_BAR_INSET}from"../-constants";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelId}from"../useLeftPanelId";import{LeftPanelCollapseProvider}from"./useLeftPanelCollapseContext";import{LeftBarProvider}from"./useLeftBarContext";import{LeftBarToggle}from"./LeftBarToggle";export const getLeftBarColumnStyles=theme=>({height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,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}});let StyledLeftBarLayer=styled("div",{target:"e1niasex0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=styled("div",{target:"e1niasex1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=styled("div",{target:"e1niasex2",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=styled("div",{target:"e1niasex3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()};export const LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId(),document=useDocument(),leftBarLayerRef=useRef(null),panelLayerRef=useRef(null),toggleRef=useRef(null),[leftBarSlotNode,setLeftBarSlotNode]=useState(null),leftBarSlot=useMemo(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=useMemo(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=useRef(isVisible);return useEffect(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),React.createElement(LeftBarProvider,{value:leftBarSlot},React.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},React.createElement(LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),React.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),React.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},React.createElement(Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(LeftPanelCollapseProvider,{value:collapseState},React.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};

package/build/esm/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/esm/components/Layout/LeftPanel/LeftBarToggle.js

@@ -0,0 +1 @@
+import React from"react";import{Box}from"../../Box/Box";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useLeftPanelId}from"../useLeftPanelId";export function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=useLayout()[Slot.leftPanel],leftPanelId=useLeftPanelId();return React.createElement(Box,{space:"s",vSpace:"xs"},React.createElement(PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";export const LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel();useVisibleChange(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+import React,{useId}from"react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{LeftPanelIdContext}from"../useLeftPanelId";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";import{LeftPanelOffcanvas}from"./LeftPanelOffcanvas";let pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320;export const LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel(),leftPanelId=useId(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if(useVisibleChange(isVisible,onVisibleChange),!canRender)return null;let drawer=React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=React.createElement(LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=React.createElement(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.createElement(LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};

package/build/esm/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/esm/components/Layout/LeftPanel/LeftPanelDocked.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{PanelSlideBody}from"../PanelSlideBody";import{PanelContainer}from"../PanelContainer";export const LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return useLayoutPortal(Slot.leftPanel,isMounted?React.createElement(PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},React.createElement(PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
+import React from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{LeftBarLayers,getLeftBarColumnStyles}from"./LeftBarLayers";import{useLayout}from"../useLayout";let StyledLeftBarColumn=styled("div",{target:"e1qhx45f0",label:"StyledLeftBarColumn"})(({theme})=>({position:"relative",...getLeftBarColumnStyles(theme)}));export const LeftPanelDocked=({children,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=useTheme(),{isVisible}=useLayout()[Slot.leftPanel];return usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),useLayoutPortal(Slot.leftPanel,React.createElement(StyledLeftBarColumn,null,React.createElement(LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";let StyledLeftPanelBody=styled("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";import{useLeftPanelId}from"../useLeftPanelId";let StyledLeftPanelBody=styled("div",{target:"e158aetq0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId();return React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -1 +1 @@
-import React from"react";import{Sandwich}from"../../Internal/Sandwich/Sandwich";export function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){return React.createElement(Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}
+import React from"react";import styled from"@emotion/styled";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";let StyledFadingFooter=styled("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=useLeftPanelCollapseContext();return React.createElement(Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

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

@@ -1 +1 @@
-import React from"react";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";export function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+import React from"react";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";export function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot,isContentFaded:useLeftPanelCollapseContext().isContentFaded}))}

package/build/esm/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/esm/components/Layout/LeftPanel/LeftPanelOffcanvas.js

@@ -0,0 +1 @@
+import React,{useRef}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{LeftBarLayers,getLeftBarColumnStyles}from"./LeftBarLayers";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{useOnEscapePress}from"../../../shared/useOnEscapePress";import{useOutsideClick}from"../../../shared/useOutsideClick";let getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:0,zIndex:1,width:isVisible?openWidth:leftBarWidth,height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`}),StyledOffcanvasShadow=styled("div",{target:"er6g9050",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}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=styled("div",{target:"er6g9051",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:`width ${duration} ${timingFunction}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme),height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`}});export const LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=useTheme();useDeclarePanel(Slot.leftPanel,{});let columnRef=useRef(null);useOnEscapePress(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),useOutsideClick(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return React.createElement(React.Fragment,null,React.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),React.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},React.createElement(LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/esm/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;

package/build/esm/components/Layout/LeftPanel/useLeftBarContext.js

@@ -0,0 +1 @@
+import{createContext,useContext}from"react";let LeftBarContext=createContext({slotNode:null});export const LeftBarProvider=LeftBarContext.Provider;export function useLeftBarContext(){return useContext(LeftBarContext)}

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.d.ts

@@ -0,0 +1,11 @@
+/** How the left panel's parts have to behave while its column narrows to a left bar. */
+export type LeftPanelCollapseState = {
+    /** The content is dissolving into the left bar beneath it. */
+    isContentFaded: boolean;
+    /** Width the content holds on to while the column narrows around it, clipped
+     *  at the column's edge so nothing inside reflows on the way down. */
+    pinnedContentWidth?: string;
+};
+export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
+/** How the left panel's parts have to behave while its column narrows. */
+export declare function useLeftPanelCollapseContext(): LeftPanelCollapseState;

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.js

@@ -0,0 +1 @@
+import{createContext,useContext}from"react";let LeftPanelCollapseContext=createContext({isContentFaded:!1});export const LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;export function useLeftPanelCollapseContext(){return useContext(LeftPanelCollapseContext)}

package/build/esm/components/Layout/rules.js

@@ -1 +1 @@
-export const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=isMobile||isLowPrio?"drawer":"sidebar";variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"drawer"!==variant||isMobile||layout.leftPanel.hide())}}};
+let leftPanelVariantFor=({isMobile,isLowPrio})=>isMobile?"drawer":isLowPrio?"offcanvas":"sidebar";export const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=leftPanelVariantFor({isMobile,isLowPrio});variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"offcanvas"===variant&&layout.leftPanel.hide())}}};

package/build/esm/components/Layout/useLayoutRules.js

@@ -1 +1 @@
-import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==Slot.leftPanel||"drawer"!==state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}
+import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==Slot.leftPanel||"sidebar"===state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}

package/build/esm/components/Layout/useLeftPanelId.d.ts

@@ -0,0 +1,6 @@
+/** DOM id of the rendered left panel, generated once per `Layout`. Lets a
+ *  control living OUTSIDE the panel - the nav left bar's open button - point
+ *  `aria-controls` at it without the two components knowing each other. Empty
+ *  outside a `Layout`, where there is no panel to reference. */
+export declare const LeftPanelIdContext: React.Context<string>;
+export declare const useLeftPanelId: () => string;

package/build/esm/components/Layout/useLeftPanelId.js

@@ -0,0 +1 @@
+import{createContext,useContext}from"react";export const LeftPanelIdContext=createContext("");export const useLeftPanelId=()=>useContext(LeftPanelIdContext);

package/build/esm/components/Layout/usePanelDockedSlide.d.ts

@@ -14,6 +14,12 @@ export type PanelDockedSlideOptions = {
     /** Forwarded to the declaration: lock the column's width when the window
      *  resizes. Doesn't affect the slide, which resizes the column outright. */
     lockWidthOnWindowResize?: boolean;
+    /** Width the column rests at while hidden, instead of collapsing to nothing.
+     *  Set it and the column never unmounts: closing narrows it to this, opening
+     *  widens it back, so one box carries both states (a nav left bar that widens
+     *  into the panel). The column stops being collapsible - there is no zero to
+     *  collapse to - and this becomes its `minSize` while it is hidden. */
+    collapsedSize?: Size;
 };
 export type PanelDockedSlide = {
     /** Whether the panel's content should render at all (entering, open, or
@@ -26,10 +32,9 @@ export type PanelDockedSlide = {
 /**
  * Animates a docked side panel's open/close as a width slide on its
  * `react-resizable-panels` column, pushing neighbouring content smoothly
- * instead of snapping. Slot-generic - works for either side panel; render the
- * returned state with {@link PanelSlideBody}. Falls back to an instant
- * open/close when the panel isn't collapsible, no handle is available, or
- * reduced motion is requested. The mobile modal-drawer lifecycle lives in
+ * instead of snapping. Slot-generic - works for either side panel. Falls back to
+ * an instant open/close when the panel isn't collapsible, no handle is
+ * available, or reduced motion is requested. The mobile modal-drawer lifecycle lives in
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;

package/build/esm/components/Layout/usePanelDockedSlide.js

@@ -1 +1 @@
-import{useLayoutEffect,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),useDeclarePanel(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,isMounted),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}
+import{useLayoutEffect,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;return useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,restSize=isVisible?openSize??minSize:collapsedSize,resizeToRest=attempt=>{let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return resizeToRest(0),()=>window.cancelAnimationFrame(frame)},[]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,pinnedWidth}}

package/build/esm/shared/mixins/getLeftPanelFadeStyles.d.ts

@@ -0,0 +1,19 @@
+import type { CSSObject, Theme } from "@emotion/react";
+type PanelContentFadeOptions = {
+    theme: Theme;
+    /** Whether the content is currently faded out. */
+    isFaded: boolean;
+};
+/**
+ * Fades a docked panel's content out across its collapse, and back in at once
+ * when it reopens - the panel covers the left bar the instant it is shown, so
+ * there is nothing to reveal on the way in.
+ *
+ * Runs on the column's own slide timing, so the two move together.
+ *
+ * Applied per part rather than to the whole panel: a control at the header's
+ * trailing edge travels down onto the left bar's own and has to stay solid the
+ * whole way, so it is left out.
+ */
+export declare function getLeftPanelFadeStyles({ theme, isFaded, }: PanelContentFadeOptions): CSSObject;
+export {};

package/build/esm/shared/mixins/getLeftPanelFadeStyles.js

@@ -0,0 +1 @@
+export function getLeftPanelFadeStyles({theme,isFaded}){let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{opacity:isFaded?theme.variables.opacity.hidden:theme.variables.opacity.visible,transition:isFaded?`opacity ${duration} ${timingFunction}`:"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}

package/build/esm/shared/mixins/index.d.ts

@@ -6,4 +6,5 @@ export { getBaseButtonStyles } from "./Button/getBaseButtonStyles";
 export { getPressedStyles } from "./Button/getPressedStyles";
 export { getPillStyles } from "./Button/getPillStyles";
 export { getFocusStyles } from "./getFocusStyles";
+export { getLeftPanelFadeStyles } from "./getLeftPanelFadeStyles";
 export { getPrimaryVariantStyles, getSecondaryVariantStyles, getTertiaryVariantStyles, } from "./Button/getVariantStyles";

package/build/esm/shared/mixins/index.js

@@ -1 +1 @@
-export{getInputTextPlaceholder}from"./TextInput/getInputTextPlaceholder";export{getInputTextStyles}from"./TextInput/getInputTextStyles";export{getDisabledStyles}from"./Button/getDisabledStyles";export{getButtonAppearanceReset}from"./Button/getButtonAppearanceReset";export{getBaseButtonStyles}from"./Button/getBaseButtonStyles";export{getPressedStyles}from"./Button/getPressedStyles";export{getPillStyles}from"./Button/getPillStyles";export{getFocusStyles}from"./getFocusStyles";export{getPrimaryVariantStyles,getSecondaryVariantStyles,getTertiaryVariantStyles}from"./Button/getVariantStyles";
+export{getInputTextPlaceholder}from"./TextInput/getInputTextPlaceholder";export{getInputTextStyles}from"./TextInput/getInputTextStyles";export{getDisabledStyles}from"./Button/getDisabledStyles";export{getButtonAppearanceReset}from"./Button/getButtonAppearanceReset";export{getBaseButtonStyles}from"./Button/getBaseButtonStyles";export{getPressedStyles}from"./Button/getPressedStyles";export{getPillStyles}from"./Button/getPillStyles";export{getFocusStyles}from"./getFocusStyles";export{getLeftPanelFadeStyles}from"./getLeftPanelFadeStyles";export{getPrimaryVariantStyles,getSecondaryVariantStyles,getTertiaryVariantStyles}from"./Button/getVariantStyles";

package/build/esm/web-tokens/_colors.json

@@ -2198,10 +2198,26 @@
         "color-content-table-row": {
             "name": "content.table",
             "subState": "row",
-            "darkValue": "rgba(29, 102, 112, 0.2)",
-            "darkOriginalValue": "night-brand.regular-transparent01",
-            "lightValue": "rgba(10, 166, 184, 0.05)",
-            "lightOriginalValue": "brand.regular-transparent01"
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        },
+        "color-content-table-cell": {
+            "name": "content.table",
+            "subState": "cell",
+            "darkValue": "#5a7183",
+            "darkOriginalValue": "gray.regular",
+            "lightValue": "#bdc9d1",
+            "lightOriginalValue": "gray.light01-alt01"
+        },
+        "color-content-table-col": {
+            "name": "content.table",
+            "subState": "col",
+            "darkValue": "#24282d",
+            "darkOriginalValue": "night-black.dark01",
+            "lightValue": "#f5f7f9",
+            "lightOriginalValue": "gray.light04"
         },
         "color-content-checkbox-background": {
             "name": "content.checkbox",