@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/layouts/page/Sidebar.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-12-2";
-var dismissButton = "_zdcge97-3-12-2 _zdcge96-3-12-2";
-var expandButton = "_zdcge98-3-12-2 _zdcge96-3-12-2";
-var hint = "_zdcge93-3-12-2 _z0fq9b4-3-12-2 _z0fq9bd-3-12-2 _z0fq9b6-3-12-2 _z0fq9bc-3-12-2";
-var integratedControls = "_zdcge91-3-12-2";
-var integratedControlsDrawerHeader = "_zdcge9a-3-12-2";
-var integratedControlsPanel = "_zdcge99-3-12-2";
-var sidebar = "_zdcge90-3-12-2";
+var buttonContainer = "_zdcge95-3-13-0";
+var dismissButton = "_zdcge97-3-13-0 _zdcge96-3-13-0";
+var expandButton = "_zdcge98-3-13-0 _zdcge96-3-13-0";
+var hint = "_zdcge93-3-13-0 _z0fq9b4-3-13-0 _z0fq9bd-3-13-0 _z0fq9b6-3-13-0 _z0fq9bc-3-13-0";
+var integratedControls = "_zdcge91-3-13-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-13-0";
+var integratedControlsPanel = "_zdcge99-3-13-0";
+var sidebar = "_zdcge90-3-13-0";
 export {
   buttonContainer,
   dismissButton,

package/esm/layouts/page/Sidebar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-12-2';\nexport var dismissButton = '_zdcge97-3-12-2 _zdcge96-3-12-2';\nexport var expandButton = '_zdcge98-3-12-2 _zdcge96-3-12-2';\nexport var hint = '_zdcge93-3-12-2 _z0fq9b4-3-12-2 _z0fq9bd-3-12-2 _z0fq9b6-3-12-2 _z0fq9bc-3-12-2';\nexport var integratedControls = '_zdcge91-3-12-2';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-12-2';\nexport var integratedControlsPanel = '_zdcge99-3-12-2';\nexport var sidebar = '_zdcge90-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-13-0';\nexport var dismissButton = '_zdcge97-3-13-0 _zdcge96-3-13-0';\nexport var expandButton = '_zdcge98-3-13-0 _zdcge96-3-13-0';\nexport var hint = '_zdcge93-3-13-0 _z0fq9b4-3-13-0 _z0fq9bd-3-13-0 _z0fq9b6-3-13-0 _z0fq9bc-3-13-0';\nexport var integratedControls = '_zdcge91-3-13-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-13-0';\nexport var integratedControlsPanel = '_zdcge99-3-13-0';\nexport var sidebar = '_zdcge90-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/page-context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/page-context.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  type RefObject,\n} from 'react';\n\nimport type { PagePanelSizes, PanelName } from './page-types.js';\n\ninterface BasePagePanelState {\n  ref: RefObject<HTMLDivElement | null>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth: number;\n  breakpoint: number;\n}\n\ninterface MainPagePanelState extends BasePagePanelState {\n  isControlled: false;\n  isDismissed: false;\n}\n\n/** @internal */\nexport interface PageLayoutState {\n  sidebar: BasePagePanelState | null;\n  main: MainPagePanelState | null;\n  details: BasePagePanelState | null;\n}\n\n/** @internal */\nexport interface PageContext {\n  containerSize: number;\n  panels: PageLayoutState;\n  registerPanel: (\n    name: PanelName,\n    options: {\n      ref: RefObject<HTMLDivElement | null>;\n      isControlled: boolean;\n      isDismissed: boolean;\n      minWidth: number;\n      breakpoint: number;\n    },\n  ) => void;\n  removePanel: (name: PanelName) => void;\n  dismissPanel: (name: PanelName) => void;\n  expandPanel: (name: PanelName) => void;\n  togglePanel: (name: PanelName) => void;\n  getPanelSizes: () => PagePanelSizes;\n}\n\n/** @internal */\nexport const pageContext = createContext<PageContext>({\n  containerSize: 0,\n  panels: { sidebar: null, main: null, details: null },\n  registerPanel: () => undefined,\n  removePanel: () => undefined,\n  dismissPanel: () => undefined,\n  expandPanel: () => undefined,\n  togglePanel: () => undefined,\n  getPanelSizes: () => undefined as unknown as PagePanelSizes,\n});\n\n/** @internal */\nexport function usePageContext() {\n  return useContext(pageContext);\n}\n\ninterface Options {\n  ref: RefObject<HTMLDivElement | null>;\n  /**\n   * Whether the dismissed state is controlled externally.\n   * @defaultValue false\n   */\n  isControlled?: boolean;\n  /**\n   * Whether the panel is dismissed (collapsed) or not.\n   * @defaultValue false\n   */\n  isDismissed?: boolean;\n  /**\n   * The minimum width (in px) the panel can be resized to.\n   * @defaultValue 0\n   */\n  minWidth?: number;\n  /**\n   * The breakpoint (in px) at which the panel is displayed as a `Drawer`.\n   * `0` means the panel will never be displayed as a `Drawer`.\n   * @defaultValue 0\n   */\n  breakpoint?: number;\n}\n\n/** @internal */\nexport function useRegisterPagePanel(name: PanelName, options: Options) {\n  const { registerPanel, removePanel, panels } = usePageContext();\n  const panel = panels[name];\n\n  useLayoutEffect(() => {\n    registerPanel(name, {\n      ref: options.ref,\n      isControlled: options.isControlled ?? false,\n      isDismissed: options.isDismissed ?? false,\n      minWidth: options.minWidth ?? 0,\n      breakpoint: options.breakpoint ?? 0,\n    });\n\n    return () => {\n      removePanel(name);\n    };\n  }, [\n    name,\n    options.breakpoint,\n    options.isControlled,\n    options.isDismissed,\n    options.minWidth,\n    options.ref,\n    registerPanel,\n    removePanel,\n  ]);\n\n  return panel;\n}\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  type RefObject,\n} from 'react';\n\nimport type { PagePanelSizes, PanelName } from './page-types.js';\n\ninterface BasePagePanelState {\n  ref: RefObject<HTMLDivElement | null>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth: number;\n  breakpoint: number;\n}\n\ninterface MainPagePanelState extends BasePagePanelState {\n  isControlled: false;\n  isDismissed: false;\n}\n\n/** @internal */\nexport interface PageLayoutState {\n  sidebar: BasePagePanelState | null;\n  main: MainPagePanelState | null;\n  details: BasePagePanelState | null;\n}\n\n/** @internal */\nexport interface PageContext {\n  containerSize: number;\n  panels: PageLayoutState;\n  registerPanel: (\n    name: PanelName,\n    options: {\n      ref: RefObject<HTMLDivElement | null>;\n      isControlled: boolean;\n      isDismissed: boolean;\n      minWidth: number;\n      breakpoint: number;\n    },\n  ) => void;\n  removePanel: (name: PanelName) => void;\n  dismissPanel: (name: PanelName) => void;\n  expandPanel: (name: PanelName) => void;\n  togglePanel: (name: PanelName) => void;\n  getPanelSizes: () => PagePanelSizes;\n}\n\n/** @internal */\nexport const pageContext = createContext<PageContext>({\n  containerSize: 0,\n  panels: { sidebar: null, main: null, details: null },\n  registerPanel: () => undefined,\n  removePanel: () => undefined,\n  dismissPanel: () => undefined,\n  expandPanel: () => undefined,\n  togglePanel: () => undefined,\n  getPanelSizes: () => undefined as unknown as PagePanelSizes,\n});\n\n/** @internal */\nexport function usePageContext() {\n  return useContext(pageContext);\n}\n\ninterface Options {\n  ref: RefObject<HTMLDivElement | null>;\n  /**\n   * Whether the dismissed state is controlled externally.\n   * @defaultValue false\n   */\n  isControlled?: boolean;\n  /**\n   * Whether the panel is dismissed (collapsed) or not.\n   * @defaultValue false\n   */\n  isDismissed?: boolean;\n  /**\n   * The minimum width (in px) the panel can be resized to.\n   * @defaultValue 0\n   */\n  minWidth?: number;\n  /**\n   * The breakpoint (in px) at which the panel is displayed as a `Drawer`.\n   * `0` means the panel will never be displayed as a `Drawer`.\n   * @defaultValue 0\n   */\n  breakpoint?: number;\n}\n\n/** @internal */\nexport function useRegisterPagePanel(name: PanelName, options: Options) {\n  const { registerPanel, removePanel, panels } = usePageContext();\n  const panel = panels[name];\n\n  useLayoutEffect(() => {\n    registerPanel(name, {\n      ref: options.ref,\n      isControlled: options.isControlled ?? false,\n      isDismissed: options.isDismissed ?? false,\n      minWidth: options.minWidth ?? 0,\n      breakpoint: options.breakpoint ?? 0,\n    });\n\n    return () => {\n      removePanel(name);\n    };\n  }, [\n    name,\n    options.breakpoint,\n    options.isControlled,\n    options.isDismissed,\n    options.minWidth,\n    options.ref,\n    registerPanel,\n    removePanel,\n  ]);\n\n  return panel;\n}\n"],
   "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA8CA,MAAM,cAAc,cAA2B;AAAA,EACpD,eAAe;AAAA,EACf,QAAQ,EAAE,SAAS,MAAM,MAAM,MAAM,SAAS,KAAK;AAAA,EACnD,eAAe,MAAM;AAAA,EACrB,aAAa,MAAM;AAAA,EACnB,cAAc,MAAM;AAAA,EACpB,aAAa,MAAM;AAAA,EACnB,aAAa,MAAM;AAAA,EACnB,eAAe,MAAM;AACvB,CAAC;AAGM,SAAS,iBAAiB;AAC/B,SAAO,WAAW,WAAW;AAC/B;AA4BO,SAAS,qBAAqB,MAAiB,SAAkB;AACtE,QAAM,EAAE,eAAe,aAAa,OAAO,IAAI,eAAe;AAC9D,QAAM,QAAQ,OAAO,IAAI;AAEzB,kBAAgB,MAAM;AACpB,kBAAc,MAAM;AAAA,MAClB,KAAK,QAAQ;AAAA,MACb,cAAc,QAAQ,gBAAgB;AAAA,MACtC,aAAa,QAAQ,eAAe;AAAA,MACpC,UAAU,QAAQ,YAAY;AAAA,MAC9B,YAAY,QAAQ,cAAc;AAAA,IACpC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/layouts/page/page-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/page-types.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\n/**\n * Array of panel names rendered in the page component.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const pagePanels = ['sidebar', 'main', 'details'] as const;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelName = (typeof pagePanels)[number];\n\n/**\n * An object of panel keys and the panel's current size in all available units.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PagePanelSizes = Record<string, { [key in 'px' | '%']: number }>;\n\n/**\n * Page panels that can be dismissed.\n * @public\n * @deprecated This type is no longer used and will be removed in a future release.\n */\nexport type DismissiblePagePanels = Extract<\n  (typeof pagePanels)[number],\n  'sidebar' | 'details'\n>;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type ControlledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed: boolean;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: never;\n};\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type UncontrolledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed?: never;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: boolean;\n};\n\n/**\n * @public\n * @deprecated Use `ControlledPagePanelProps` or `UncontrolledPagePanelProps` instead.\n **/\nexport type PagePanelProps =\n  | ControlledPagePanelProps\n  | UncontrolledPagePanelProps;\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\n/**\n * Array of panel names rendered in the page component.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const pagePanels = ['sidebar', 'main', 'details'] as const;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelName = (typeof pagePanels)[number];\n\n/**\n * An object of panel keys and the panel's current size in all available units.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PagePanelSizes = Record<string, { [key in 'px' | '%']: number }>;\n\n/**\n * Page panels that can be dismissed.\n * @public\n * @deprecated This type is no longer used and will be removed in a future release.\n */\nexport type DismissiblePagePanels = Extract<\n  (typeof pagePanels)[number],\n  'sidebar' | 'details'\n>;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type ControlledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed: boolean;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: never;\n};\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type UncontrolledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed?: never;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: boolean;\n};\n\n/**\n * @public\n * @deprecated Use `ControlledPagePanelProps` or `UncontrolledPagePanelProps` instead.\n **/\nexport type PagePanelProps =\n  | ControlledPagePanelProps\n  | UncontrolledPagePanelProps;\n"],
   "mappings": "AAMO,MAAM,aAAa,CAAC,WAAW,QAAQ,SAAS;",
   "names": []
 }

package/esm/layouts/page/panel-context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel-context.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { createContext, useContext } from 'react';\n\nimport type { PanelName } from '../page/page-types.js';\n\n/** @internal */\nexport const panelContext = createContext<{\n  name: PanelName;\n} | null>(null);\n\n/** @internal */\nexport function usePanelContext() {\n  return useContext(panelContext);\n}\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport { createContext, useContext } from 'react';\n\nimport type { PanelName } from '../page/page-types.js';\n\n/** @internal */\nexport const panelContext = createContext<{\n  name: PanelName;\n} | null>(null);\n\n/** @internal */\nexport function usePanelContext() {\n  return useContext(panelContext);\n}\n"],
   "mappings": "AACA,SAAS,eAAe,kBAAkB;AAKnC,MAAM,eAAe,cAElB,IAAI;AAGP,SAAS,kBAAkB;AAChC,SAAO,WAAW,YAAY;AAChC;",
   "names": []
 }

package/esm/layouts/page/panel-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel-types.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @internal */\nexport type Direction = 'ltr' | 'rtl';\n\n/**\n * Array of supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const panelSizeUnits = ['px', 'fr', '%', 'vw', 'rem'] as const;\n/**\n * The supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSizeUnit = (typeof panelSizeUnits)[number];\n\n/**\n * The size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSize = number | `${number}${PanelSizeUnit}`;\n"],
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\n/** @internal */\nexport type Direction = 'ltr' | 'rtl';\n\n/**\n * Array of supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const panelSizeUnits = ['px', 'fr', '%', 'vw', 'rem'] as const;\n/**\n * The supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSizeUnit = (typeof panelSizeUnits)[number];\n\n/**\n * The size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSize = number | `${number}${PanelSizeUnit}`;\n"],
   "mappings": "AASO,MAAM,iBAAiB,CAAC,MAAM,MAAM,KAAK,MAAM,KAAK;",
   "names": []
 }

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-12-2 {
+._1p91g301-3-13-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-12-2 {
+._1p91g302-3-13-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-12-2 {
+._1p91g303-3-13-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-12-2 {
+._1p91g304-3-13-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-12-2 {
+._1p91g305-3-13-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-12-2 {
+._1p91g306-3-13-0 {
   line-height: 0;
 }
-._1p91g307-3-12-2 {
+._1p91g307-3-13-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-12-2 {
+._1p91g308-3-13-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1jgl8s50-3-12-2 ._1p91g308-3-12-2 {
+._1jgl8s50-3-13-0 ._1p91g308-3-13-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -50,7 +50,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-12-2 ._1p91g308-3-12-2::before {
+._1jgl8s50-3-13-0 ._1p91g308-3-13-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -61,13 +61,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-12-2 ._1p91g308-3-12-2:hover::before {
+._1jgl8s50-3-13-0 ._1p91g308-3-13-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-12-2 ._1p91g308-3-12-2:active::before {
+._1jgl8s50-3-13-0 ._1p91g308-3-13-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1p91g309-3-12-2 {
+._1p91g309-3-13-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -80,17 +80,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._1p91g309-3-12-2:focus-visible {
+._1p91g309-3-13-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-12-2:hover._1p91g309-3-12-2:focus-visible {
+._1p91g309-3-13-0:hover._1p91g309-3-13-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-12-2:focus-visible, ._1p91g309-3-12-2:hover {
+._1p91g309-3-13-0:focus-visible, ._1p91g309-3-13-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-12-2:after {
+._1p91g309-3-13-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -101,11 +101,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-12-2 ._1p91g309-3-12-2 {
+._1jgl8s50-3-13-0 ._1p91g309-3-13-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-12-2 ._1p91g308-3-12-2:has(._1p91g309-3-12-2:focus-visible)::before {
+._1jgl8s50-3-13-0 ._1p91g308-3-13-0:has(._1p91g309-3-13-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }

package/esm/layouts/page/panel.sty.js

@@ -1,16 +1,16 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-12-2";
-var dismissedPanel = "_1p91g302-3-12-2";
-var drawer = "_1p91g304-3-12-2";
-var drawerContent = "_1p91g305-3-12-2";
-var gap = "_1p91g303-3-12-2";
-var panelContent = "_1p91g307-3-12-2";
-var resizeHandle = "_1p91g309-3-12-2";
-var resizeHandleContainer = "_1p91g308-3-12-2";
-var root = "_1p91g301-3-12-2";
-var rtlPanel = "_1p91g300-3-12-2";
+var buttonIcon = "_1p91g306-3-13-0";
+var dismissedPanel = "_1p91g302-3-13-0";
+var drawer = "_1p91g304-3-13-0";
+var drawerContent = "_1p91g305-3-13-0";
+var gap = "_1p91g303-3-13-0";
+var panelContent = "_1p91g307-3-13-0";
+var resizeHandle = "_1p91g309-3-13-0";
+var resizeHandleContainer = "_1p91g308-3-13-0";
+var root = "_1p91g301-3-13-0";
+var rtlPanel = "_1p91g300-3-13-0";
 export {
   GAP_SIZE,
   buttonIcon,

package/esm/layouts/page/panel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-12-2';\nexport var dismissedPanel = '_1p91g302-3-12-2';\nexport var drawer = '_1p91g304-3-12-2';\nexport var drawerContent = '_1p91g305-3-12-2';\nexport var gap = '_1p91g303-3-12-2';\nexport var panelContent = '_1p91g307-3-12-2';\nexport var resizeHandle = '_1p91g309-3-12-2';\nexport var resizeHandleContainer = '_1p91g308-3-12-2';\nexport var root = '_1p91g301-3-12-2';\nexport var rtlPanel = '_1p91g300-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-13-0';\nexport var dismissedPanel = '_1p91g302-3-13-0';\nexport var drawer = '_1p91g304-3-13-0';\nexport var drawerContent = '_1p91g305-3-13-0';\nexport var gap = '_1p91g303-3-13-0';\nexport var panelContent = '_1p91g307-3-13-0';\nexport var resizeHandle = '_1p91g309-3-13-0';\nexport var resizeHandleContainer = '_1p91g308-3-13-0';\nexport var root = '_1p91g301-3-13-0';\nexport var rtlPanel = '_1p91g300-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.css

@@ -1,4 +1,4 @@
-._193kgwe0-3-12-2 {
+._193kgwe0-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,36 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._1jgl8s50-3-12-2 ._193kgwe0-3-12-2 {
+._1jgl8s50-3-13-0 ._193kgwe0-3-13-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-12-2 {
+._193kgwe1-3-13-0 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-12-2 & {
+  ._1jgl8s50-3-13-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }
-._193kgwe2-3-12-2 {
+._193kgwe2-3-13-0 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-12-2 {
+._193kgwe3-3-13-0 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-12-2 {
+._193kgwe4-3-13-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-12-2 ._193kgwe4-3-12-2 {
+._1jgl8s50-3-13-0 ._193kgwe4-3-13-0 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-12-2 {
+._193kgwe5-3-13-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-12-2 ._193kgwe5-3-12-2 {
+._1jgl8s50-3-13-0 ._193kgwe5-3-13-0 {
   border-top-right-radius: 0;
 }

package/esm/layouts/page-layout/PageLayout.js

@@ -137,7 +137,7 @@ const LayoutRoot = memo(
         registry
       }),
       // hosts and registry are stable
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     return /* @__PURE__ */ jsx(PageLayoutPortalContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(

package/esm/layouts/page-layout/PageLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useSyncExternalStore,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport type { ExtractedContentSlot as DetailsContentSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/portal-slots.js';\nimport type {\n  DetailsSlotConfig,\n  SidebarSlotConfig,\n} from './shared/slot-config.js';\nimport { contentDefaults } from './shared/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slot-registry.js';\nimport { TeleportTarget } from './shared/TeleportTarget.js';\nimport { useStableHost } from './shared/useStableHost.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\nimport type { ExtractedContentSlot as SidebarContentSlot } from './sidebar-layout/slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\nfunction resolveOptionalSlot<T extends SidebarSlotConfig | DetailsSlotConfig>(\n  config: T | null,\n  target: ReactNode,\n): (T & { children: ReactNode }) | null {\n  if (!config) {\n    return null;\n  }\n  return { ...config, children: target };\n}\n\n/**\n * This is the container for the horizontal layout below the Header.\n * Subscribes to the slot registry via `useSyncExternalStore`.\n * Re-renders only when registry state changes.\n */\nfunction MainShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const sidebarConfig = snapshot.sidebar;\n  const detailsConfig = snapshot.details;\n  const detailsLayoutContext = snapshot.detailsLayoutContext;\n\n  const showTopLeftRadius = sidebarConfig !== null;\n  const showTopRightRadius =\n    detailsConfig !== null && detailsLayoutContext?.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  const sidebarSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.details, detailsTarget),\n    [snapshot.details, detailsTarget],\n  );\n\n  const contentSlot = useMemo<DetailsContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  const sidebarContentSlot = useMemo<SidebarContentSlot>(\n    () => ({\n      children: <DetailsLayout details={detailsSlot} content={contentSlot} />,\n      // The sidebar bounds itself via its own maxWidth, so the right-hand region\n      // needs no minimum. This is distinct from the details content pane's min.\n      config: { minWidth: 0 },\n      domProps: {},\n    }),\n    [detailsSlot, contentSlot],\n  );\n\n  return <SidebarLayout sidebar={sidebarSlot} content={sidebarContentSlot} />;\n}\n\n/**\n * Subscribes to the slot registry for header config.\n */\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const headerConfig = snapshot.header;\n\n  if (headerConfig === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...headerConfig.domProps}\n      ref={headerConfig.ref}\n      className={clsx(styles.headerContainer, headerConfig.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\n/** @public */\nexport interface PageLayoutProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, PageLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        registry,\n      }),\n      // hosts and registry are stable\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * Use the `PageLayout` to structure app pages with persistent header, sidebar, content, and details panel slots, including responsive breakpoint handling and resizable panels.\n * @public\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
-  "mappings": "AA6EU,cAgIA,YAhIA;AA7EV,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,qBAAqB;AAE9B,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,SAAS,kCAAkC;AAO3C,SAAS,oBACP,QACA,QACsC;AACtC,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AACA,SAAO,EAAE,GAAG,QAAQ,UAAU,OAAO;AACvC;AAOA,SAAS,YAAY;AACnB,QAAM,EAAE,OAAO,SAAS,IAAI,2BAA2B;AACvD,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAEA,QAAM,gBAAgB,SAAS;AAC/B,QAAM,gBAAgB,SAAS;AAC/B,QAAM,uBAAuB,SAAS;AAEtC,QAAM,oBAAoB,kBAAkB;AAC5C,QAAM,qBACJ,kBAAkB,QAAQ,sBAAsB,SAAS;AAE3D,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,IACP,qBAAqB,OAAO;AAAA,IAC5B,sBAAsB,OAAO;AAAA,EAC/B;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAM,oBAAC,kBAAe,MAAM,MAAM,SAAS;AAAA,IAC3C,CAAC,MAAM,OAAO;AAAA,EAChB;AACA,QAAM,gBAAgB;AAAA,IACpB,MAAM,oBAAC,kBAAe,MAAM,MAAM,SAAS;AAAA,IAC3C,CAAC,MAAM,OAAO;AAAA,EAChB;AACA,QAAM,gBAAgB;AAAA,IACpB,MAAM,oBAAC,kBAAe,MAAM,MAAM,SAAS;AAAA,IAC3C,CAAC,MAAM,OAAO;AAAA,EAChB;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,oBAAoB,SAAS,SAAS,aAAa;AAAA,IACzD,CAAC,SAAS,SAAS,aAAa;AAAA,EAClC;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,oBAAoB,SAAS,SAAS,aAAa;AAAA,IACzD,CAAC,SAAS,SAAS,aAAa;AAAA,EAClC;AAEA,QAAM,cAAc,QAA4B,MAAM;AACpD,QAAI,SAAS,SAAS;AACpB,YAAM,EAAE,QAAQ,UAAU,IAAI,IAAI,SAAS;AAC3C,aAAO;AAAA,QACL,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,UACR,GAAG;AAAA,UACH,WAAW,KAAK,kBAAkB,SAAS,SAAS;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ,EAAE,UAAU,gBAAgB,SAAS;AAAA,MAC7C,UAAU,EAAE,WAAW,iBAAiB;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,eAAe,gBAAgB,CAAC;AAEtD,QAAM,qBAAqB;AAAA,IACzB,OAAO;AAAA,MACL,UAAU,oBAAC,iBAAc,SAAS,aAAa,SAAS,aAAa;AAAA;AAAA;AAAA,MAGrE,QAAQ,EAAE,UAAU,EAAE;AAAA,MACtB,UAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,SAAO,oBAAC,iBAAc,SAAS,aAAa,SAAS,oBAAoB;AAC3E;AAKA,SAAS,cAAc;AACrB,QAAM,EAAE,OAAO,SAAS,IAAI,2BAA2B;AACvD,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACA,QAAM,eAAe,SAAS;AAE9B,MAAI,iBAAiB,MAAM;AACzB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,aAAa;AAAA,MACjB,KAAK,aAAa;AAAA,MAClB,WAAW,KAAK,OAAO,iBAAiB,aAAa,SAAS,SAAS;AAAA,MAEvE,8BAAC,kBAAe,MAAM,MAAM,QAAQ;AAAA;AAAA,EACtC;AAEJ;AAWA,MAAM,aAAa;AAAA,EACjB,WAA4C,CAAC,OAAO,iBAAiB;AACnE,UAAM,EAAE,UAAU,WAAW,eAAe,GAAG,UAAU,IAAI;AAE7D,UAAM,CAAC,yBAAyB,aAAa,IAC3C,2BAA2B,SAAS;AAEtC,UAAM,aAAa,cAAc;AACjC,UAAM,cAAc,cAAc;AAClC,UAAM,cAAc,cAAc;AAClC,UAAM,cAAc,cAAc;AAElC,UAAM,WAAW,QAAQ,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAEvD,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,QACL,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,SAAS;AAAA,UACT,SAAS;AAAA,QACX;AAAA,QACA;AAAA,MACF;AAAA;AAAA;AAAA,MAGA,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,SACvC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,YAAY,aAAa;AAAA,QAEhD;AAAA,8BAAC,eAAY;AAAA,UACb,qBAAC,SAAI,WAAW,OAAO,kBACrB;AAAA,gCAAC,aAAU;AAAA,YACV;AAAA,aACH;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,CAAC;AACH;AACA,WAAW,cAAc;AAMlB,MAAM,aAAa,OAAO,OAAO,YAAY;AAAA;AAAA,EAElD,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA;AAAA;AAAA,EAIT,SAAS;AAAA;AAAA,EAET,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useSyncExternalStore,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport type { ExtractedContentSlot as DetailsContentSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/portal-slots.js';\nimport type {\n  DetailsSlotConfig,\n  SidebarSlotConfig,\n} from './shared/slot-config.js';\nimport { contentDefaults } from './shared/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slot-registry.js';\nimport { TeleportTarget } from './shared/TeleportTarget.js';\nimport { useStableHost } from './shared/useStableHost.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\nimport type { ExtractedContentSlot as SidebarContentSlot } from './sidebar-layout/slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\nfunction resolveOptionalSlot<T extends SidebarSlotConfig | DetailsSlotConfig>(\n  config: T | null,\n  target: ReactNode,\n): (T & { children: ReactNode }) | null {\n  if (!config) {\n    return null;\n  }\n  return { ...config, children: target };\n}\n\n/**\n * This is the container for the horizontal layout below the Header.\n * Subscribes to the slot registry via `useSyncExternalStore`.\n * Re-renders only when registry state changes.\n */\nfunction MainShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const sidebarConfig = snapshot.sidebar;\n  const detailsConfig = snapshot.details;\n  const detailsLayoutContext = snapshot.detailsLayoutContext;\n\n  const showTopLeftRadius = sidebarConfig !== null;\n  const showTopRightRadius =\n    detailsConfig !== null && detailsLayoutContext?.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  const sidebarSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.details, detailsTarget),\n    [snapshot.details, detailsTarget],\n  );\n\n  const contentSlot = useMemo<DetailsContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  const sidebarContentSlot = useMemo<SidebarContentSlot>(\n    () => ({\n      children: <DetailsLayout details={detailsSlot} content={contentSlot} />,\n      // The sidebar bounds itself via its own maxWidth, so the right-hand region\n      // needs no minimum. This is distinct from the details content pane's min.\n      config: { minWidth: 0 },\n      domProps: {},\n    }),\n    [detailsSlot, contentSlot],\n  );\n\n  return <SidebarLayout sidebar={sidebarSlot} content={sidebarContentSlot} />;\n}\n\n/**\n * Subscribes to the slot registry for header config.\n */\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const headerConfig = snapshot.header;\n\n  if (headerConfig === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...headerConfig.domProps}\n      ref={headerConfig.ref}\n      className={clsx(styles.headerContainer, headerConfig.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\n/** @public */\nexport interface PageLayoutProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, PageLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        registry,\n      }),\n      // hosts and registry are stable\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * Use the `PageLayout` to structure app pages with persistent header, sidebar, content, and details panel slots, including responsive breakpoint handling and resizable panels.\n * @public\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.sty.js

@@ -1,11 +1,11 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-12-2";
-var contentContainer = "_193kgwe2-3-12-2";
-var contentTopLeftRadius = "_193kgwe4-3-12-2";
-var contentTopRightRadius = "_193kgwe5-3-12-2";
-var headerContainer = "_193kgwe1-3-12-2";
-var layoutRoot = "_193kgwe0-3-12-2";
+var content = "_193kgwe3-3-13-0";
+var contentContainer = "_193kgwe2-3-13-0";
+var contentTopLeftRadius = "_193kgwe4-3-13-0";
+var contentTopRightRadius = "_193kgwe5-3-13-0";
+var headerContainer = "_193kgwe1-3-13-0";
+var layoutRoot = "_193kgwe0-3-13-0";
 export {
   content,
   contentContainer,

package/esm/layouts/page-layout/PageLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-12-2';\nexport var contentContainer = '_193kgwe2-3-12-2';\nexport var contentTopLeftRadius = '_193kgwe4-3-12-2';\nexport var contentTopRightRadius = '_193kgwe5-3-12-2';\nexport var headerContainer = '_193kgwe1-3-12-2';\nexport var layoutRoot = '_193kgwe0-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-13-0';\nexport var contentContainer = '_193kgwe2-3-13-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-13-0';\nexport var contentTopRightRadius = '_193kgwe5-3-13-0';\nexport var headerContainer = '_193kgwe1-3-13-0';\nexport var layoutRoot = '_193kgwe0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsControlBar.css

@@ -1,15 +1,15 @@
-._1y5ro0l0-3-12-2 {
+._1y5ro0l0-3-13-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-12-2 {
+._1y5ro0l1-3-13-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-12-2 {
+._1y5ro0l2-3-13-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);

package/esm/layouts/page-layout/details-layout/DetailsControlBar.sty.js

@@ -1,7 +1,7 @@
 import "./DetailsControlBar.css";
-var controlBar = "_1y5ro0l0-3-12-2";
-var customActions = "_1y5ro0l1-3-12-2";
-var defaultActions = "_1y5ro0l2-3-12-2";
+var controlBar = "_1y5ro0l0-3-13-0";
+var customActions = "_1y5ro0l1-3-13-0";
+var defaultActions = "_1y5ro0l2-3-13-0";
 export {
   controlBar,
   customActions,

package/esm/layouts/page-layout/details-layout/DetailsControlBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.css.ts"],
-  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-12-2';\nexport var customActions = '_1y5ro0l1-3-12-2';\nexport var defaultActions = '_1y5ro0l2-3-12-2';"],
+  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-13-0';\nexport var customActions = '_1y5ro0l1-3-13-0';\nexport var defaultActions = '_1y5ro0l2-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayout.css

@@ -1,10 +1,10 @@
-._1377n3n0-3-12-2 {
+._1377n3n0-3-13-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1377n3n1-3-12-2 {
+._1377n3n1-3-13-0 {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -15,19 +15,19 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-12-2 ._1377n3n1-3-12-2 {
+._1jgl8s50-3-13-0 ._1377n3n1-3-13-0 {
   border-top-left-radius: 0;
 }
-._1377n3n2-3-12-2 {
+._1377n3n2-3-13-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
 }
-._1377n3n3-3-12-2 {
+._1377n3n3-3-13-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1377n3n4-3-12-2 {
+._1377n3n4-3-13-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js

@@ -1,10 +1,10 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-12-2";
-var drawer = "_1377n3n3-3-12-2";
-var drawerContent = "_1377n3n4-3-12-2";
-var layoutRoot = "_1377n3n0-3-12-2";
-var panel = "_1377n3n1-3-12-2";
+var content = "_1377n3n2-3-13-0";
+var drawer = "_1377n3n3-3-13-0";
+var drawerContent = "_1377n3n4-3-13-0";
+var layoutRoot = "_1377n3n0-3-13-0";
+var panel = "_1377n3n1-3-13-0";
 export {
   content,
   drawer,

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-12-2';\nexport var drawer = '_1377n3n3-3-12-2';\nexport var drawerContent = '_1377n3n4-3-12-2';\nexport var layoutRoot = '_1377n3n0-3-12-2';\nexport var panel = '_1377n3n1-3-12-2';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-13-0';\nexport var drawer = '_1377n3n3-3-13-0';\nexport var drawerContent = '_1377n3n4-3-13-0';\nexport var layoutRoot = '_1377n3n0-3-13-0';\nexport var panel = '_1377n3n1-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
   "names": []
 }