@dynatrace/strato-components 3.13.2 → 3.14.0

package/layouts/page-layout/details-region/DetailsRegion.css

@@ -0,0 +1,100 @@
+._15yfwx70-3-14-0 {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._15yfwx71-3-14-0 {
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+._15yfwx72-3-14-0 {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: var(--dt-page-layout-details-panel-width);
+}
+._15yfwx72-3-14-0[hidden] {
+  display: none;
+}
+._15yfwx73-3-14-0 {
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  top: 0;
+  max-width: 100%;
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  border-bottom-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+}
+._1jgl8s50-3-14-0 ._15yfwx73-3-14-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);
+}
+._15yfwx74-3-14-0 {
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  position: relative;
+  flex-shrink: 0;
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1jgl8s50-3-14-0 ._15yfwx74-3-14-0 {
+  border-top-left-radius: 0;
+}
+._15yfwx78-3-14-0 {
+  position: absolute;
+  z-index: 2;
+  right: var(--dt-page-layout-details-panel-width);
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0 {
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: auto;
+  transition: none;
+  background-color: transparent;
+  margin-right: calc(-1 * var(--dt-spacings-size-4, 4px));
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
+  pointer-events: none;
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0:hover::before {
+  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0:active::before {
+  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
+}
+._1jgl8s50-3-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:hover) ._15yfwx73-3-14-0 {
+  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+}
+._1jgl8s50-3-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:active) ._15yfwx73-3-14-0,
+  ._1jgl8s50-3-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:focus-visible) ._15yfwx73-3-14-0 {
+  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+}
+._15yfwx79-3-14-0 {
+  box-sizing: border-box;
+  padding: 0;
+}
+._15yfwx7a-3-14-0 {
+  box-sizing: border-box;
+  padding: var(--dt-spacings-size-16, 16px);
+  height: 100%;
+}

package/layouts/page-layout/details-region/DetailsRegion.css.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolved panel width, published once on the region. Both the panel element
+ * and the absolutely positioned overlay separator read it, so a drag can move
+ * them together by writing a single property and without a React render.
+ */
+export declare const panelWidthVariable = "--dt-page-layout-details-panel-width";
+export declare const region: string;
+export declare const content: string;
+export declare const panel: Record<"hidden" | "overlay" | "split", string>;
+export declare const handle: Record<"overlay" | "split", string>;
+export declare const drawer: string;
+export declare const drawerContent: string;
+//# sourceMappingURL=DetailsRegion.css.d.ts.map

package/layouts/page-layout/details-region/DetailsRegion.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithoutRef, type RefObject } from 'react';
+import { type DetailsSlot } from './details-sizing.js';
+import { type ExtractedContentSlot } from '../../split-layout/slots.js';
+/**
+ * The prop bag `PageLayout`'s main shell passes down for the content + details
+ * region. Not the public props of a details panel: consumers configure it
+ * through `PageLayout.Details`.
+ *
+ * @internal
+ */
+export type DetailsRegionShellProps = {
+    details: DetailsSlot | null;
+    content: ExtractedContentSlot;
+    containerRef: RefObject<HTMLDivElement | null>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;
+/**
+ * Renders the content + details region. The region, `<main>` and the panel
+ * element are rendered unconditionally: the mode only changes how the panel is
+ * styled, never the shape of the tree. Branching on slot presence or on the
+ * mode would remount `<main>` and reset its scroll position (APPDEV-19606).
+ *
+ * @internal
+ */
+export declare const DetailsRegion: import("react").MemoExoticComponent<(props: {
+    details: DetailsSlot | null;
+    content: ExtractedContentSlot;
+    containerRef: RefObject<HTMLDivElement | null>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "content"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null>;
+//# sourceMappingURL=DetailsRegion.d.ts.map

package/layouts/page-layout/details-region/DetailsRegion.js

@@ -0,0 +1,164 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DetailsRegion_exports = {};
+__export(DetailsRegion_exports, {
+  DetailsRegion: () => DetailsRegion
+});
+module.exports = __toCommonJS(DetailsRegion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = require("clsx");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_details_sizing = require("./details-sizing.js");
+var styles = __toESM(require("./DetailsRegion.sty.js"));
+var import_useId = require("../../../core/hooks/useId.js");
+var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
+var import_Drawer = require("../../../overlays/drawer/Drawer.js");
+var import_ResizeSeparator = require("../../split-layout/resize-separator/ResizeSeparator.js");
+var import_usePanelDrag = require("../../split-layout/usePanelDrag.js");
+var import_width_utils = require("../../split-layout/width-utils.js");
+var import_panel_label = require("../shared/panel-label.js");
+const DetailsRegion = (0, import_react.memo)(
+  (0, import_react.forwardRef)((props, ref) => {
+    const {
+      className: rootClassName,
+      containerRef,
+      details,
+      content,
+      style: rootStyle,
+      ...rootProps
+    } = props;
+    const intl = (0, import_react_intl.useIntl)();
+    const rootRef = (0, import_useMergeRefs.useMergeRefs)([ref, containerRef]);
+    const generatedPanelId = (0, import_useId.useId)();
+    const detailsAriaLabel = intl.formatMessage({
+      defaultMessage: "Details",
+      id: "o3A99RFWS+N7bJe8",
+      description: "Accessible label for the details panel."
+    });
+    const view = import_details_sizing.PANEL_VIEW[details?.state.mode ?? "collapsed"];
+    const { panelWidthCss, isResizable, bounds, constraints, panelWidthPx } = (0, import_details_sizing.computeDetailsSizing)(details, content.config.minWidth, view);
+    const dragActions = (0, import_usePanelDrag.usePanelDrag)({
+      containerRef,
+      constraints,
+      panelWidthPx,
+      // The panel sits at the end of the region, so dragging left widens it.
+      direction: -1,
+      // Writing the panel width variable straight onto the region keeps panel
+      // and handle moving together from one property.
+      paint: (sizing) => {
+        containerRef.current?.style.setProperty(
+          styles.panelWidthVariable,
+          `${sizing.panel.width}px`
+        );
+      },
+      commit: (widthPx) => {
+        details?.state.commitWidth(widthPx);
+      }
+    });
+    const handleVariant = isResizable ? view.handleVariant : null;
+    const panelDetails = view.host === "panel" ? details : null;
+    const drawerDetails = view.host === "drawer" ? details : null;
+    const panelId = panelDetails?.domProps.id ?? generatedPanelId;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ...rootProps,
+          ref: rootRef,
+          className: (0, import_clsx.clsx)(styles.region, rootClassName),
+          style: {
+            ...rootStyle,
+            [styles.panelWidthVariable]: panelWidthCss
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "main",
+              {
+                ...content.domProps,
+                ref: content.ref,
+                className: (0, import_clsx.clsx)(styles.content, content.domProps.className),
+                style: {
+                  ...content.domProps.style,
+                  minWidth: (0, import_width_utils.toCssLength)(content.config.minWidth)
+                },
+                children: content.children
+              }
+            ),
+            handleVariant && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.handle[handleVariant], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ResizeSeparator.ResizeSeparator,
+              {
+                ...dragActions,
+                controls: panelId,
+                "aria-label": details?.config.label,
+                value: bounds.value,
+                min: bounds.min,
+                max: bounds.max,
+                valueText: `${bounds.value}px`
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...panelDetails?.domProps,
+                ref: panelDetails?.ref,
+                id: panelId,
+                role: view.role,
+                "aria-label": details ? (0, import_panel_label.resolvePanelLabel)(panelDetails?.domProps, detailsAriaLabel) : void 0,
+                hidden: !view.visible,
+                className: (0, import_clsx.clsx)(
+                  styles.panel[view.panelVariant],
+                  panelDetails?.domProps.className
+                ),
+                children: view.host === "panel" && details?.children
+              }
+            )
+          ]
+        }
+      ),
+      drawerDetails && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Drawer.Drawer,
+        {
+          ...drawerDetails.domProps,
+          ref: drawerDetails.ref,
+          className: (0, import_clsx.clsx)(styles.drawer, drawerDetails.domProps.className),
+          "aria-label": (0, import_panel_label.resolvePanelLabel)(
+            drawerDetails.domProps,
+            detailsAriaLabel
+          ),
+          isDismissed: drawerDetails.state.collapsed,
+          onDismiss: (state) => drawerDetails.state.setCollapsed(state),
+          placement: "right",
+          width: "wide",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.drawerContent, children: drawerDetails.children })
+        }
+      )
+    ] });
+  })
+);
+DetailsRegion.displayName = "DetailsRegion";

package/layouts/page-layout/details-region/DetailsRegion.sty.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DetailsRegion_css_exports = {};
+__export(DetailsRegion_css_exports, {
+  content: () => content,
+  drawer: () => drawer,
+  drawerContent: () => drawerContent,
+  handle: () => handle,
+  panel: () => panel,
+  panelWidthVariable: () => panelWidthVariable,
+  region: () => region
+});
+module.exports = __toCommonJS(DetailsRegion_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
+var import_ResizeSeparator_css_ts_vanilla = require("../../split-layout/resize-separator/ResizeSeparator.css");
+var import_DetailsRegion_css_ts_vanilla = require("./DetailsRegion.css");
+var content = "_15yfwx71-3-14-0";
+var drawer = "_15yfwx79-3-14-0";
+var drawerContent = "_15yfwx7a-3-14-0";
+var handle = { split: "_151k20o2-3-14-0 _151k20o1-3-14-0", overlay: "_15yfwx78-3-14-0 _151k20o1-3-14-0" };
+var panel = { split: "_15yfwx74-3-14-0 _15yfwx72-3-14-0", overlay: "_15yfwx72-3-14-0 _15yfwx73-3-14-0", hidden: "_15yfwx72-3-14-0" };
+var panelWidthVariable = "--dt-page-layout-details-panel-width";
+var region = "_15yfwx70-3-14-0";

package/layouts/page-layout/{details-layout/DetailsLayoutContext.d.ts → details-region/DetailsRegionContext.d.ts}

@@ -1,21 +1,20 @@
 import { type Dispatch, type SetStateAction } from 'react';
+import type { RenderedMode } from '../shared/panel-state/panel-mode.js';
 /**
  * Determines how the details panel is rendered relative to the content.
  * @public
  */
 export type LayoutMode = 'split' | 'overlay';
 /** @internal */
-export type RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';
-/** @internal */
-export interface DetailsLayoutContextValue {
+export interface DetailsRegionContextValue {
     collapsed: boolean;
     setCollapsed: Dispatch<SetStateAction<boolean>>;
     preferredLayout: LayoutMode;
     setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;
-    mode: RenderedLayout;
+    mode: RenderedMode;
 }
 /** @internal */
-export declare const DetailsLayoutContext: import("react").Context<DetailsLayoutContextValue | null>;
+export declare const DetailsRegionContext: import("react").Context<DetailsRegionContextValue | null>;
 /** @internal */
-export declare function useDetailsLayoutContext(): DetailsLayoutContextValue | null;
-//# sourceMappingURL=DetailsLayoutContext.d.ts.map
+export declare function useDetailsRegionContext(): DetailsRegionContextValue;
+//# sourceMappingURL=DetailsRegionContext.d.ts.map

package/layouts/page-layout/{details-layout/DetailsLayout.sty.js → details-region/DetailsRegionContext.js}

@@ -15,19 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DetailsLayout_css_exports = {};
-__export(DetailsLayout_css_exports, {
-  content: () => content,
-  drawer: () => drawer,
-  drawerContent: () => drawerContent,
-  layoutRoot: () => layoutRoot,
-  panel: () => panel
+var DetailsRegionContext_exports = {};
+__export(DetailsRegionContext_exports, {
+  DetailsRegionContext: () => DetailsRegionContext,
+  useDetailsRegionContext: () => useDetailsRegionContext
 });
-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-13-2";
-var drawer = "_1377n3n3-3-13-2";
-var drawerContent = "_1377n3n4-3-13-2";
-var layoutRoot = "_1377n3n0-3-13-2";
-var panel = "_1377n3n1-3-13-2";
+module.exports = __toCommonJS(DetailsRegionContext_exports);
+var import_react = require("react");
+const DetailsRegionContext = (0, import_react.createContext)(null);
+function useDetailsRegionContext() {
+  const context = (0, import_react.useContext)(DetailsRegionContext);
+  if (context === null) {
+    throw new Error(
+      "PageLayout.Details.ControlBar must be rendered inside a <PageLayout.Details>."
+    );
+  }
+  return context;
+}

package/layouts/page-layout/details-region/details-sizing.d.ts

@@ -0,0 +1,61 @@
+import type { ExtractedDetailsSlot } from './slots.js';
+import { type PanelSizingConstraints } from '../../split-layout/panel-sizing.js';
+import type { PanelWidth } from '../../split-layout/width-utils.js';
+import type { RenderedMode } from '../shared/panel-state/panel-mode.js';
+import type { DetailsPanelState } from '../shared/panel-state/usePanelState.js';
+/**
+ * Everything the details region needs to know about a rendered mode. Holds no
+ * styles so the sizing math can read the same table as the markup.
+ *
+ * @internal
+ */
+export interface PanelView {
+    panelVariant: 'split' | 'overlay' | 'hidden';
+    /** `null` when the mode offers no resize separator. */
+    handleVariant: 'split' | 'overlay' | null;
+    /** Where the panel content lives. */
+    host: 'panel' | 'drawer';
+    /** Drives the panel's `hidden` attribute. */
+    visible: boolean;
+    role: 'dialog' | undefined;
+    /** Whether the panel reserves space from the content. */
+    reservesContent: boolean;
+}
+/**
+ * The collapsed mode keeps `host: 'panel'` on purpose. Moving the content
+ * elsewhere while collapsing would unmount it and reset its scroll position
+ * and form state (APPDEV-19606).
+ *
+ * @internal
+ */
+export declare const PANEL_VIEW: Record<RenderedMode, PanelView>;
+/** @internal */
+export type DetailsSlot = ExtractedDetailsSlot & {
+    state: DetailsPanelState;
+};
+/** @internal */
+export interface DetailsSizing {
+    /** Value published as the panel width variable on the region. */
+    panelWidthCss: string;
+    /** Whether the current mode offers a resize separator. */
+    isResizable: boolean;
+    /** Bounds the separator reports: the width and the limits of the panel it controls. */
+    bounds: {
+        value: number;
+        min: number;
+        max: number;
+    };
+    /** What a drag re-clamps against. */
+    constraints: PanelSizingConstraints;
+    panelWidthPx: number;
+}
+/**
+ * Maps the details slot and its rendered mode onto the shared panel sizing.
+ * Only the mode-specific reading of the declared inputs lives here, never the
+ * arithmetic: an overlay reserves nothing from the content, and a hidden panel
+ * has no width to publish at all.
+ *
+ * @internal
+ */
+export declare function computeDetailsSizing(details: DetailsSlot | null, contentMin: PanelWidth, view: PanelView): DetailsSizing;
+//# sourceMappingURL=details-sizing.d.ts.map

package/layouts/page-layout/details-region/details-sizing.js

@@ -0,0 +1,89 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var details_sizing_exports = {};
+__export(details_sizing_exports, {
+  PANEL_VIEW: () => PANEL_VIEW,
+  computeDetailsSizing: () => computeDetailsSizing
+});
+module.exports = __toCommonJS(details_sizing_exports);
+var import_panel_sizing = require("../../split-layout/panel-sizing.js");
+const PANEL_VIEW = {
+  split: {
+    panelVariant: "split",
+    handleVariant: "split",
+    host: "panel",
+    visible: true,
+    role: void 0,
+    reservesContent: true
+  },
+  overlay: {
+    panelVariant: "overlay",
+    handleVariant: "overlay",
+    host: "panel",
+    visible: true,
+    role: "dialog",
+    reservesContent: false
+  },
+  collapsed: {
+    panelVariant: "hidden",
+    handleVariant: null,
+    host: "panel",
+    visible: false,
+    role: void 0,
+    reservesContent: true
+  },
+  drawer: {
+    panelVariant: "hidden",
+    handleVariant: null,
+    host: "drawer",
+    visible: false,
+    role: void 0,
+    reservesContent: true
+  }
+};
+function computeDetailsSizing(details, contentMin, view) {
+  const isResizable = details !== null && view.handleVariant !== null && details.config.resizable;
+  const containerWidth = details?.state.containerWidth ?? 0;
+  const constraints = {
+    minWidth: details?.config.minWidth ?? 0,
+    maxWidth: details?.config.maxWidth ?? Infinity,
+    reservedMin: view.reservesContent ? contentMin : 0,
+    resizable: isResizable
+  };
+  const sizing = (0, import_panel_sizing.resolvePanelSizing)(
+    {
+      controlledWidth: details?.config.width,
+      draggedWidth: details?.state.intendedWidth,
+      defaultWidth: details?.config.defaultWidth
+    },
+    containerWidth,
+    constraints
+  );
+  const isVisible = details !== null && view.visible;
+  return {
+    panelWidthCss: isVisible ? sizing.panel.widthCss : "0px",
+    isResizable,
+    bounds: {
+      value: sizing.panel.width,
+      min: sizing.panel.minPx,
+      max: sizing.panel.maxPx
+    },
+    constraints,
+    panelWidthPx: sizing.panel.width
+  };
+}

package/layouts/page-layout/{details-layout → details-region}/slots.d.ts

@@ -1,9 +1,9 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 import { type DetailsControlBarProps } from './DetailsControlBar.js';
-import type { LayoutMode } from './DetailsLayoutContext.js';
-import type { ResizablePanelProps, ContentProps as SplitLayoutContentProps } from '../../split-layout/slots.js';
+import type { LayoutMode } from './DetailsRegionContext.js';
+import type { ResizablePanelProps } from '../../split-layout/slots.js';
 import type { PanelWidth } from '../../split-layout/width-utils.js';
-import type { CollapsiblePanel } from '../shared/collapsible.js';
+import type { CollapsiblePanel } from '../shared/panel-state/collapsible.js';
 export type { DetailsControlBarProps };
 /** @public */
 export interface DetailsProps extends Omit<ResizablePanelProps, 'width'>, CollapsiblePanel {
@@ -47,14 +47,14 @@ export interface DetailsProps extends Omit<ResizablePanelProps, 'width'>, Collap
     /** Fired when the layout mode changes or should change. */
     onLayoutChange?: (value: LayoutMode) => void;
     /**
-     * Container width in pixels below which the details panel renders as an overlay instead of a split layout.
+     * Container width in pixels below which the details panel renders as a
+     * drawer. Unlike the sidebar, the details panel never collapses itself here:
+     * the drawer stays open until it is dismissed.
      * @defaultValue 600
      */
     breakpoint?: number;
 }
 /** @internal */
-export type ContentProps = SplitLayoutContentProps;
-/** @internal */
 export interface ExtractedDetailsSlot {
     children?: ReactNode;
     config: {
@@ -72,15 +72,7 @@ export interface ExtractedDetailsSlot {
         breakpoint: number;
         onResize?: (value: number) => void;
         width?: PanelWidth;
-    };
-    domProps: ComponentPropsWithoutRef<'div'>;
-    ref?: Ref<HTMLElement>;
-}
-/** @internal */
-export interface ExtractedContentSlot {
-    children?: ReactNode;
-    config: {
-        minWidth: PanelWidth;
+        label?: string;
     };
     domProps: ComponentPropsWithoutRef<'div'>;
     ref?: Ref<HTMLElement>;

package/layouts/page-layout/shared/panel-label.d.ts

@@ -0,0 +1,10 @@
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
+/**
+ * Resolves the accessible name of a panel surface: a consumer `aria-label`
+ * wins over the built-in one, and an `aria-labelledby` reference suppresses
+ * the built-in label so the surface never carries both.
+ *
+ * @internal
+ */
+export declare function resolvePanelLabel(domProps: AriaLabelingProps | undefined, defaultLabel: string): string | undefined;
+//# sourceMappingURL=panel-label.d.ts.map

package/layouts/page-layout/shared/panel-label.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var panel_label_exports = {};
+__export(panel_label_exports, {
+  resolvePanelLabel: () => resolvePanelLabel
+});
+module.exports = __toCommonJS(panel_label_exports);
+function resolvePanelLabel(domProps, defaultLabel) {
+  if (domProps?.["aria-label"] !== void 0) {
+    return domProps["aria-label"];
+  }
+  return domProps?.["aria-labelledby"] ? void 0 : defaultLabel;
+}