@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/overlays/Popover.d.ts

@@ -0,0 +1,114 @@
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode } from "react";
+import { Placement } from "../theme/enums.js";
+/** Panel fill: a surface step (Constitution V-A surface set, all four members). */
+export declare enum PopoverVariant {
+    /** The canvas fill, `background.base`. The default (as in 1.x). */
+    BASE = "BASE",
+    /** A panel fill, `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** What opens the panel (mode set, declared here; 1.x `DropdownTrigger` plus `CONTEXT_MENU`). */
+export declare enum PopoverTrigger {
+    /** Click, Enter or Space on the trigger toggles it. */
+    CLICK = "CLICK",
+    /** The pointer rests on the trigger (after `delay`), or the trigger gets keyboard focus. */
+    HOVER = "HOVER",
+    /** The trigger receives focus. */
+    FOCUS = "FOCUS",
+    /** Right-click (or the keyboard context-menu key) on the region; opens at the pointer. */
+    CONTEXT_MENU = "CONTEXT_MENU",
+    /** Nothing opens it; `isOpen` does (combobox hosts). */
+    MANUAL = "MANUAL"
+}
+/** The panel's role and the trigger's `aria-haspopup` (mode set, declared here). */
+export declare enum PopoverRole {
+    /** `role="dialog"`, `aria-haspopup="dialog"`. The default. */
+    DIALOG = "DIALOG",
+    /** `role="menu"`, `aria-haspopup="menu"` (Menu, ContextMenu). */
+    MENU = "MENU",
+    /** `role="listbox"`, `aria-haspopup="listbox"` (SelectInput). */
+    LISTBOX = "LISTBOX"
+}
+export interface PopoverProps extends AriaAttributes {
+    /**
+     * The trigger: one element that forwards its `ref` and spreads props to a DOM element. Popover
+     * clones it and does not wrap it. With `CONTEXT_MENU` it is the region that is right-clicked.
+     */
+    children: ReactElement;
+    /**
+     * Panel content. A string or number renders as `Text` with 12px padding; a node renders as it
+     * is, with no padding.
+     */
+    body: ReactNode;
+    /**
+     * What opens the panel: click, hover, focus, right-click, or nothing (`MANUAL`: only `isOpen`).
+     * @default PopoverTrigger.CLICK
+     */
+    trigger?: PopoverTrigger;
+    /**
+     * Preferred side and alignment. The panel flips and shifts to stay in the viewport; `AUTO*`
+     * picks the side with the most room. With `CONTEXT_MENU` it is relative to the pointer.
+     * @default Placement.BOTTOM_START
+     */
+    placement?: Placement;
+    /**
+     * Panel fill (surface step). Ignored when `hasSurface` is `false`.
+     * @default PopoverVariant.BASE
+     */
+    variant?: PopoverVariant;
+    /**
+     * Draw the panel's fill and hairline. `false` draws neither, for content that brings its own
+     * surface (a host-drawn panel); radius, focus ring and scrolling stay. Defaults to `true`, the
+     * one boolean that does: a panel normally has a surface.
+     * @default true
+     */
+    hasSurface?: boolean;
+    /**
+     * What the panel is to assistive tech, and the trigger's `aria-haspopup`. Menu and SelectInput
+     * set it; most callers leave it.
+     * @default PopoverRole.DIALOG
+     */
+    role?: PopoverRole;
+    /**
+     * Make the panel exactly as wide as the trigger (select-style). Ignored with `CONTEXT_MENU`.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
+    /**
+     * With `HOVER`: milliseconds the pointer must rest on the trigger before the panel opens.
+     * Ignored by the other triggers.
+     * @default 0
+     */
+    delay?: number;
+    /** Controlled open state. When set, Popover calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested open state on trigger interaction, Escape, outside press and focus leaving the panel. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Never opens. The trigger renders exactly as when enabled, without the popup ARIA.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Accessible name of the panel. When omitted (and no `aria-labelledby` is passed), the panel is labelled by the trigger. */
+    ariaLabel?: string;
+    /** DOM id on the panel; the trigger's `aria-controls` target. @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;
+}
+/** An anchored panel for interactive content, opened from one trigger element. */
+declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Popover;

package/dist/overlays/Popover.js

@@ -0,0 +1,389 @@
+import { Placement } from "../theme/enums.js";
+import Text from "../text/Text.js";
+import { SPACE } from "../theme/tokens/scales.js";
+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 { 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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { FloatingFocusManager, FloatingNode, FloatingPortal, FloatingTree, autoPlacement, autoUpdate, flip, hide, offset, safePolygon, shift, size, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFocus, useHover, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+//#region src/overlays/Popover.tsx
+/**
+* The anchored panel: a surface that opens next to one trigger element, holds interactive content
+* (a filter form, a hover card, a set of actions, a picker), and closes on Escape, an outside
+* press, or when the trigger asks. The trigger is the single child: Popover clones it (adding the
+* event handlers, the `ref` and the popup ARIA) instead of wrapping it, as Tooltip does.
+*
+* 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.
+* 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
+* ColorInput are built on it and bring their own layout.
+*
+* SSR: only the trigger renders on the server. Nothing here touches `window` or `document` at
+* module scope.
+*/
+/** Panel fill: a surface step (Constitution V-A surface set, all four members). */
+var PopoverVariant = /* @__PURE__ */ function(PopoverVariant) {
+	/** The canvas fill, `background.base`. The default (as in 1.x). */
+	PopoverVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. */
+	PopoverVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
+	PopoverVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. */
+	PopoverVariant["TERTIARY"] = "TERTIARY";
+	return PopoverVariant;
+}({});
+/** What opens the panel (mode set, declared here; 1.x `DropdownTrigger` plus `CONTEXT_MENU`). */
+var PopoverTrigger = /* @__PURE__ */ function(PopoverTrigger) {
+	/** Click, Enter or Space on the trigger toggles it. */
+	PopoverTrigger["CLICK"] = "CLICK";
+	/** The pointer rests on the trigger (after `delay`), or the trigger gets keyboard focus. */
+	PopoverTrigger["HOVER"] = "HOVER";
+	/** The trigger receives focus. */
+	PopoverTrigger["FOCUS"] = "FOCUS";
+	/** Right-click (or the keyboard context-menu key) on the region; opens at the pointer. */
+	PopoverTrigger["CONTEXT_MENU"] = "CONTEXT_MENU";
+	/** Nothing opens it; `isOpen` does (combobox hosts). */
+	PopoverTrigger["MANUAL"] = "MANUAL";
+	return PopoverTrigger;
+}({});
+/** The panel's role and the trigger's `aria-haspopup` (mode set, declared here). */
+var PopoverRole = /* @__PURE__ */ function(PopoverRole) {
+	/** `role="dialog"`, `aria-haspopup="dialog"`. The default. */
+	PopoverRole["DIALOG"] = "DIALOG";
+	/** `role="menu"`, `aria-haspopup="menu"` (Menu, ContextMenu). */
+	PopoverRole["MENU"] = "MENU";
+	/** `role="listbox"`, `aria-haspopup="listbox"` (SelectInput). */
+	PopoverRole["LISTBOX"] = "LISTBOX";
+	return PopoverRole;
+}({});
+/** Gap between the trigger and the panel, and the viewport inset, resolved to numbers for the engine. */
+var POPOVER_OFFSET_PX = Number.parseFloat(SPACE[4]);
+var POPOVER_VIEWPORT_PADDING_PX = Number.parseFloat(SPACE[8]);
+/** `Placement` → the engine: 12 sided placements, and `AUTO*` as `autoPlacement` (replacing `flip`). */
+var POPOVER_PLACEMENT_TO_FLOATING_PLACEMENT_MAP = {
+	[Placement.TOP]: { placement: "top" },
+	[Placement.BOTTOM]: { placement: "bottom" },
+	[Placement.LEFT]: { placement: "left" },
+	[Placement.RIGHT]: { placement: "right" },
+	[Placement.TOP_START]: { placement: "top-start" },
+	[Placement.TOP_END]: { placement: "top-end" },
+	[Placement.BOTTOM_START]: { placement: "bottom-start" },
+	[Placement.BOTTOM_END]: { placement: "bottom-end" },
+	[Placement.LEFT_START]: { placement: "left-start" },
+	[Placement.LEFT_END]: { placement: "left-end" },
+	[Placement.RIGHT_START]: { placement: "right-start" },
+	[Placement.RIGHT_END]: { placement: "right-end" },
+	[Placement.AUTO]: { autoAlignment: void 0 },
+	[Placement.AUTO_START]: { autoAlignment: "start" },
+	[Placement.AUTO_END]: { autoAlignment: "end" }
+};
+/** The engine's resolved placement (after flip) → the matching sided `Placement` member. */
+var FLOATING_PLACEMENT_TO_PLACEMENT_MAP = {
+	top: Placement.TOP,
+	bottom: Placement.BOTTOM,
+	left: Placement.LEFT,
+	right: Placement.RIGHT,
+	"top-start": Placement.TOP_START,
+	"top-end": Placement.TOP_END,
+	"bottom-start": Placement.BOTTOM_START,
+	"bottom-end": Placement.BOTTOM_END,
+	"left-start": Placement.LEFT_START,
+	"left-end": Placement.LEFT_END,
+	"right-start": Placement.RIGHT_START,
+	"right-end": Placement.RIGHT_END
+};
+/** `PopoverRole` → the engine's `useRole` role (logic, not CSS). */
+var POPOVER_ROLE_TO_FLOATING_ROLE_MAP = {
+	["DIALOG"]: "dialog",
+	["MENU"]: "menu",
+	["LISTBOX"]: "listbox"
+};
+/**
+* The resolved placement → ScaleFade's `transform-origin` (the ScaleFade host contract), on the
+* edge that faces the trigger. The `AUTO*` entries never resolve at runtime; the `Record` is
+* exhaustive.
+*/
+var POPOVER_PLACEMENT_TO_TRANSFORM_ORIGIN_MAP = {
+	[Placement.TOP]: "gx-Popover-Placement_TOP-p1yvjfp0",
+	[Placement.BOTTOM]: "gx-Popover-Placement_BOTTOM-pwlcd4n",
+	[Placement.LEFT]: "gx-Popover-Placement_LEFT-p18tkktd",
+	[Placement.RIGHT]: "gx-Popover-Placement_RIGHT-p4a12jv",
+	[Placement.TOP_START]: "gx-Popover-Placement_TOP_START-pjnmget",
+	[Placement.TOP_END]: "gx-Popover-Placement_TOP_END-p2hbin6",
+	[Placement.BOTTOM_START]: "gx-Popover-Placement_BOTTOM_START-pfmlxvc",
+	[Placement.BOTTOM_END]: "gx-Popover-Placement_BOTTOM_END-p1la2k9h",
+	[Placement.LEFT_START]: "gx-Popover-Placement_LEFT_START-pdik70u",
+	[Placement.LEFT_END]: "gx-Popover-Placement_LEFT_END-p1pbd719",
+	[Placement.RIGHT_START]: "gx-Popover-Placement_RIGHT_START-pb7wca0",
+	[Placement.RIGHT_END]: "gx-Popover-Placement_RIGHT_END-pc20w2h",
+	[Placement.AUTO]: "gx-Popover-Placement_AUTO-p10li10o",
+	[Placement.AUTO_START]: "gx-Popover-Placement_AUTO_START-p1mpbi15",
+	[Placement.AUTO_END]: "gx-Popover-Placement_AUTO_END-p10ruo79"
+};
+/** The floating element: positioned by the engine through custom properties. */
+var Positioner = /*#__PURE__*/ styled("div")({
+	name: "Positioner",
+	class: "gx-Popover-Positioner-p1bj6g5f",
+	propsAsIs: false
+});
+/** The surface: fill, hairline, radius; no padding. */
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-Popover-Panel-ps6yk73",
+	propsAsIs: false
+});
+/** Panel fill per surface step; the hairline comes from the panel. */
+var POPOVER_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-Popover-BASE-b2873uo",
+	["PRIMARY"]: "gx-Popover-PRIMARY-pa776er",
+	["SECONDARY"]: "gx-Popover-SECONDARY-s1afmqx4",
+	["TERTIARY"]: "gx-Popover-TERTIARY-tdu5hku"
+};
+/** `hasSurface={false}`: no fill and a transparent hairline. Replaces the variant class. */
+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). */
+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
+* ancestor's `hidden` cannot override; a clip hides the descendants and their hit area.
+*/
+var REFERENCE_HIDDEN_CSS = "gx-Popover-REFERENCE_HIDDEN_CSS-r1gfapfk";
+/** React 19 moved an element's `ref` into `props`; React 18 keeps it on the element. */
+var IS_REACT_19 = Number.parseInt(version, 10) >= 19;
+/** The child's own ref, read where the running React version keeps it, so neither version warns. */
+function getElementRef(element) {
+	return (IS_REACT_19 ? element.props : element).ref;
+}
+/** Rounds to the device pixel grid so the translated panel's content stays sharp. */
+function roundToDevicePixel(value) {
+	const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+	return Math.round(value * ratio) / ratio;
+}
+/** A zero-size point at viewport coordinates: the context menu's anchor. */
+function pointReference(x, y) {
+	return { getBoundingClientRect: () => ({
+		x,
+		y,
+		width: 0,
+		height: 0,
+		top: y,
+		left: x,
+		right: x,
+		bottom: y
+	}) };
+}
+/** A control frame that positions popovers opened from an element inside it (Input's frame). */
+var ANCHOR_SELECTOR = "[data-gx-anchor]";
+/** The engine's trigger ARIA that Popover sets itself (`id`) or leaves to the host (`role`). */
+var OWN_REFERENCE_KEYS = new Set([
+	"id",
+	"role",
+	"aria-controls"
+]);
+/** One popover inside a `FloatingTree` (its own, or an enclosing popover's). */
+function PopoverRoot({ children, body, trigger = "CLICK", placement = Placement.BOTTOM_START, variant = "BASE", hasSurface = true, role = "DIALOG", shouldMatchTriggerWidth = false, delay = 0, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, id, className, style, panelRef, ...rest }) {
+	const nodeId = useFloatingNodeId();
+	const generatedPanelId = useId();
+	const panelId = id ?? generatedPanelId;
+	const generatedTriggerId = useId();
+	const portalContainer = useContext(PortalContainerContext);
+	const isEnabled = !isDisabled;
+	const isContextMenu = trigger === "CONTEXT_MENU";
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const isShown = isOpen && isEnabled;
+	const [hasOpened, setHasOpened] = useState(isShown);
+	if (isShown && !hasOpened) setHasOpened(true);
+	const [isOpenOnFirstRender] = useState(isShown);
+	const isShownRef = useRef(isShown);
+	isShownRef.current = isShown;
+	const setOpenRef = useRef(setOpen);
+	setOpenRef.current = setOpen;
+	/** Re-renders this popover, so `isShownRef` is reset to the real state after every request. */
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	const handleOpenChange = useCallback((nextIsOpen) => {
+		if (nextIsOpen === isShownRef.current) return;
+		isShownRef.current = nextIsOpen;
+		setOpenRef.current(nextIsOpen);
+		rerender();
+	}, []);
+	const close = useCallback(() => handleOpenChange(false), [handleOpenChange]);
+	const { zIndex, overlayId } = useOverlay({
+		isOpen: isShown,
+		layer: OverlayLayer.DROPDOWN,
+		onEscape: close
+	});
+	const target = POPOVER_PLACEMENT_TO_FLOATING_PLACEMENT_MAP[placement];
+	const { refs, context, x, y, middlewareData, isPositioned, placement: resolved } = useFloating({
+		nodeId,
+		open: isShown,
+		onOpenChange: handleOpenChange,
+		placement: "placement" in target ? target.placement : "bottom",
+		strategy: "absolute",
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(POPOVER_OFFSET_PX),
+			"placement" in target ? flip() : autoPlacement({ alignment: target.autoAlignment }),
+			shift({ padding: POPOVER_VIEWPORT_PADDING_PX }),
+			size({
+				padding: POPOVER_VIEWPORT_PADDING_PX,
+				apply({ rects, availableHeight, elements }) {
+					elements.floating.style.setProperty("--gx-popover-trigger-width", `${rects.reference.width}px`);
+					elements.floating.style.setProperty("--gx-popover-available-height", `${Math.max(0, availableHeight)}px`);
+				}
+			}),
+			...isContextMenu ? [] : [hide()]
+		]
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context, { enabled: isEnabled && trigger === "CLICK" }),
+		useHover(context, {
+			enabled: isEnabled && trigger === "HOVER",
+			mouseOnly: true,
+			delay: {
+				open: delay,
+				close: 0
+			},
+			handleClose: safePolygon()
+		}),
+		useFocus(context, {
+			enabled: isEnabled && (trigger === "HOVER" || trigger === "FOCUS"),
+			visibleOnly: trigger === "HOVER"
+		}),
+		useDismiss(context, {
+			enabled: isEnabled,
+			escapeKey: false,
+			outsidePress: true,
+			referencePress: false,
+			bubbles: { outsidePress: true }
+		}),
+		useRole(context, {
+			enabled: isEnabled && !isContextMenu,
+			role: POPOVER_ROLE_TO_FLOATING_ROLE_MAP[role]
+		})
+	]);
+	const childProps = children.props;
+	const ownTriggerId = typeof childProps.id === "string" ? childProps.id : void 0;
+	/**
+	* Positions against the trigger's control frame when it sits in one (`[data-gx-anchor]`, e.g.
+	* the Input frame around its `<input>`); events, focus and ARIA stay on the trigger itself.
+	*/
+	const anchorRef = useCallback((node) => {
+		if (node === null || isContextMenu) return;
+		const anchor = node.closest(ANCHOR_SELECTOR);
+		if (anchor !== null && anchor !== node) refs.setPositionReference(anchor);
+	}, [refs, isContextMenu]);
+	const triggerRef = useMergeRefs([
+		refs.setReference,
+		anchorRef,
+		getElementRef(children)
+	]);
+	/** Right-click opens at the pointer; a keyboard context menu (0, 0) anchors to the region. */
+	const handleContextMenu = (event) => {
+		if (!isEnabled || event.defaultPrevented) return;
+		event.preventDefault();
+		const region = event.currentTarget;
+		refs.setPositionReference(event.clientX === 0 && event.clientY === 0 ? region : pointReference(event.clientX, event.clientY));
+		if (!isShownRef.current) handleOpenChange(true);
+	};
+	const engineProps = isEnabled ? { ...getReferenceProps() } : {};
+	if (isContextMenu) engineProps.onContextMenu = handleContextMenu;
+	const triggerProps = {};
+	for (const [key, value] of Object.entries(engineProps)) {
+		if (OWN_REFERENCE_KEYS.has(key)) continue;
+		const own = childProps[key];
+		triggerProps[key] = typeof value === "function" && typeof own === "function" ? (...args) => {
+			own(...args);
+			value(...args);
+		} : value;
+	}
+	if (isEnabled && !isContextMenu) triggerProps["aria-controls"] = isShown ? panelId : void 0;
+	const triggerElement = cloneElement(children, {
+		...triggerProps,
+		ref: triggerRef,
+		id: ownTriggerId ?? generatedTriggerId
+	});
+	const labelledBy = context.elements.domReference?.id || ownTriggerId || generatedTriggerId;
+	const { "aria-labelledby": _engineLabelledBy, ...floatingProps } = getFloatingProps();
+	const labelling = rest["aria-labelledby"] !== void 0 ? {} : ariaLabel !== void 0 ? { "aria-label": ariaLabel } : { "aria-labelledby": labelledBy };
+	const resolvedPlacement = FLOATING_PLACEMENT_TO_PLACEMENT_MAP[resolved];
+	const isReferenceHidden = !isContextMenu && middlewareData.hide?.referenceHidden === true;
+	const position = {
+		"--gx-popover-x": `${roundToDevicePixel(x)}px`,
+		"--gx-popover-y": `${roundToDevicePixel(y)}px`,
+		"--gx-popover-z": zIndex
+	};
+	const content = typeof body === "string" || typeof body === "number" ? /* @__PURE__ */ jsx(Box, {
+		padding: 12,
+		children: /* @__PURE__ */ jsx(Text, { children: body })
+	}) : body;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [triggerElement, /* @__PURE__ */ jsx(FloatingNode, {
+		id: nodeId,
+		children: hasOpened && /* @__PURE__ */ jsx(FloatingPortal, {
+			...portalContainer === void 0 ? {} : { root: portalContainer },
+			children: /* @__PURE__ */ jsx(OverlayNode, {
+				overlayId,
+				children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+					context,
+					disabled: !isShown,
+					modal: false,
+					initialFocus: trigger === "CLICK" || isContextMenu ? 0 : -1,
+					returnFocus: true,
+					closeOnFocusOut: trigger !== "MANUAL",
+					children: /* @__PURE__ */ jsx(Positioner, {
+						ref: isShown ? refs.setFloating : void 0,
+						className: cx(!isShown && CLOSED_CSS, isShown && (!isPositioned || isReferenceHidden) && REFERENCE_HIDDEN_CSS),
+						style: position,
+						children: /* @__PURE__ */ jsx(ScaleFade, {
+							isOpen: isShown,
+							shouldAnimateOnMount: !isOpenOnFirstRender,
+							className: POPOVER_PLACEMENT_TO_TRANSFORM_ORIGIN_MAP[resolvedPlacement],
+							children: /* @__PURE__ */ jsx(Panel, {
+								...floatingProps,
+								...labelling,
+								...rest,
+								ref: panelRef,
+								id: panelId,
+								role: POPOVER_ROLE_TO_FLOATING_ROLE_MAP[role],
+								className: cx(hasSurface ? POPOVER_VARIANT_TO_CSS_MAP[variant] : NO_SURFACE_CSS, shouldMatchTriggerWidth && !isContextMenu && MATCH_TRIGGER_WIDTH_CSS, className),
+								style,
+								children: content
+							})
+						})
+					})
+				})
+			})
+		})
+	})] });
+}
+/** An anchored panel for interactive content, opened from one trigger element. */
+var Popover = forwardRef(function Popover(props, ref) {
+	if (useFloatingParentNodeId() === null) return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(PopoverRoot, {
+		...props,
+		panelRef: ref
+	}) });
+	return /* @__PURE__ */ jsx(PopoverRoot, {
+		...props,
+		panelRef: ref
+	});
+});
+Popover.displayName = "Popover";
+//#endregion
+export { PopoverRole, PopoverTrigger, PopoverVariant, Popover as default };

package/dist/shapes/Circle.d.ts

@@ -1,9 +1,85 @@
-export interface CircleProps {
-    /** Diameter. A number is px. */
-    size: number | string;
-    /** Fill color. @default theme.color.text.tertiary */
-    hex?: string;
-}
-/** A filled dot. Used for status indicators and legend swatches. */
-declare const Circle: ({ size, hex }: CircleProps) => import("react").JSX.Element;
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the member names the rung of the text the dot sits beside. */
+export declare enum CircleSize {
+    /** 6px, beside `caption` (12px line). */
+    X_SMALL = "X_SMALL",
+    /** 8px, beside `body_sm` (16px line). */
+    SMALL = "SMALL",
+    /** 10px, beside `body_md` (16px line). The default. */
+    MEDIUM = "MEDIUM",
+    /** 10px, beside `body_lg` (20px line). */
+    LARGE = "LARGE",
+    /** 12px, beside `body_lg` (20px line). */
+    X_LARGE = "X_LARGE"
+}
+/** Fill color role (Constitution V-A color set). Resolves to `color.text.*`. */
+export declare enum CircleVariant {
+    /** `text.primary`. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary`. The default (the 1.x fill). */
+    TERTIARY = "TERTIARY",
+    /** `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color (`currentColor`). */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
+    SUCCESS = "SUCCESS",
+    /** Status: warning, `text.warning`. */
+    WARNING = "WARNING",
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
+}
+interface CircleBaseProps extends AriaAttributes {
+    /**
+     * The rung of the text the dot sits beside. Diameter 6 / 8 / 10 / 10 / 12px for `X_SMALL` …
+     * `X_LARGE`.
+     * @default CircleSize.MEDIUM
+     */
+    size?: CircleSize;
+    /** Raw fill color for data-driven colors (chart series, user categories). Discouraged otherwise: it does not follow the theme. Overrides `variant` and `color`. */
+    hex?: Hex;
+    /** Accessible name when the dot carries meaning on its own; without it the dot is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A dot colored by meaning (`variant`), or the default `TERTIARY`. */
+interface CircleVariantProps {
+    /**
+     * Fill color role: a neutral step or a status, following the theme. `INHERIT` fills
+     * with the parent's `currentColor`. Not with `color`.
+     * @default CircleVariant.TERTIARY
+     */
+    variant?: CircleVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A dot colored by category (`color`). */
+interface CircleColorProps {
+    /**
+     * Fill color role: a neutral step or a status, following the theme. `INHERIT` fills
+     * with the parent's `currentColor`. Not with `color`.
+     * @default CircleVariant.TERTIARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): fills with `text.<family>`, the way a
+     * status variant renders. For categories (a series, a source type); meanings take `variant`.
+     * Not with `variant`.
+     */
+    color: PaletteColor;
+}
+/** Circle props. Passing both `variant` and `color` is a type error. */
+export type CircleProps = CircleBaseProps & (CircleVariantProps | CircleColorProps);
+/** A filled dot beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
+declare const Circle: import("react").ForwardRefExoticComponent<CircleProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Circle;