@amboss/design-system 4.17.0 → 4.19.0

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

@@ -33,8 +33,8 @@ export declare const LEFT_BAR_BUTTON_INSET: BarButtonInset;
 export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
 /** Slots the app opens/closes, in `PANEL_ORDER`. */
 export declare const TOGGLABLE_SLOTS: TogglableSlotKey[];
-/** Vertical offset for the right panel — set this (e.g. to a sticky subnav's
- *  height) and the panel tracks it; defaults to `0` when unset. */
+/** Vertical offset for the docked right panel and split view — set this (e.g.
+ *  to a sticky subnav's height) and both track it; defaults to `0` when unset. */
 export declare const SUBNAV_OFFSET_VAR: "--ds-layout-subnav-offset";
 /** Widest `Layout.Content` and `Layout.Split` may grow to *together* while the
  *  split is open; past it they stay centred with space either side. Defaults

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

@@ -265,7 +265,7 @@ export type LayoutValue = {
 };
 /** Forwarded to a panel's underlying scroll container (scroll restoration,
  *  custom scroll handling). Shared by every panel-like slot backed by a
- *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `content`, `splitview`. */
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
 export type ForwardedScrollProps = {
     scrollContainerRef?: React.Ref<HTMLDivElement>;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
@@ -310,7 +310,10 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> &
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
 };
-export type ContentProps = ForwardedScrollProps & {
+export type ContentProps = {
+    children: React.ReactNode;
+};
+export type ContentPanelProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.ContentHeader />` /
      *  `<Layout.ContentFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -450,7 +453,7 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
 export type RightPanelFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the content header, after `leftSlot`. Visual only — the
- * panel's accessible name comes from `Layout.Content`'s `aria-label`.
+ * panel's accessible name comes from `ContentPanel`'s `aria-label`.
  */
 export type ContentHeaderTitle = PanelHeaderTitle;
 export type ContentHeaderSlotProps = {

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

@@ -6,8 +6,6 @@ import type { ContentProps } from "../-types";
  * presentation: in-flow in the `content` slot ({@link ContentDocked}) normally,
  * and the mobile split's sliding base layer ({@link ContentSplitBase}) when a
  * `Layout.Split` is stacked over it - so the split pushes content aside instead
- * of just covering it. Either way the content sits in a {@link ContentPanel},
- * so `Layout.ContentHeader` / `Layout.ContentFooter` children stick to the
- * panel edges; the remaining content scrolls.
+ * of just covering it.
  */
 export declare const Content: React.FC<ContentProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),_ContentPanel=require("./ContentPanel"),Content=({children,...panelProps})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)(),panel=_react.default.createElement(_ContentPanel.ContentPanel,panelProps,children);return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,panel):_react.default.createElement(_ContentDocked.ContentDocked,null,panel)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),Content=({children})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)();return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,children):_react.default.createElement(_ContentDocked.ContentDocked,null,children)};

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

@@ -1,9 +1,7 @@
 import React from "react";
-import type { ContentProps } from "../-types";
+import type { ContentPanelProps } from "../-types";
 /**
- * Frame shared by both `Layout.Content` presentations: the same `Sandwich` every
- * panel scrolls in, so `Layout.ContentHeader` / `Layout.ContentFooter` stick to
- * the edges, without `PanelContainer`'s Container - as with the left panel's
- * layers - so content keeps the layout and stacking it had without one.
+ * Scrollable frame for content headers and footers. Temporarily not mounted by
+ * `Layout.Content` while the accessibility regression in #2043 is unresolved.
  */
-export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentProps): React.ReactElement;
+export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentPanelProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentPanel",{enumerable:!0,get:function(){return ContentPanel}});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")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),StyledContentFrame=(0,_styled.default)("div",{target:"e168plsf0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=(0,_styled.default)("div",{target:"e168plsf1",label:"StyledContentFill"})({position:"absolute",inset:0});function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(StyledContentFill,null,children)))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentPanel",{enumerable:!0,get:function(){return ContentPanel}});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")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),StyledContentFrame=(0,_styled.default)("div",{target:"e1spy2ji0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=(0,_styled.default)("div",{target:"e1spy2ji1",label:"StyledContentFill"})({position:"absolute",inset:0});function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(StyledContentFill,null,children)))}

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

@@ -2,8 +2,9 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Desktop split view. Declares the `splitview` slot and portals its content
- * while visible - the right-hand half of `Layout.Content`'s column.
- * `Layout.SplitHeader` / `Layout.SplitFooter` children stick to the panel
- * edges; the remaining content scrolls.
+ * while visible - the right-hand half of `Layout.Content`'s column. Content
+ * tracks the `--ds-layout-subnav-offset` var, so an expanded subnav never
+ * covers the panel's top edge. `Layout.SplitHeader` / `Layout.SplitFooter`
+ * children stick to the panel edges; the remaining content scrolls.
  */
 export declare const SplitDocked: React.FC<SplitProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});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")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),StyledSplitSlot=(0,_styled.default)("div",{target:"e1ldbp5v0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`})),SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(StyledSplitSlot,null,_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};

package/build/esm/components/Layout/-constants.d.ts

@@ -33,8 +33,8 @@ export declare const LEFT_BAR_BUTTON_INSET: BarButtonInset;
 export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
 /** Slots the app opens/closes, in `PANEL_ORDER`. */
 export declare const TOGGLABLE_SLOTS: TogglableSlotKey[];
-/** Vertical offset for the right panel — set this (e.g. to a sticky subnav's
- *  height) and the panel tracks it; defaults to `0` when unset. */
+/** Vertical offset for the docked right panel and split view — set this (e.g.
+ *  to a sticky subnav's height) and both track it; defaults to `0` when unset. */
 export declare const SUBNAV_OFFSET_VAR: "--ds-layout-subnav-offset";
 /** Widest `Layout.Content` and `Layout.Split` may grow to *together* while the
  *  split is open; past it they stay centred with space either side. Defaults

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

@@ -265,7 +265,7 @@ export type LayoutValue = {
 };
 /** Forwarded to a panel's underlying scroll container (scroll restoration,
  *  custom scroll handling). Shared by every panel-like slot backed by a
- *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `content`, `splitview`. */
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
 export type ForwardedScrollProps = {
     scrollContainerRef?: React.Ref<HTMLDivElement>;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
@@ -310,7 +310,10 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> &
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
 };
-export type ContentProps = ForwardedScrollProps & {
+export type ContentProps = {
+    children: React.ReactNode;
+};
+export type ContentPanelProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.ContentHeader />` /
      *  `<Layout.ContentFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -450,7 +453,7 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
 export type RightPanelFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the content header, after `leftSlot`. Visual only — the
- * panel's accessible name comes from `Layout.Content`'s `aria-label`.
+ * panel's accessible name comes from `ContentPanel`'s `aria-label`.
  */
 export type ContentHeaderTitle = PanelHeaderTitle;
 export type ContentHeaderSlotProps = {

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

@@ -6,8 +6,6 @@ import type { ContentProps } from "../-types";
  * presentation: in-flow in the `content` slot ({@link ContentDocked}) normally,
  * and the mobile split's sliding base layer ({@link ContentSplitBase}) when a
  * `Layout.Split` is stacked over it - so the split pushes content aside instead
- * of just covering it. Either way the content sits in a {@link ContentPanel},
- * so `Layout.ContentHeader` / `Layout.ContentFooter` children stick to the
- * panel edges; the remaining content scrolls.
+ * of just covering it.
  */
 export declare const Content: React.FC<ContentProps>;

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{ContentSplitBase}from"../Split/MobileSplitView/ContentSplitBase";import{useMobileSplitStack}from"../Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"../Split/MobileSplitView/useMobileSplitView";import{ContentDocked}from"./ContentDocked";import{ContentPanel}from"./ContentPanel";export const Content=({children,...panelProps})=>{useDeclarePanel(Slot.content,{collapsible:!1});let enabled=useMobileSplitViewEnabled(),{host,isSplitPresent}=useMobileSplitStack(),panel=React.createElement(ContentPanel,panelProps,children);return enabled&&isSplitPresent&&null!==host?React.createElement(ContentSplitBase,null,panel):React.createElement(ContentDocked,null,panel)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{ContentSplitBase}from"../Split/MobileSplitView/ContentSplitBase";import{useMobileSplitStack}from"../Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"../Split/MobileSplitView/useMobileSplitView";import{ContentDocked}from"./ContentDocked";export const Content=({children})=>{useDeclarePanel(Slot.content,{collapsible:!1});let enabled=useMobileSplitViewEnabled(),{host,isSplitPresent}=useMobileSplitStack();return enabled&&isSplitPresent&&null!==host?React.createElement(ContentSplitBase,null,children):React.createElement(ContentDocked,null,children)};

package/build/esm/components/Layout/Content/ContentPanel.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
-import type { ContentProps } from "../-types";
+import type { ContentPanelProps } from "../-types";
 /**
- * Frame shared by both `Layout.Content` presentations: the same `Sandwich` every
- * panel scrolls in, so `Layout.ContentHeader` / `Layout.ContentFooter` stick to
- * the edges, without `PanelContainer`'s Container - as with the left panel's
- * layers - so content keeps the layout and stacking it had without one.
+ * Scrollable frame for content headers and footers. Temporarily not mounted by
+ * `Layout.Content` while the accessibility regression in #2043 is unresolved.
  */
-export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentProps): React.ReactElement;
+export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentPanelProps): React.ReactElement;

package/build/esm/components/Layout/Content/ContentPanel.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../../Internal/Sandwich/Sandwich";let StyledContentFrame=styled("div",{target:"e168plsf0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=styled("div",{target:"e168plsf1",label:"StyledContentFill"})({position:"absolute",inset:0});export function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(StyledContentFill,null,children)))}
+import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../../Internal/Sandwich/Sandwich";let StyledContentFrame=styled("div",{target:"e1spy2ji0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=styled("div",{target:"e1spy2ji1",label:"StyledContentFill"})({position:"absolute",inset:0});export function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(StyledContentFill,null,children)))}

package/build/esm/components/Layout/Split/SplitDocked.d.ts

@@ -2,8 +2,9 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Desktop split view. Declares the `splitview` slot and portals its content
- * while visible - the right-hand half of `Layout.Content`'s column.
- * `Layout.SplitHeader` / `Layout.SplitFooter` children stick to the panel
- * edges; the remaining content scrolls.
+ * while visible - the right-hand half of `Layout.Content`'s column. Content
+ * tracks the `--ds-layout-subnav-offset` var, so an expanded subnav never
+ * covers the panel's top edge. `Layout.SplitHeader` / `Layout.SplitFooter`
+ * children stick to the panel edges; the remaining content scrolls.
  */
 export declare const SplitDocked: React.FC<SplitProps>;

package/build/esm/components/Layout/Split/SplitDocked.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";let StyledSplitSlot=styled("div",{target:"e1ldbp5v0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(StyledSplitSlot,null,React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "4.17.0",
+  "version": "4.19.0",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",