@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/chips/ChipGroup.js

@@ -0,0 +1,98 @@
+import { useControlledState } from "../hooks/useControlledState.js";
+import Chip, { ChipSize } from "./Chip.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { Children, forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/chips/ChipGroup.tsx
+/**
+* Lays out a set of related chips (tags on a source, roles on a member, filters on a view) as one
+* wrapping row with a fixed gap, and names them as a group. With `max`, only the first `max`
+* chips show and a `+N` chip stands for the rest; pressing it shows every chip in place and turns
+* it into "Show less" (the Article V disclosure trio `isOpen` / `defaultIsOpen` / `onOpenChange`).
+*
+* The children render as they are, with no wrapper, so each chip's root is a direct child of the
+* group. The group holds no value or selection, pushes no props into its children, and does not
+* measure: the cut-off is a count. Not a single choice (`ToggleInput`), not a tag input
+* (`TagInput`).
+*/
+/** Canonical rungs; the member names the rung of the chips in the group. */
+var ChipGroupSize = /* @__PURE__ */ function(ChipGroupSize) {
+	/** `ChipSize.X_SMALL` toggle (16px), 4px gap. */
+	ChipGroupSize["X_SMALL"] = "X_SMALL";
+	/** `ChipSize.SMALL` toggle (20px), 4px gap. */
+	ChipGroupSize["SMALL"] = "SMALL";
+	/** `ChipSize.MEDIUM` toggle (24px), 4px gap. The default. */
+	ChipGroupSize["MEDIUM"] = "MEDIUM";
+	/** `ChipSize.LARGE` toggle (28px), 8px gap. */
+	ChipGroupSize["LARGE"] = "LARGE";
+	/** `ChipSize.X_LARGE` toggle (32px), 8px gap. */
+	ChipGroupSize["X_LARGE"] = "X_LARGE";
+	return ChipGroupSize;
+}({});
+/** One wrapping row; the chips (and the toggle) are its direct children. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ChipGroup-r1r6i8cm",
+	propsAsIs: false
+});
+/** Row and column gap per rung: 4px (1.x `gap={4}` between chips), 8px for the two tallest. */
+var CHIP_GROUP_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-ChipGroup-X_SMALL-x1p2tp2a",
+	["SMALL"]: "gx-ChipGroup-SMALL-s1mja2pr",
+	["MEDIUM"]: "gx-ChipGroup-MEDIUM-m1u9ku0",
+	["LARGE"]: "gx-ChipGroup-LARGE-l1lpfefp",
+	["X_LARGE"]: "gx-ChipGroup-X_LARGE-xffqurq"
+};
+/** Identity: the toggle chip's rung. */
+var CHIP_GROUP_SIZE_TO_CHIP_SIZE_MAP = {
+	["X_SMALL"]: ChipSize.X_SMALL,
+	["SMALL"]: ChipSize.SMALL,
+	["MEDIUM"]: ChipSize.MEDIUM,
+	["LARGE"]: ChipSize.LARGE,
+	["X_LARGE"]: ChipSize.X_LARGE
+};
+/** Stable key of the toggle chip, so it stays mounted (and focused) when the hidden chips appear. */
+var TOGGLE_KEY = "gx-chip-group-toggle";
+/** A wrapping row of related chips, with an optional `+N` / "Show less" toggle past `max`. */
+var ChipGroup = forwardRef(function ChipGroup({ children, max, size = "MEDIUM", isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const rootId = id ?? generatedId;
+	const [isOpen, setIsOpen] = useControlledState({
+		value: isOpenProp,
+		defaultValue: defaultIsOpen,
+		onChange: onOpenChange
+	});
+	const items = Children.toArray(children);
+	const limit = max === void 0 ? Number.POSITIVE_INFINITY : Math.max(0, Math.floor(max));
+	const isOverflowing = items.length > limit;
+	const hiddenCount = isOverflowing ? items.length - limit : 0;
+	const visibleItems = isOverflowing && !isOpen ? items.slice(0, limit) : items;
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id: rootId,
+		role: "group",
+		"aria-label": ariaLabel ?? rest["aria-label"],
+		className: cx(CHIP_GROUP_SIZE_TO_CSS_MAP[size], className),
+		style,
+		children: [visibleItems, isOverflowing && (isOpen ? /* @__PURE__ */ jsx(Chip, {
+			size: CHIP_GROUP_SIZE_TO_CHIP_SIZE_MAP[size],
+			label: "Show less",
+			onClick: () => setIsOpen(false),
+			"aria-expanded": true,
+			"aria-controls": rootId
+		}, TOGGLE_KEY) : /* @__PURE__ */ jsx(Chip, {
+			size: CHIP_GROUP_SIZE_TO_CHIP_SIZE_MAP[size],
+			label: `+${hiddenCount}`,
+			ariaLabel: `+${hiddenCount} more`,
+			onClick: () => setIsOpen(true),
+			"aria-expanded": false,
+			"aria-controls": rootId
+		}, TOGGLE_KEY))]
+	});
+});
+ChipGroup.displayName = "ChipGroup";
+//#endregion
+export { ChipGroupSize, ChipGroup as default };

package/dist/drawer/Drawer.d.ts

@@ -1,20 +1,86 @@
-import { type PropsWithChildren } from "react";
-export interface DrawerProps {
-    /** Controlled visibility. The drawer has no open state of its own. */
-    open: boolean;
-    /** Called on Escape, and on backdrop click when `closeOnClickOutside` is set. */
-    onClose: () => void;
-    /** Panel width. A number is px. @default "60%" */
-    width?: number | string;
-    /** Close when the backdrop is clicked. @default false */
-    closeOnClickOutside?: boolean;
-}
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { Side } from "../theme/enums.js";
 /**
- * A panel that slides in from the right over a dimmed backdrop. Fully
- * controlled — you own `open`.
- *
- * Stacking and Escape handling come from `OverlayProvider`, so only the topmost
- * overlay closes on Escape. Wrap your app in that provider.
+ * Panel width (`LEFT` / `RIGHT`) or height (`TOP` / `BOTTOM`). Canonical rung names
+ * (Constitution V); the values are lengths, not control heights.
  */
-declare const Drawer: ({ open, onClose, width, closeOnClickOutside, children, }: PropsWithChildren<DrawerProps>) => import("react").ReactPortal;
+export declare enum DrawerSize {
+    /** 400px wide / 240px tall. */
+    SMALL = "SMALL",
+    /** 560px wide / 360px tall. The default. */
+    MEDIUM = "MEDIUM",
+    /** 720px wide / 480px tall. */
+    LARGE = "LARGE",
+    /** 960px wide / 640px tall. */
+    X_LARGE = "X_LARGE"
+}
+/** Every Drawer prop except the name pair (`header` / `ariaLabel`). */
+interface DrawerBaseProps extends AriaAttributes {
+    /** The body. It scrolls when it is taller than the panel. A string or number renders as `Text`. */
+    children?: ReactNode;
+    /** The actions row, end-aligned with an 8px gap: what finishes the drawer's task (Cancel, then the `PRIMARY` Save). */
+    footer?: ReactNode;
+    /** Controls in the title row, before the close button, for the thing the drawer shows: one or two icon-only `TERTIARY` `SMALL` buttons and a ⋯ `Menu` for the rest. Not for Save or Cancel (those are `footer`). */
+    actions?: ReactNode;
+    /**
+     * The edge the drawer sits on and slides from.
+     * @default Side.RIGHT
+     */
+    side?: Side;
+    /**
+     * Width for `LEFT` / `RIGHT` (400 / 560 / 720 / 960px), height for `TOP` / `BOTTOM` (240 / 360 / 480 / 640px). The starting size when `isResizable`.
+     * @default DrawerSize.MEDIUM
+     */
+    size?: DrawerSize;
+    /**
+     * Show a `ResizeHandle` on the inner edge so the user can drag or key the size. The size is kept while the Drawer stays mounted.
+     * @default false
+     */
+    isResizable?: boolean;
+    /**
+     * Modal: a portal over a dimmed, locked page, with a focus trap. `false`: an in-flow panel that pushes the content beside it aside, with no backdrop and no trap.
+     * @default true
+     */
+    isModal?: boolean;
+    /**
+     * Escape, a backdrop click and the close button close the drawer (with `isModal={false}`, only the close button). When `false` there is no close button, and only the app can close it.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /** Controlled open state. When set, Drawer calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with `false` on Escape, a backdrop click and the close button. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** DOM id on the panel; the resize handle's `aria-controls` points at it. @default a `useId()` value */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the panel. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the panel. */
+    className?: string;
+    /** Inline style on the panel; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A title row names the drawer. */
+interface DrawerTitledProps {
+    /** The title row. A string renders as an `h2` `Text` and names the drawer; a node renders as it is. Required unless `ariaLabel` is set. */
+    header: ReactNode;
+    /** Accessible name. Required by type when there is no `header`. */
+    ariaLabel?: string;
+}
+/** No title row: the accessible name is required. */
+interface DrawerUntitledProps {
+    /** The title row. A string renders as an `h2` `Text` and names the drawer; a node renders as it is. Required unless `ariaLabel` is set. */
+    header?: undefined;
+    /** Accessible name. Required by type when there is no `header`. */
+    ariaLabel: string;
+}
+/** Drawer props. Without a `header`, `ariaLabel` is required by the type. */
+export type DrawerProps = DrawerBaseProps & (DrawerTitledProps | DrawerUntitledProps);
+/** A panel that slides in from an edge: title row, scrolling body, actions row. */
+declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/dist/drawer/Drawer.js

@@ -1,77 +1,411 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import { OverlayLayer } from "../overlay/constants.js";
-import useOverlay from "../overlay/useOverlay.js";
-import { useDismiss } from "../hooks/useDismiss.js";
+import FocusScope, { FocusScopeAutoFocus } from "../a11y/FocusScope.js";
+import { Orientation, Side } from "../theme/enums.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
+import { DURATION, SPACE } from "../theme/tokens/scales.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Portal from "../layout/Portal.js";
+import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+import { OverlayNode } from "../overlay/OverlayProvider.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { isDevelopment, useDevWarning } from "../inputs/internal/devWarn.js";
+import ResizeHandle from "../layout/ResizeHandle.js";
+import Fade from "../transform/Fade.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { XIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "framer-motion";
 //#region src/drawer/Drawer.tsx
-var _exp = () => ({ isOpen }) => isOpen ? 1 : 0;
-var _exp2 = () => ({ isOpen }) => isOpen ? "visible" : "hidden";
-var StyledDrawerWrapper = /*#__PURE__*/ styled("div")({
-	name: "StyledDrawerWrapper",
-	class: "smaltnf",
-	propsAsIs: false,
-	vars: {
-		"smaltnf-0": [_exp()],
-		"smaltnf-1": [_exp2()]
-	}
+/**
+* The panel that slides in from an edge of the screen and keeps the page visible beside it (run
+* details next to a list of runs, a source's settings, a log tail). It draws the panel and its
+* three regions (a title row, a scrolling body and an actions row), sits on any `side`, takes a
+* `size`, and with `isResizable` the user drags or keys its inner edge to resize it.
+*
+* Actions split by what they do. `actions` in the title row, before the close button, act on the
+* thing the drawer shows: one or two icon-only `TERTIARY` `SMALL` buttons (open in full page, copy
+* link) and a ⋯ `Menu` for the rest (rename, duplicate, delete). `footer` finishes the drawer's
+* task (Cancel, then the `PRIMARY` Save); a read-only detail drawer usually has no footer.
+*
+* By default it is modal, like `Modal`: a portal over a dimmed, locked page with a focus trap,
+* stacked through the overlay stack, closing on Escape or a backdrop click. With
+* `isModal={false}` it is a docked panel: it renders in place in the layout and pushes the content
+* beside it aside, with no backdrop, no trap and no Escape.
+*
+* SSR: a modal drawer renders nothing on the server; a push drawer renders nothing while closed
+* and its panel at rest while open. The scroll lock is CSS keyed on the backdrop; `window` is
+* read only in an effect while open.
+*/
+/**
+* Panel width (`LEFT` / `RIGHT`) or height (`TOP` / `BOTTOM`). Canonical rung names
+* (Constitution V); the values are lengths, not control heights.
+*/
+var DrawerSize = /* @__PURE__ */ function(DrawerSize) {
+	/** 400px wide / 240px tall. */
+	DrawerSize["SMALL"] = "SMALL";
+	/** 560px wide / 360px tall. The default. */
+	DrawerSize["MEDIUM"] = "MEDIUM";
+	/** 720px wide / 480px tall. */
+	DrawerSize["LARGE"] = "LARGE";
+	/** 960px wide / 640px tall. */
+	DrawerSize["X_LARGE"] = "X_LARGE";
+	return DrawerSize;
+}({});
+/** The close button's accessible name (fixed English, as Modal's). */
+var CLOSE_LABEL = "Close";
+/** The resize handle's accessible name. */
+var RESIZE_LABEL = "Resize drawer";
+/** Width per size for `LEFT` / `RIGHT` (a logic map: the resize handle needs the number). */
+var DRAWER_SIZE_TO_WIDTH_PX_MAP = {
+	["SMALL"]: 400,
+	["MEDIUM"]: 560,
+	["LARGE"]: 720,
+	["X_LARGE"]: 960
+};
+/** Height per size for `TOP` / `BOTTOM`. */
+var DRAWER_SIZE_TO_HEIGHT_PX_MAP = {
+	["SMALL"]: 240,
+	["MEDIUM"]: 360,
+	["LARGE"]: 480,
+	["X_LARGE"]: 640
+};
+/** Whether the side's length is a width (`LEFT` / `RIGHT`) rather than a height. */
+var DRAWER_SIDE_TO_IS_HORIZONTAL_MAP = {
+	[Side.LEFT]: true,
+	[Side.RIGHT]: true,
+	[Side.TOP]: false,
+	[Side.BOTTOM]: false
+};
+/** The handle's axis: a vertical bar for side drawers, a horizontal one for top / bottom. */
+var DRAWER_SIDE_TO_HANDLE_ORIENTATION_MAP = {
+	[Side.LEFT]: Orientation.VERTICAL,
+	[Side.RIGHT]: Orientation.VERTICAL,
+	[Side.TOP]: Orientation.HORIZONTAL,
+	[Side.BOTTOM]: Orientation.HORIZONTAL
+};
+/** On the right and bottom the panel is after its handle, so moving toward the start grows it. */
+var DRAWER_SIDE_TO_IS_HANDLE_REVERSED_MAP = {
+	[Side.LEFT]: false,
+	[Side.RIGHT]: true,
+	[Side.TOP]: false,
+	[Side.BOTTOM]: true
+};
+/** Smallest size the handle allows. */
+var DRAWER_MIN_SIZE_PX = 240;
+/** The strip of page the drawer always leaves: `space[48]`, matching the CSS cap. */
+var DRAWER_VIEWPORT_GAP_PX = Number.parseFloat(SPACE[48]);
+/** How far the modal panel travels on enter and exit: `space[24]`. */
+var DRAWER_OFFSET_PX = Number.parseFloat(SPACE[24]);
+/** The enter / exit offset toward each side. */
+var DRAWER_SIDE_TO_OFFSET_MAP = {
+	[Side.RIGHT]: { x: DRAWER_OFFSET_PX },
+	[Side.LEFT]: { x: -DRAWER_OFFSET_PX },
+	[Side.TOP]: { y: -DRAWER_OFFSET_PX },
+	[Side.BOTTOM]: { y: DRAWER_OFFSET_PX }
+};
+/** Push mode: the root's collapsed length on its axis (enter start, exit end). */
+var DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP = {
+	[Side.LEFT]: { width: 0 },
+	[Side.RIGHT]: { width: 0 },
+	[Side.TOP]: { height: 0 },
+	[Side.BOTTOM]: { height: 0 }
+};
+/** Push mode: the root's open length, measured by framer from the panel. */
+var DRAWER_SIDE_TO_PUSH_OPEN_MAP = {
+	[Side.LEFT]: { width: "auto" },
+	[Side.RIGHT]: { width: "auto" },
+	[Side.TOP]: { height: "auto" },
+	[Side.BOTTOM]: { height: "auto" }
+};
+var DRAWER_TRANSITION = {
+	duration: Number.parseFloat(DURATION.base) / 1e3,
+	ease: "easeOut"
+};
+/** Under reduced motion the state snaps. */
+var DRAWER_REDUCED_TRANSITION = { duration: 0 };
+/** Open at rest: framer writes `transform: none` at x = y = 0. */
+var DRAWER_OPEN = {
+	opacity: 1,
+	x: 0,
+	y: 0,
+	pointerEvents: "auto"
+};
+/**
+* Scroll lock: while any drawer backdrop is mounted (open or exiting) the page does not scroll.
+* Keyed on Drawer's own backdrop, so a drawer and a modal open together keep the page locked
+* until both are gone.
+*/
+var Backdrop = /*#__PURE__*/ styled("div")({
+	name: "Backdrop",
+	class: "gx-Drawer-Backdrop-bmaltnf",
+	propsAsIs: false
 });
-var DrawerWrapperContent = /*#__PURE__*/ styled("div")({
-	name: "DrawerWrapperContent",
-	class: "d4wvefv",
+/** The backdrop's Fade root: positioned just under the panel. Sets no opacity or visibility. */
+var BACKDROP_FRAME_CSS = "gx-Drawer-BACKDROP_FRAME_CSS-b19reibl";
+/** The modal panel's `motion.div`: fixed at its side, sized by `--gx-drawer-size`. */
+var FRAME_CSS = "gx-Drawer-FRAME_CSS-f410s14";
+/** Modal mode: the 8px inset on the drawer's side, the length on its axis, capped. */
+var DRAWER_SIDE_TO_CSS_MAP = {
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s1ucw1ej",
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-s1gpgm7s",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s78031y",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-sr5uo3u"
+};
+/** Push mode: the in-flow clipping root whose length animates. */
+var PUSH_ROOT_CSS = "gx-Drawer-PUSH_ROOT_CSS-pxznmax";
+var DRAWER_PUSH_SIDE_TO_CSS_MAP = {
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-skwwkog",
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s1p1mte",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s3til6b",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s28htx1"
+};
+var FOCUS_SCOPE_CSS = "gx-Drawer-FOCUS_SCOPE_CSS-f7ohikf";
+/** The panel (Modal's declarations); it fills its frame. */
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-Drawer-Panel-p1putub7",
+	propsAsIs: false
+});
+/** Push mode: the panel keeps its full length inside the clipping root, capped like the frame. */
+var DRAWER_PUSH_PANEL_SIDE_TO_CSS_MAP = {
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-s127o7of",
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-su7a1is",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s1smajqi",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s3tnyde"
+};
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-Drawer-Header-h45j7yl",
 	propsAsIs: false
 });
-var DrawerContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "DrawerContentWrapper",
-	class: "d19reibl",
+/** While the close button shows: a long title never runs under it. */
+var HAS_CLOSE_CSS = "gx-Drawer-HAS_CLOSE_CSS-hov58xm";
+/** With `actions`, the close button joins them: the same 4px apart, one group at the row's end. */
+var HAS_CLOSE_WITH_ACTIONS_CSS = "gx-Drawer-HAS_CLOSE_WITH_ACTIONS_CSS-hckczr5";
+/** A node `header`: takes the row and may shrink. */
+var HeaderNode = /*#__PURE__*/ styled("div")({
+	name: "HeaderNode",
+	class: "gx-Drawer-HeaderNode-h1v64nx4",
+	propsAsIs: false
+});
+/** A string `header` takes the row too, so `actions` sit at its end. */
+var HEADER_TITLE_CSS = "gx-Drawer-HEADER_TITLE_CSS-ht6k1c3";
+/** `actions`: at the end of the title row, 4px apart and 4px before the close button. */
+var HeaderActions = /*#__PURE__*/ styled("div")({
+	name: "HeaderActions",
+	class: "gx-Drawer-HeaderActions-h15lcrsa",
+	propsAsIs: false
+});
+/** More header controls than this crowd the title: the rest belong in the ⋯ menu. */
+var DRAWER_MAX_HEADER_ACTIONS = 3;
+var Body = /*#__PURE__*/ styled("div")({
+	name: "Body",
+	class: "gx-Drawer-Body-b1ob4oh8",
+	propsAsIs: false
+});
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Drawer-Footer-f14nwavk",
+	propsAsIs: false
+});
+var CloseSlot = /*#__PURE__*/ styled("span")({
+	name: "CloseSlot",
+	class: "gx-Drawer-CloseSlot-c1ifjfam",
 	propsAsIs: false
 });
-var _exp3 = () => ({ $width }) => getCssSizeValue($width, "60%");
-var _exp4 = () => ({ theme }) => theme.color.background.base;
-var _exp5 = () => ({ theme }) => theme.color.border.primary;
-var DrawerWrapperContentBody = withTheme(/*#__PURE__*/ styled("div")({
-	name: "DrawerWrapperContentBody",
-	class: "d410s14",
-	propsAsIs: false,
-	vars: {
-		"d410s14-0": [_exp3()],
-		"d410s14-1": [_exp4()],
-		"d410s14-2": [_exp5()]
-	}
-}));
 /**
-* A panel that slides in from the right over a dimmed backdrop. Fully
-* controlled — you own `open`.
-*
-* Stacking and Escape handling come from `OverlayProvider`, so only the topmost
-* overlay closes on Escape. Wrap your app in that provider.
+* Places the resize handle over the panel's inner edge, inside the panel's box. The doubled class
+* outranks ResizeHandle's own `position: relative` whatever order the two modules' rules land in
+* the stylesheet.
 */
-var Drawer = ({ open, onClose, width, closeOnClickOutside = false, children }) => {
-	const { zIndex, isTopmost } = useOverlay(onClose, open, { layer: OverlayLayer.DRAWER });
-	const handleContentClick = useCallback((e) => {
-		e.stopPropagation();
-	}, []);
-	const dismissRef = useDismiss({
-		onDismiss: onClose,
-		enabled: open && isTopmost,
-		enableClickOutside: closeOnClickOutside && isTopmost
-	});
-	return createPortal(open && /* @__PURE__ */ jsx(StyledDrawerWrapper, {
-		isOpen: open,
-		role: "dialog",
-		"aria-modal": "true",
-		style: { zIndex },
-		children: /* @__PURE__ */ jsx(DrawerWrapperContent, { children: /* @__PURE__ */ jsx(DrawerContentWrapper, { children: /* @__PURE__ */ jsx(DrawerWrapperContentBody, {
-			ref: dismissRef,
-			$width: width,
-			onClick: handleContentClick,
-			children
-		}) }) })
-	}), document.body);
+var DRAWER_SIDE_TO_HANDLE_CSS_MAP = {
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-sv6fh8e",
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-s1c8bwjq",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s1vq4aq7",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-svqv727"
 };
+/** The viewport length on the side's axis, less the 48px strip. */
+function readMaxSize(side) {
+	return (DRAWER_SIDE_TO_IS_HORIZONTAL_MAP[side] ? window.innerWidth : window.innerHeight) - DRAWER_VIEWPORT_GAP_PX;
+}
+/** A panel that slides in from an edge: title row, scrolling body, actions row. */
+var Drawer = forwardRef(function Drawer({ children, header, footer, actions, side = Side.RIGHT, size = "MEDIUM", isResizable = false, isModal = true, isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const titleId = useId();
+	const panelId = id ?? generatedId;
+	const transition = usePrefersReducedMotion() ? DRAWER_REDUCED_TRANSITION : DRAWER_TRANSITION;
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const close = () => setOpen(false);
+	const { zIndex, isTopmost, overlayId } = useOverlay({
+		isOpen: isOpen && isModal,
+		layer: OverlayLayer.DRAWER,
+		onEscape: isDismissable ? close : void 0
+	});
+	const [resizedSize, setResizedSize] = useState(null);
+	const sizeKey = `${size}:${side}`;
+	const [appliedSizeKey, setAppliedSizeKey] = useState(sizeKey);
+	if (appliedSizeKey !== sizeKey) {
+		setAppliedSizeKey(sizeKey);
+		setResizedSize(null);
+	}
+	const isHorizontal = DRAWER_SIDE_TO_IS_HORIZONTAL_MAP[side];
+	const currentSize = resizedSize ?? (isHorizontal ? DRAWER_SIZE_TO_WIDTH_PX_MAP[size] : DRAWER_SIZE_TO_HEIGHT_PX_MAP[size]);
+	const [maxSize, setMaxSize] = useState(Number.POSITIVE_INFINITY);
+	useEffect(() => {
+		if (!isOpen) return;
+		const update = () => setMaxSize(readMaxSize(side));
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, [isOpen, side]);
+	const [hasOpened, setHasOpened] = useState(isOpen);
+	if (isOpen && !hasOpened) setHasOpened(true);
+	const [isOpenOnFirstRender] = useState(isOpen);
+	const shouldAnimateOnMount = !isOpenOnFirstRender;
+	/** Whether the current press started on the backdrop while this drawer was topmost. */
+	const isBackdropPressRef = useRef(false);
+	const handleBackdropPointerDown = (event) => {
+		isBackdropPressRef.current = event.target === event.currentTarget && isTopmost;
+	};
+	const handleBackdropClick = (_event) => {
+		const isBackdropPress = isBackdropPressRef.current;
+		isBackdropPressRef.current = false;
+		if (isBackdropPress && isDismissable) close();
+	};
+	const hasHeaderRow = header !== void 0 || isDismissable || actions !== void 0;
+	const actionsRef = useRef(null);
+	const [actionCount, setActionCount] = useState(0);
+	useEffect(() => {
+		if (!isOpen || actions === void 0 || !isDevelopment()) return;
+		setActionCount(actionsRef.current?.querySelectorAll("button, a[href]").length ?? 0);
+	}, [isOpen, actions]);
+	useDevWarning(actionCount > DRAWER_MAX_HEADER_ACTIONS, "[@galaxy-io/dls] Drawer has more than three header `actions`. Keep one or two icon buttons and a ⋯ Menu, and move the rest into the menu.");
+	const labelling = ariaLabel !== void 0 ? { "aria-label": ariaLabel } : rest["aria-labelledby"] !== void 0 || header === void 0 ? {} : { "aria-labelledby": titleId };
+	const sizeStyle = { "--gx-drawer-size": `${currentSize}px` };
+	const regions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hasHeaderRow && /* @__PURE__ */ jsxs(Header, {
+			className: cx(isDismissable && (actions === void 0 ? HAS_CLOSE_CSS : HAS_CLOSE_WITH_ACTIONS_CSS)),
+			children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+				as: "h2",
+				size: TextSize.BODY_LG,
+				weight: TextWeight.MEDIUM,
+				id: titleId,
+				className: HEADER_TITLE_CSS,
+				children: header
+			}) : header !== void 0 ? /* @__PURE__ */ jsx(HeaderNode, {
+				id: titleId,
+				children: header
+			}) : /* @__PURE__ */ jsx(HeaderNode, {}), actions !== void 0 && /* @__PURE__ */ jsx(HeaderActions, {
+				ref: actionsRef,
+				children: actions
+			})]
+		}),
+		/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
+		footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),
+		isResizable && /* @__PURE__ */ jsx(ResizeHandle, {
+			orientation: DRAWER_SIDE_TO_HANDLE_ORIENTATION_MAP[side],
+			isReversed: DRAWER_SIDE_TO_IS_HANDLE_REVERSED_MAP[side],
+			value: currentSize,
+			onChange: setResizedSize,
+			min: DRAWER_MIN_SIZE_PX,
+			max: maxSize,
+			ariaLabel: RESIZE_LABEL,
+			"aria-controls": panelId,
+			className: DRAWER_SIDE_TO_HANDLE_CSS_MAP[side]
+		}),
+		isDismissable && /* @__PURE__ */ jsx(CloseSlot, { children: /* @__PURE__ */ jsx(Button, {
+			variant: ButtonVariant.TERTIARY,
+			size: ButtonSize.SMALL,
+			icon: XIcon,
+			ariaLabel: CLOSE_LABEL,
+			onClick: close
+		}) })
+	] });
+	if (!isModal) return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			initial: DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side],
+			animate: DRAWER_SIDE_TO_PUSH_OPEN_MAP[side],
+			exit: DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side],
+			transition,
+			className: cx(PUSH_ROOT_CSS, DRAWER_PUSH_SIDE_TO_CSS_MAP[side]),
+			children: /* @__PURE__ */ jsx(FocusScope, {
+				isTrapped: false,
+				autoFocus: FocusScopeAutoFocus.NONE,
+				className: FOCUS_SCOPE_CSS,
+				children: /* @__PURE__ */ jsx(Panel, {
+					...rest,
+					...labelling,
+					ref,
+					id: panelId,
+					role: "region",
+					className: cx(DRAWER_PUSH_PANEL_SIDE_TO_CSS_MAP[side], className),
+					style: {
+						...sizeStyle,
+						...style
+					},
+					children: regions
+				})
+			})
+		}, "drawer-push")
+	});
+	if (!hasOpened) return null;
+	const closed = {
+		opacity: 0,
+		...DRAWER_SIDE_TO_OFFSET_MAP[side],
+		pointerEvents: "none"
+	};
+	const frameStyle = {
+		"--gx-drawer-z": zIndex,
+		"--gx-drawer-size": `${currentSize}px`
+	};
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(OverlayNode, {
+		overlayId,
+		children: [/* @__PURE__ */ jsx(Fade, {
+			isOpen,
+			shouldAnimateOnMount,
+			className: BACKDROP_FRAME_CSS,
+			style: { "--gx-drawer-z": zIndex },
+			children: /* @__PURE__ */ jsx(Backdrop, {
+				"aria-hidden": true,
+				onPointerDown: handleBackdropPointerDown,
+				onClick: handleBackdropClick
+			})
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: shouldAnimateOnMount,
+			children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+				initial: closed,
+				animate: DRAWER_OPEN,
+				exit: closed,
+				transition,
+				className: cx(FRAME_CSS, DRAWER_SIDE_TO_CSS_MAP[side]),
+				style: frameStyle,
+				children: /* @__PURE__ */ jsx(FocusScope, {
+					autoFocus: FocusScopeAutoFocus.FIRST,
+					className: FOCUS_SCOPE_CSS,
+					children: /* @__PURE__ */ jsx(Panel, {
+						...rest,
+						...labelling,
+						ref,
+						id: panelId,
+						role: "dialog",
+						"aria-modal": "true",
+						className,
+						style,
+						children: regions
+					})
+				})
+			}, "drawer-frame")
+		})]
+	}) });
+});
+Drawer.displayName = "Drawer";
 //#endregion
-export { Drawer as default };
+export { DrawerSize, Drawer as default };