@galaxy-io/dls 2.3.1 → 2.4.0

package/dist/charts/types.d.ts

@@ -85,6 +85,13 @@ export declare enum ChartKind {
     /** `Heatmap`. */
     HEATMAP = "HEATMAP"
 }
+/** Shape of the legend and tooltip swatches. By default it mirrors the marks: a dot for lines, a square for filled marks. */
+export declare enum ChartSwatch {
+    /** `Circle SMALL`: the default for `LineChart`. */
+    CIRCLE = "CIRCLE",
+    /** `Square SMALL`: the default for `AreaChart`, `BarChart`, `PieChart` and `Heatmap`. */
+    SQUARE = "SQUARE"
+}
 /** @internal Where the legend sits relative to the plot. */
 export declare enum ChartLegendPlacement {
     /** Beneath the plot, one line (cartesian charts, Heatmap). */
@@ -262,6 +269,11 @@ export interface BaseChartProps<TKey extends string> extends AriaAttributes {
      * @default true
      */
     hasLegend?: boolean;
+    /**
+     * Shape of the legend and tooltip swatches. Set it to match a neighbouring chart that keys the same series (square keys on a line chart beside a bar chart).
+     * @default mirrors the marks: ChartSwatch.CIRCLE for LineChart, ChartSwatch.SQUARE for AreaChart, BarChart, PieChart and Heatmap
+     */
+    swatch?: ChartSwatch;
     /**
      * Shows the tooltip on hover and keyboard focus. With `false` and no `onSelect`, the plot is a static image.
      * @default true

package/dist/charts/types.js

@@ -69,6 +69,14 @@ var ChartKind = /* @__PURE__ */ function(ChartKind) {
 	ChartKind["HEATMAP"] = "HEATMAP";
 	return ChartKind;
 }({});
+/** Shape of the legend and tooltip swatches. By default it mirrors the marks: a dot for lines, a square for filled marks. */
+var ChartSwatch = /* @__PURE__ */ function(ChartSwatch) {
+	/** `Circle SMALL`: the default for `LineChart`. */
+	ChartSwatch["CIRCLE"] = "CIRCLE";
+	/** `Square SMALL`: the default for `AreaChart`, `BarChart`, `PieChart` and `Heatmap`. */
+	ChartSwatch["SQUARE"] = "SQUARE";
+	return ChartSwatch;
+}({});
 /** @internal Where the legend sits relative to the plot. */
 var ChartLegendPlacement = /* @__PURE__ */ function(ChartLegendPlacement) {
 	/** Beneath the plot, one line (cartesian charts, Heatmap). */
@@ -86,4 +94,4 @@ var ChartTargetShape = /* @__PURE__ */ function(ChartTargetShape) {
 	return ChartTargetShape;
 }({});
 //#endregion
-export { ChartCurve, ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartTargetShape };
+export { ChartCurve, ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartSwatch, ChartTargetShape };

package/dist/inputs/NumberInput.d.ts

@@ -32,7 +32,7 @@ export type NumberInputProps = Omit<InputProps, "type" | "value" | "defaultValue
     hasSteppers?: boolean;
 };
 /** A single-line number field: `Input` with `type="text"`, parsing, clamping and stepping at its edge. */
-declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "value" | "defaultValue" | "onChange" | "spellCheck" | "inputMode" | "type" | "onEnter" | "maxLength" | "isClearable"> & {
+declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "spellCheck" | "inputMode" | "onEnter" | "maxLength" | "isClearable"> & {
     /** Controlled committed value. `null` is an empty field. */
     value?: number | null;
     /**

package/dist/inputs/PasswordInput.d.ts

@@ -8,7 +8,7 @@ export type PasswordInputProps = Omit<InputProps, "type" | "trailing" | "isClear
     autoComplete?: InputProps["autoComplete"];
 };
 /** A masked single-line field with a "Show password" toggle: `Input` with `type="password"`. */
-declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "spellCheck" | "prefix" | "inputMode" | "type" | "trailing" | "autoComplete" | "suffix" | "isClearable"> & {
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "spellCheck" | "prefix" | "inputMode" | "trailing" | "autoComplete" | "suffix" | "isClearable"> & {
     /**
      * Password-manager hint. Use `"new-password"` on sign-up and change-password forms.
      * @default "current-password"

package/dist/inputs/SearchInput.d.ts

@@ -32,7 +32,7 @@ export type SearchInputProps = Omit<InputProps, "type" | "icon" | "leading" | "p
     isLoading?: boolean;
 };
 /** A search field: `Input` with `type="search"`, a magnifier, clearing, a debounced `onSearch` and a focus shortcut. */
-declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "icon" | "ariaLabel" | "enterKeyHint" | "prefix" | "inputMode" | "type" | "leading" | "placeholder" | "onEnter" | "suffix" | "isClearable"> & {
+declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "icon" | "ariaLabel" | "type" | "enterKeyHint" | "prefix" | "inputMode" | "leading" | "placeholder" | "onEnter" | "suffix" | "isClearable"> & {
     /**
      * Hint shown while the value is empty.
      * @default "Search"

package/dist/inputs/ToggleInput.d.ts

@@ -2,18 +2,18 @@ import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes } from "react";
 /** Canonical rungs; ToggleInput supports all five. */
 export declare enum ToggleInputSize {
-    /** 20px track, 16px segments, caption text, 12px icons. */
+    /** 20px, caption text, 12px icons. */
     X_SMALL = "X_SMALL",
-    /** 24px track, 20px segments, body_sm text, 12px icons. */
+    /** 24px, body_sm text, 12px icons. */
     SMALL = "SMALL",
-    /** 32px track, 28px segments, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
+    /** 32px, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
     MEDIUM = "MEDIUM",
-    /** 36px track, 32px segments, body_lg text, 14px icons. */
+    /** 36px, body_lg text, 14px icons. */
     LARGE = "LARGE",
-    /** 40px track, 36px segments, body_lg text, 16px icons. */
+    /** 40px, body_lg text, 16px icons. */
     X_LARGE = "X_LARGE"
 }
-/** Track fill (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
+/** The fill behind the unselected segments (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
 export declare enum ToggleInputVariant {
     /** `background.base`. */
     BASE = "BASE",
@@ -65,13 +65,13 @@ export interface ToggleInputProps<TId extends string = string> extends AriaAttri
      */
     size?: ToggleInputSize;
     /**
-     * Track fill, from the surface set. Ignored with `isGhost`.
+     * The fill behind the unselected segments, from the surface set. Ignored with `isGhost`.
      * @default ToggleInputVariant.SECONDARY
      */
     variant?: ToggleInputVariant;
     /**
-     * Ghost track: no fill and no hairline (1.x `TRANSPARENT`); the selected fill and the segment hover
-     * fills still show. For a toggle set into a toolbar. An error still draws the red hairline.
+     * Ghost: no fill, no frame and no seams (1.x `TRANSPARENT`); the selected fill and the segment
+     * hover fills still show. For a toggle set into a toolbar. An error still draws the red hairline.
      * @default false
      */
     isGhost?: boolean;

package/dist/inputs/ToggleInput.js

@@ -15,8 +15,10 @@ import { cx } from "@linaria/core";
 /**
 * The segmented control: one choice among two to five short, mutually exclusive options shown
 * side by side (Table / Graph / JSON, Compact / Comfortable). It holds the chosen option's `id`
-* with `value` / `defaultValue` / `onChange(id)`, draws the options as segments in one track with
-* the selected one filled `background.tertiary` (a quick color fade, no slide), and supports text, icon +
+* with `value` / `defaultValue` / `onChange(id)`, and draws the options as flush segments in one
+* frame, the way an attached `ButtonGroup` draws its buttons: one `border.secondary` hairline
+* around the set, one shared hairline at each seam, round outer corners only, and the selected
+* segment filled `background.selected` (a quick color fade, no slide). It supports text, icon +
 * text and icon-only segments (each icon-only segment shows its `ariaLabel` as a tooltip). To
 * assistive tech and the keyboard it is a radio group: one tab stop, arrows and Home / End move
 * the selection. It renders its own `label` and `error` through `Field`.
@@ -28,19 +30,19 @@ import { cx } from "@linaria/core";
 */
 /** Canonical rungs; ToggleInput supports all five. */
 var ToggleInputSize = /* @__PURE__ */ function(ToggleInputSize) {
-	/** 20px track, 16px segments, caption text, 12px icons. */
+	/** 20px, caption text, 12px icons. */
 	ToggleInputSize["X_SMALL"] = "X_SMALL";
-	/** 24px track, 20px segments, body_sm text, 12px icons. */
+	/** 24px, body_sm text, 12px icons. */
 	ToggleInputSize["SMALL"] = "SMALL";
-	/** 32px track, 28px segments, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
+	/** 32px, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
 	ToggleInputSize["MEDIUM"] = "MEDIUM";
-	/** 36px track, 32px segments, body_lg text, 14px icons. */
+	/** 36px, body_lg text, 14px icons. */
 	ToggleInputSize["LARGE"] = "LARGE";
-	/** 40px track, 36px segments, body_lg text, 16px icons. */
+	/** 40px, body_lg text, 16px icons. */
 	ToggleInputSize["X_LARGE"] = "X_LARGE";
 	return ToggleInputSize;
 }({});
-/** Track fill (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
+/** The fill behind the unselected segments (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
 var ToggleInputVariant = /* @__PURE__ */ function(ToggleInputVariant) {
 	/** `background.base`. */
 	ToggleInputVariant["BASE"] = "BASE";
@@ -52,28 +54,42 @@ var ToggleInputVariant = /* @__PURE__ */ function(ToggleInputVariant) {
 	ToggleInputVariant["TERTIARY"] = "TERTIARY";
 	return ToggleInputVariant;
 }({});
-/** The radiogroup. With the 1px border and 1px padding, segments start 2px inside the outer edge. */
+/**
+* The radiogroup: the one frame around the segments (an attached `ButtonGroup`'s silhouette). The
+* seam color is a custom property so `isGhost` can clear the seams with the frame. `isolation:
+* isolate` keeps the focused segment's `z-index: 1` inside the control.
+*/
 var Track = /*#__PURE__*/ styled("div")({
 	name: "Track",
 	class: "gx-ToggleInput-Track-t1t8zlu",
 	propsAsIs: false
 });
-/** One option: a `button role="radio"`, content width (or an equal share under `fillWidth`). */
+/**
+* One option: a `button role="radio"`, content width (or an equal share under `fillWidth`), the
+* frame's full inner height. Every segment after the first draws the seam before it as its own
+* leading border, so each seam is one hairline. Only the first and last segments round their outer
+* corners, by the frame's radius less its border, so no fill pokes past the rounded frame. The
+* focused segment is lifted so its focus ring is never painted over by the next segment.
+*/
 var Segment = /*#__PURE__*/ styled("button")({
 	name: "Segment",
 	class: "gx-ToggleInput-Segment-s1br7yd",
 	propsAsIs: false
 });
-/** Track rest look per surface (Input's rest table, restated). */
+/**
+* Rest look per surface: the fill behind the unselected segments, under the same `border.secondary`
+* hairline a `SECONDARY` button draws (the attached-group frame, not the field frame's
+* `border.primary`).
+*/
 var TOGGLE_INPUT_VARIANT_TO_CSS_MAP = {
 	["BASE"]: "gx-ToggleInput-BASE-b1xwadc7",
 	["PRIMARY"]: "gx-ToggleInput-PRIMARY-p1smouvb",
 	["SECONDARY"]: "gx-ToggleInput-SECONDARY-s169kxy0",
 	["TERTIARY"]: "gx-ToggleInput-TERTIARY-t1cbak55"
 };
-/** `isGhost`: no track fill and no hairline. Declared after the variant map, which it replaces. */
+/** `isGhost`: no fill, no frame, no seams. Declared after the variant map, which it replaces. */
 var GHOST_CSS = "gx-ToggleInput-GHOST_CSS-gl8s2yr";
-/** Height, segment padding and icon-label gap per rung. Padding = the rung's control padding − the 2px track inset. */
+/** Height, segment padding and icon-label gap per rung: Button's table, so a segment and a button of one rung set their label alike. */
 var TOGGLE_INPUT_SIZE_TO_CSS_MAP = {
 	["X_SMALL"]: "gx-ToggleInput-X_SMALL-xgugjmx",
 	["SMALL"]: "gx-ToggleInput-SMALL-szayufa",
@@ -83,27 +99,26 @@ var TOGGLE_INPUT_SIZE_TO_CSS_MAP = {
 };
 /** Red hairline on every variant, from `error`, `isError` or the Field's error. */
 var ERROR_CSS = "gx-ToggleInput-ERROR_CSS-e6je9tz";
-/** Group disabled: the selected segment takes the disabled fill; the track keeps its resting hairline (field-frame note). */
+/** Group disabled: the selected segment steps down to the pressed fill; the frame keeps its resting hairline (field-frame note). */
 var DISABLED_CSS = "gx-ToggleInput-DISABLED_CSS-d8pd3s2";
 /** Equal shares: the track fills its parent and every segment (icon-only too) takes `1 1 0`. */
 var FILL_WIDTH_CSS = "gx-ToggleInput-FILL_WIDTH_CSS-fc2kmgg";
-/** The selected segment's text. */
+/** The selected segment: the selection fill (the chosen-item role) and primary text; it fades in with the segment's color transition. */
 var SEGMENT_SELECTED_CSS = "gx-ToggleInput-SEGMENT_SELECTED_CSS-s1d7otlt";
-/** The selected segment's fill and hairline; it fades in with the segment's color transition. */
-var SEGMENT_SELECTED_FILL_CSS = "gx-ToggleInput-SEGMENT_SELECTED_FILL_CSS-s1wijxdi";
 /** Hover and press on an unselected, enabled segment of an editable group: the neutral ramp. */
-var SEGMENT_INTERACTIVE_CSS = "gx-ToggleInput-SEGMENT_INTERACTIVE_CSS-s169tnuo";
+var SEGMENT_INTERACTIVE_CSS = "gx-ToggleInput-SEGMENT_INTERACTIVE_CSS-s1wijxdi";
 /** A disabled option, or every segment of a disabled group. */
-var SEGMENT_DISABLED_CSS = "gx-ToggleInput-SEGMENT_DISABLED_CSS-svloi0q";
+var SEGMENT_DISABLED_CSS = "gx-ToggleInput-SEGMENT_DISABLED_CSS-s169tnuo";
 /** A read-only group: no hover, no pointer. */
-var SEGMENT_READ_ONLY_CSS = "gx-ToggleInput-SEGMENT_READ_ONLY_CSS-scgck5z";
+var SEGMENT_READ_ONLY_CSS = "gx-ToggleInput-SEGMENT_READ_ONLY_CSS-svloi0q";
 /**
 * No label: a square segment with the icon centered (an equal share under `fillWidth`, where
-* `flex: 1 1 0` overrides the width). The square is explicit, the track's inner height, not
-* `aspect-ratio`: Safari sizes an inline-flex track from an aspect-ratio item's pre-stretch width,
-* so the stretched segments overflowed the track and the last one was clipped.
+* `flex: 1 1 0` overrides the width). The square is explicit, the frame's inner height plus the
+* seam a later segment carries, not `aspect-ratio`: Safari sizes an inline-flex track from an
+* aspect-ratio item's pre-stretch width, so the stretched segments overflowed the track and the
+* last one was clipped.
 */
-var SEGMENT_ICON_ONLY_CSS = "gx-ToggleInput-SEGMENT_ICON_ONLY_CSS-snqdq0p";
+var SEGMENT_ICON_ONLY_CSS = "gx-ToggleInput-SEGMENT_ICON_ONLY_CSS-scgck5z";
 /** The Field ToggleInput renders for its own `label` / `error` uses the same rung. */
 var TOGGLE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
 	["X_SMALL"]: FieldSize.X_SMALL,
@@ -221,7 +236,7 @@ function TrackBody({ trackProps, forwardedRef, isRoot }) {
 				tabIndex: index === tabStopIndex ? 0 : -1,
 				onClick: () => select(index),
 				onKeyDown: (event) => handleKeyDown(event, index),
-				className: cx(isSelected && SEGMENT_SELECTED_CSS, isSelected && SEGMENT_SELECTED_FILL_CSS, !isSelected && isEnabled && !isReadOnly && SEGMENT_INTERACTIVE_CSS, !isEnabled && SEGMENT_DISABLED_CSS, isEnabled && isReadOnly && SEGMENT_READ_ONLY_CSS, isIconOnly && SEGMENT_ICON_ONLY_CSS),
+				className: cx(isSelected && SEGMENT_SELECTED_CSS, !isSelected && isEnabled && !isReadOnly && SEGMENT_INTERACTIVE_CSS, !isEnabled && SEGMENT_DISABLED_CSS, isEnabled && isReadOnly && SEGMENT_READ_ONLY_CSS, isIconOnly && SEGMENT_ICON_ONLY_CSS),
 				children: [option.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
 					component: option.icon,
 					size: TOGGLE_INPUT_SIZE_TO_ICON_PX_MAP[size],