@dynatrace/strato-components 3.4.0 → 3.5.0

package/layouts/page/Sidebar.sty.js

@@ -27,14 +27,15 @@ __export(Sidebar_css_exports, {
   sidebar: () => sidebar
 });
 module.exports = __toCommonJS(Sidebar_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_panel_css_ts_vanilla = require("./panel.css");
 var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_Sidebar_css_ts_vanilla = require("./Sidebar.css");
-var buttonContainer = "_zdcge95-3-4-0";
-var dismissButton = "_zdcge97-3-4-0 _zdcge96-3-4-0";
-var expandButton = "_zdcge98-3-4-0 _zdcge96-3-4-0";
-var hint = "_zdcge93-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9bb-3-4-0";
-var integratedControls = "_zdcge91-3-4-0";
-var integratedControlsDrawerHeader = "_zdcge9a-3-4-0";
-var integratedControlsPanel = "_zdcge99-3-4-0";
-var sidebar = "_zdcge90-3-4-0";
+var buttonContainer = "_zdcge95-3-5-0";
+var dismissButton = "_zdcge97-3-5-0 _zdcge96-3-5-0";
+var expandButton = "_zdcge98-3-5-0 _zdcge96-3-5-0";
+var hint = "_zdcge93-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9bc-3-5-0";
+var integratedControls = "_zdcge91-3-5-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-5-0";
+var integratedControlsPanel = "_zdcge99-3-5-0";
+var sidebar = "_zdcge90-3-5-0";

package/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-4-0 {
+._1p91g301-3-5-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-4-0 {
+._1p91g302-3-5-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-4-0 {
+._1p91g303-3-5-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-4-0 {
+._1p91g304-3-5-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-4-0 {
+._1p91g305-3-5-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-4-0 {
+._1p91g306-3-5-0 {
   line-height: 0;
 }
-._1p91g307-3-4-0 {
+._1p91g307-3-5-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-4-0 {
+._1p91g308-3-5-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,8 +40,25 @@
   height: 100%;
   justify-content: center;
 }
-._1p91g309-3-4-0 {
-  background: var(--dt-colors-border-neutral-default, #dadbe4);
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued, #e4e5eb), var(--dt-colors-border-neutral-subdued, #e4e5eb));
+  background-size: var(--dt-borders-width-default, 1px) 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: 0;
+  transition: none;
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:hover {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-hover, #d0d1dc), var(--dt-colors-border-neutral-subdued-hover, #d0d1dc));
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:active {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
+}
+._1p91g309-3-5-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -54,17 +71,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-4-0:focus-visible {
+._1p91g309-3-5-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-4-0:hover._1p91g309-3-4-0:focus-visible {
+._1p91g309-3-5-0:hover._1p91g309-3-5-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-4-0:focus-visible, ._1p91g309-3-4-0:hover {
+._1p91g309-3-5-0:focus-visible, ._1p91g309-3-5-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-4-0:after {
+._1p91g309-3-5-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -74,4 +91,12 @@
   transform: translateX(-50%);
   user-select: none;
   width: 100%;
+}
+._1jgl8s50-3-5-0 ._1p91g309-3-5-0 {
+  width: 0;
+  cursor: ew-resize;
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:has(._1p91g309-3-5-0:focus-visible) {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-accent, #595a7d), var(--dt-colors-border-neutral-accent, #595a7d));
+  background-size: var(--dt-borders-width-emphasized, 2px) 100%;
 }

package/layouts/page/panel.sty.js

@@ -30,15 +30,16 @@ __export(panel_css_exports, {
   rtlPanel: () => rtlPanel
 });
 module.exports = __toCommonJS(panel_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_panel_css_ts_vanilla = require("./panel.css");
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-4-0";
-var dismissedPanel = "_1p91g302-3-4-0";
-var drawer = "_1p91g304-3-4-0";
-var drawerContent = "_1p91g305-3-4-0";
-var gap = "_1p91g303-3-4-0";
-var panelContent = "_1p91g307-3-4-0";
-var resizeHandle = "_1p91g309-3-4-0";
-var resizeHandleContainer = "_1p91g308-3-4-0";
-var root = "_1p91g301-3-4-0";
-var rtlPanel = "_1p91g300-3-4-0";
+var buttonIcon = "_1p91g306-3-5-0";
+var dismissedPanel = "_1p91g302-3-5-0";
+var drawer = "_1p91g304-3-5-0";
+var drawerContent = "_1p91g305-3-5-0";
+var gap = "_1p91g303-3-5-0";
+var panelContent = "_1p91g307-3-5-0";
+var resizeHandle = "_1p91g309-3-5-0";
+var resizeHandleContainer = "_1p91g308-3-5-0";
+var root = "_1p91g301-3-5-0";
+var rtlPanel = "_1p91g300-3-5-0";

package/layouts/page-layout/PageLayout.css

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

package/layouts/page-layout/PageLayout.d.ts

@@ -1,19 +1,25 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type PropsWithChildren } from 'react';
 import { usePageLayoutPortalContext } from './shared/PageLayoutPortalContext.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
-/** @internal */
-export interface RootProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'>, BehaviorTrackingProps {
-    children: ReactNode;
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+/** @public */
+export interface PageLayoutProps extends PropsWithChildren, BehaviorTrackingProps, AriaLabelingProps, StylingProps, MaskingProps, DataTestId {
 }
 /**
  * The `PageLayout` component provides the basic layout for your app with slots for a header, sidebar, main content, and a details panel.
  *
- * @internal
+ * Slot components (`Header`, `Sidebar`, `Content`, `Details`) can appear anywhere in the React subtree -
+ * inside `<Outlet />`, `<Suspense>`, or any wrapper component. They portal their children into
+ * stable DOM positions owned by `PageLayout`.
+ * @public
  */
-export declare const PageLayout: import("react").NamedExoticComponent<Omit<RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const PageLayout: import("react").NamedExoticComponent<Omit<PageLayoutProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }> & {
-    readonly type: (props: RootProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    readonly type: (props: PageLayoutProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 } & {
     /** Displays content at the very top of the page. */
     Header: (props: import("./shared/portal-slots.js").HeaderProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
@@ -22,7 +28,7 @@ export declare const PageLayout: import("react").NamedExoticComponent<Omit<RootP
     /**
      * Displays the styled main content area (padding, background, border-radius).
      */
-    Content: (props: import("../index.js")._SplitLayoutContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Content: (props: import("../index.js").PageLayoutContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     /** Displays content in the collapsible, resizable details panel on the right. */
     Details: ((props: import("./details-layout/slots.js").DetailsProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
         ControlBar: {

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

@@ -25,10 +25,11 @@ __export(PageLayout_css_exports, {
   layoutRoot: () => layoutRoot
 });
 module.exports = __toCommonJS(PageLayout_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_PageLayout_css_ts_vanilla = require("./PageLayout.css");
-var content = "_193kgwe3-3-4-0";
-var contentContainer = "_193kgwe2-3-4-0";
-var contentTopLeftRadius = "_193kgwe4-3-4-0";
-var contentTopRightRadius = "_193kgwe5-3-4-0";
-var headerContainer = "_193kgwe1-3-4-0";
-var layoutRoot = "_193kgwe0-3-4-0";
+var content = "_193kgwe3-3-5-0";
+var contentContainer = "_193kgwe2-3-5-0";
+var contentTopLeftRadius = "_193kgwe4-3-5-0";
+var contentTopRightRadius = "_193kgwe5-3-5-0";
+var headerContainer = "_193kgwe1-3-5-0";
+var layoutRoot = "_193kgwe0-3-5-0";

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

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

package/layouts/page-layout/details-layout/DetailsControlBar.d.ts

@@ -1,9 +1,14 @@
-import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../../core/types/data-props.js';
+import type { MaskingProps } from '../../../core/types/masking-props.js';
+import type { StylingProps } from '../../../core/types/styling-props.js';
 /**
  * Props for the `DetailsControlBar` component that renders layout and close controls inside the details panel.
- * @internal
+ * @public
  */
-export interface DetailsControlBarProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {
+export interface DetailsControlBarProps extends PropsWithChildren, BehaviorTrackingProps, AriaLabelingProps, StylingProps, MaskingProps, DataTestId {
 }
 /** @internal */
 export declare const DetailsControlBar: {

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

@@ -23,6 +23,6 @@ __export(DetailsControlBar_css_exports, {
 });
 module.exports = __toCommonJS(DetailsControlBar_css_exports);
 var import_DetailsControlBar_css_ts_vanilla = require("./DetailsControlBar.css");
-var controlBar = "_1y5ro0l0-3-4-0";
-var customActions = "_1y5ro0l1-3-4-0";
-var defaultActions = "_1y5ro0l2-3-4-0";
+var controlBar = "_1y5ro0l0-3-5-0";
+var customActions = "_1y5ro0l1-3-5-0";
+var defaultActions = "_1y5ro0l2-3-5-0";

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

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

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

@@ -24,9 +24,10 @@ __export(DetailsLayout_css_exports, {
   panel: () => panel
 });
 module.exports = __toCommonJS(DetailsLayout_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_DetailsLayout_css_ts_vanilla = require("./DetailsLayout.css");
-var content = "_1377n3n2-3-4-0";
-var drawer = "_1377n3n3-3-4-0";
-var drawerContent = "_1377n3n4-3-4-0";
-var layoutRoot = "_1377n3n0-3-4-0";
-var panel = "_1377n3n1-3-4-0";
+var content = "_1377n3n2-3-5-0";
+var drawer = "_1377n3n3-3-5-0";
+var drawerContent = "_1377n3n4-3-5-0";
+var layoutRoot = "_1377n3n0-3-5-0";
+var panel = "_1377n3n1-3-5-0";

package/layouts/page-layout/details-layout/DetailsLayoutContext.d.ts

@@ -1,7 +1,7 @@
 import { type Dispatch, type SetStateAction } from 'react';
 /**
  * Determines how the details panel is rendered relative to the content.
- * @internal
+ * @public
  */
 export type LayoutMode = 'split' | 'overlay';
 /** @internal */

package/layouts/page-layout/details-layout/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-4-0 {
+._15qr1eq0-3-5-0 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,14 +12,19 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._15qr1eq1-3-4-0 {
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+}
+._15qr1eq1-3-5-0 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-4-0 {
+._15qr1eq2-3-5-0 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -28,7 +33,25 @@
   display: flex;
   justify-content: center;
 }
-._15qr1eq3-3-4-0 {
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0 {
+  background-color: transparent;
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued, #e4e5eb), var(--dt-colors-border-neutral-subdued, #e4e5eb));
+  background-size: var(--dt-borders-width-default, 1px) 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: calc(-1 * var(--dt-spacings-size-4, 4px));
+  transition: none;
+}
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0:hover {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-hover, #d0d1dc), var(--dt-colors-border-neutral-subdued-hover, #d0d1dc));
+}
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0:active {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
+}
+._15qr1eq3-3-5-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -41,17 +64,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;
 }
-._15qr1eq3-3-4-0:focus-visible {
+._15qr1eq3-3-5-0:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-4-0:hover._15qr1eq3-3-4-0:focus-visible {
+._15qr1eq3-3-5-0:hover._15qr1eq3-3-5-0:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-4-0:focus-visible, ._15qr1eq3-3-4-0:hover {
+._15qr1eq3-3-5-0:focus-visible, ._15qr1eq3-3-5-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-4-0:after {
+._15qr1eq3-3-5-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -61,4 +84,21 @@
   transform: translateX(-50%);
   user-select: none;
   width: 100%;
+}
+._1jgl8s50-3-5-0 ._15qr1eq3-3-5-0 {
+  width: 0;
+  cursor: ew-resize;
+}
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0:has(._15qr1eq3-3-5-0:focus-visible) {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-accent, #595a7d), var(--dt-colors-border-neutral-accent, #595a7d));
+  background-size: var(--dt-borders-width-emphasized, 2px) 100%;
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:hover) {
+  box-shadow: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:active) {
+  box-shadow: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:focus-visible) {
+  box-shadow: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }

package/layouts/page-layout/details-layout/Overlay.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 export declare const OVERLAY_HANDLE_WIDTH = 8;
 /** @internal */
 export interface OverlayProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {

package/layouts/page-layout/details-layout/Overlay.js

@@ -96,12 +96,11 @@ const Overlay = (0, import_react2.memo)(
         ref: containerRef,
         children: [
           resizable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.handleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
+            "hr",
             {
               ...focusProps,
-              role: "separator",
               ref: handleRef,
-              className: (0, import_clsx.clsx)(styles.handle, focusClassName),
+              className: (0, import_clsx.clsx)(styles.resizeHandle, focusClassName),
               tabIndex: 0
             }
           ) }) : null,

package/layouts/page-layout/details-layout/Overlay.sty.d.ts

@@ -1,4 +1,4 @@
 export declare const overlay: string;
 export declare const overlayContent: string;
 export declare const handleContainer: string;
-export declare const handle: string;
+export declare const resizeHandle: string;

package/layouts/page-layout/details-layout/Overlay.sty.js

@@ -17,14 +17,15 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Overlay_css_exports = {};
 __export(Overlay_css_exports, {
-  handle: () => handle,
   handleContainer: () => handleContainer,
   overlay: () => overlay,
-  overlayContent: () => overlayContent
+  overlayContent: () => overlayContent,
+  resizeHandle: () => resizeHandle
 });
 module.exports = __toCommonJS(Overlay_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var handle = "_15qr1eq3-3-4-0";
-var handleContainer = "_15qr1eq2-3-4-0";
-var overlay = "_15qr1eq0-3-4-0";
-var overlayContent = "_15qr1eq1-3-4-0";
+var handleContainer = "_15qr1eq2-3-5-0";
+var overlay = "_15qr1eq0-3-5-0";
+var overlayContent = "_15qr1eq1-3-5-0";
+var resizeHandle = "_15qr1eq3-3-5-0";

package/layouts/page-layout/details-layout/slots.d.ts

@@ -1,21 +1,12 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 import { type DetailsControlBarProps } from './DetailsControlBar.js';
 import type { LayoutMode } from './DetailsLayoutContext.js';
-import type { MaskingProps } from '../../../core/types/masking-props.js';
-import type { PanelProps as SplitPanelProps, ContentProps as SplitContentProps } from '../../split-layout/SplitLayout.js';
+import type { ResizablePanelProps, ContentProps as SplitLayoutContentProps } from '../../split-layout/slots.js';
 import type { PanelWidth } from '../../split-layout/width-utils.js';
+import type { CollapsiblePanel } from '../shared/collapsible.js';
 export type { DetailsControlBarProps };
-/** @internal */
-export interface DetailsProps extends SplitPanelProps, MaskingProps {
-    /** Whether the details panel is collapsed (controlled). */
-    collapsed?: boolean;
-    /**
-     * Default value for the collapsed state (uncontrolled).
-     * @defaultValue false
-     */
-    defaultCollapsed?: boolean;
-    /** Fired when the collapsed state changes or should change. */
-    onCollapsedChange?: (value: boolean) => void;
+/** @public */
+export interface DetailsProps extends ResizablePanelProps, CollapsiblePanel {
     /** The current layout mode of the details panel (controlled). */
     layout?: LayoutMode;
     /**
@@ -32,7 +23,7 @@ export interface DetailsProps extends SplitPanelProps, MaskingProps {
     breakpoint?: number;
 }
 /** @internal */
-export type ContentProps = SplitContentProps;
+export type ContentProps = SplitLayoutContentProps;
 /** @internal */
 export interface ExtractedDetailsSlot {
     children?: ReactNode;

package/layouts/page-layout/shared/collapsible.d.ts

@@ -1,5 +1,5 @@
-/** @internal */
-export interface CollapsibleProps {
+/** @public */
+export interface CollapsiblePanel {
     /** Controls whether the panel is collapsed */
     collapsed?: boolean;
     /** Default value for the collapsed state */

package/layouts/page-layout/shared/portal-slots.d.ts

@@ -1,13 +1,17 @@
-import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
+import type { StylingProps } from '../../../core/types/styling-props.js';
 import type { DetailsProps } from '../details-layout/slots.js';
 import type { SidebarProps } from '../sidebar-layout/slots.js';
 /**
  * PageLayout.Header - portals children into the header host node and
  * registers layout config via the slot registry in a layout effect.
- * @internal
+ * @public
  */
-export interface HeaderProps extends PropsWithChildren, MaskingProps, ComponentPropsWithoutRef<'div'> {
+export interface HeaderProps extends PropsWithChildren, BehaviorTrackingProps, AriaLabelingProps, StylingProps, MaskingProps, DataTestId {
 }
 export declare const PageLayoutHeader: (props: HeaderProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 /**
@@ -21,7 +25,7 @@ export declare const PageLayoutSidebar: (props: SidebarProps & import("react").R
  * registers content config via the slot registry in a layout effect.
  * @internal
  */
-export declare const PageLayoutContent: (props: import("../../index.js")._SplitLayoutContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const PageLayoutContent: (props: import("../../index.js").PageLayoutContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 /**
  * PageLayout.Details - portals children into the details host node and
  * registers details config via the slot registry in a layout effect.

package/layouts/page-layout/shared/portal-slots.js

@@ -77,7 +77,6 @@ const PageLayoutSidebar = (0, import_react.forwardRef)(
     onCollapsedChange,
     breakpoint = import_slot_defaults.sidebarDefaults.breakpoint,
     onResize,
-    id: _id,
     ...domProps
   }, ref) {
     const { hosts } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();