@galaxy-io/dls 2.0.2 → 2.2.0

package/dist/modal/Modal.d.ts

@@ -1,3 +1,4 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Panel width. Canonical rung names (Constitution V); the values are widths, not control heights. */
 export declare enum ModalSize {
@@ -46,8 +47,12 @@ interface ModalBaseProps extends AriaAttributes {
 }
 /** A title row names the dialog. */
 interface ModalTitledProps {
-    /** The title row. A string renders as an `h2` `Text` and names the dialog; a node renders as it is. Required unless `ariaLabel` is set. */
+    /** The title row. A string renders as an `h2` `Text` and names the dialog; a node renders as it is, in a first line one control tall. Required unless `ariaLabel` is set. */
     header: ReactNode;
+    /** A secondary line under the title. Describes the dialog. */
+    subheader?: string | undefined;
+    /** A leading icon before the title. Pass the component, not an element. */
+    icon?: PhosphorIcon | undefined;
     /** Accessible name of the dialog. Required by type when there is no `header`. */
     ariaLabel?: string;
 }
@@ -55,6 +60,10 @@ interface ModalTitledProps {
 interface ModalUntitledProps {
     /** The title row. A string renders as an `h2` `Text` and names the dialog; a node renders as it is. Required unless `ariaLabel` is set. */
     header?: undefined;
+    /** A secondary line under the title. Needs `header`. */
+    subheader?: undefined;
+    /** A leading icon before the title. Needs `header`. */
+    icon?: undefined;
     /** Accessible name of the dialog. Required by type when there is no `header`. */
     ariaLabel: string;
 }

package/dist/modal/Modal.js

@@ -1,11 +1,12 @@
 import FocusScope, { FocusScopeAutoFocus } from "../a11y/FocusScope.js";
-import Text, { TextSize, TextWeight } from "../text/Text.js";
+import Text from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Portal from "../layout/Portal.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import { OverlayScaleFade } from "../overlay/internal/OverlayScaleFade.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
-import ScaleFade from "../transform/ScaleFade.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import OverlayTitleRow from "../overlay/internal/OverlayTitleRow.js";
 import Fade from "../transform/Fade.js";
 /* empty css                */
 import { styled } from "@linaria/react";
@@ -19,7 +20,8 @@ import { XIcon } from "@phosphor-icons/react";
 * or dismiss before going back to the page. Modal draws the panel and its three regions (a title
 * row, a scrolling body and an actions row), dims and locks the page behind it, traps focus inside
 * and restores it on close, stacks above other overlays through the overlay stack, and animates in
-* and out (`Fade` backdrop, `ScaleFade` panel). It has no trigger: the app opens it.
+* and out (`Fade` backdrop, a scale-fade panel whose content leaves first). It has no trigger: the
+* app opens it.
 *
 * A short yes/no question is `ConfirmDialog`; a panel beside the page is `Drawer`; an anchored
 * panel is `Popover`.
@@ -59,7 +61,7 @@ var Positioner = /*#__PURE__*/ styled("div")({
 	class: "gx-Modal-Positioner-ptpk8hn",
 	propsAsIs: false
 });
-/** The panel's ScaleFade root: the flex chain that lets a tall body scroll. */
+/** The panel's scale-fade root: the flex chain that lets a tall body scroll. */
 var FRAME_CSS = "gx-Modal-FRAME_CSS-fedvh3d";
 var MODAL_SIZE_TO_CSS_MAP = {
 	["SMALL"]: "gx-Modal-SMALL-s1jpkb4q",
@@ -73,38 +75,26 @@ var Panel = /*#__PURE__*/ styled("div")({
 	class: "gx-Modal-Panel-p14wx16q",
 	propsAsIs: false
 });
-var Header = /*#__PURE__*/ styled("div")({
-	name: "Header",
-	class: "gx-Modal-Header-h1w4b032",
-	propsAsIs: false
-});
-/** While the close button shows: a long title never runs under it. */
-var HAS_CLOSE_CSS = "gx-Modal-HAS_CLOSE_CSS-hbri8ij";
-/** A node `header`: takes the row and may shrink. */
-var HeaderNode = /*#__PURE__*/ styled("div")({
-	name: "HeaderNode",
-	class: "gx-Modal-HeaderNode-hxdonbm",
-	propsAsIs: false
-});
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
-	class: "gx-Modal-Body-b1c1q51w",
+	class: "gx-Modal-Body-b1w4b032",
 	propsAsIs: false
 });
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Modal-Footer-f1aye683",
+	class: "gx-Modal-Footer-fbri8ij",
 	propsAsIs: false
 });
 var CloseSlot = /*#__PURE__*/ styled("span")({
 	name: "CloseSlot",
-	class: "gx-Modal-CloseSlot-c1uq3md9",
+	class: "gx-Modal-CloseSlot-cxdonbm",
 	propsAsIs: false
 });
 /** A blocking dialog over a dimmed page: title row, scrolling body, actions row. */
-var Modal = forwardRef(function Modal({ children, header, footer, size = "MEDIUM", isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+var Modal = forwardRef(function Modal({ children, header, subheader, icon, footer, size = "MEDIUM", isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
 	const generatedId = useId();
 	const titleId = useId();
+	const subheaderId = useId();
 	const { isOpen, setOpen } = useControlledOpenState({
 		isOpen: isOpenProp,
 		defaultIsOpen,
@@ -133,6 +123,7 @@ var Modal = forwardRef(function Modal({ children, header, footer, size = "MEDIUM
 	if (!hasOpened) return null;
 	const hasHeaderRow = header !== void 0 || isDismissable;
 	const labelling = ariaLabel !== void 0 ? { "aria-label": ariaLabel } : rest["aria-labelledby"] !== void 0 || header === void 0 ? {} : { "aria-labelledby": titleId };
+	const describing = subheader !== void 0 && header !== void 0 && rest["aria-describedby"] === void 0 ? { "aria-describedby": subheaderId } : {};
 	const zStyle = { "--gx-modal-z": zIndex };
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(OverlayNode, {
 		overlayId,
@@ -148,7 +139,7 @@ var Modal = forwardRef(function Modal({ children, header, footer, size = "MEDIUM
 			})
 		}), /* @__PURE__ */ jsx(Positioner, {
 			style: zStyle,
-			children: /* @__PURE__ */ jsx(ScaleFade, {
+			children: /* @__PURE__ */ jsx(OverlayScaleFade, {
 				isOpen,
 				shouldAnimateOnMount,
 				className: cx(FRAME_CSS, MODAL_SIZE_TO_CSS_MAP[size]),
@@ -158,6 +149,7 @@ var Modal = forwardRef(function Modal({ children, header, footer, size = "MEDIUM
 					children: /* @__PURE__ */ jsxs(Panel, {
 						...rest,
 						...labelling,
+						...describing,
 						ref,
 						id: id ?? generatedId,
 						role: "dialog",
@@ -165,18 +157,13 @@ var Modal = forwardRef(function Modal({ children, header, footer, size = "MEDIUM
 						className,
 						style,
 						children: [
-							hasHeaderRow && /* @__PURE__ */ jsx(Header, {
-								className: cx(isDismissable && HAS_CLOSE_CSS),
-								children: typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
-									as: "h2",
-									size: TextSize.BODY_LG,
-									weight: TextWeight.MEDIUM,
-									id: titleId,
-									children: header
-								}) : header !== void 0 ? /* @__PURE__ */ jsx(HeaderNode, {
-									id: titleId,
-									children: header
-								}) : null
+							hasHeaderRow && /* @__PURE__ */ jsx(OverlayTitleRow, {
+								header,
+								subheader,
+								icon,
+								titleId,
+								subheaderId,
+								hasClose: isDismissable
 							}),
 							/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
 							footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),

package/dist/navigation/CommandPalette.js

@@ -7,8 +7,8 @@ import Portal from "../layout/Portal.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
 import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
 import Divider from "../layout/Divider.js";
+import { OverlayScaleFade } from "../overlay/internal/OverlayScaleFade.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
-import ScaleFade from "../transform/ScaleFade.js";
 import { useHotkey } from "../hooks/useHotkey.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Fade from "../transform/Fade.js";
@@ -28,10 +28,10 @@ import { cx } from "@linaria/core";
 * move a highlight while focus stays in the field; Enter runs the highlighted command and closes
 * the palette. Commands come from the app as data (`items`), each with its own `onSelect`.
 *
-* Built from Modal's primitives (Portal, the overlay stack, Fade, ScaleFade, FocusScope, the
-* backdrop and its scroll lock), not by rendering `Modal`, and its rows copy Menu's `MEDIUM` look
-* in a `role="listbox"` driven by `aria-activedescendant`. It does not route, fetch or rank:
-* `onSearch` hands the term to the app, and commands do the work in `onSelect`.
+* Built from Modal's primitives (Portal, the overlay stack, Fade, the content-first scale-fade,
+* FocusScope, the backdrop and its scroll lock), not by rendering `Modal`, and its rows copy Menu's
+* `MEDIUM` look in a `role="listbox"` driven by `aria-activedescendant`. It does not route, fetch
+* or rank: `onSearch` hands the term to the app, and commands do the work in `onSelect`.
 *
 * SSR: nothing renders on the server (closed by default; `Portal` renders nothing there).
 * `useHotkey` and `useLocalStorage` are SSR-safe; nothing touches `window`, `document` or
@@ -68,7 +68,7 @@ function createMemoryStorage() {
 }
 /**
 * Focuses `target` outside the palette while the palette's FocusScope is still mounted for its
-* exit. The exiting panel keeps the props it had while open (ScaleFade freezes them), so its trap
+* exit. The exiting panel keeps the props it had while open (AnimatePresence holds them), so its trap
 * would pull this focus back; the one `focusin` this call dispatches is stopped before it reaches
 * the trap's document listener.
 */
@@ -107,7 +107,7 @@ var Positioner = /*#__PURE__*/ styled("div")({
 	class: "gx-CommandPalette-Positioner-pjnwubt",
 	propsAsIs: false
 });
-/** The panel's ScaleFade root: it grows from the top center. */
+/** The panel's scale-fade root: it grows from the top center. */
 var FRAME_CSS = "gx-CommandPalette-FRAME_CSS-f1kamwsl";
 var FOCUS_SCOPE_CSS = "gx-CommandPalette-FOCUS_SCOPE_CSS-fi5b22w";
 var Panel = /*#__PURE__*/ styled("div")({
@@ -407,7 +407,7 @@ var CommandPalette = forwardRef(function CommandPalette({ items, isOpen: isOpenP
 			})
 		}), /* @__PURE__ */ jsx(Positioner, {
 			style: zStyle,
-			children: /* @__PURE__ */ jsx(ScaleFade, {
+			children: /* @__PURE__ */ jsx(OverlayScaleFade, {
 				isOpen,
 				shouldAnimateOnMount,
 				className: FRAME_CSS,

package/dist/overlay/internal/OverlayScaleFade.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from "react";
+/** @internal Props of `OverlayScaleFade`. */
+export interface OverlayScaleFadeProps {
+    /** Shown; changing it scales and fades the panel in, or fades its content then the panel out. */
+    isOpen: boolean;
+    /** Pop in when mounting open (see `ScaleFade`). */
+    shouldAnimateOnMount?: boolean;
+    /** The panel. */
+    children?: ReactNode;
+    /** May set `transform-origin`; must not set `opacity`, `transform` or `visibility`. */
+    className?: string | undefined;
+    /** Only custom properties. */
+    style?: CSSProperties | undefined;
+}
+/** @internal An overlay panel's enter and content-first exit. */
+export declare function OverlayScaleFade({ isOpen, shouldAnimateOnMount, className, style, children, }: OverlayScaleFadeProps): import("react").JSX.Element;

package/dist/overlay/internal/OverlayScaleFade.js

@@ -0,0 +1,60 @@
+import { DURATION } from "../../theme/tokens/scales.js";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion.js";
+import { OVERLAY_CONTENT_SHOWN, withContentFirstExit } from "./contentFirstExit.js";
+/* empty css                           */
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/overlay/internal/OverlayScaleFade.tsx
+/**
+* @internal `ScaleFade` for overlay panels (Modal, Popover, CommandPalette), with a content-first
+* exit (`contentFirstExit`): on close the content fades in place, then the empty panel scales and
+* fades. Entering matches `ScaleFade`. The public `ScaleFade` keeps its single-step exit.
+*/
+var ENTER_TRANSITION = {
+	duration: Number.parseFloat(DURATION.base) / 1e3,
+	ease: "easeOut"
+};
+var REDUCED_TRANSITION = { duration: 0 };
+var SCALE = .95;
+var START = {
+	opacity: 0,
+	scale: SCALE,
+	...OVERLAY_CONTENT_SHOWN
+};
+/**
+* `visibility: visible` inline, like `ScaleFade`: a closing host may hide its own wrapper
+* (Popover's positioner), and the exit must still show through it.
+*/
+var OPEN = {
+	opacity: 1,
+	scale: 1,
+	visibility: "visible",
+	pointerEvents: "auto",
+	...OVERLAY_CONTENT_SHOWN
+};
+var CLOSED = {
+	opacity: 0,
+	scale: SCALE,
+	visibility: "visible",
+	pointerEvents: "none"
+};
+var ROOT_CSS = "gx-OverlayScaleFade-ROOT_CSS-r1woxc6d";
+/** @internal An overlay panel's enter and content-first exit. */
+function OverlayScaleFade({ isOpen, shouldAnimateOnMount = false, className, style, children }) {
+	const isReducedMotion = usePrefersReducedMotion();
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: shouldAnimateOnMount,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			initial: START,
+			animate: OPEN,
+			exit: withContentFirstExit(CLOSED, isReducedMotion),
+			transition: isReducedMotion ? REDUCED_TRANSITION : ENTER_TRANSITION,
+			className: cx(ROOT_CSS, className),
+			...style === void 0 ? {} : { style },
+			children
+		}, "overlay-scale-fade")
+	});
+}
+//#endregion
+export { OverlayScaleFade };

package/dist/overlay/internal/OverlayTitleRow.d.ts

@@ -0,0 +1,23 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import type { ReactNode, Ref } from "react";
+/** @internal Props of `OverlayTitleRow`. */
+export interface OverlayTitleRowProps {
+    /** The title: a string renders as an `h2`; a node renders as it is in the first line. */
+    header?: ReactNode;
+    /** A secondary line under the title. */
+    subheader?: string | undefined;
+    /** A leading icon before the title. */
+    icon?: PhosphorIcon | undefined;
+    /** Drawer's title-row controls, before the close button. */
+    actions?: ReactNode;
+    /** Drawer's ref on the actions group (its development check counts the controls). */
+    actionsRef?: Ref<HTMLDivElement>;
+    /** Id the title takes, so the overlay can point `aria-labelledby` at it. */
+    titleId: string;
+    /** Id the subheader takes, so the overlay can point `aria-describedby` at it. */
+    subheaderId: string;
+    /** The overlay shows its close button: the row keeps clear of it. */
+    hasClose: boolean;
+}
+/** @internal The title row: icon, title over subheader, actions; the close button is the host's. */
+export default function OverlayTitleRow({ header, subheader, icon, actions, actionsRef, titleId, subheaderId, hasClose, }: OverlayTitleRowProps): import("react").JSX.Element;

package/dist/overlay/internal/OverlayTitleRow.js

@@ -0,0 +1,90 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../../text/Text.js";
+import Icon, { IconVariant } from "../../icons/Icon.js";
+import IconSlot from "../../icons/internal/IconSlot.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/overlay/internal/OverlayTitleRow.tsx
+/**
+* @internal The title row of Modal and Drawer: an optional leading icon, the title (a string as an
+* `h2`, or a node) over an optional subheader, and Drawer's `actions`. The close button is not in
+* here: each overlay renders it last, so it stays last in the tab order, pinned 12px from the top.
+*
+* The row aligns to its top and every control sits in a first line one `control.small` tall: the
+* icon, the title line and `actions` all center on the same line as the pinned close button, so a
+* subheader (or any taller header) grows the row downward without pulling them apart.
+*/
+/** The leading icon: Widget's `LARGE` header icon, odd, so it sits in an `IconSlot`. */
+var OVERLAY_TITLE_ICON_PX = 15;
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-OverlayTitleRow-r1ppt2kb",
+	propsAsIs: false
+});
+/** While the close button shows: a long title never runs under it. */
+var HAS_CLOSE_CSS = "gx-OverlayTitleRow-HAS_CLOSE_CSS-h147kmzk";
+/** 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-OverlayTitleRow-HAS_CLOSE_WITH_ACTIONS_CSS-h6yq484";
+/** One `control.small` tall, its content centered: the line the close button centers on. */
+var Line = /*#__PURE__*/ styled("div")({
+	name: "Line",
+	class: "gx-OverlayTitleRow-Line-l16sm8vd",
+	propsAsIs: false
+});
+/** Title over subheader; takes the free width. */
+var Titles = /*#__PURE__*/ styled("div")({
+	name: "Titles",
+	class: "gx-OverlayTitleRow-Titles-tiu9n96",
+	propsAsIs: false
+});
+/** A node `header`: takes the line and may shrink. */
+var HeaderNode = /*#__PURE__*/ styled("div")({
+	name: "HeaderNode",
+	class: "gx-OverlayTitleRow-HeaderNode-h8nok1a",
+	propsAsIs: false
+});
+/** `actions`: at the end of the first line, 4px apart and 4px before the close button. */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-OverlayTitleRow-Actions-a157lrfo",
+	propsAsIs: false
+});
+/** @internal The title row: icon, title over subheader, actions; the close button is the host's. */
+function OverlayTitleRow({ header, subheader, icon, actions, actionsRef, titleId, subheaderId, hasClose }) {
+	const hasHeader = header !== void 0;
+	return /* @__PURE__ */ jsxs(Root, {
+		className: cx(hasClose && (actions === void 0 ? HAS_CLOSE_CSS : HAS_CLOSE_WITH_ACTIONS_CSS)),
+		children: [
+			hasHeader && icon !== void 0 && /* @__PURE__ */ jsx(Line, { children: /* @__PURE__ */ jsx(IconSlot, {
+				px: OVERLAY_TITLE_ICON_PX,
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: icon,
+					size: OVERLAY_TITLE_ICON_PX,
+					variant: IconVariant.PRIMARY
+				})
+			}) }),
+			/* @__PURE__ */ jsxs(Titles, { children: [hasHeader && /* @__PURE__ */ jsx(Line, { children: typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+				as: "h2",
+				size: TextSize.BODY_LG,
+				weight: TextWeight.MEDIUM,
+				id: titleId,
+				children: header
+			}) : /* @__PURE__ */ jsx(HeaderNode, {
+				id: titleId,
+				children: header
+			}) }), hasHeader && subheader !== void 0 && /* @__PURE__ */ jsx(Text, {
+				id: subheaderId,
+				size: TextSize.BODY_MD,
+				variant: TextVariant.SECONDARY,
+				children: subheader
+			})] }),
+			actions !== void 0 && /* @__PURE__ */ jsx(Actions, {
+				ref: actionsRef,
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { OverlayTitleRow as default };

package/dist/overlay/internal/contentFirstExit.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @internal How Modal, Drawer and Popover (with Dropdown and Menu on it) leave: the content first,
+ * then the shell. On close the panel's content fades out in place over `duration.fast` (opacity
+ * only, so its text is never resampled, never half-transparent over a blurred backdrop and never
+ * squeezed); then the empty shell scales, slides or collapses away over the next `duration.fast`.
+ * The whole exit stays `duration.base`. The exiting panel keeps the props it last rendered with
+ * (`AnimatePresence` holds the removed element), so an app that clears its state on close does not
+ * change the panel mid-exit.
+ *
+ * The shell's motion element animates `--gx-overlay-content-opacity`; the content reads it
+ * (`OVERLAY_CONTENT_OPACITY_CSS`). Entering is unchanged: the content shows with the shell.
+ */
+import type { TargetAndTransition } from "framer-motion";
+/** The custom property the shell animates and the content reads. */
+export declare const OVERLAY_CONTENT_OPACITY_VAR = "--gx-overlay-content-opacity";
+/** Declarations for the content: its opacity follows the shell's exit. */
+export declare const OVERLAY_CONTENT_OPACITY_CSS = "opacity: var(--gx-overlay-content-opacity, 1);";
+/** Merged into a shell's open (and enter-start) target: the content fully shown. */
+export declare const OVERLAY_CONTENT_SHOWN: TargetAndTransition;
+/**
+ * A shell's exit target, made content-first: the content variable drops to 0 over
+ * `duration.fast`, then the shell's own values animate over the next `duration.fast`. Under
+ * reduced motion everything snaps.
+ */
+export declare function withContentFirstExit(exitTarget: TargetAndTransition, isReducedMotion: boolean): TargetAndTransition;

package/dist/overlay/internal/contentFirstExit.js

@@ -0,0 +1,34 @@
+import { DURATION } from "../../theme/tokens/scales.js";
+//#region src/overlay/internal/contentFirstExit.ts
+/** The custom property the shell animates and the content reads. */
+var OVERLAY_CONTENT_OPACITY_VAR = "--gx-overlay-content-opacity";
+/** Declarations for the content: its opacity follows the shell's exit. */
+var OVERLAY_CONTENT_OPACITY_CSS = `opacity: var(${OVERLAY_CONTENT_OPACITY_VAR}, 1);`;
+/** `duration.fast` in seconds (framer needs a number). */
+var FAST_S = Number.parseFloat(DURATION.fast) / 1e3;
+/** Merged into a shell's open (and enter-start) target: the content fully shown. */
+var OVERLAY_CONTENT_SHOWN = { [OVERLAY_CONTENT_OPACITY_VAR]: 1 };
+/**
+* A shell's exit target, made content-first: the content variable drops to 0 over
+* `duration.fast`, then the shell's own values animate over the next `duration.fast`. Under
+* reduced motion everything snaps.
+*/
+function withContentFirstExit(exitTarget, isReducedMotion) {
+	const transition = isReducedMotion ? { duration: 0 } : {
+		duration: FAST_S,
+		delay: FAST_S,
+		ease: "easeOut",
+		[OVERLAY_CONTENT_OPACITY_VAR]: {
+			duration: FAST_S,
+			delay: 0,
+			ease: "easeOut"
+		}
+	};
+	return {
+		...exitTarget,
+		[OVERLAY_CONTENT_OPACITY_VAR]: 0,
+		transition
+	};
+}
+//#endregion
+export { OVERLAY_CONTENT_OPACITY_CSS, OVERLAY_CONTENT_OPACITY_VAR, OVERLAY_CONTENT_SHOWN, withContentFirstExit };

package/dist/overlays/Popover.js

@@ -5,8 +5,8 @@ import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import { PortalContainerContext } from "../theme/useGalaxyTheme.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
 import Box from "../layout/Box.js";
+import { OverlayScaleFade } from "../overlay/internal/OverlayScaleFade.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
-import ScaleFade from "../transform/ScaleFade.js";
 /* empty css                  */
 import { styled } from "@linaria/react";
 import { cloneElement, forwardRef, useCallback, useContext, useId, useReducer, useRef, useState, version } from "react";
@@ -22,7 +22,8 @@ import { FloatingFocusManager, FloatingNode, FloatingPortal, FloatingTree, autoP
 *
 * Positioning, interactions and non-modal focus come from `@floating-ui/react`. The computed
 * `x`/`y` and the overlay stack's `zIndex` are written as custom properties on the positioner and
-* read by static CSS. The panel enters and exits through `ScaleFade`, growing out of the trigger.
+* read by static CSS. The panel scale-fades in, growing out of the trigger; on close its content fades
+* first, then the empty panel shrinks back toward the trigger.
 * Escape goes through the overlay stack (`useOverlay`), so it reaches only the topmost overlay.
 *
 * Popover has no slots and no padding: Dropdown, Menu, ContextMenu, SelectInput, DateInput and
@@ -110,7 +111,7 @@ var POPOVER_ROLE_TO_FLOATING_ROLE_MAP = {
 	["LISTBOX"]: "listbox"
 };
 /**
-* The resolved placement → ScaleFade's `transform-origin` (the ScaleFade host contract), on the
+* The resolved placement → the scale-fade root's `transform-origin`, on the
 * edge that faces the trigger. The `AUTO*` entries never resolve at runtime; the `Record` is
 * exhaustive.
 */
@@ -154,11 +155,11 @@ var POPOVER_VARIANT_TO_CSS_MAP = {
 var NO_SURFACE_CSS = "gx-Popover-NO_SURFACE_CSS-n1lgpldq";
 /** `shouldMatchTriggerWidth`: exactly as wide as the trigger. */
 var MATCH_TRIGGER_WIDTH_CSS = "gx-Popover-MATCH_TRIGGER_WIDTH_CSS-mgy0n2s";
-/** Closed (the exit, if any, still shows: ScaleFade's root sets its own visibility). */
+/** Closed (the exit, if any, still shows: the panel's scale-fade root sets its own visibility). */
 var CLOSED_CSS = "gx-Popover-CLOSED_CSS-c17lvfn2";
 /**
 * Not positioned yet, or the trigger scrolled fully out of view. Clipped rather than
-* `visibility: hidden`, because ScaleFade's root sets `visibility: visible` inline, which an
+* `visibility: hidden`, because the scale-fade root sets `visibility: visible` inline, which an
 * ancestor's `hidden` cannot override; a clip hides the descendants and their hit area.
 */
 var REFERENCE_HIDDEN_CSS = "gx-Popover-REFERENCE_HIDDEN_CSS-r1gfapfk";
@@ -351,7 +352,7 @@ function PopoverRoot({ children, body, trigger = "CLICK", placement = Placement.
 						ref: isShown ? refs.setFloating : void 0,
 						className: cx(!isShown && CLOSED_CSS, isShown && (!isPositioned || isReferenceHidden) && REFERENCE_HIDDEN_CSS),
 						style: position,
-						children: /* @__PURE__ */ jsx(ScaleFade, {
+						children: /* @__PURE__ */ jsx(OverlayScaleFade, {
 							isOpen: isShown,
 							shouldAnimateOnMount: !isOpenOnFirstRender,
 							className: POPOVER_PLACEMENT_TO_TRANSFORM_ORIGIN_MAP[resolvedPlacement],