@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/icons/Icon.d.ts

@@ -1,7 +1,7 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-import type { Hex } from "../theme/tokens/types.js";
-/** Color role of the icon (color set, Constitution V-A). Resolves to `color.text.*`. */
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
+/** Color role of the icon (AGENTS.md "Variant": color set). Resolves to `color.text.*`. */
 export declare enum IconVariant {
     /** `text.primary`. The default. */
     PRIMARY = "PRIMARY",
@@ -35,7 +35,8 @@ export declare enum IconWeight {
     /** Stroke over a 20% fill. */
     DUOTONE = "DUOTONE"
 }
-export interface IconProps extends AriaAttributes {
+/** Every Icon prop except the color axis (`variant` or `color`). */
+interface IconBaseProps extends AriaAttributes {
     /** Phosphor icon *component*: pass `PlusIcon`, not `<PlusIcon />`. */
     component: PhosphorIcon;
     /**
@@ -48,11 +49,6 @@ export interface IconProps extends AriaAttributes {
      * @default IconWeight.REGULAR
      */
     weight?: IconWeight;
-    /**
-     * Color role. `INHERIT` follows the parent's color (used inside Button).
-     * @default IconVariant.PRIMARY
-     */
-    variant?: IconVariant;
     /** Raw color override that bypasses `variant`. Discouraged: prefer a `variant`. */
     hex?: Hex;
     /** Accessible name. Set it when the icon carries meaning on its own; when absent the icon is `aria-hidden`. */
@@ -73,6 +69,38 @@ export interface IconProps extends AriaAttributes {
     /** Inline style on the `<svg>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
+/** An icon colored by meaning (`variant`), or the default `PRIMARY`. */
+interface IconVariantProps {
+    /**
+     * Color role. `INHERIT` follows the parent's color (used inside Button). Not with `color`.
+     * @default IconVariant.PRIMARY
+     */
+    variant?: IconVariant;
+    /**
+     * Categorical palette family (`"blue"`, `"yellow"`, …) or a status role as a string
+     * (`"success"`): the family's `text.<color>`. For a glyph that names a category the page
+     * already shows (a run status map, a source type); a status that is meaning takes `variant`.
+     * Not with `variant`.
+     */
+    color?: undefined;
+}
+/** An icon colored by category (`color`). */
+interface IconColorProps {
+    /**
+     * Color role. `INHERIT` follows the parent's color (used inside Button). Not with `color`.
+     * @default IconVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"yellow"`, …) or a status role as a string
+     * (`"success"`): the family's `text.<color>`. For a glyph that names a category the page
+     * already shows (a run status map, a source type); a status that is meaning takes `variant`.
+     * Not with `variant`.
+     */
+    color: RoleColor;
+}
+/** Icon props. An icon with both `variant` and `color` is a type error. */
+export type IconProps = IconBaseProps & (IconVariantProps | IconColorProps);
 /** Wraps a Phosphor icon so its color, weight and motion come from the DLS. Never render a Phosphor icon bare. */
 declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default Icon;

package/dist/icons/Icon.js

@@ -1,4 +1,5 @@
 import LazyTooltip from "../tooltip/internal/LazyTooltip.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css               */
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -13,13 +14,17 @@ import { cx } from "@linaria/core";
 * `<PARENT>_SIZE_TO_ICON_PX_MAP` (`BUTTON_SIZE_TO_ICON_PX_MAP`). Parents that own the color
 * (`Button`, `Chip`) pass `IconVariant.INHERIT` so the icon follows their `color`.
 *
+* `color` takes a category (a palette family, or a status name used as data) instead of a
+* meaning: it resolves to `text.<color>` through the shared `--gx-role-*` variables (icons keep
+* `text`, never `mark`), and is exclusive with `variant` by type (the Chip union).
+*
 * `hex` is set as the `--gx-icon-hex` custom property in `style` and read by a block switched on
-* only when the prop is set (the Text pattern).
+* only when the prop is set (the Text pattern). It wins over `variant` and `color`.
 *
 * `tooltip` renders through `LazyTooltip`, so an icon without one never loads `Tooltip` (and
 * floating-ui) into the bundle that draws it.
 */
-/** Color role of the icon (color set, Constitution V-A). Resolves to `color.text.*`. */
+/** Color role of the icon (AGENTS.md "Variant": color set). Resolves to `color.text.*`. */
 var IconVariant = /* @__PURE__ */ function(IconVariant) {
 	/** `text.primary`. The default. */
 	IconVariant["PRIMARY"] = "PRIMARY";
@@ -76,15 +81,17 @@ var ICON_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Icon-WARNING-w1awu5xi",
 	["ERROR"]: "gx-Icon-ERROR-e1ucpgem"
 };
-/** Declared after the variant map so `hex` wins over it. */
-var HEX_CSS = "gx-Icon-HEX_CSS-h8mope0";
+/** Categorical `color`: the family's `text.<color>`, read from the shared role variables. */
+var COLOR_CSS = "gx-Icon-COLOR_CSS-c8mope0";
+/** Declared after the variant map and `COLOR_CSS` so `hex` wins over both. */
+var HEX_CSS = "gx-Icon-HEX_CSS-h1uiuyxj";
 /**
 * One turn every six `duration.base` steps (900ms), linear, forever. The keyframes are global, so
 * the name is `gx-` prefixed. `REDUCED_MOTION` stops it.
 */
-var SPINNING_CSS = "gx-Icon-SPINNING_CSS-s1uiuyxj";
+var SPINNING_CSS = "gx-Icon-SPINNING_CSS-szci2ir";
 /** Wraps a Phosphor icon so its color, weight and motion come from the DLS. Never render a Phosphor icon bare. */
-var Icon = forwardRef(function Icon({ component: PhosphorComponent, size = 16, weight = "REGULAR", variant = "PRIMARY", hex, ariaLabel, tooltip, isSpinning = false, id, className, style, ...rest }, ref) {
+var Icon = forwardRef(function Icon({ component: PhosphorComponent, size = 16, weight = "REGULAR", variant = "PRIMARY", color, hex, ariaLabel, tooltip, isSpinning = false, id, className, style, ...rest }, ref) {
 	const variables = {};
 	if (hex !== void 0) variables["--gx-icon-hex"] = hex;
 	const hasTooltip = tooltip !== void 0 && tooltip !== null && tooltip !== false && tooltip !== "";
@@ -99,7 +106,7 @@ var Icon = forwardRef(function Icon({ component: PhosphorComponent, size = 16, w
 		size,
 		weight: ICON_WEIGHT_TO_PHOSPHOR_WEIGHT_MAP[weight],
 		color: "currentColor",
-		className: cx(ROOT_CSS, ICON_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, isSpinning && SPINNING_CSS, className),
+		className: cx(ROOT_CSS, color === void 0 ? ICON_VARIANT_TO_CSS_MAP[variant] : cx(ROLE_COLOR_TO_CSS_MAP[color], COLOR_CSS), hex !== void 0 && HEX_CSS, isSpinning && SPINNING_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/inputs/CronInput.js

@@ -1,5 +1,5 @@
 import VisuallyHidden from "../a11y/VisuallyHidden.js";
-import { FontFamily, Orientation } from "../theme/enums.js";
+import { FontFamily } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { useControlledState } from "../hooks/useControlledState.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
@@ -20,6 +20,7 @@ import "./internal/innerButton.js";
 import { InputSize, InputVariant } from "./Input.js";
 import { useDedupedOpen, useRestoreFocusAfterOutsidePress, useRetriedFocus } from "./internal/useComboboxPopover.js";
 import TextInput from "./TextInput.js";
+import Widget, { WidgetVariant } from "../widget/Widget.js";
 import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
 import ToggleInput, { ToggleInputSize, ToggleInputVariant } from "./ToggleInput.js";
 /* empty css                    */
@@ -40,6 +41,9 @@ import cronstrue from "cronstrue";
 * and a sentence from `cronstrue` that reads the schedule back ("Runs at 09:00, Monday through
 * Friday."). Expressions the builder cannot represent show as Custom and are edited as text.
 *
+* The builder and the expression are two cards split by an "or" divider, centered beside the
+* presets. The builder card holds the tallest frequency's rows, so the panel keeps one height.
+*
 * The field is a select-only combobox with a dialog popup (`Popover` `MANUAL`, `DIALOG`), like
 * DateInput; CronInput moves focus to the expression field on open, so a schedule can be typed
 * straight away. The value is the expression string; an empty string shows the placeholder.
@@ -118,6 +122,8 @@ var CRON_INPUT_SELECT_WIDTH = 64;
 var CRON_INPUT_FOCUS_RETRY_FRAMES = 10;
 /** The neutral hint shown when `cronstrue` cannot read the expression. */
 var CRON_INPUT_HINT = "Enter five fields: minute, hour, day of month, month, day of week.";
+/** The caption on the divider between the builder and the expression. */
+var CRON_INPUT_DIVIDER_LABEL = "or";
 /** Each builder row's label; the label column is as wide as the longest, whichever rows show. */
 var ROW_LABELS = {
 	frequency: "Frequency",
@@ -360,6 +366,13 @@ var CRON_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP = {
 	["SECONDARY"]: PopoverVariant.SECONDARY,
 	["TERTIARY"]: PopoverVariant.TERTIARY
 };
+/** The builder's cards take the panel's own fill, so they read as hairline frames on it. */
+var POPOVER_VARIANT_TO_WIDGET_VARIANT_MAP = {
+	[PopoverVariant.BASE]: WidgetVariant.BASE,
+	[PopoverVariant.PRIMARY]: WidgetVariant.PRIMARY,
+	[PopoverVariant.SECONDARY]: WidgetVariant.SECONDARY,
+	[PopoverVariant.TERTIARY]: WidgetVariant.TERTIARY
+};
 /** Holds the field box, the trailing parts and the hidden summary. */
 var Wrapper = /*#__PURE__*/ styled("div")({
 	name: "Wrapper",
@@ -465,12 +478,21 @@ var PanelBody = /*#__PURE__*/ styled("div")({
 	class: "gx-CronInput-PanelBody-p11btr9k",
 	propsAsIs: false
 });
-/** The main row: presets, then the builder, 12px in and 12px apart. */
+/**
+* The main row: presets, then the builder, 16px in and 16px apart. Both columns center on the
+* row, so the shorter one sits in the middle of the taller.
+*/
 var PanelMain = /*#__PURE__*/ styled("div")({
 	name: "PanelMain",
 	class: "gx-CronInput-PanelMain-p1az6570",
 	propsAsIs: false
 });
+/** The builder column: the frequency card, the labeled divider and the expression card. */
+var Builder = /*#__PURE__*/ styled("div")({
+	name: "Builder",
+	class: "gx-CronInput-Builder-b1phzlk6",
+	propsAsIs: false
+});
 /**
 * The summary footer: the schedule read back, set apart from the controls that make it. A hairline
 * above and a faint foreground tint, so it reads as the panel's output on every panel fill. It
@@ -478,59 +500,59 @@ var PanelMain = /*#__PURE__*/ styled("div")({
 */
 var Summary = /*#__PURE__*/ styled("div")({
 	name: "Summary",
-	class: "gx-CronInput-Summary-s1phzlk6",
+	class: "gx-CronInput-Summary-su1hduy",
 	propsAsIs: false
 });
 /** Centers the 12px icon on the summary's first 16px line. */
 var SummaryIcon = /*#__PURE__*/ styled("span")({
 	name: "SummaryIcon",
-	class: "gx-CronInput-SummaryIcon-su1hduy",
+	class: "gx-CronInput-SummaryIcon-sryjels",
 	propsAsIs: false
 });
 /** The presets column. */
 var PresetList = /*#__PURE__*/ styled("div")({
 	name: "PresetList",
-	class: "gx-CronInput-PresetList-pryjels",
+	class: "gx-CronInput-PresetList-pm47nq4",
 	propsAsIs: false
 });
 /** One preset. Declared before its state classes. */
 var PresetButton = /*#__PURE__*/ styled("button")({
 	name: "PresetButton",
-	class: "gx-CronInput-PresetButton-pm47nq4",
+	class: "gx-CronInput-PresetButton-pafotm8",
 	propsAsIs: false
 });
 /** The preset whose value is the current expression. */
-var SELECTED_PRESET_CSS = "gx-CronInput-SELECTED_PRESET_CSS-safotm8";
+var SELECTED_PRESET_CSS = "gx-CronInput-SELECTED_PRESET_CSS-s1d29pk4";
 /**
 * Row labels in the first column, controls in the second. Controls keep their own width
 * (`justify-items: start`), so the weekday row never stretches the frequency toggle.
 */
 var Rows = /*#__PURE__*/ styled("div")({
 	name: "Rows",
-	class: "gx-CronInput-Rows-r1d29pk4",
+	class: "gx-CronInput-Rows-r1tt5fyf",
 	propsAsIs: false
 });
 /**
-* The frequency row's label cell: the label and every other row label stacked in one grid area.
-* The hidden ones size the label column, so switching frequency never moves the controls.
+* The frequency card's rows hold the tallest frequency (Weekly and Monthly: three 24px rows), so
+* switching frequency never changes the panel's height or moves the presets.
+*/
+var FREQUENCY_ROWS_CSS = "gx-CronInput-FREQUENCY_ROWS_CSS-f10uqwad";
+/**
+* A card's first label cell: its label and every other row label stacked in one grid area. The
+* hidden ones size the label column, so both cards' controls start on one line and switching
+* frequency never moves them.
 */
 var LabelStack = /*#__PURE__*/ styled("span")({
 	name: "LabelStack",
-	class: "gx-CronInput-LabelStack-l1tt5fyf",
+	class: "gx-CronInput-LabelStack-l1231567",
 	propsAsIs: false
 });
 /** A row label that only sizes the label column: not painted, not announced. */
-var LABEL_SIZER_CSS = "gx-CronInput-LABEL_SIZER_CSS-l10uqwad";
-/** A full-width part of the rows grid (the divider above the expression). */
-var RowSpan = /*#__PURE__*/ styled("div")({
-	name: "RowSpan",
-	class: "gx-CronInput-RowSpan-r1231567",
-	propsAsIs: false
-});
+var LABEL_SIZER_CSS = "gx-CronInput-LABEL_SIZER_CSS-l13n44nx";
 /** Stretches the expression field across the control column. */
 var ExpressionSlot = /*#__PURE__*/ styled("div")({
 	name: "ExpressionSlot",
-	class: "gx-CronInput-ExpressionSlot-e13n44nx",
+	class: "gx-CronInput-ExpressionSlot-e5dtj40",
 	propsAsIs: false
 });
 /** The field, the trailing parts and the schedule panel, wired to the nearest Field. */
@@ -704,13 +726,23 @@ function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
 			numberSelect("time", "minute", MINUTE_OPTIONS, "Minute")
 		]
 	})] });
+	/** A card's first label cell: `row`'s label over hidden sizers for every other row. */
+	const labelCell = (visibleRow) => /* @__PURE__ */ jsxs(LabelStack, { children: [rowLabel(visibleRow), Object.entries(ROW_LABELS).map(([row, text]) => row === visibleRow ? null : /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: TextSize.BODY_SM,
+		className: LABEL_SIZER_CSS,
+		"aria-hidden": true,
+		children: text
+	}, row))] });
 	const hasPresets = presets.length > 0;
 	const normalized = normalize(expression);
+	const panelVariant = isGhost ? PopoverVariant.BASE : CRON_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant];
+	const cardVariant = POPOVER_VARIANT_TO_WIDGET_VARIANT_MAP[panelVariant];
 	const body = /* @__PURE__ */ jsx(FieldContext.Provider, {
 		value: null,
 		children: /* @__PURE__ */ jsxs(PanelBody, {
 			onBlur: handleFocusOut,
-			children: [/* @__PURE__ */ jsxs(PanelMain, { children: [hasPresets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PresetList, {
+			children: [/* @__PURE__ */ jsxs(PanelMain, { children: [hasPresets && /* @__PURE__ */ jsx(PresetList, {
 				role: "group",
 				"aria-label": "Presets",
 				children: presets.map((preset) => {
@@ -731,64 +763,68 @@ function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
 						})
 					}, preset.label);
 				})
-			}), /* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL })] }), /* @__PURE__ */ jsxs(Rows, { children: [
-				/* @__PURE__ */ jsxs(LabelStack, { children: [rowLabel("frequency"), Object.entries(ROW_LABELS).map(([row, text]) => row === "frequency" ? null : /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					size: TextSize.BODY_SM,
-					className: LABEL_SIZER_CSS,
-					"aria-hidden": true,
-					children: text
-				}, row))] }),
-				/* @__PURE__ */ jsx(ToggleInput, {
-					options: FREQUENCY_OPTIONS,
-					value: frequency,
-					onChange: changeFrequency,
-					size: ToggleInputSize.SMALL,
-					variant: ToggleInputVariant.SECONDARY,
-					"aria-labelledby": rowLabelId("frequency")
+			}), /* @__PURE__ */ jsxs(Builder, { children: [
+				/* @__PURE__ */ jsx(Widget, {
+					variant: cardVariant,
+					children: /* @__PURE__ */ jsxs(Rows, {
+						className: FREQUENCY_ROWS_CSS,
+						children: [
+							labelCell("frequency"),
+							/* @__PURE__ */ jsx(ToggleInput, {
+								options: FREQUENCY_OPTIONS,
+								value: frequency,
+								onChange: changeFrequency,
+								size: ToggleInputSize.SMALL,
+								variant: ToggleInputVariant.SECONDARY,
+								"aria-labelledby": rowLabelId("frequency")
+							}),
+							frequency === "HOURLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("minute"), numberSelect("minute", "minute", MINUTE_OPTIONS)] }),
+							frequency === "DAILY" && timeRow,
+							frequency === "WEEKLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								rowLabel("weekdays"),
+								/* @__PURE__ */ jsx(ButtonGroup, {
+									isAttached: true,
+									"aria-labelledby": rowLabelId("weekdays"),
+									children: WEEKDAYS.map(({ day, label, name }) => /* @__PURE__ */ jsx(Button, {
+										variant: ButtonVariant.SECONDARY,
+										size: ButtonSize.SMALL,
+										label,
+										ariaLabel: name,
+										isActive: parts.weekdays.includes(day),
+										onClick: () => toggleWeekday(day)
+									}, day))
+								}),
+								timeRow
+							] }),
+							frequency === "MONTHLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								rowLabel("day"),
+								numberSelect("day", "dayOfMonth", DAY_OF_MONTH_OPTIONS),
+								timeRow
+							] })
+						]
+					})
 				}),
-				frequency === "HOURLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("minute"), numberSelect("minute", "minute", MINUTE_OPTIONS)] }),
-				frequency === "DAILY" && timeRow,
-				frequency === "WEEKLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					rowLabel("weekdays"),
-					/* @__PURE__ */ jsx(ButtonGroup, {
-						isAttached: true,
-						"aria-labelledby": rowLabelId("weekdays"),
-						children: WEEKDAYS.map(({ day, label, name }) => /* @__PURE__ */ jsx(Button, {
-							variant: ButtonVariant.SECONDARY,
-							size: ButtonSize.SMALL,
-							label,
-							ariaLabel: name,
-							isActive: parts.weekdays.includes(day),
-							onClick: () => toggleWeekday(day)
-						}, day))
-					}),
-					timeRow
-				] }),
-				frequency === "MONTHLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					rowLabel("day"),
-					numberSelect("day", "dayOfMonth", DAY_OF_MONTH_OPTIONS),
-					timeRow
-				] }),
-				/* @__PURE__ */ jsx(RowSpan, { children: /* @__PURE__ */ jsx(Divider, {}) }),
-				rowLabel("expression"),
-				/* @__PURE__ */ jsx(ExpressionSlot, { children: /* @__PURE__ */ jsx(TextInput, {
-					id: expressionId,
-					"aria-labelledby": rowLabelId("expression"),
-					"aria-describedby": `${panelId}-sentence`,
-					family: FontFamily.MONO,
-					placeholder: "*/15 * * * *",
-					spellCheck: false,
-					value: expression,
-					onChange: (next) => {
-						if (isEditable) commit(next);
-					},
-					onEnter: close,
-					size: InputSize.SMALL,
-					variant: InputVariant.SECONDARY,
-					isError: isInvalid,
-					fillWidth: true
-				}) })
+				/* @__PURE__ */ jsx(Divider, { label: CRON_INPUT_DIVIDER_LABEL }),
+				/* @__PURE__ */ jsx(Widget, {
+					variant: cardVariant,
+					children: /* @__PURE__ */ jsxs(Rows, { children: [labelCell("expression"), /* @__PURE__ */ jsx(ExpressionSlot, { children: /* @__PURE__ */ jsx(TextInput, {
+						id: expressionId,
+						"aria-labelledby": rowLabelId("expression"),
+						"aria-describedby": `${panelId}-sentence`,
+						family: FontFamily.MONO,
+						placeholder: "*/15 * * * *",
+						spellCheck: false,
+						value: expression,
+						onChange: (next) => {
+							if (isEditable) commit(next);
+						},
+						onEnter: close,
+						size: InputSize.SMALL,
+						variant: InputVariant.SECONDARY,
+						isError: isInvalid,
+						fillWidth: true
+					}) })] })
+				})
 			] })] }), /* @__PURE__ */ jsxs(Summary, { children: [/* @__PURE__ */ jsx(SummaryIcon, { children: /* @__PURE__ */ jsx(Icon, {
 				component: ClockIcon,
 				size: 12,
@@ -813,7 +849,7 @@ function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
 				ref: panelRef,
 				trigger: PopoverTrigger.MANUAL,
 				role: PopoverRole.DIALOG,
-				variant: isGhost ? PopoverVariant.BASE : CRON_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+				variant: panelVariant,
 				isOpen: isShown,
 				onOpenChange: setOpen,
 				isDisabled: !isEditable,

package/dist/inputs/DateInput.d.ts

@@ -12,7 +12,7 @@ export declare enum DateInputSize {
     /** 40px field, body_lg text, 16px icon. */
     X_LARGE = "X_LARGE"
 }
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 export declare enum DateInputVariant {
     /** `background.base` fill. */
     BASE = "BASE",

package/dist/inputs/DateInput.js

@@ -9,6 +9,7 @@ import Divider from "../layout/Divider.js";
 import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { formatDate } from "../utils/format.js";
 import FlexItem from "../layout/FlexItem.js";
 import { useDevWarning } from "./internal/devWarn.js";
 import { FieldContext } from "../hooks/useField.js";
@@ -61,7 +62,7 @@ var DateInputSize = /* @__PURE__ */ function(DateInputSize) {
 	DateInputSize["X_LARGE"] = "X_LARGE";
 	return DateInputSize;
 }({});
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 var DateInputVariant = /* @__PURE__ */ function(DateInputVariant) {
 	/** `background.base` fill. */
 	DateInputVariant["BASE"] = "BASE";
@@ -177,7 +178,7 @@ var DATE_INPUT_VARIANT_TO_CSS_MAP = {
 };
 /** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
 var GHOST_CSS = "gx-DateInput-GHOST_CSS-g1mgixmn";
-/** Hover on an editable field: `border.hovered` (stronger than `border.primary`, Constitution III.6). */
+/** Hover on an editable field: `border.hovered` (stronger than `border.primary`; `tokens.test.ts` holds the order). */
 var DATE_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
 	["BASE"]: "gx-DateInput-BASE-bvno65u",
 	["PRIMARY"]: "gx-DateInput-PRIMARY-p1c49qmz",
@@ -434,18 +435,17 @@ function fullDateLabel(day) {
 }
 /** The default field text: "Oct 3, 2026" (or "Oct 3, 2026, 14:30" with time) in the zone. */
 function defaultFormat(date, hasTime, timeZone) {
-	const options = {
+	const zone = timeZone === void 0 ? {} : { timeZone };
+	if (!hasTime) return formatDate(date, zone);
+	return new Intl.DateTimeFormat("en-US", {
 		month: "short",
 		day: "numeric",
-		year: "numeric"
-	};
-	if (hasTime) Object.assign(options, {
+		year: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
-		hourCycle: "h23"
-	});
-	if (timeZone !== void 0) options.timeZone = timeZone;
-	return new Intl.DateTimeFormat("en-US", options).format(date);
+		hourCycle: "h23",
+		...zone
+	}).format(date);
 }
 /** The zone's short name for an instant ("UTC", "EDT", "GMT+2"). */
 function zoneName(date, timeZone) {

package/dist/inputs/MultiSelectInput.d.ts

@@ -14,7 +14,7 @@ export declare enum MultiSelectInputSize {
     /** 40px field, 28px chips, 32px rows. */
     X_LARGE = "X_LARGE"
 }
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 export declare enum MultiSelectInputVariant {
     /** `background.base` fill. */
     BASE = "BASE",
@@ -130,6 +130,8 @@ export interface MultiSelectInputBaseProps<TId extends string = string> extends
     renderValue?: (options: SelectOption<TId>[]) => ReactNode;
     /** Options shown in a section above the list, in this order, whatever the search term. */
     pinnedIds?: TId[];
+    /** Adds a first row with this label ("All sources") that selects every enabled option matching the search term, or clears them when all are selected. Checked when all are selected, `aria-checked="mixed"` with a dash when some are. Respects `maxSelected`; it is not an option, so it never appears in `value`. */
+    selectAllLabel?: string;
     /**
      * Preferred side and alignment of the panel. It flips and shifts to stay in the viewport.
      * @default Placement.BOTTOM_START

package/dist/inputs/MultiSelectInput.js

@@ -3,6 +3,7 @@ import VisuallyHidden from "../a11y/VisuallyHidden.js";
 import { useControlledState } from "../hooks/useControlledState.js";
 import Chip, { ChipSize } from "../chips/Chip.js";
 import { SelectInputRoot, SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+import { applySelectAll } from "./internal/selectAll.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
 import { forwardRef, useEffect, useRef, useState } from "react";
@@ -15,7 +16,9 @@ import { cx } from "@linaria/core";
 * array of option ids in selection order, choosing a row toggles it and keeps the panel open, and
 * the field shows the chosen options as chips on one line, with a `+N` chip for those that do not
 * fit. `maxSelected` caps the choices; `onCreate` (with `isSearchable`) offers a "Create" row for a
-* term that matches no option.
+* term that matches no option; `selectAllLabel` adds a tri-state "select all" row above the list
+* that toggles the enabled options matching the term (it is not an option, so nothing of its own
+* ever reaches `value`).
 *
 * Search, groups, pinned options, descriptions, disabled reasons, loading, paging,
 * virtualization, the keyboard model, sizes and fills are SelectInput's. It does not validate (the
@@ -38,7 +41,7 @@ var MultiSelectInputSize = /* @__PURE__ */ function(MultiSelectInputSize) {
 	MultiSelectInputSize["X_LARGE"] = "X_LARGE";
 	return MultiSelectInputSize;
 }({});
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 var MultiSelectInputVariant = /* @__PURE__ */ function(MultiSelectInputVariant) {
 	/** `background.base` fill. */
 	MultiSelectInputVariant["BASE"] = "BASE";
@@ -144,7 +147,7 @@ function ChipRow({ options, size, isDisabled }) {
 	});
 }
 /** Choose several values from a list of options; the choices show as chips in the field. */
-var MultiSelectInputInner = forwardRef(function MultiSelectInput({ value, defaultValue, onChange, size: sizeProp, variant: variantProp, isGhost, placeholder, isDisabled: isDisabledProp, maxSelected, renderValue, isSearchable, onCreate, className, style, ...rest }, ref) {
+var MultiSelectInputInner = forwardRef(function MultiSelectInput({ value, defaultValue, onChange, size: sizeProp, variant: variantProp, isGhost, placeholder, isDisabled: isDisabledProp, maxSelected, renderValue, isSearchable, onCreate, selectAllLabel, className, style, ...rest }, ref) {
 	const size = sizeProp ?? "MEDIUM";
 	const variant = variantProp ?? "PRIMARY";
 	const isDisabled = isDisabledProp ?? false;
@@ -180,6 +183,8 @@ var MultiSelectInputInner = forwardRef(function MultiSelectInput({ value, defaul
 		getSelectionText: (selected) => selected.map((option) => option.label).join(", "),
 		limitReason: isAtLimit ? `Limit of ${limit} reached` : void 0,
 		onCreate: isSearchable === true ? onCreate : void 0,
+		selectAllLabel,
+		onSelectAll: (ids, shouldSelect) => setValue(applySelectAll(currentValue, ids, shouldSelect, limit)),
 		...className === void 0 ? {} : { className },
 		...style === void 0 ? {} : { style }
 	});

package/dist/inputs/SelectInput.d.ts

@@ -14,7 +14,7 @@ export declare enum SelectInputSize {
     /** 40px field, body_lg text, 16px icons, 12px caret; 32px rows, 14px row icons. */
     X_LARGE = "X_LARGE"
 }
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 export declare enum SelectInputVariant {
     /** `background.base` fill. */
     BASE = "BASE",
@@ -198,6 +198,13 @@ export type SelectInputRootProps<TId extends string = string> = Omit<SelectInput
     limitReason: string | undefined;
     /** When set and the term is non-empty with no exact label match, a "Create" row ends the list. */
     onCreate: ((label: string) => void) | undefined;
+    /** When set, a tri-state "select all" row opens the list (MultiSelectInput `selectAllLabel`). */
+    selectAllLabel: string | undefined;
+    /**
+     * Called when the select-all row is chosen, with the enabled options it covers (those matching
+     * the term, in display order) and whether to select them (`false`: they were all selected).
+     */
+    onSelectAll: ((ids: TId[], shouldSelect: boolean) => void) | undefined;
 };
 /** @internal Shared by SelectInput and MultiSelectInput; apps use those. */
 export declare const SelectInputRoot: <TId extends string = string>(props: SelectInputRootProps<TId> & RefAttributes<HTMLElement>) => ReactElement | null;