@galaxy-io/dls 2.4.0 → 2.5.0

package/dist/inputs/KeyValueInput.d.ts

@@ -14,7 +14,7 @@
  * SSR: ids come from `useId`; focus moves run in an effect; nothing touches `window` or
  * `document` at module scope.
  */
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Canonical rungs; KeyValueInput supports all five. Every field and button in it uses the rung. */
 export declare enum KeyValueInputSize {
     /** 20px rows, 4px gaps. */
@@ -72,8 +72,12 @@ export interface KeyValueInputProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the rows, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    /** Label above the rows, rendered through `Field`. For a horizontal layout or `actions`, wrap it in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app ("Header names must be unique"), shown under the rows through `Field`. It also marks every field invalid. */
     error?: string;
     /**

package/dist/inputs/KeyValueInput.js

@@ -168,7 +168,7 @@ function parseLines(text) {
 }
 /** The group, its rows and the add button, wired to the nearest Field (the input's own or the app's). */
 function KeyValueGroup({ keyValueProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = [], onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = keyValueProps;
+	const { value, defaultValue = [], onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = keyValueProps;
 	const { field, controlId: groupId, describedBy: fieldDescribedBy, isInvalid, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -352,11 +352,13 @@ function KeyValueGroup({ keyValueProps, forwardedRef, isRoot }) {
 }
 /** Editable key/value rows (headers, environment variables) with add, remove and `.env` paste. */
 var KeyValueInput = forwardRef(function KeyValueInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "KeyValueInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: KEY_VALUE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/MultiSelectInput.d.ts

@@ -54,8 +54,12 @@ export interface MultiSelectInputBaseProps<TId extends string = string> extends
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap it in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /**
      * Shown in the field while nothing is selected, and in the search field while it is empty. Never the label.
      * @default Select options…

package/dist/inputs/NumberInput.js

@@ -22,7 +22,8 @@ import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
 * `inputs/Input`. It never validates: out-of-range values are clamped, not rejected.
 *
 * Replaces 1.x `NumberInput` (`type="number"` and per-keystroke clamping are gone; `width` →
-* `fillWidth`, `isMonospace` → `family`, `labelTooltip` → wrap in `Field`).
+* `fillWidth`, `isMonospace` → `family`; `labelTooltip` and `description` render through the
+* input's own Field since 2.5).
 */
 /** Tabular digits, so the value keeps its width while stepping (lands on Input's root). */
 var NUMBER_INPUT_CSS = "gx-NumberInput-NUMBER_INPUT_CSS-n19kajw4";

package/dist/inputs/PasswordInput.js

@@ -16,7 +16,8 @@ import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 *
 * PasswordInput holds no strength or matching rules: the app validates and passes `error`.
 * Replaces 1.x `PasswordInput` (its unnamed bare toggle is now a named `aria-pressed` Button;
-* `width` → `fillWidth`, `isMonospace` → `family`, `labelTooltip` → wrap in `Field`).
+* `width` → `fillWidth`, `isMonospace` → `family`; `labelTooltip` and `description` render through
+* the input's own Field since 2.5).
 */
 /** A masked single-line field with a "Show password" toggle: `Input` with `type="password"`. */
 var PasswordInput = forwardRef(function PasswordInput(props, ref) {

package/dist/inputs/PinInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes } from "react";
+import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 /** Canonical rungs; PinInput exposes three (EXAMPLES §14). Boxes are squares of the rung height. */
 export declare enum PinInputSize {
     /** 24px boxes, body_md mono characters. */
@@ -77,8 +77,12 @@ export interface PinInputProps extends AriaAttributes, PinInputNativeProps {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the boxes, rendered through `Field`. For a description, wrap the PinInput in `Field` instead. */
+    /** Label above the boxes, rendered through `Field`. For a horizontal layout or `actions`, wrap the PinInput in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app ("Code is incorrect"), shown under the boxes through `Field`. Also turns every box's border red and sets `aria-invalid`. */
     error?: string;
     /**

package/dist/inputs/PinInput.js

@@ -139,7 +139,7 @@ var ERROR_CSS = "gx-PinInput-ERROR_CSS-emv6pcb";
 var DISABLED_CSS = "gx-PinInput-DISABLED_CSS-dz9kczs";
 /** The boxes, wired to the nearest Field (the PinInput's own or the app's). */
 function PinGroup({ pinProps, forwardedRef, isRoot }) {
-	const { length: lengthProp = 6, value, defaultValue = "", onChange, onComplete, type = "NUMERIC", isMasked = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, ariaLabel, autoFocus = false, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = pinProps;
+	const { length: lengthProp = 6, value, defaultValue = "", onChange, onComplete, type = "NUMERIC", isMasked = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, ariaLabel, autoFocus = false, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = pinProps;
 	const length = Math.max(1, Math.floor(Number.isFinite(lengthProp) ? lengthProp : 1));
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
@@ -334,11 +334,13 @@ function PinGroup({ pinProps, forwardedRef, isRoot }) {
 /** One box per character, for OTP and confirmation codes. */
 var PinInput = forwardRef(function PinInput(props, ref) {
 	const { label, error, isRequired = false, size = "MEDIUM" } = props;
-	const { id, className, style } = props;
+	const { labelTooltip, description, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "PinInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: PIN_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/RadioGroup.d.ts

@@ -50,8 +50,12 @@ export interface RadioGroupProps<TId extends string = string> extends AriaAttrib
     defaultValue?: TId | null;
     /** Called with the id the user selects. The user cannot clear a selection. */
     onChange?: (value: TId) => void;
-    /** The question, rendered through `Field` above the options. For a description, a tooltip or a horizontal layout, wrap the group in `Field` instead. */
+    /** The question, rendered through `Field` above the options. For a horizontal layout or `actions`, wrap the group in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the question, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the question, above the options, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app, shown under the options through `Field`. It also marks the group invalid. */
     error?: string;
     /**

package/dist/inputs/RadioGroup.js

@@ -94,7 +94,7 @@ var RADIO_GROUP_SIZE_TO_FIELD_SIZE_MAP = {
 };
 /** The radiogroup and its radios, wired to the nearest Field (the group's own or the app's). */
 function GroupBody({ groupProps, forwardedRef, isRoot }) {
-	const { options, value, defaultValue, onChange, label: _label, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
+	const { options, value, defaultValue, onChange, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
 	const wiring = useFieldWiring({
 		id,
 		ariaLabel,
@@ -147,11 +147,13 @@ function GroupBody({ groupProps, forwardedRef, isRoot }) {
 /** A set of radios answering one question; the value is the selected id. */
 var RadioGroupBase = forwardRef(function RadioGroup(props, ref) {
 	const { label, error, isRequired = false, size = "MEDIUM" } = props;
-	const { id, className, style } = props;
+	const { labelTooltip, description, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "RadioGroup",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: RADIO_GROUP_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/SelectInput.d.ts

@@ -79,8 +79,12 @@ export interface SelectInputProps<TId extends string = string> extends AriaAttri
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the select in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap the select in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /**
      * Shown in the field while nothing is selected, and in the search field while it is empty. Never the label.
      * @default Select an option…

package/dist/inputs/SelectInput.js

@@ -588,7 +588,7 @@ function openIndex(nav, target) {
 }
 /** The field, the trailing parts, the panel and the engine, wired to the nearest Field. */
 function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
-	const { options, selectedIds, isMultiple, onOptionSelect, onClear, renderSelection, getSelectionText, limitReason, onCreate, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder = "Select an option…", error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, isSearchable = false, onSearch, isClearable = false, isLoading = false, emptyMessage = "No results", onEndReached, renderOption, pinnedIds, placement = Placement.BOTTOM_START, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = rootProps;
+	const { options, selectedIds, isMultiple, onOptionSelect, onClear, renderSelection, getSelectionText, limitReason, onCreate, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder = "Select an option…", error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, isSearchable = false, onSearch, isClearable = false, isLoading = false, emptyMessage = "No results", onEndReached, renderOption, pinnedIds, placement = Placement.BOTTOM_START, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = rootProps;
 	const isBare = useIsBareField();
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
@@ -1265,12 +1265,14 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 * virtualization.
 */
 var SelectInputRootInner = forwardRef(function SelectInputRoot(props, ref) {
-	const { label, error, isRequired = false, componentName = "SelectInput", size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, componentName = "SelectInput", size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName,
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: SELECT_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/SliderInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Canonical rungs; SliderInput supports all five. The track area is the rung height. */
 export declare enum SliderInputSize {
     /** 20px track area, 2px rail, 10px thumb. */
@@ -77,8 +77,12 @@ export interface SliderInputBaseProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the slider, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    /** Label above the slider, rendered through `Field`. For a horizontal layout or `actions`, wrap it in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app, shown under the slider through `Field`. Also turns the rail's hairline red and sets `aria-invalid`. */
     error?: string;
     /**

package/dist/inputs/SliderInput.js

@@ -171,7 +171,7 @@ var READ_ONLY_CSS = "gx-SliderInput-READ_ONLY_CSS-r24kxar";
 var FILL_WIDTH_CSS = "gx-SliderInput-FILL_WIDTH_CSS-fz4wyc9";
 /** The track, thumbs and marks, wired to the nearest Field (the slider's own or the app's). */
 function SliderBody({ sliderProps, forwardedRef, isRoot }) {
-	const { isRange = false, value, defaultValue, onChange, onChangeEnd, min: minProp = 0, max: maxProp = 100, step: stepProp = 1, marks, formatValue = String, hasValueTooltip = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelAttribute, className, style, ...rest } = sliderProps;
+	const { isRange = false, value, defaultValue, onChange, onChangeEnd, min: minProp = 0, max: maxProp = 100, step: stepProp = 1, marks, formatValue = String, hasValueTooltip = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelAttribute, className, style, ...rest } = sliderProps;
 	const min = Number.isFinite(minProp) ? minProp : 0;
 	const max = Number.isFinite(maxProp) ? Math.max(maxProp, min) : Math.max(100, min);
 	const step = Number.isFinite(stepProp) && stepProp > 0 ? stepProp : 1;
@@ -427,12 +427,14 @@ function SliderBody({ sliderProps, forwardedRef, isRoot }) {
 }
 /** A number, or a `[low, high]` range, set by dragging thumbs along a rail. */
 var SliderInput = forwardRef(function SliderInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "SliderInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: SLIDER_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/TagInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes } from "react";
+import { type AriaAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 /** Canonical rungs; TagInput supports all five. One line of the field is the rung height. */
 export declare enum TagInputSize {
     /** 20px line, 16px chips, caption text. */
@@ -67,8 +67,12 @@ export interface TagInputProps extends AriaAttributes, TagInputNativeProps {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap it in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Hint shown while there are no tags and nothing is typed. It is never the label. */
     placeholder?: string;
     /** Message from the app, shown under the field through `Field`. It also turns the border red and sets `aria-invalid`. */

package/dist/inputs/TagInput.js

@@ -181,7 +181,7 @@ function countText(count, invalidCount) {
 }
 /** The frame, its chips and the text input, wired to the nearest Field (the input's own or the app's). */
 function TagFrame({ tagProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = [], onChange, separators = TAG_INPUT_DEFAULT_SEPARATORS, isTagInvalid, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, onBlur, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = tagProps;
+	const { value, defaultValue = [], onChange, separators = TAG_INPUT_DEFAULT_SEPARATORS, isTagInvalid, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, onBlur, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = tagProps;
 	const wiring = useFieldWiring({
 		id,
 		ariaLabel,
@@ -376,11 +376,13 @@ function TagFrame({ tagProps, forwardedRef, isRoot }) {
 }
 /** A field of free-form tags: type and press Enter or a separator, paste a list, remove with × or Backspace. */
 var TagInput = forwardRef(function TagInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "TagInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: TAG_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/TextAreaInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties, type TextareaHTMLAttributes } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from "react";
 import { FontFamily } from "../theme/enums.js";
 /** Canonical rungs; TextAreaInput supports all five. The rung sets the text step, the padding and the height of one row. */
 export declare enum TextAreaInputSize {
@@ -76,8 +76,12 @@ export interface TextAreaInputProps extends AriaAttributes, TextAreaInputNativeP
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description, a label tooltip, a counter or a horizontal layout, wrap the field in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a counter, a horizontal layout or `actions`, wrap the field in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Hint shown while the value is empty. It is never the label. */
     placeholder?: string;
     /** Message from the app, shown under the field through `Field`. It also turns the border red and sets `aria-invalid`. */

package/dist/inputs/TextAreaInput.js

@@ -26,7 +26,8 @@ import { useMergeRefs } from "@floating-ui/react";
 * `Field`'s `maxLength` + `count`, and the message is the app's `error`. Replaces 1.x
 * `TextAreaInput` (`InputSize` / `InputVariant` → `TextAreaInputSize` / `TextAreaInputVariant`,
 * `lines` → `minRows`, `required` / `disabled` → `isRequired` / `isDisabled`; `min` / `max`,
-* `width`, `height`, `fillHeight`, `noBorder`, `noPadding` and `labelTooltip` are gone).
+* `width`, `height`, `fillHeight`, `noBorder` and `noPadding` are gone; `labelTooltip` and
+* `description` render through the input's own Field since 2.5).
 */
 /** Canonical rungs; TextAreaInput supports all five. The rung sets the text step, the padding and the height of one row. */
 var TextAreaInputSize = /* @__PURE__ */ function(TextAreaInputSize) {
@@ -171,7 +172,7 @@ function toRows(rows) {
 }
 /** `Root`, the textarea, the mirror and the loading overlay, wired to the nearest Field. */
 function TextAreaFrame({ textAreaProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = "", onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, minRows = 3, maxRows, isAutoGrow = false, isResizable = false, isLoading = false, isDisabled = false, isReadOnly = false, isRequired = false, family = FontFamily.SANS, fillWidth = false, ariaLabel, autoComplete = "off", id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = textAreaProps;
+	const { value, defaultValue = "", onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder, error, isError = false, minRows = 3, maxRows, isAutoGrow = false, isResizable = false, isLoading = false, isDisabled = false, isReadOnly = false, isRequired = false, family = FontFamily.SANS, fillWidth = false, ariaLabel, autoComplete = "off", id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = textAreaProps;
 	const { controlId: textAreaId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -286,11 +287,13 @@ function TextAreaFrame({ textAreaProps, forwardedRef, isRoot }) {
 }
 /** The multi-line text field, sized in rows, with optional auto-grow and a vertical resize handle. */
 var TextAreaInput = forwardRef(function TextAreaInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "TextAreaInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: TEXT_AREA_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/ToggleInput.d.ts

@@ -75,8 +75,12 @@ export interface ToggleInputProps<TId extends string = string> extends AriaAttri
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the control, rendered through `Field`. For a description or a horizontal layout, wrap the control in `Field` instead. */
+    /** Label above the control, rendered through `Field`. For a horizontal layout or `actions`, wrap the control in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app, shown under the control through `Field`. It also turns the track border red and sets `aria-invalid`. */
     error?: string;
     /**

package/dist/inputs/ToggleInput.js

@@ -145,7 +145,7 @@ var TOGGLE_INPUT_SIZE_TO_ICON_PX_MAP = {
 };
 /** The radiogroup and its segments, wired to the nearest Field (its own or the app's). */
 function TrackBody({ trackProps, forwardedRef, isRoot }) {
-	const { options, value, defaultValue, onChange, size = "MEDIUM", variant = "SECONDARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = trackProps;
+	const { options, value, defaultValue, onChange, size = "MEDIUM", variant = "SECONDARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = trackProps;
 	const { field, controlId: trackId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -260,12 +260,14 @@ function TrackBody({ trackProps, forwardedRef, isRoot }) {
 }
 /** A segmented control; the value is the chosen option's id. */
 var ToggleInputBase = forwardRef(function ToggleInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "ToggleInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: TOGGLE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/internal/ownField.d.ts

@@ -8,6 +8,10 @@ export interface OwnFieldOptions {
     label: string | undefined;
     /** The input's `error`. */
     error: string | undefined;
+    /** The input's `labelTooltip`, forwarded to the Field (the info icon beside the label). */
+    labelTooltip?: FieldProps["labelTooltip"];
+    /** The input's `description`, forwarded to the Field (the help copy under the label). */
+    description?: FieldProps["description"];
     /** The input's `isRequired`, forwarded to the Field (the asterisk and `aria-required`). */
     isRequired: boolean;
     /** The Field rung, from the component's own `<COMPONENT>_SIZE_TO_FIELD_SIZE_MAP`. */
@@ -29,13 +33,14 @@ export interface OwnFieldOptions {
     isEnabled?: boolean;
 }
 /** @internal The props of the Field an input renders for itself. */
-export type OwnFieldProps = Pick<FieldProps, "label" | "error" | "isRequired" | "size" | "fillWidth" | "id" | "className" | "style">;
+export type OwnFieldProps = Pick<FieldProps, "label" | "error" | "labelTooltip" | "description" | "isRequired" | "size" | "fillWidth" | "id" | "className" | "style">;
 /**
- * @internal The Field props when the input must render its own Field (standalone, with a `label`
- * or an `error`), or `null` when the frame renders alone (no label and no error, or inside an
- * app's Field). Warns once, in development, when an input inside a Field also has its own `label`.
+ * @internal The Field props when the input must render its own Field (standalone, with a `label`,
+ * an `error`, a `labelTooltip` or a `description`), or `null` when the frame renders alone (none of
+ * those, or inside an app's Field). Warns once, in development, when an input inside a Field also
+ * has its own `label`.
  */
-export declare function useOwnField({ componentName, label, error, isRequired, size, id, className, style, rootClassName, fillWidth, isEnabled, }: OwnFieldOptions): OwnFieldProps | null;
+export declare function useOwnField({ componentName, label, error, labelTooltip, description, isRequired, size, id, className, style, rootClassName, fillWidth, isEnabled, }: OwnFieldOptions): OwnFieldProps | null;
 /**
  * @internal The frame's `style`, only when the frame is the root (an own Field takes it otherwise).
  * Spread onto the frame: `{...rootStyle(isRoot, style)}`.

package/dist/inputs/internal/ownField.js

@@ -1,11 +1,11 @@
 import { useDevWarning } from "./devWarn.js";
 import { useField } from "../../hooks/useField.js";
-import { isFilled } from "./predicates.js";
+import { hasContent, isFilled } from "./predicates.js";
 import { cx } from "@linaria/core";
 //#region src/inputs/internal/ownField.tsx
 /**
-* @internal The own-Field shell every labelled input shares. A standalone input with `label` or
-* `error` renders a `Field` around its frame; inside an app's Field it never wraps itself again
+* @internal The own-Field shell every labelled input shares. A standalone input with `label`,
+* `error`, `labelTooltip` or `description` renders a `Field` around its frame; inside an app's Field it never wraps itself again
 * and reads the Field's wiring instead (`useField()`). The shell also decides where `className`
 * and `style` go: on the Field when the input renders one, otherwise on the frame (the root).
 * Private on purpose (an `internal/` module: built, never a package export).
@@ -25,20 +25,25 @@ import { cx } from "@linaria/core";
 * ```
 */
 /**
-* @internal The Field props when the input must render its own Field (standalone, with a `label`
-* or an `error`), or `null` when the frame renders alone (no label and no error, or inside an
-* app's Field). Warns once, in development, when an input inside a Field also has its own `label`.
+* @internal The Field props when the input must render its own Field (standalone, with a `label`,
+* an `error`, a `labelTooltip` or a `description`), or `null` when the frame renders alone (none of
+* those, or inside an app's Field). Warns once, in development, when an input inside a Field also
+* has its own `label`.
 */
-function useOwnField({ componentName, label, error, isRequired, size, id, className, style, rootClassName, fillWidth, isEnabled = true }) {
+function useOwnField({ componentName, label, error, labelTooltip, description, isRequired, size, id, className, style, rootClassName, fillWidth, isEnabled = true }) {
 	const field = useField();
 	const hasLabel = isFilled(label);
 	const hasError = isFilled(error);
-	useDevWarning(isEnabled && field !== null && hasLabel, `[@galaxy-io/dls] ${componentName} inside a Field ignores its own \`label\`. Put the label on the Field only.`);
-	if (!isEnabled || field !== null || !hasLabel && !hasError) return null;
+	const hasTooltip = hasContent(labelTooltip);
+	const hasDescription = hasContent(description);
+	useDevWarning(isEnabled && field !== null && (hasLabel || hasTooltip || hasDescription), `[@galaxy-io/dls] ${componentName} inside a Field ignores its own \`label\`, \`labelTooltip\` and \`description\`. Put them on the Field only.`);
+	if (!isEnabled || field !== null || !hasLabel && !hasError && !hasTooltip && !hasDescription) return null;
 	const fieldClassName = cx(rootClassName, className);
 	return {
 		...hasLabel ? { label } : {},
 		...hasError ? { error } : {},
+		...hasTooltip ? { labelTooltip } : {},
+		...hasDescription ? { description } : {},
 		isRequired,
 		size,
 		...fillWidth === void 0 ? {} : { fillWidth },

package/dist/layout/Box.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type CSSProperties, type ElementType, type ReactNode } from "react";
-import { Radius, type SpaceShorthand } from "../theme/enums.js";
+import type { Radius, SpaceShorthand } from "../theme/enums.js";
 /** Surface step the box fills with (surface set, Constitution V-A). Leave `variant` unset for no fill. */
 export declare enum BoxVariant {
     /** The canvas, `background.base`. */

package/dist/layout/Box.js

@@ -1,5 +1,5 @@
-import { Radius } from "../theme/enums.js";
 import { getCssSizeValue, spaceToCss } from "../utils/css.js";
+import { BASE_SURFACE_CSS, PRIMARY_SURFACE_CSS, RADIUS_TO_CSS_MAP, SECONDARY_SURFACE_CSS, TERTIARY_SURFACE_CSS } from "./internal/surface.js";
 /* empty css              */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -35,34 +35,27 @@ var Root = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 var BOX_VARIANT_TO_CSS_MAP = {
-	["BASE"]: "gx-Box-BASE-bn7d3r",
-	["PRIMARY"]: "gx-Box-PRIMARY-p1tb0t1s",
-	["SECONDARY"]: "gx-Box-SECONDARY-sngj0ew",
-	["TERTIARY"]: "gx-Box-TERTIARY-t1vd7izj"
+	["BASE"]: BASE_SURFACE_CSS,
+	["PRIMARY"]: PRIMARY_SURFACE_CSS,
+	["SECONDARY"]: SECONDARY_SURFACE_CSS,
+	["TERTIARY"]: TERTIARY_SURFACE_CSS
 };
-var RADIUS_TO_CSS_MAP = {
-	[Radius.SM]: "gx-Box-Radius_SM-r1duzr06",
-	[Radius.MD]: "gx-Box-Radius_MD-r501792",
-	[Radius.LG]: "gx-Box-Radius_LG-rxydgx9",
-	[Radius.PILL]: "gx-Box-Radius_PILL-rrn38q3"
-};
-var BORDER_CSS = "gx-Box-BORDER_CSS-b1aq7688";
-var FILL_WIDTH_CSS = "gx-Box-FILL_WIDTH_CSS-f1nw7r38";
+var FILL_WIDTH_CSS = "gx-Box-FILL_WIDTH_CSS-fn7d3r";
 /** Each block reads the `--gx-box-<property>` custom property the component sets beside it. */
 var BOX_CSS_PROPERTY_TO_CSS_MAP = {
-	padding: "gx-Box-padding-poq987s",
-	width: "gx-Box-width-w1dvt2z3",
-	height: "gx-Box-height-hpkzdg3",
-	"min-width": "gx-Box-min-width-m1w4kn1o",
-	"max-width": "gx-Box-max-width-morpz05",
-	"min-height": "gx-Box-min-height-mwtkiw3",
-	"max-height": "gx-Box-max-height-mz7b6w6",
-	overflow: "gx-Box-overflow-o1d5jyby",
-	position: "gx-Box-position-p1cr9tw3",
-	top: "gx-Box-top-t176ib3h",
-	right: "gx-Box-right-rjk68mc",
-	bottom: "gx-Box-bottom-bqrxdfn",
-	left: "gx-Box-left-l1xu1nwn"
+	padding: "gx-Box-padding-p1tb0t1s",
+	width: "gx-Box-width-wngj0ew",
+	height: "gx-Box-height-h1vd7izj",
+	"min-width": "gx-Box-min-width-m1duzr06",
+	"max-width": "gx-Box-max-width-m501792",
+	"min-height": "gx-Box-min-height-mxydgx9",
+	"max-height": "gx-Box-max-height-mrn38q3",
+	overflow: "gx-Box-overflow-o1aq7688",
+	position: "gx-Box-position-p1nw7r38",
+	top: "gx-Box-top-toq987s",
+	right: "gx-Box-right-r1dvt2z3",
+	bottom: "gx-Box-bottom-bpkzdg3",
+	left: "gx-Box-left-l1w4kn1o"
 };
 /** A length prop as CSS (number → px), or `undefined` when unset. */
 var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
@@ -96,7 +89,7 @@ var Box = forwardRef(function Box({ children, variant, hasBorder = false, radius
 		as,
 		ref,
 		id,
-		className: cx(variant !== void 0 && BOX_VARIANT_TO_CSS_MAP[variant], hasBorder && BORDER_CSS, radius !== void 0 && RADIUS_TO_CSS_MAP[radius], fillWidth && FILL_WIDTH_CSS, ...classNames, className),
+		className: cx(variant !== void 0 && BOX_VARIANT_TO_CSS_MAP[variant], hasBorder && "gx-surface-BORDER_CSS-b9a3ryy", radius !== void 0 && RADIUS_TO_CSS_MAP[radius], fillWidth && FILL_WIDTH_CSS, ...classNames, className),
 		style: {
 			...variables,
 			...style

package/dist/layout/Flex.d.ts

@@ -1,5 +1,16 @@
 import { type AriaAttributes, type CSSProperties, type ElementType, type MouseEvent, type ReactNode, type UIEvent } from "react";
-import type { Space, SpaceShorthand } from "../theme/enums.js";
+import type { Radius, Space, SpaceShorthand } from "../theme/enums.js";
+/** Surface step the container fills with (surface set, Constitution V-A). Leave `variant` unset for no fill. */
+export declare enum FlexVariant {
+    /** The canvas, `background.base`. */
+    BASE = "BASE",
+    /** A panel, `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** A raised surface, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated surface, `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
 /** Main-axis direction of the flex container (`flex-direction`). */
 export declare enum FlexDirection {
     /** Left to right. */
@@ -51,6 +62,18 @@ export declare enum FlexWrap {
 export interface FlexProps extends AriaAttributes {
     /** Content of the flex container. */
     children?: ReactNode;
+    /**
+     * Surface step the container fills with, as on `Box`. Unset draws no fill: the parent shows through.
+     * @default undefined (no fill)
+     */
+    variant?: FlexVariant;
+    /**
+     * Draw the 1px hairline border (`border.primary`), as on `Box`.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /** Corner radius from the scale, as on `Box`. Square corners when omitted. */
+    radius?: Radius;
     /**
      * Main-axis direction.
      * @default FlexDirection.ROW