@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/modal/ConfirmDialog.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Asks one yes/no question before an action runs ("Delete source?"). A preset over `Modal`
+ * (`ModalSize.SMALL`) with a fixed layout: the question as the title, an optional description, an
+ * optional type-to-confirm field, and two buttons, Cancel and the named action.
+ *
+ * `onConfirm` runs the action. When it returns a promise, the action button shows a spinner and the
+ * dialog stays open and blocking (Cancel disabled, no close button, Escape and the backdrop
+ * ignored) until it settles: it closes on resolve and stays open on reject, where the app shows
+ * `error`. `isDestructive` makes the action `ButtonVariant.ERROR`; `confirmValue` makes the user
+ * type a value before the action enables.
+ *
+ * Any other content makes it a `Modal`. No styles of its own; every surface is Modal's.
+ *
+ * SSR: Modal's (nothing renders on the server). Nothing at module scope.
+ */
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface ConfirmDialogProps extends AriaAttributes {
+    /** The question, as the dialog title: "Delete source?". Names the dialog. */
+    header: string;
+    /** What happens if the user confirms. A string renders as secondary `Text`; a node (a mono `Span`) renders inside the same `Text`. Describes the dialog. */
+    description?: ReactNode;
+    /** The confirm button's label. Name the action ("Delete source", "Run sync"), not "OK". */
+    label: string;
+    /** Runs the action. It may return a promise: while it is pending the dialog shows a spinner and cannot be dismissed; it closes on resolve and stays open on reject. */
+    onConfirm: () => void;
+    /**
+     * The action deletes or cannot be undone: the confirm button is `ButtonVariant.ERROR` instead of `PRIMARY`.
+     * @default false
+     */
+    isDestructive?: boolean;
+    /** Type-to-confirm. When set, the user must type this text exactly (surrounding spaces ignored) before the confirm button enables. */
+    confirmValue?: string;
+    /** A message under the description, for an action that failed. The app sets it, usually after `onConfirm` rejects. */
+    error?: string;
+    /** Controlled open state. When set, ConfirmDialog calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with `false` on Cancel, Escape, a backdrop click, the close button, and after `onConfirm` succeeds. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** DOM id on the dialog panel. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the dialog panel. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the dialog panel. */
+    className?: string;
+    /** Inline style on the dialog panel; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A yes/no question before an action: title, description, optional type-to-confirm, Cancel + action. */
+declare const ConfirmDialog: import("react").ForwardRefExoticComponent<ConfirmDialogProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ConfirmDialog;

package/dist/modal/ConfirmDialog.js

@@ -0,0 +1,151 @@
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextVariant } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Flex, { FlexDirection } from "../layout/Flex.js";
+import Button, { ButtonVariant } from "../buttons/Button.js";
+import Span from "../text/Span.js";
+import TextInput from "../inputs/TextInput.js";
+import Modal, { ModalSize } from "./Modal.js";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/modal/ConfirmDialog.tsx
+/**
+* Asks one yes/no question before an action runs ("Delete source?"). A preset over `Modal`
+* (`ModalSize.SMALL`) with a fixed layout: the question as the title, an optional description, an
+* optional type-to-confirm field, and two buttons, Cancel and the named action.
+*
+* `onConfirm` runs the action. When it returns a promise, the action button shows a spinner and the
+* dialog stays open and blocking (Cancel disabled, no close button, Escape and the backdrop
+* ignored) until it settles: it closes on resolve and stays open on reject, where the app shows
+* `error`. `isDestructive` makes the action `ButtonVariant.ERROR`; `confirmValue` makes the user
+* type a value before the action enables.
+*
+* Any other content makes it a `Modal`. No styles of its own; every surface is Modal's.
+*
+* SSR: Modal's (nothing renders on the server). Nothing at module scope.
+*/
+/** The fixed text of the dismiss button (as Modal's "Close"). */
+var CANCEL_LABEL = "Cancel";
+/** A value with a `then` method: what `await` would treat as a promise. */
+var isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+/** A yes/no question before an action: title, description, optional type-to-confirm, Cancel + action. */
+var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, label, onConfirm, isDestructive = false, confirmValue, error, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, "aria-describedby": ariaDescribedBy, className, style, ...rest }, ref) {
+	const descriptionId = useId();
+	const promptId = useId();
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const [typed, setTyped] = useState("");
+	const [isPending, setIsPending] = useState(false);
+	const [wasOpen, setWasOpen] = useState(isOpen);
+	if (wasOpen !== isOpen) {
+		setWasOpen(isOpen);
+		if (isOpen) {
+			setTyped("");
+			setIsPending(false);
+		}
+	}
+	const isMountedRef = useRef(true);
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	/** A pending action cannot be dismissed. */
+	const requestOpenChange = (next) => {
+		if (!next && isPending) return;
+		setOpen(next);
+	};
+	const isMatched = confirmValue === void 0 || typed.trim() === confirmValue.trim();
+	const confirm = () => {
+		if (!isMatched || isPending) return;
+		const result = onConfirm();
+		if (!isThenable(result)) {
+			setOpen(false);
+			return;
+		}
+		setIsPending(true);
+		result.then(() => {
+			if (!isMountedRef.current) return;
+			setIsPending(false);
+			setOpen(false);
+		}, () => {
+			if (!isMountedRef.current) return;
+			setIsPending(false);
+		});
+	};
+	const describedBy = ariaDescribedBy ?? (description === void 0 ? void 0 : descriptionId);
+	const hasBody = description !== void 0 || confirmValue !== void 0 || error !== void 0;
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		label: CANCEL_LABEL,
+		variant: ButtonVariant.TERTIARY,
+		isDisabled: isPending,
+		onClick: () => requestOpenChange(false)
+	}), /* @__PURE__ */ jsx(Button, {
+		label,
+		variant: isDestructive ? ButtonVariant.ERROR : ButtonVariant.PRIMARY,
+		isLoading: isPending,
+		isDisabled: !isMatched,
+		onClick: confirm
+	})] });
+	return /* @__PURE__ */ jsx(Modal, {
+		...rest,
+		ref,
+		size: ModalSize.SMALL,
+		isOpen,
+		onOpenChange: requestOpenChange,
+		isDismissable: !isPending,
+		header,
+		footer,
+		...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+		...className === void 0 ? {} : { className },
+		...style === void 0 ? {} : { style },
+		children: hasBody ? /* @__PURE__ */ jsxs(Flex, {
+			direction: FlexDirection.COLUMN,
+			gap: 12,
+			children: [
+				description !== void 0 && /* @__PURE__ */ jsx(Text, {
+					id: descriptionId,
+					variant: TextVariant.SECONDARY,
+					children: description
+				}),
+				confirmValue !== void 0 && /* @__PURE__ */ jsxs(Flex, {
+					direction: FlexDirection.COLUMN,
+					gap: 8,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						id: promptId,
+						children: [
+							"Type ",
+							/* @__PURE__ */ jsx(Span, {
+								family: FontFamily.MONO,
+								children: confirmValue
+							}),
+							" to confirm."
+						]
+					}), /* @__PURE__ */ jsx(TextInput, {
+						value: typed,
+						onChange: setTyped,
+						onEnter: confirm,
+						placeholder: confirmValue,
+						isDisabled: isPending,
+						fillWidth: true,
+						"aria-labelledby": promptId
+					})]
+				}),
+				error !== void 0 && /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					children: /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.ERROR,
+						children: error
+					})
+				})
+			]
+		}) : void 0
+	});
+});
+ConfirmDialog.displayName = "ConfirmDialog";
+//#endregion
+export { ConfirmDialog as default };

package/dist/modal/Modal.d.ts

@@ -1,15 +1,65 @@
-import { type PropsWithChildren } from "react";
-export interface ModalProps {
-    /** Controlled visibility. The modal has no open state of its own. */
-    open: boolean;
-    /** Called on Escape and on backdrop click. */
-    onClose: () => void;
-}
-/**
- * A centered dialog 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.
- */
-declare const Modal: ({ open, onClose, children }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;
+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 {
+    /** 400px: a question or a notice (`ConfirmDialog`). */
+    SMALL = "SMALL",
+    /** 560px: a short form. The default. */
+    MEDIUM = "MEDIUM",
+    /** 720px: a longer form or a preview. */
+    LARGE = "LARGE",
+    /** Fills the viewport less 32px on each side. */
+    X_LARGE = "X_LARGE"
+}
+/** Every Modal prop except the name pair (`header` / `ariaLabel`). */
+interface ModalBaseProps extends AriaAttributes {
+    /** The body. It scrolls when the panel reaches the viewport height. A string or number renders as `Text`. */
+    children?: ReactNode;
+    /** The actions row, end-aligned with an 8px gap. Put the least destructive action first. */
+    footer?: ReactNode;
+    /**
+     * Panel width: 400 / 560 / 720px, or `X_LARGE` to fill the viewport less 32px on each side.
+     * @default ModalSize.MEDIUM
+     */
+    size?: ModalSize;
+    /**
+     * Escape, a backdrop click and the close button close the dialog. When `false` there is no close button, and only the app (usually a `footer` action) can close it.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /** Controlled open state. When set, Modal 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 (`role="dialog"`). @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 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. */
+    header: ReactNode;
+    /** Accessible name of the dialog. Required by type when there is no `header`. */
+    ariaLabel?: string;
+}
+/** No title row: the accessible name is required. */
+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;
+    /** Accessible name of the dialog. Required by type when there is no `header`. */
+    ariaLabel: string;
+}
+/** Modal props. Without a `header`, `ariaLabel` is required by the type. */
+export type ModalProps = ModalBaseProps & (ModalTitledProps | ModalUntitledProps);
+/** A blocking dialog over a dimmed page: title row, scrolling body, actions row. */
+declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/modal/Modal.js

@@ -1,58 +1,199 @@
-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 Text, { TextSize, TextWeight } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Portal from "../layout/Portal.js";
+import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import { OverlayNode } from "../overlay/OverlayProvider.js";
+import ScaleFade from "../transform/ScaleFade.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.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, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { XIcon } from "@phosphor-icons/react";
 //#region src/modal/Modal.tsx
-var _exp = () => ({ isOpen }) => isOpen ? 1 : 0;
-var _exp2 = () => ({ isOpen }) => isOpen ? "visible" : "hidden";
-var StyledModalWrapper = /*#__PURE__*/ styled("div")({
-	name: "StyledModalWrapper",
-	class: "sepkv8n",
-	propsAsIs: false,
-	vars: {
-		"sepkv8n-0": [_exp()],
-		"sepkv8n-1": [_exp2()]
-	}
+/**
+* The blocking dialog: a centered panel over a dimmed page holding one task the user must finish
+* 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.
+*
+* A short yes/no question is `ConfirmDialog`; a panel beside the page is `Drawer`; an anchored
+* panel is `Popover`.
+*
+* SSR: nothing renders on the server (closed by default, and `Portal` renders nothing there). The
+* scroll lock is CSS keyed on the backdrop; nothing touches `window` or `document` at module scope.
+*/
+/** Panel width. Canonical rung names (Constitution V); the values are widths, not control heights. */
+var ModalSize = /* @__PURE__ */ function(ModalSize) {
+	/** 400px: a question or a notice (`ConfirmDialog`). */
+	ModalSize["SMALL"] = "SMALL";
+	/** 560px: a short form. The default. */
+	ModalSize["MEDIUM"] = "MEDIUM";
+	/** 720px: a longer form or a preview. */
+	ModalSize["LARGE"] = "LARGE";
+	/** Fills the viewport less 32px on each side. */
+	ModalSize["X_LARGE"] = "X_LARGE";
+	return ModalSize;
+}({});
+/** The close button's accessible name (fixed English, as Input's "Clear"). */
+var CLOSE_LABEL = "Close";
+/**
+* Scroll lock: while any modal backdrop is mounted (open or exiting) the page does not scroll.
+* `overflow: hidden` on `html` keeps the scroll position; the package reset hides scrollbars, so
+* nothing shifts. Keyed on the backdrop's class, so it ends with the last backdrop.
+*/
+var Backdrop = /*#__PURE__*/ styled("div")({
+	name: "Backdrop",
+	class: "gx-Modal-Backdrop-bepkv8n",
+	propsAsIs: false
 });
-var ModalWrapperContent = /*#__PURE__*/ styled("div")({
-	name: "ModalWrapperContent",
-	class: "m1l9qfn",
+/** The backdrop's Fade root: positioned just under the panel. Sets no opacity or visibility. */
+var BACKDROP_FRAME_CSS = "gx-Modal-BACKDROP_FRAME_CSS-b1jgo9vf";
+/** Centers the panel; passes clicks around it through to the backdrop. */
+var Positioner = /*#__PURE__*/ styled("div")({
+	name: "Positioner",
+	class: "gx-Modal-Positioner-ptpk8hn",
 	propsAsIs: false
 });
-var ModalContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "ModalContentWrapper",
-	class: "m1jgo9vf",
+/** The panel's ScaleFade 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",
+	["MEDIUM"]: "gx-Modal-MEDIUM-mh1vj51",
+	["LARGE"]: "gx-Modal-LARGE-l1th1b6t",
+	["X_LARGE"]: "gx-Modal-X_LARGE-x1s4ejyc"
+};
+var FOCUS_SCOPE_CSS = "gx-Modal-FOCUS_SCOPE_CSS-f69bx3r";
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-Modal-Panel-p14wx16q",
 	propsAsIs: false
 });
-/**
-* A centered dialog 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.
-*/
-var Modal = ({ open, onClose, children }) => {
-	const { zIndex, isTopmost } = useOverlay(onClose, open, { layer: OverlayLayer.MODAL });
-	const handleContentClick = useCallback((e) => {
-		e.stopPropagation();
-	}, []);
-	const dismissRef = useDismiss({
-		onDismiss: onClose,
-		enabled: open && isTopmost,
-		enableClickOutside: 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",
+	propsAsIs: false
+});
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Modal-Footer-f1aye683",
+	propsAsIs: false
+});
+var CloseSlot = /*#__PURE__*/ styled("span")({
+	name: "CloseSlot",
+	class: "gx-Modal-CloseSlot-c1uq3md9",
+	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) {
+	const generatedId = useId();
+	const titleId = useId();
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
 	});
-	return createPortal(open && /* @__PURE__ */ jsx(StyledModalWrapper, {
-		isOpen: open,
-		style: { zIndex },
-		children: /* @__PURE__ */ jsx(ModalWrapperContent, { children: /* @__PURE__ */ jsx(ModalContentWrapper, {
-			ref: dismissRef,
-			onClick: handleContentClick,
-			children
-		}) })
-	}), document.body);
-};
+	const close = () => setOpen(false);
+	const { zIndex, isTopmost, overlayId } = useOverlay({
+		isOpen,
+		layer: OverlayLayer.MODAL,
+		onEscape: isDismissable ? close : void 0
+	});
+	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 modal 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();
+	};
+	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 zStyle = { "--gx-modal-z": zIndex };
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(OverlayNode, {
+		overlayId,
+		children: [/* @__PURE__ */ jsx(Fade, {
+			isOpen,
+			shouldAnimateOnMount,
+			className: BACKDROP_FRAME_CSS,
+			style: zStyle,
+			children: /* @__PURE__ */ jsx(Backdrop, {
+				"aria-hidden": true,
+				onPointerDown: handleBackdropPointerDown,
+				onClick: handleBackdropClick
+			})
+		}), /* @__PURE__ */ jsx(Positioner, {
+			style: zStyle,
+			children: /* @__PURE__ */ jsx(ScaleFade, {
+				isOpen,
+				shouldAnimateOnMount,
+				className: cx(FRAME_CSS, MODAL_SIZE_TO_CSS_MAP[size]),
+				children: /* @__PURE__ */ jsx(FocusScope, {
+					autoFocus: FocusScopeAutoFocus.FIRST,
+					className: FOCUS_SCOPE_CSS,
+					children: /* @__PURE__ */ jsxs(Panel, {
+						...rest,
+						...labelling,
+						ref,
+						id: id ?? generatedId,
+						role: "dialog",
+						"aria-modal": "true",
+						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
+							}),
+							/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
+							footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),
+							isDismissable && /* @__PURE__ */ jsx(CloseSlot, { children: /* @__PURE__ */ jsx(Button, {
+								variant: ButtonVariant.TERTIARY,
+								size: ButtonSize.SMALL,
+								icon: XIcon,
+								ariaLabel: CLOSE_LABEL,
+								onClick: close
+							}) })
+						]
+					})
+				})
+			})
+		})]
+	}) });
+});
+Modal.displayName = "Modal";
 //#endregion
-export { Modal as default };
+export { ModalSize, Modal as default };

package/dist/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,65 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ElementType } from "react";
+/** Canonical rungs, subset; only the text step applies (a crumb has no control height). */
+export declare enum BreadcrumbsSize {
+    /** body_sm crumbs (12 / 16), 12px icons. Topbars and dense headers. */
+    SMALL = "SMALL",
+    /** body_md crumbs (13 / 16), 14px icons. The default. */
+    MEDIUM = "MEDIUM"
+}
+/** The mark drawn between crumbs. */
+export declare enum BreadcrumbsSeparator {
+    /** A "/" in tertiary text. The default. */
+    SLASH = "SLASH",
+    /** A `CaretRightIcon` in the tertiary icon color. */
+    CARET = "CARET"
+}
+/** One crumb. */
+export interface BreadcrumbItem {
+    /** Crumb text (a workspace, project or page name). Truncates when the trail is too wide. */
+    label: string;
+    /** Destination. Without it, a non-current crumb is plain text (a level with no page of its own). Ignored on the last item. */
+    href?: string;
+    /** Phosphor icon component before the label (`FolderIcon`, not `<FolderIcon />`). */
+    icon?: PhosphorIcon;
+}
+export interface BreadcrumbsProps extends AriaAttributes {
+    /** The trail from the top level down. The last item is the current page. */
+    items: BreadcrumbItem[];
+    /**
+     * The mark between crumbs: a slash or a right caret.
+     * @default BreadcrumbsSeparator.SLASH
+     */
+    separator?: BreadcrumbsSeparator;
+    /**
+     * Most crumbs shown before the middle collapses into a "…" menu: the first crumb, "…", then the last `maxItems − 2`. Values below 3 count as 3; `Infinity` never collapses.
+     * @default 4
+     */
+    maxItems?: number;
+    /**
+     * Text step: `SMALL` is `body_sm`, `MEDIUM` is `body_md`.
+     * @default BreadcrumbsSize.MEDIUM
+     */
+    size?: BreadcrumbsSize;
+    /**
+     * Router link component that renders every crumb link (and the overflow menu's links). It receives `href` and must forward its `ref`.
+     * @default "a"
+     */
+    as?: ElementType;
+    /**
+     * Accessible name of the `nav` landmark.
+     * @default Breadcrumb
+     */
+    ariaLabel?: string;
+    /** DOM id of the `nav`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `nav`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `nav`. */
+    className?: string;
+    /** Inline style on the `nav`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A trail of links up the app's hierarchy, ending at the current page. */
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLElement>>;
+export default Breadcrumbs;