@amboss/design-system 4.9.4-canary.1 → 4.9.4-canary.3

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBar",{enumerable:!0,get:function(){return LayoutBottomBar}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_LayoutPortal=require("../LayoutPortal"),_LayoutCssVars=require("../LayoutCssVars"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_getBottomBarLayout=require("./getBottomBarLayout"),_StyledLayoutBottomBar=require("./StyledLayoutBottomBar"),_StyledLayoutBottomBarSection=require("./StyledLayoutBottomBarSection"),useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=(0,_react1.useTheme)().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);(0,_react.useLayoutEffect)(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${_constants.BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=(0,_useLayout.useLayout)(),{sections,cells,rowCount,hasRightPanel}=(0,_getBottomBarLayout.getBottomBarLayout)(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?_react.default.createElement(_LayoutPortal.LayoutPortal,null,_react.default.createElement(_StyledLayoutBottomBar.StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>_react.default.createElement(_StyledLayoutBottomBarSection.StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement,separateLeftPanel:"leftPanel"===section.region&&"column"===section.placement},section.children)))):null}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBar",{enumerable:!0,get:function(){return LayoutBottomBar}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_LayoutPortal=require("../LayoutPortal"),_LayoutCssVars=require("../LayoutCssVars"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_getBottomBarLayout=require("./getBottomBarLayout"),_StyledLayoutBottomBar=require("./StyledLayoutBottomBar"),_StyledLayoutBottomBarSection=require("./StyledLayoutBottomBarSection"),useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=(0,_react1.useTheme)().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);(0,_react.useLayoutEffect)(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${_constants.BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=(0,_useLayout.useLayout)(),{sections,cells,rowCount,hasRightPanel}=(0,_getBottomBarLayout.getBottomBarLayout)(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?_react.default.createElement(_LayoutPortal.LayoutPortal,null,_react.default.createElement(_StyledLayoutBottomBar.StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>_react.default.createElement(_StyledLayoutBottomBarSection.StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBar",{enumerable:!0,get:function(){return StyledLayoutBottomBar}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_getBottomBarOuterSpaceStyles=require("./getBottomBarOuterSpaceStyles"),_constants=require("../-constants"),getRegionStart=region=>`var(${_constants.PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${_constants.PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}},StyledLayoutBottomBar=(0,_styled.default)("div",{target:"ehrkgf20",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:_constants.PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${_constants.LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`var(${_constants.PANEL_WIDTH_VAR.rightPanel}, 0px)`,zIndex:theme.variables.zIndex.dropdown}),_getBottomBarOuterSpaceStyles.getBottomBarOuterSpaceStyles);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBar",{enumerable:!0,get:function(){return StyledLayoutBottomBar}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_getBottomBarOuterSpaceStyles=require("./getBottomBarOuterSpaceStyles"),_constants=require("../-constants"),getRegionStart=region=>`var(${_constants.PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${_constants.PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}},StyledLayoutBottomBar=(0,_styled.default)("div",{target:"e7hwo8w0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:_constants.PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${_constants.LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,zIndex:theme.variables.zIndex.dropdown}),_getBottomBarOuterSpaceStyles.getBottomBarOuterSpaceStyles);

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

@@ -2,7 +2,6 @@ type StyledLayoutBottomBarSectionProps = {
     columnIndex?: number;
     rowIndex: number;
     fullWidth: boolean;
-    separateLeftPanel: boolean;
 };
 export declare const StyledLayoutBottomBarSection: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBarSection",{enumerable:!0,get:function(){return StyledLayoutBottomBarSection}});const StyledLayoutBottomBarSection=(0,/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")).default)("div",{target:"e17z1slv0",label:"StyledLayoutBottomBarSection"})(({theme,columnIndex,rowIndex,fullWidth,separateLeftPanel})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",display:"flex",minWidth:0,marginRight:separateLeftPanel?theme.variables.size.spacing.xxs:void 0,whiteSpace:"nowrap"}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBarSection",{enumerable:!0,get:function(){return StyledLayoutBottomBarSection}});const StyledLayoutBottomBarSection=(0,/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")).default)("div",{target:"e4dy5fk0",label:"StyledLayoutBottomBarSection"})(({columnIndex,rowIndex,fullWidth})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",display:"flex",minWidth:0,whiteSpace:"nowrap"}));

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getBottomBarOuterSpaceStyles",{enumerable:!0,get:function(){return getBottomBarOuterSpaceStyles}});const _constants=require("../-constants"),getRegionEnd=region=>`calc(var(${_constants.PANEL_START_VAR[region]}, 0px) + var(${_constants.PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement),getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${_constants.PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=`calc(100% - ${hasRightPanel?rightPanelWidth:"0px"} - ${rightPanelGap})`;return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${_constants.PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getBottomBarOuterSpaceStyles",{enumerable:!0,get:function(){return getBottomBarOuterSpaceStyles}});const _constants=require("../-constants"),getRegionEnd=region=>`calc(var(${_constants.PANEL_START_VAR[region]}, 0px) + var(${_constants.PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement),getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${_constants.PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=hasRightPanel?`calc(100% - ${rightPanelWidth} - ${rightPanelGap})`:"100%";return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${_constants.PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};

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

@@ -8,7 +8,7 @@ export type LayoutVarHandle = {
 };
 /**
  * Register one layout CSS var; returns a stable imperative handle. The var is
- * removed on unmount, so it only exists while its producer is mounted. Call
+ * removed on unmount only if this producer still owns the latest write. Call
  * `.set()` from wherever the value is known — an effect (state-driven vars like
  * the subnav offset) or a ResizeObserver (measured vars) — so updates publish
  * straight to the single `<LayoutCssVars>` sink and never re-render the producer.

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutCssVarStoreProvider(){return LayoutCssVarStoreProvider},get LayoutCssVars(){return LayoutCssVars},get useLayoutVar(){return useLayoutVar}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),LayoutCssVarStoreContext=(0,_react.createContext)(null),LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider,EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{},useLayoutVar=name=>{let store=(0,_react.useContext)(LayoutCssVarStoreContext);return(0,_react.useEffect)(()=>()=>store?.remove(name),[store,name]),(0,_react.useMemo)(()=>({set:value=>""===value?store?.remove(name):store?.set(name,value),remove:()=>store?.remove(name)}),[store,name])};function LayoutCssVars(){let store=(0,_react.useContext)(LayoutCssVarStoreContext),vars=(0,_react.useSyncExternalStore)(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return _react.default.createElement(_react1.Global,{styles:[{":root":vars}]})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutCssVarStoreProvider(){return LayoutCssVarStoreProvider},get LayoutCssVars(){return LayoutCssVars},get useLayoutVar(){return useLayoutVar}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),LayoutCssVarStoreContext=(0,_react.createContext)(null),LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider,EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{},useLayoutVar=name=>{let store=(0,_react.useContext)(LayoutCssVarStoreContext),handle=(0,_react.useMemo)(()=>{let owner=Symbol(name);return{set:value=>""===value?store?.remove(name,owner):store?.set({name,value,owner}),remove:()=>store?.remove(name,owner)}},[store,name]);return(0,_react.useEffect)(()=>handle.remove,[handle]),handle};function LayoutCssVars(){let store=(0,_react.useContext)(LayoutCssVarStoreContext),vars=(0,_react.useSyncExternalStore)(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return _react.default.createElement(_react1.Global,{styles:[{":root":vars}]})}

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

@@ -1,3 +1,8 @@
+type LayoutCssVarWrite = {
+    name: string;
+    value: string;
+    owner: symbol;
+};
 /**
  * Tiny pub/sub registry for the layout's CSS custom properties. Producers
  * publish a value by name (the component that owns the *why* — e.g. the NavBar
@@ -6,12 +11,14 @@
  * via the same `useSyncExternalStore` pattern.
  *
  * One name = one producer. The registry is keyed by name, so a second writer to
- * the same name last-wins; don't share a name across unrelated producers.
+ * the same name last-wins. Only that writer may remove it, so an old instance's
+ * delayed unmount cleanup cannot erase a replacement's value.
  */
 export type LayoutCssVarStore = {
     getSnapshot: () => Record<string, string>;
-    set: (name: string, value: string) => void;
-    remove: (name: string) => void;
+    set: (entry: LayoutCssVarWrite) => void;
+    remove: (name: string, owner: symbol) => void;
     subscribe: (listener: () => void) => () => void;
 };
 export declare function createLayoutCssVarStore(): LayoutCssVarStore;
+export {};

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

@@ -1 +1 @@
-"use strict";function createLayoutCssVarStore(){let vars={},listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:(name,value)=>{vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:name=>{if(!(name in vars))return;let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"createLayoutCssVarStore",{enumerable:!0,get:function(){return createLayoutCssVarStore}});
+"use strict";function createLayoutCssVarStore(){let vars={},owners=new Map,listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:({name,value,owner})=>{owners.set(name,owner),vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:(name,owner)=>{if(owners.get(name)!==owner)return;owners.delete(name);let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"createLayoutCssVarStore",{enumerable:!0,get:function(){return createLayoutCssVarStore}});

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.js

@@ -1 +1 @@
-import React,{useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{LayoutPortal}from"../LayoutPortal";import{useLayoutVar}from"../LayoutCssVars";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";let useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=useTheme().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=useLayoutVar(BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=useLayoutVar(RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);useLayoutEffect(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};export function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?React.createElement(LayoutPortal,null,React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement,separateLeftPanel:"leftPanel"===section.region&&"column"===section.placement},section.children)))):null}
+import React,{useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{LayoutPortal}from"../LayoutPortal";import{useLayoutVar}from"../LayoutCssVars";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";let useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=useTheme().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=useLayoutVar(BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=useLayoutVar(RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);useLayoutEffect(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};export function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?React.createElement(LayoutPortal,null,React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import{getBottomBarOuterSpaceStyles}from"./getBottomBarOuterSpaceStyles";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"ehrkgf20",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,zIndex:theme.variables.zIndex.dropdown}),getBottomBarOuterSpaceStyles);
+import styled from"@emotion/styled";import{getBottomBarOuterSpaceStyles}from"./getBottomBarOuterSpaceStyles";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"e7hwo8w0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,zIndex:theme.variables.zIndex.dropdown}),getBottomBarOuterSpaceStyles);

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.d.ts

@@ -2,7 +2,6 @@ type StyledLayoutBottomBarSectionProps = {
     columnIndex?: number;
     rowIndex: number;
     fullWidth: boolean;
-    separateLeftPanel: boolean;
 };
 export declare const StyledLayoutBottomBarSection: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.js

@@ -1 +1 @@
-import styled from"@emotion/styled";export const StyledLayoutBottomBarSection=styled("div",{target:"e17z1slv0",label:"StyledLayoutBottomBarSection"})(({theme,columnIndex,rowIndex,fullWidth,separateLeftPanel})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",display:"flex",minWidth:0,marginRight:separateLeftPanel?theme.variables.size.spacing.xxs:void 0,whiteSpace:"nowrap"}));
+import styled from"@emotion/styled";export const StyledLayoutBottomBarSection=styled("div",{target:"e4dy5fk0",label:"StyledLayoutBottomBarSection"})(({columnIndex,rowIndex,fullWidth})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",display:"flex",minWidth:0,whiteSpace:"nowrap"}));

package/build/esm/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.js

@@ -1 +1 @@
-import{PANEL_START_VAR,PANEL_WIDTH_VAR}from"../-constants";let getRegionEnd=region=>`calc(var(${PANEL_START_VAR[region]}, 0px) + var(${PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement);export const getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=`calc(100% - ${hasRightPanel?rightPanelWidth:"0px"} - ${rightPanelGap})`;return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};
+import{PANEL_START_VAR,PANEL_WIDTH_VAR}from"../-constants";let getRegionEnd=region=>`calc(var(${PANEL_START_VAR[region]}, 0px) + var(${PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement);export const getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=hasRightPanel?`calc(100% - ${rightPanelWidth} - ${rightPanelGap})`:"100%";return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};

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

@@ -8,7 +8,7 @@ export type LayoutVarHandle = {
 };
 /**
  * Register one layout CSS var; returns a stable imperative handle. The var is
- * removed on unmount, so it only exists while its producer is mounted. Call
+ * removed on unmount only if this producer still owns the latest write. Call
  * `.set()` from wherever the value is known — an effect (state-driven vars like
  * the subnav offset) or a ResizeObserver (measured vars) — so updates publish
  * straight to the single `<LayoutCssVars>` sink and never re-render the producer.

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

@@ -1 +1 @@
-import React,{createContext,useContext,useEffect,useMemo,useSyncExternalStore}from"react";import{Global}from"@emotion/react";let LayoutCssVarStoreContext=createContext(null);export const LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider;let EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{};export const useLayoutVar=name=>{let store=useContext(LayoutCssVarStoreContext);return useEffect(()=>()=>store?.remove(name),[store,name]),useMemo(()=>({set:value=>""===value?store?.remove(name):store?.set(name,value),remove:()=>store?.remove(name)}),[store,name])};export function LayoutCssVars(){let store=useContext(LayoutCssVarStoreContext),vars=useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return React.createElement(Global,{styles:[{":root":vars}]})}
+import React,{createContext,useContext,useEffect,useMemo,useSyncExternalStore}from"react";import{Global}from"@emotion/react";let LayoutCssVarStoreContext=createContext(null);export const LayoutCssVarStoreProvider=LayoutCssVarStoreContext.Provider;let EMPTY_VARS={},NOOP_SUBSCRIBE=()=>()=>{};export const useLayoutVar=name=>{let store=useContext(LayoutCssVarStoreContext),handle=useMemo(()=>{let owner=Symbol(name);return{set:value=>""===value?store?.remove(name,owner):store?.set({name,value,owner}),remove:()=>store?.remove(name,owner)}},[store,name]);return useEffect(()=>handle.remove,[handle]),handle};export function LayoutCssVars(){let store=useContext(LayoutCssVarStoreContext),vars=useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?store.getSnapshot:()=>EMPTY_VARS,()=>EMPTY_VARS);return React.createElement(Global,{styles:[{":root":vars}]})}

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

@@ -1,3 +1,8 @@
+type LayoutCssVarWrite = {
+    name: string;
+    value: string;
+    owner: symbol;
+};
 /**
  * Tiny pub/sub registry for the layout's CSS custom properties. Producers
  * publish a value by name (the component that owns the *why* — e.g. the NavBar
@@ -6,12 +11,14 @@
  * via the same `useSyncExternalStore` pattern.
  *
  * One name = one producer. The registry is keyed by name, so a second writer to
- * the same name last-wins; don't share a name across unrelated producers.
+ * the same name last-wins. Only that writer may remove it, so an old instance's
+ * delayed unmount cleanup cannot erase a replacement's value.
  */
 export type LayoutCssVarStore = {
     getSnapshot: () => Record<string, string>;
-    set: (name: string, value: string) => void;
-    remove: (name: string) => void;
+    set: (entry: LayoutCssVarWrite) => void;
+    remove: (name: string, owner: symbol) => void;
     subscribe: (listener: () => void) => () => void;
 };
 export declare function createLayoutCssVarStore(): LayoutCssVarStore;
+export {};

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

@@ -1 +1 @@
-export function createLayoutCssVarStore(){let vars={},listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:(name,value)=>{vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:name=>{if(!(name in vars))return;let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}
+export function createLayoutCssVarStore(){let vars={},owners=new Map,listeners=new Set,notify=()=>listeners.forEach(listener=>listener());return{getSnapshot:()=>vars,set:({name,value,owner})=>{owners.set(name,owner),vars[name]!==value&&(vars={...vars,[name]:value},notify())},remove:(name,owner)=>{if(owners.get(name)!==owner)return;owners.delete(name);let next={...vars};delete next[name],vars=next,notify()},subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)})}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "4.9.4-canary.1",
+  "version": "4.9.4-canary.3",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",