@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/widget/Widget.js

@@ -1,117 +1,356 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Divider from "../layout/Divider.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import IconSlot from "../icons/internal/IconSlot.js";
+import Rotate from "../transform/Rotate.js";
+import Spinner, { SpinnerVariant } from "../feedback/Spinner.js";
+import CollapseMotion from "../transform/internal/CollapseMotion.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
+import { createContext, forwardRef, useContext, useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 import { match } from "ts-pattern";
-import { jsx } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
 //#region src/widget/Widget.tsx
-/** Surface treatment — how much the card separates from the page behind it. */
+/**
+* The card: a hairline-bordered, rounded surface that groups related content. Every region is
+* optional around the body: a header row (a title, an optional subheader and leading icon, and
+* `actions` at the end) and a footer row, separated from the body by hairline `Divider`s that
+* appear only between two rendered regions. One component covers four header cases:
+*
+* - no `header`: the body alone (the 1.x card);
+* - a static `header`: a titled card;
+* - `isCollapsible`: the header is one stretched `<button>` (`aria-expanded`, `aria-controls`, named
+*   by the title, described by the subheader) that folds the body and footer away with an
+*   animated height (instant under reduced motion), with a turning caret; the folded content is a named region and leaves the tab
+*   order while closed;
+* - `isCollapsible hasCaret={false}`: the same disclosure without the caret.
+*
+* It can also show a loading body (`isLoading`, a centered `Spinner`), be one click target
+* (`isInteractive` with `onClick`: a childless `<button>` stretched under the content, so nothing
+* nests inside a button) and show a chosen state (`isSelected`, a `text.primary` hairline). The
+* fill comes from the surface set; `size` sets the header, footer and body density.
+*
+* Collapsible Widgets that coordinate (one open at a time, arrow keys between headers) are wrapped
+* in `WidgetGroup`, which owns their open state through the context exported here. A plain surface
+* with no border, regions or states is a `Box`; a status message is an `Alert`.
+*/
+/** Card fill (Constitution V-A surface set). */
 var WidgetVariant = /* @__PURE__ */ function(WidgetVariant) {
+	/** `background.base`. */
 	WidgetVariant["BASE"] = "BASE";
+	/** `background.primary`. The default (1.x default). */
 	WidgetVariant["PRIMARY"] = "PRIMARY";
-	WidgetVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	/** `background.secondary`. */
 	WidgetVariant["SECONDARY"] = "SECONDARY";
-	WidgetVariant["SECONDARY_ALT"] = "SECONDARY_ALT";
+	/** `background.tertiary`. */
 	WidgetVariant["TERTIARY"] = "TERTIARY";
-	WidgetVariant["TERTIARY_ALT"] = "TERTIARY_ALT";
-	WidgetVariant["SUCCESS"] = "SUCCESS";
-	WidgetVariant["ERROR"] = "ERROR";
-	WidgetVariant["WARNING"] = "WARNING";
-	WidgetVariant["DISABLED"] = "DISABLED";
-	WidgetVariant["BLUE"] = "BLUE";
-	WidgetVariant["LIME"] = "LIME";
-	WidgetVariant["TEAL"] = "TEAL";
-	WidgetVariant["YELLOW"] = "YELLOW";
-	WidgetVariant["ORANGE"] = "ORANGE";
-	WidgetVariant["PURPLE"] = "PURPLE";
-	WidgetVariant["PINK"] = "PINK";
 	return WidgetVariant;
 }({});
-var _exp = () => ({ theme, $variant }) => {
-	return match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("SECONDARY_ALT", () => theme.color.background.secondaryAlt).with("TERTIARY", () => theme.color.background.tertiary).with("TERTIARY_ALT", () => theme.color.background.tertiaryAlt).with("SUCCESS", () => theme.color.background.success).with("WARNING", () => theme.color.background.warning).with("ERROR", () => theme.color.background.error).with("DISABLED", () => theme.color.background.disabled).with("BLUE", () => theme.color.background.blue).with("LIME", () => theme.color.background.lime).with("TEAL", () => theme.color.background.teal).with("YELLOW", () => theme.color.background.yellow).with("ORANGE", () => theme.color.background.orange).with("PURPLE", () => theme.color.background.purple).with("PINK", () => theme.color.background.pink).exhaustive();
-};
-var _exp2 = () => ({ theme, $noBorder, $isSelected, $variant }) => {
-	if ($noBorder) return "transparent";
-	if ($isSelected) return theme.color.border.selected;
-	return match($variant).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.selected).with("SECONDARY", () => theme.color.border.primary).with("SECONDARY_ALT", () => theme.color.border.selected).with("TERTIARY", () => theme.color.border.primary).with("TERTIARY_ALT", () => theme.color.border.selected).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).with("BLUE", () => theme.color.border.blue).with("LIME", () => theme.color.border.lime).with("TEAL", () => theme.color.border.teal).with("YELLOW", () => theme.color.border.yellow).with("ORANGE", () => theme.color.border.orange).with("PURPLE", () => theme.color.border.purple).with("PINK", () => theme.color.border.pink).exhaustive();
-};
-var _exp3 = () => ({ $padding, $noPadding }) => $padding ?? ($noPadding ? "0" : "12px");
-var _exp4 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp5 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
-var _exp6 = () => ({ $minWidth }) => {
-	if ($minWidth === void 0) return "auto";
-	return getCssSizeValue($minWidth);
-};
-var _exp7 = () => ({ $maxWidth }) => {
-	if ($maxWidth === void 0) return "auto";
-	return getCssSizeValue($maxWidth);
+/** Header, footer and body density; canonical rungs `SMALL MEDIUM LARGE` (the 1.x Accordion members). */
+var WidgetSize = /* @__PURE__ */ function(WidgetSize) {
+	/** 32px header and footer rows, 8px body inset and gap, `body_sm` title, `caption` subheader, 13px icon. */
+	WidgetSize["SMALL"] = "SMALL";
+	/** 40px header and footer rows, 12px body inset and gap, `body_md` title, `body_sm` subheader, 15px icon. The default. */
+	WidgetSize["MEDIUM"] = "MEDIUM";
+	/** 48px header and footer rows, 16px body inset and gap, `body_lg` title, `body_md` subheader, 15px icon. */
+	WidgetSize["LARGE"] = "LARGE";
+	return WidgetSize;
+}({});
+/**
+* Plumbing between `WidgetGroup` and its collapsible `Widget`s. `null` outside a group and inside a
+* Widget's body, so nested Widgets are standalone.
+* @internal
+*/
+var WidgetGroupContext = createContext(null);
+/** The stretched, childless card button of an interactive card (declared first: `INTERACTIVE_CSS` selects it). */
+var HitTarget = /*#__PURE__*/ styled("button")({
+	name: "HitTarget",
+	class: "gx-Widget-HitTarget-hx1o0cd",
+	propsAsIs: false
+});
+/** The card: hairline, `radius.lg`, a column of regions. No clip, so focus rings show in full. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Widget-r18wxf9x",
+	propsAsIs: false
+});
+/** The header row: icon, titles, actions and caret, over the stretched header button. */
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-Widget-Header-h569d4k",
+	propsAsIs: false
+});
+/** The stretched, childless header button of a collapsible card: one target for the whole row. */
+var HeaderToggle = /*#__PURE__*/ styled("button")({
+	name: "HeaderToggle",
+	class: "gx-Widget-HeaderToggle-hci64f9",
+	propsAsIs: false
+});
+/** Title over subheader; takes the free width and wraps. */
+var Titles = /*#__PURE__*/ styled("div")({
+	name: "Titles",
+	class: "gx-Widget-Titles-t2het6w",
+	propsAsIs: false
+});
+/** A node title: its own row of content. */
+var TitleNode = /*#__PURE__*/ styled("div")({
+	name: "TitleNode",
+	class: "gx-Widget-TitleNode-t1cuwt7c",
+	propsAsIs: false
+});
+/** The header's end slot, above both stretched buttons and pointer-reachable. */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-Widget-Actions-a1oiu5i6",
+	propsAsIs: false
+});
+/** The folded content of a collapsible card: a named region, a column like the card. */
+var Panel = /*#__PURE__*/ styled("section")({
+	name: "Panel",
+	class: "gx-Widget-Panel-p1u3h98q",
+	propsAsIs: false
+});
+/** The body region: a column of the children. */
+var Body = /*#__PURE__*/ styled("div")({
+	name: "Body",
+	class: "gx-Widget-Body-b1t0k6w8",
+	propsAsIs: false
+});
+/** The loading body: a centered spinner with a 24px inset, even when flush. */
+var Loading = /*#__PURE__*/ styled("div")({
+	name: "Loading",
+	class: "gx-Widget-Loading-l13kd2xw",
+	propsAsIs: false
+});
+/** The footer row: start-aligned content. */
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Widget-Footer-f1ltvlgq",
+	propsAsIs: false
+});
+var WIDGET_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-Widget-BASE-b1yp190m",
+	["PRIMARY"]: "gx-Widget-PRIMARY-p1365057",
+	["SECONDARY"]: "gx-Widget-SECONDARY-s1f3h6ms",
+	["TERTIARY"]: "gx-Widget-TERTIARY-t1c1upfe"
 };
-var _exp8 = () => ({ $minHeight }) => {
-	if ($minHeight === void 0) return "auto";
-	return getCssSizeValue($minHeight);
+/** Header and footer rows: inset and minimum height (a control rung plus the block inset). */
+var WIDGET_SIZE_TO_ROW_CSS_MAP = {
+	["SMALL"]: "gx-Widget-SMALL-s14rp7e3",
+	["MEDIUM"]: "gx-Widget-MEDIUM-m14youd7",
+	["LARGE"]: "gx-Widget-LARGE-lmk1xrm"
 };
-var _exp9 = () => ({ $maxHeight }) => {
-	if ($maxHeight === void 0) return "auto";
-	return getCssSizeValue($maxHeight);
+/** Body inset and gap. */
+var WIDGET_SIZE_TO_BODY_CSS_MAP = {
+	["SMALL"]: "gx-Widget-SMALL-s1qcxaeu",
+	["MEDIUM"]: "gx-Widget-MEDIUM-m1niqf43",
+	["LARGE"]: "gx-Widget-LARGE-l1wi0lfv"
 };
-var _exp0 = () => ({ $variant }) => {
-	if ($variant === "DISABLED") return .5;
-	return 1;
+var WIDGET_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
 };
-var _exp1 = () => ({ $isClickable, $variant }) => {
-	if ($variant === "ERROR") return "not-allowed";
-	if ($isClickable) return "pointer";
-	return "inherit";
+var WIDGET_SIZE_TO_SUBHEADER_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_MD
 };
-var _exp10 = () => ({ theme, $noHover, $isSelected, $isClickable, $variant }) => {
-	if (!$isClickable) return match($variant).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.selected).with("SECONDARY", () => theme.color.border.primary).with("SECONDARY_ALT", () => theme.color.border.selected).with("TERTIARY", () => theme.color.border.primary).with("TERTIARY_ALT", () => theme.color.border.selected).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).with("BLUE", () => theme.color.border.blue).with("LIME", () => theme.color.border.lime).with("TEAL", () => theme.color.border.teal).with("YELLOW", () => theme.color.border.yellow).with("ORANGE", () => theme.color.border.orange).with("PURPLE", () => theme.color.border.purple).with("PINK", () => theme.color.border.pink).exhaustive();
-	return match($variant).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).otherwise(() => {
-		if ($isSelected) return theme.color.border.selected;
-		if ($noHover) return theme.color.border.primary;
-		return theme.color.border.secondary;
-	});
+/**
+* Leading icon px per rung: 13 / 15 / 15, Button's icons at the matching rungs (Mitch,
+* 2026-10-05). Odd, so the icon sits in an `IconSlot` (whole pixels at 1x, centered at 2x).
+*/
+var WIDGET_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 13,
+	["MEDIUM"]: 15,
+	["LARGE"]: 15
 };
-var StyledWidget = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledWidget",
-	class: "sx1o0cd",
-	propsAsIs: false,
-	vars: {
-		"sx1o0cd-0": [_exp()],
-		"sx1o0cd-1": [_exp2()],
-		"sx1o0cd-2": [_exp3()],
-		"sx1o0cd-3": [_exp4()],
-		"sx1o0cd-4": [_exp5()],
-		"sx1o0cd-5": [_exp6()],
-		"sx1o0cd-6": [_exp7()],
-		"sx1o0cd-7": [_exp8()],
-		"sx1o0cd-8": [_exp9()],
-		"sx1o0cd-9": [_exp0()],
-		"sx1o0cd-10": [_exp1()],
-		"sx1o0cd-11": [_exp10()]
-	}
-}));
+/** A collapsible card: `border.secondary` on hover (one step stronger, 1.x Accordion). */
+var COLLAPSIBLE_CSS = "gx-Widget-COLLAPSIBLE_CSS-c1993nui";
+/** An open collapsible card keeps the stronger border at rest. */
+var OPEN_CSS = "gx-Widget-OPEN_CSS-osd319a";
 /**
-* The card primitive — a bordered, padded surface that groups related content.
-* Hairline border, no shadow. Compose the inside with `FlexWrapper`.
+* An interactive card: pointer, hover border, and the content regions lifted above the card
+* button with presses passing through them (`Actions` and `HeaderToggle` take theirs back).
 */
-var Widget = ({ children, minHeight, maxHeight, minWidth, maxWidth, fillWidth, fillHeight, padding, noPadding, noHover, noBorder, isSelected, variant = "PRIMARY", onClick }) => {
-	return /* @__PURE__ */ jsx(StyledWidget, {
-		$minWidth: minWidth,
-		$maxWidth: maxWidth,
-		$minHeight: minHeight,
-		$maxHeight: maxHeight,
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		$padding: padding,
-		$noPadding: noPadding,
-		$noHover: noHover,
-		$noBorder: noBorder,
-		$isSelected: isSelected,
-		$variant: variant,
-		$isClickable: !!onClick,
-		onClick,
-		children
+var INTERACTIVE_CSS = "gx-Widget-INTERACTIVE_CSS-i11hrzgx";
+/** Disabled (and not open): the hover border and pointer are cancelled. */
+var DISABLED_CSS = "gx-Widget-DISABLED_CSS-d27d11a";
+/** Chosen: a `text.primary` hairline, also on hover (declared after the hover states, so it wins). */
+var SELECTED_CSS = "gx-Widget-SELECTED_CSS-s13jeom8";
+/** `isFlush`: no body inset (the gap stays); the body clips its content inside the corners it shares. */
+var FLUSH_CSS = "gx-Widget-FLUSH_CSS-f18mgbxd";
+/** A flush body with no header row above it rounds the card's top corners. */
+var FLUSH_TOP_CORNERS_CSS = "gx-Widget-FLUSH_TOP_CORNERS_CSS-f1djym4t";
+/** A flush body with no footer under it rounds the card's bottom corners. */
+var FLUSH_BOTTOM_CORNERS_CSS = "gx-Widget-FLUSH_BOTTOM_CORNERS_CSS-fln5c1k";
+/** The caret lies over the header button (Rotate's transform paints it above); presses pass through. */
+var CARET_CSS = "gx-Widget-CARET_CSS-c190r628";
+/** The caret glyph size at every rung (1.x Accordion). */
+var CARET_PX = 12;
+/** A static or open header reads at full strength, a closed one a step down, a disabled one dims. */
+var headerColors = (isOpen, isDisabled) => match({
+	isOpen,
+	isDisabled
+}).with({ isDisabled: true }, () => ({
+	title: TextVariant.DISABLED,
+	subheader: TextVariant.DISABLED,
+	icon: IconVariant.DISABLED
+})).with({
+	isDisabled: false,
+	isOpen: true
+}, () => ({
+	title: TextVariant.PRIMARY,
+	subheader: TextVariant.SECONDARY,
+	icon: IconVariant.PRIMARY
+})).with({
+	isDisabled: false,
+	isOpen: false
+}, () => ({
+	title: TextVariant.SECONDARY,
+	subheader: TextVariant.TERTIARY,
+	icon: IconVariant.SECONDARY
+})).exhaustive();
+/** Whether a slot has something to render. */
+var hasContent = (node) => node !== void 0 && node !== null && node !== false;
+/** A card: a bordered surface with an optional (collapsible) header, actions, footer and states. */
+var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size = "MEDIUM", header, subheader, icon, actions, footer, isFlush = false, isCollapsible = false, hasCaret = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, isLoading = false, isSelected, isInteractive = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+	const baseId = useId();
+	const rootId = id ?? baseId;
+	const titleId = `${baseId}-title`;
+	const subheaderId = `${baseId}-subheader`;
+	const bodyId = `${baseId}-body`;
+	const panelId = `${baseId}-panel`;
+	const toggleRef = useRef(null);
+	const group = useContext(WidgetGroupContext);
+	const isGrouped = group !== null && isCollapsible;
+	const own = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
 	});
-};
+	const isOpen = !isCollapsible || (isGrouped ? group.openIds.includes(rootId) : own.isOpen);
+	const registerToggle = isGrouped ? group.registerToggle : void 0;
+	useEffect(() => {
+		if (registerToggle === void 0) return;
+		registerToggle(toggleRef.current, rootId);
+		return () => registerToggle(null, rootId);
+	}, [registerToggle, rootId]);
+	const handleToggle = () => {
+		const next = !isOpen;
+		if (!isGrouped) {
+			own.setOpen(next);
+			return;
+		}
+		group.setItemOpen(rootId, next);
+		onOpenChange?.(next);
+	};
+	const hasHeader = hasContent(header);
+	const hasActions = hasContent(actions);
+	const hasHeaderRow = hasHeader || hasActions;
+	const hasFooter = hasContent(footer);
+	const hasSubheader = hasHeader && Boolean(subheader);
+	const hasAriaLabel = ariaLabel !== void 0 && ariaLabel !== "";
+	const colors = headerColors(isOpen, isDisabled);
+	const regions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hasHeaderRow && /* @__PURE__ */ jsx(Divider, {}),
+		/* @__PURE__ */ jsx(Body, {
+			id: bodyId,
+			className: cx(WIDGET_SIZE_TO_BODY_CSS_MAP[size], isFlush && FLUSH_CSS, isFlush && !hasHeaderRow && FLUSH_TOP_CORNERS_CSS, isFlush && !hasFooter && FLUSH_BOTTOM_CORNERS_CSS),
+			children: isLoading ? /* @__PURE__ */ jsx(Loading, { children: /* @__PURE__ */ jsx(Spinner, {
+				variant: SpinnerVariant.SECONDARY,
+				ariaLabel: "Loading"
+			}) }) : children
+		}),
+		hasFooter && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Footer, {
+			className: WIDGET_SIZE_TO_ROW_CSS_MAP[size],
+			children: footer
+		})] })
+	] });
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id: rootId,
+		"aria-busy": isLoading ? true : rest["aria-busy"],
+		className: cx(WIDGET_VARIANT_TO_CSS_MAP[variant], isCollapsible && COLLAPSIBLE_CSS, isCollapsible && isOpen && OPEN_CSS, isInteractive && INTERACTIVE_CSS, isDisabled && !(isCollapsible && isOpen) && DISABLED_CSS, isSelected === true && SELECTED_CSS, className),
+		style,
+		children: [
+			isInteractive && /* @__PURE__ */ jsx(HitTarget, {
+				type: "button",
+				onClick,
+				disabled: isDisabled,
+				"aria-pressed": isSelected,
+				"aria-label": hasAriaLabel ? ariaLabel : void 0,
+				"aria-labelledby": hasAriaLabel ? void 0 : hasHeader ? titleId : bodyId
+			}),
+			hasHeaderRow && /* @__PURE__ */ jsxs(Header, {
+				className: WIDGET_SIZE_TO_ROW_CSS_MAP[size],
+				children: [
+					isCollapsible && /* @__PURE__ */ jsx(HeaderToggle, {
+						ref: toggleRef,
+						type: "button",
+						"aria-expanded": isOpen,
+						"aria-controls": isOpen ? panelId : void 0,
+						"aria-labelledby": titleId,
+						"aria-describedby": hasSubheader ? subheaderId : void 0,
+						disabled: isDisabled,
+						onClick: handleToggle
+					}),
+					hasHeader && icon !== void 0 && /* @__PURE__ */ jsx(IconSlot, {
+						px: WIDGET_SIZE_TO_ICON_PX_MAP[size],
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: icon,
+							size: WIDGET_SIZE_TO_ICON_PX_MAP[size],
+							variant: colors.icon
+						})
+					}),
+					/* @__PURE__ */ jsxs(Titles, { children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						id: titleId,
+						size: WIDGET_SIZE_TO_TEXT_SIZE_MAP[size],
+						weight: TextWeight.MEDIUM,
+						variant: colors.title,
+						children: header
+					}) : hasHeader && /* @__PURE__ */ jsx(TitleNode, {
+						id: titleId,
+						children: header
+					}), hasSubheader && /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						id: subheaderId,
+						size: WIDGET_SIZE_TO_SUBHEADER_TEXT_SIZE_MAP[size],
+						variant: colors.subheader,
+						children: subheader
+					})] }),
+					hasActions && /* @__PURE__ */ jsx(Actions, { children: actions }),
+					isCollapsible && hasCaret && /* @__PURE__ */ jsx(Rotate, {
+						isRotated: isOpen,
+						deg: -180,
+						className: CARET_CSS,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: CaretDownIcon,
+							size: CARET_PX,
+							variant: colors.icon
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(WidgetGroupContext.Provider, {
+				value: null,
+				children: isCollapsible ? /* @__PURE__ */ jsx(CollapseMotion, {
+					isOpen,
+					children: /* @__PURE__ */ jsx(Panel, {
+						id: panelId,
+						"aria-labelledby": titleId,
+						children: regions
+					})
+				}) : regions
+			})
+		]
+	});
+});
+Widget.displayName = "Widget";
 //#endregion
-export { WidgetVariant, Widget as default };
+export { WidgetGroupContext, WidgetSize, WidgetVariant, Widget as default };

package/dist/widget/WidgetGroup.d.ts

@@ -0,0 +1,36 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface WidgetGroupProps extends AriaAttributes {
+    /**
+     * The collapsible `Widget`s, in order. Other elements may sit between them (a `Text` caption);
+     * only collapsible Widgets take part.
+     */
+    children?: ReactNode;
+    /**
+     * Controlled list of open Widget `id`s. Pass it with `onChange`, and give the Widgets
+     * stable `id`s. In single-open mode only the first id is used.
+     */
+    value?: string[];
+    /**
+     * Initial open `id`s while uncontrolled. In single-open mode only the first is used.
+     * @default []
+     */
+    defaultValue?: string[];
+    /** Called with the next list of open `id`s when a header is pressed. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Lets several Widgets be open at once. Off: opening one closes the others.
+     * @default false
+     */
+    canOpenMultiple?: boolean;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Coordinates collapsible `Widget`s: one open at a time by default, arrow keys between headers. */
+declare const WidgetGroup: import("react").ForwardRefExoticComponent<WidgetGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default WidgetGroup;

package/dist/widget/WidgetGroup.js

@@ -0,0 +1,103 @@
+import { useControlledState } from "../hooks/useControlledState.js";
+import { WidgetGroupContext } from "./Widget.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/widget/WidgetGroup.tsx
+/**
+* Coordinates a stack of collapsible `Widget`s (`isCollapsible`): by default opening one closes the
+* others, and ArrowUp / ArrowDown / Home / End move focus between their headers (the optional keys
+* of the WAI-ARIA accordion pattern); Enter / Space toggle through the header buttons. It owns which
+* Widgets are open as a list of their `id`s
+* (`value` / `defaultValue` / `onChange`) and lays them out as a column with an 8px gap. It draws
+* nothing else: no border, no fill, no dividers.
+*
+* Widgets find the group through `WidgetGroupContext` (exported `@internal` from the Widget
+* module) and register their header buttons; arrow keys follow DOM order, so items may be wrapped
+* or interleaved with other elements. A Widget that is not collapsible takes no part. Widgets that
+* do not need to coordinate are simply stacked in a `Flex`. Replaces the 2.0 pre-release
+* `AccordionGroup`.
+*/
+/** The stack: a column with the 1.x 8px gap. No border, fill, radius or padding. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-WidgetGroup-r4oi007",
+	propsAsIs: false
+});
+/** No ids open. A module constant so the default keeps one identity across renders. */
+var NO_IDS = [];
+/** The keys that move focus between headers. */
+var NAVIGATION_KEYS = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End"
+]);
+/** Orders two elements by their position in the document. */
+var byDocumentOrder = (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+/** Coordinates collapsible `Widget`s: one open at a time by default, arrow keys between headers. */
+var WidgetGroup = forwardRef(function WidgetGroup({ children, value, defaultValue = NO_IDS, onChange, canOpenMultiple = false, id, className, style, ...rest }, ref) {
+	const [storedIds, setOpenIds] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const openIds = useMemo(() => canOpenMultiple ? storedIds : storedIds.slice(0, 1), [canOpenMultiple, storedIds]);
+	const setItemOpen = useCallback((itemId, isOpen) => {
+		if (!canOpenMultiple) {
+			setOpenIds(isOpen ? [itemId] : []);
+			return;
+		}
+		if (isOpen) {
+			setOpenIds(openIds.includes(itemId) ? [...openIds] : [...openIds, itemId]);
+			return;
+		}
+		setOpenIds(openIds.filter((openId) => openId !== itemId));
+	}, [
+		canOpenMultiple,
+		openIds,
+		setOpenIds
+	]);
+	const togglesRef = useRef(/* @__PURE__ */ new Map());
+	const registerToggle = useCallback((element, itemId) => {
+		if (element === null) togglesRef.current.delete(itemId);
+		else togglesRef.current.set(itemId, element);
+	}, []);
+	const context = useMemo(() => ({
+		openIds,
+		setItemOpen,
+		registerToggle
+	}), [
+		openIds,
+		setItemOpen,
+		registerToggle
+	]);
+	const handleKeyDown = (event) => {
+		if (!NAVIGATION_KEYS.has(event.key)) return;
+		const registered = [...togglesRef.current.values()];
+		if (!registered.includes(event.target)) return;
+		const headers = registered.filter((element) => element.isConnected && !element.disabled).sort(byDocumentOrder);
+		if (headers.length === 0) return;
+		const current = headers.indexOf(event.target);
+		const last = headers.length - 1;
+		const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? current === last ? 0 : current + 1 : current <= 0 ? last : current - 1;
+		event.preventDefault();
+		headers[next]?.focus();
+	};
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		onKeyDown: handleKeyDown,
+		children: /* @__PURE__ */ jsx(WidgetGroupContext.Provider, {
+			value: context,
+			children
+		})
+	});
+});
+WidgetGroup.displayName = "WidgetGroup";
+//#endregion
+export { WidgetGroup as default };