@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/feedback/ProgressBar.js

@@ -0,0 +1,183 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { formatPercent } from "../utils/format.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/feedback/ProgressBar.tsx
+/**
+* The horizontal progress bar: a thin track that fills from the start edge to show how much of a
+* measured task is done (a sync, an upload, an onboarding checklist, a quota). An optional visible
+* `label` sits above the bar and `shouldShowValue` puts the formatted percentage at the end of that
+* line. `isIndeterminate` sweeps a segment along the track while the total is not known yet.
+*
+* The bar sibling of `ProgressCircle`, with the same props (`value`, `label` / `ariaLabel`, `size`,
+* `variant` / `color`, `shouldShowValue`), defaults and ARIA: a `role="progressbar"`, not a live
+* region. Only the bar has `isIndeterminate` (a ring with no known value is `Spinner`). The value
+* is one unitless custom property (`--gx-progress-bar-value`) read as the fill's `scaleX`.
+*
+* Replaces 1.x `charts/ProgressBar` (`percentage` → `value`, `height` → `size`; `noSliverOnZero`
+* and `noAnimation` are gone; a name is now required).
+*/
+/** Canonical rungs; the member names the rung of the text the bar sits with. */
+var ProgressBarSize = /* @__PURE__ */ function(ProgressBarSize) {
+	/** 2px track, caption label. */
+	ProgressBarSize["X_SMALL"] = "X_SMALL";
+	/** 4px track, body_sm label. */
+	ProgressBarSize["SMALL"] = "SMALL";
+	/** 4px track, body_md label. The default (1.x `height` 4). */
+	ProgressBarSize["MEDIUM"] = "MEDIUM";
+	/** 6px track, body_lg label. */
+	ProgressBarSize["LARGE"] = "LARGE";
+	/** 8px track, body_lg label. */
+	ProgressBarSize["X_LARGE"] = "X_LARGE";
+	return ProgressBarSize;
+}({});
+/** Fill color (Constitution V-A color set, subset; the same members as `ProgressCircleVariant`). */
+var ProgressBarVariant = /* @__PURE__ */ function(ProgressBarVariant) {
+	/** `text.primary`. The default. */
+	ProgressBarVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. */
+	ProgressBarVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. */
+	ProgressBarVariant["TERTIARY"] = "TERTIARY";
+	/** `text.success`: healthy, on track, complete. */
+	ProgressBarVariant["SUCCESS"] = "SUCCESS";
+	/** `text.warning`: at risk, nearing a limit. */
+	ProgressBarVariant["WARNING"] = "WARNING";
+	/** `text.error`: failing, over a limit. */
+	ProgressBarVariant["ERROR"] = "ERROR";
+	return ProgressBarVariant;
+}({});
+/** A block that spans its parent: the label line over the track. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ProgressBar-r12nr8gl",
+	propsAsIs: false
+});
+/** The label at the start, the value at the end of the same line. */
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-ProgressBar-Header-hesav0t",
+	propsAsIs: false
+});
+/**
+* The 1.x track, from tokens; it clips the fill's corners. The hairline is drawn by a layer under
+* the fill instead of the track's own border: browsers round a 0.5px border up to one device pixel,
+* which on a 1x screen would leave no room for the fill inside a 2px track.
+*/
+var Track = /*#__PURE__*/ styled("div")({
+	name: "Track",
+	class: "gx-ProgressBar-Track-t1cxqn1j",
+	propsAsIs: false
+});
+/** A full-width block scaled to the value: paint-only motion, eased at `duration.base`. */
+var Fill = /*#__PURE__*/ styled("div")({
+	name: "Fill",
+	class: "gx-ProgressBar-Fill-f1xq51tl",
+	propsAsIs: false
+});
+/**
+* A third-width segment that sweeps the track every `duration.base × 10` (1.5s). At rest (reduced
+* motion) it sits in the middle third, which cannot be read as "a third done". The keyframes are
+* global, so the name is `gx-` prefixed.
+*/
+var INDETERMINATE_CSS = "gx-ProgressBar-INDETERMINATE_CSS-ifwzsb";
+/** Puts the value in the second column, so it sits at the end of the line with or without a label. */
+var VALUE_CSS = "gx-ProgressBar-VALUE_CSS-v1tz8l3d";
+/** Sets `color` on the root; the fill reads `currentColor`. The label and value stay secondary. */
+var PROGRESS_BAR_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-ProgressBar-PRIMARY-p1mmftma",
+	["SECONDARY"]: "gx-ProgressBar-SECONDARY-szuthhn",
+	["TERTIARY"]: "gx-ProgressBar-TERTIARY-t8vjpd0",
+	["SUCCESS"]: "gx-ProgressBar-SUCCESS-sgk7jdy",
+	["WARNING"]: "gx-ProgressBar-WARNING-w1w2olvo",
+	["ERROR"]: "gx-ProgressBar-ERROR-e1qre8wf"
+};
+/** Categorical `color`: `text.<family>` on the root, the way a status variant renders. */
+var PROGRESS_BAR_COLOR_TO_CSS_MAP = {
+	red: "gx-ProgressBar-red-reiy0oi",
+	orange: "gx-ProgressBar-orange-o1epzlep",
+	amber: "gx-ProgressBar-amber-aasg8k0",
+	yellow: "gx-ProgressBar-yellow-y1kkinrj",
+	lime: "gx-ProgressBar-lime-lcvje08",
+	green: "gx-ProgressBar-green-gb5j54q",
+	emerald: "gx-ProgressBar-emerald-elbvi15",
+	teal: "gx-ProgressBar-teal-twaqggx",
+	cyan: "gx-ProgressBar-cyan-c6fb74o",
+	sky: "gx-ProgressBar-sky-s13m8tjk",
+	blue: "gx-ProgressBar-blue-b195062s",
+	indigo: "gx-ProgressBar-indigo-i1tjg1hb",
+	violet: "gx-ProgressBar-violet-v1hc7niq",
+	purple: "gx-ProgressBar-purple-p31v6jj",
+	fuchsia: "gx-ProgressBar-fuchsia-f1idth2y",
+	pink: "gx-ProgressBar-pink-psz64tr",
+	rose: "gx-ProgressBar-rose-r121jrhu"
+};
+/** Track thickness and the gap between the label line and the track. */
+var PROGRESS_BAR_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-ProgressBar-X_SMALL-xoqk5ch",
+	["SMALL"]: "gx-ProgressBar-SMALL-s1luqk3n",
+	["MEDIUM"]: "gx-ProgressBar-MEDIUM-m1hbdj3k",
+	["LARGE"]: "gx-ProgressBar-LARGE-l17skgql",
+	["X_LARGE"]: "gx-ProgressBar-X_LARGE-x1i0eise"
+};
+/** The label and value are the rung's text step (the ProgressCircle table). */
+var PROGRESS_BAR_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** 0–100; `NaN` → 0. */
+function clampPercent(value) {
+	if (Number.isNaN(value)) return 0;
+	return Math.min(100, Math.max(0, value));
+}
+/** A horizontal progress bar with an optional label line. */
+var ProgressBar = forwardRef(function ProgressBar({ value, isIndeterminate = false, shouldShowValue = false, variant = "PRIMARY", color, size = "MEDIUM", label, ariaLabel, className, style, ...rest }, ref) {
+	const labelId = useId();
+	const clamped = isIndeterminate || value === void 0 ? 0 : clampPercent(value);
+	const hasLabel = Boolean(label);
+	const isValueShown = shouldShowValue && !isIndeterminate;
+	const textSize = PROGRESS_BAR_SIZE_TO_TEXT_SIZE_MAP[size];
+	const percentText = formatPercent(clamped / 100);
+	const variables = { "--gx-progress-bar-value": String(clamped) };
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": isIndeterminate ? void 0 : Math.round(clamped),
+		"aria-valuetext": isIndeterminate ? void 0 : rest["aria-valuetext"] ?? percentText,
+		"aria-label": hasLabel ? rest["aria-label"] : ariaLabel ?? rest["aria-label"],
+		"aria-labelledby": hasLabel ? labelId : rest["aria-labelledby"],
+		className: cx(color !== void 0 ? PROGRESS_BAR_COLOR_TO_CSS_MAP[color] : PROGRESS_BAR_VARIANT_TO_CSS_MAP[variant], PROGRESS_BAR_SIZE_TO_CSS_MAP[size], className),
+		style: {
+			...variables,
+			...style
+		},
+		children: [(hasLabel || isValueShown) && /* @__PURE__ */ jsxs(Header, { children: [hasLabel && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: labelId,
+			size: textSize,
+			variant: TextVariant.SECONDARY,
+			lineClamp: 1,
+			children: label
+		}), isValueShown && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			variant: TextVariant.SECONDARY,
+			isTabular: true,
+			"aria-hidden": true,
+			className: VALUE_CSS,
+			children: percentText
+		})] }), /* @__PURE__ */ jsx(Track, { children: /* @__PURE__ */ jsx(Fill, { className: cx(isIndeterminate && INDETERMINATE_CSS) }) })]
+	});
+});
+ProgressBar.displayName = "ProgressBar";
+//#endregion
+export { ProgressBarSize, ProgressBarVariant, ProgressBar as default };

package/dist/feedback/ProgressCircle.d.ts

@@ -0,0 +1,99 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the member names the control rung the ring sits in. */
+export declare enum ProgressCircleSize {
+    /** 20px rung: 12px ring, caption label. */
+    X_SMALL = "X_SMALL",
+    /** 24px rung: 12px ring, body_sm label. */
+    SMALL = "SMALL",
+    /** 32px rung: 14px ring, body_md label. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px rung: 14px ring, body_lg label. */
+    LARGE = "LARGE",
+    /** 40px rung: 16px ring, body_lg label. */
+    X_LARGE = "X_LARGE"
+}
+/** Arc color (Constitution V-A color set, subset; the same members as `ProgressBarVariant`). */
+export declare enum ProgressCircleVariant {
+    /** `text.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary`. */
+    TERTIARY = "TERTIARY",
+    /** `text.success`: healthy, on track, complete. */
+    SUCCESS = "SUCCESS",
+    /** `text.warning`: at risk, nearing a limit. */
+    WARNING = "WARNING",
+    /** `text.error`: failing, over a limit. */
+    ERROR = "ERROR"
+}
+/** The value, the size and the shown value (everything except the color pair, the name pair and the passthrough). */
+interface ProgressCircleBaseProps extends AriaAttributes {
+    /** Progress from 0 to 100. Clamped to that range; `NaN` counts as 0. */
+    value: number;
+    /**
+     * The control rung the ring sits in: the ring is that rung's icon size (12 / 12 / 14 / 14 / 16px, the same footprint as `Spinner`), and `label` and the value take its type step (`caption` / `body_sm` / `body_md` / `body_lg` / `body_lg`).
+     * @default ProgressCircleSize.MEDIUM
+     */
+    size?: ProgressCircleSize;
+    /**
+     * Shows the formatted percentage ("40%") after the ring and the label.
+     * @default false
+     */
+    shouldShowValue?: boolean;
+}
+/** A ring colored by meaning (`variant`), or the default `PRIMARY`. */
+interface ProgressCircleVariantProps {
+    /**
+     * Color of the arc: a neutral step, or a status when the progress means something (healthy, at risk, failing). Not with `color`.
+     * @default ProgressCircleVariant.PRIMARY
+     */
+    variant?: ProgressCircleVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A ring colored by category (`color`). */
+interface ProgressCircleColorProps {
+    /**
+     * Color of the arc: a neutral step, or a status when the progress means something (healthy, at risk, failing). Not with `color`.
+     * @default ProgressCircleVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the arc takes `text.<family>`, the way a
+     * status variant renders. For a category's color (a source type, a team); meanings take
+     * `variant`. Not with `variant`.
+     */
+    color: PaletteColor;
+}
+/** The passthrough, kept last so `className` and `style` close the props table. */
+interface ProgressCirclePassthroughProps {
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. Merged after `--gx-progress-circle-value`. */
+    style?: CSSProperties;
+}
+/** A visible label, which is also the accessible name. */
+interface ProgressCircleLabelledProps {
+    /** Visible text after the ring ("Uploading"). It is also the progress bar's accessible name. */
+    label: string;
+    /** Accessible name when there is no visible `label` ("Upload progress"). The type requires `label` or `ariaLabel`. */
+    ariaLabel?: string;
+}
+/** No visible label: the accessible name is required. */
+interface ProgressCircleUnlabelledProps {
+    /** Visible text after the ring ("Uploading"). It is also the progress bar's accessible name. */
+    label?: undefined;
+    /** Accessible name when there is no visible `label` ("Upload progress"). The type requires `label` or `ariaLabel`. */
+    ariaLabel: string;
+}
+/** ProgressCircle props. `label` or `ariaLabel` is required; `variant` and `color` are exclusive. */
+export type ProgressCircleProps = ProgressCircleBaseProps & (ProgressCircleVariantProps | ProgressCircleColorProps) & (ProgressCircleLabelledProps | ProgressCircleUnlabelledProps) & ProgressCirclePassthroughProps;
+/** A determinate progress ring with an optional label and value after it. */
+declare const ProgressCircle: import("react").ForwardRefExoticComponent<ProgressCircleProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default ProgressCircle;

package/dist/feedback/ProgressCircle.js

@@ -0,0 +1,187 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { formatPercent } from "../utils/format.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/feedback/ProgressCircle.tsx
+/**
+* The determinate progress ring: an arc that fills clockwise from 12 o'clock to show how much of
+* a measured task is done (an upload, an import, a quota). The ring is the rung's icon size, the
+* same footprint as `Spinner`, so a host swaps Spinner (unknown progress) for ProgressCircle
+* (known progress) without moving anything. Optionally a visible `label` after it, and
+* `shouldShowValue` for the formatted percentage after that.
+*
+* The ring sibling of `ProgressBar`, with the same props (`value`, `label` / `ariaLabel`, `size`,
+* `variant` / `color`, `shouldShowValue`), defaults and ARIA: a `role="progressbar"`, not a live
+* region. The value is one unitless custom property
+* (`--gx-progress-circle-value`) read as the arc's dash length: the circles use
+* `pathLength={100}`, so the dash length is the percentage. Not indeterminate (`Spinner`), not
+* the bar (`ProgressBar`), not a gauge (a chart).
+*/
+/** Canonical rungs; the member names the control rung the ring sits in. */
+var ProgressCircleSize = /* @__PURE__ */ function(ProgressCircleSize) {
+	/** 20px rung: 12px ring, caption label. */
+	ProgressCircleSize["X_SMALL"] = "X_SMALL";
+	/** 24px rung: 12px ring, body_sm label. */
+	ProgressCircleSize["SMALL"] = "SMALL";
+	/** 32px rung: 14px ring, body_md label. The default. */
+	ProgressCircleSize["MEDIUM"] = "MEDIUM";
+	/** 36px rung: 14px ring, body_lg label. */
+	ProgressCircleSize["LARGE"] = "LARGE";
+	/** 40px rung: 16px ring, body_lg label. */
+	ProgressCircleSize["X_LARGE"] = "X_LARGE";
+	return ProgressCircleSize;
+}({});
+/** Arc color (Constitution V-A color set, subset; the same members as `ProgressBarVariant`). */
+var ProgressCircleVariant = /* @__PURE__ */ function(ProgressCircleVariant) {
+	/** `text.primary`. The default. */
+	ProgressCircleVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. */
+	ProgressCircleVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. */
+	ProgressCircleVariant["TERTIARY"] = "TERTIARY";
+	/** `text.success`: healthy, on track, complete. */
+	ProgressCircleVariant["SUCCESS"] = "SUCCESS";
+	/** `text.warning`: at risk, nearing a limit. */
+	ProgressCircleVariant["WARNING"] = "WARNING";
+	/** `text.error`: failing, over a limit. */
+	ProgressCircleVariant["ERROR"] = "ERROR";
+	return ProgressCircleVariant;
+}({});
+/** Phrasing content only (`span`, `svg`), so a ProgressCircle is valid inside a `<button>`. */
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-ProgressCircle-r15f649n",
+	propsAsIs: false
+});
+/** Rotated so the arc starts at 12 o'clock and runs clockwise. */
+var Ring = /*#__PURE__*/ styled("svg")({
+	name: "Ring",
+	class: "gx-ProgressCircle-Ring-ro2p09q",
+	propsAsIs: false
+});
+var Track = /*#__PURE__*/ styled("circle")({
+	name: "Track",
+	class: "gx-ProgressCircle-Track-t1b25kg7",
+	propsAsIs: true
+});
+/** Butt caps keep 0 empty and 100 a closed ring. */
+var Arc = /*#__PURE__*/ styled("circle")({
+	name: "Arc",
+	class: "gx-ProgressCircle-Arc-a15y101x",
+	propsAsIs: true
+});
+/** Sets `color` on the root; the arc reads `currentColor`. The label and value stay secondary. */
+var PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-ProgressCircle-PRIMARY-p1wen69c",
+	["SECONDARY"]: "gx-ProgressCircle-SECONDARY-spm8o6t",
+	["TERTIARY"]: "gx-ProgressCircle-TERTIARY-t16byt1k",
+	["SUCCESS"]: "gx-ProgressCircle-SUCCESS-s1ev72rx",
+	["WARNING"]: "gx-ProgressCircle-WARNING-w1ii09vl",
+	["ERROR"]: "gx-ProgressCircle-ERROR-e149xl4a"
+};
+/** Categorical `color`: `text.<family>` on the root, the way a status variant renders. */
+var PROGRESS_CIRCLE_COLOR_TO_CSS_MAP = {
+	red: "gx-ProgressCircle-red-r5wr4fy",
+	orange: "gx-ProgressCircle-orange-o3cpdk8",
+	amber: "gx-ProgressCircle-amber-a3bcytf",
+	yellow: "gx-ProgressCircle-yellow-y1b1indu",
+	lime: "gx-ProgressCircle-lime-ls32e8h",
+	green: "gx-ProgressCircle-green-g1z891t",
+	emerald: "gx-ProgressCircle-emerald-e169l71b",
+	teal: "gx-ProgressCircle-teal-t7wy6jh",
+	cyan: "gx-ProgressCircle-cyan-cid9v1r",
+	sky: "gx-ProgressCircle-sky-sphjv2k",
+	blue: "gx-ProgressCircle-blue-b14y8mwv",
+	indigo: "gx-ProgressCircle-indigo-i1gpmklw",
+	violet: "gx-ProgressCircle-violet-v15o8mw",
+	purple: "gx-ProgressCircle-purple-p865hhm",
+	fuchsia: "gx-ProgressCircle-fuchsia-f1lkh9dd",
+	pink: "gx-ProgressCircle-pink-p4a8qsx",
+	rose: "gx-ProgressCircle-rose-rzljd4b"
+};
+/** Ring box, root height (the rung's text line height) and gap: the Spinner table. */
+var PROGRESS_CIRCLE_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-ProgressCircle-X_SMALL-xoz9zwb",
+	["SMALL"]: "gx-ProgressCircle-SMALL-si0gudm",
+	["MEDIUM"]: "gx-ProgressCircle-MEDIUM-m1tg3t7s",
+	["LARGE"]: "gx-ProgressCircle-LARGE-l1tizbqg",
+	["X_LARGE"]: "gx-ProgressCircle-X_LARGE-xuuqsnf"
+};
+/** The label and value are the rung's text step (the ProgressBar table). */
+var PROGRESS_CIRCLE_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** 0–100; `NaN` → 0. */
+function clampPercent(value) {
+	if (Number.isNaN(value)) return 0;
+	return Math.min(100, Math.max(0, value));
+}
+/** A determinate progress ring with an optional label and value after it. */
+var ProgressCircle = forwardRef(function ProgressCircle({ value, shouldShowValue = false, variant = "PRIMARY", color, size = "MEDIUM", label, ariaLabel, className, style, ...rest }, ref) {
+	const labelId = useId();
+	const clamped = clampPercent(value);
+	const hasLabel = Boolean(label);
+	const textSize = PROGRESS_CIRCLE_SIZE_TO_TEXT_SIZE_MAP[size];
+	const percentText = formatPercent(clamped / 100);
+	const variables = { "--gx-progress-circle-value": String(clamped) };
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(clamped),
+		"aria-valuetext": rest["aria-valuetext"] ?? percentText,
+		"aria-label": hasLabel ? rest["aria-label"] : ariaLabel ?? rest["aria-label"],
+		"aria-labelledby": hasLabel ? labelId : rest["aria-labelledby"],
+		className: cx(color !== void 0 ? PROGRESS_CIRCLE_COLOR_TO_CSS_MAP[color] : PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP[variant], PROGRESS_CIRCLE_SIZE_TO_CSS_MAP[size], className),
+		style: {
+			...variables,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Ring, {
+				viewBox: "0 0 16 16",
+				"aria-hidden": true,
+				focusable: "false",
+				children: [/* @__PURE__ */ jsx(Track, {
+					cx: 8,
+					cy: 8,
+					r: 7,
+					pathLength: 100
+				}), /* @__PURE__ */ jsx(Arc, {
+					cx: 8,
+					cy: 8,
+					r: 7,
+					pathLength: 100
+				})]
+			}),
+			hasLabel && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				id: labelId,
+				size: textSize,
+				variant: TextVariant.SECONDARY,
+				isTabular: true,
+				children: label
+			}),
+			shouldShowValue && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: textSize,
+				variant: TextVariant.SECONDARY,
+				isTabular: true,
+				"aria-hidden": true,
+				children: percentText
+			})
+		]
+	});
+});
+ProgressCircle.displayName = "ProgressCircle";
+//#endregion
+export { ProgressCircleSize, ProgressCircleVariant, ProgressCircle as default };

package/dist/feedback/Skeleton.d.ts

@@ -0,0 +1,69 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Canonical rungs; the member names the control rung the placeholder stands in for. */
+export declare enum SkeletonSize {
+    /** 20px rung: `TEXT` 12px line (`caption`), `CIRCLE` 20px, `RECT` 20px. */
+    X_SMALL = "X_SMALL",
+    /** 24px rung: `TEXT` 16px line (`body_sm`), `CIRCLE` 24px, `RECT` 24px. */
+    SMALL = "SMALL",
+    /** 32px rung: `TEXT` 16px line (`body_md`), `CIRCLE` 32px, `RECT` 32px. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px rung: `TEXT` 20px line (`body_lg`), `CIRCLE` 36px, `RECT` 36px. */
+    LARGE = "LARGE",
+    /** 40px rung: `TEXT` 20px line (`body_lg`), `CIRCLE` 40px, `RECT` 40px. */
+    X_LARGE = "X_LARGE"
+}
+/** Shape of the placeholder (Constitution V-A local mode set: TEXT / CIRCLE / RECT). */
+export declare enum SkeletonVariant {
+    /** One or more text lines. The default. */
+    TEXT = "TEXT",
+    /** A circle: an avatar, a round icon. */
+    CIRCLE = "CIRCLE",
+    /** A rectangle: a control, an image, a block. */
+    RECT = "RECT"
+}
+export interface SkeletonProps extends AriaAttributes {
+    /**
+     * Shape of the placeholder: text lines, a circle, or a rectangle. In wrapper mode it sets only
+     * the corner radius.
+     * @default SkeletonVariant.TEXT
+     */
+    variant?: SkeletonVariant;
+    /**
+     * The control rung the placeholder stands in for. `TEXT`: the rung's text line height.
+     * `CIRCLE`: diameter = rung height. `RECT`: minimum height = rung height. Ignored in wrapper
+     * mode.
+     * @default SkeletonSize.MEDIUM
+     */
+    size?: SkeletonSize;
+    /**
+     * `TEXT` only: number of lines; with more than one, the last line is 80% wide. Floored; values
+     * below 1 render 1. Ignored in wrapper mode.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Wrapper mode only: while `true`, `children` are hidden and the placeholder takes their exact
+     * box; while `false`, `children` render as-is. A standalone Skeleton always renders.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** The content to stand in for. Passing it switches on wrapper mode. */
+    children?: ReactNode;
+    /**
+     * Wrapper mode: stretch to the parent's width instead of hugging `children` (for content that
+     * fills its width). A standalone `TEXT` or `RECT` always fills its parent.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** DOM id on the root `<span>` while the placeholder renders. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>` while the placeholder renders. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>` while the placeholder renders. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A pulsing placeholder in the shape of text lines, a circle or a rectangle, or of `children`. */
+declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Skeleton;

package/dist/feedback/Skeleton.js

@@ -0,0 +1,130 @@
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/feedback/Skeleton.tsx
+/**
+* The loading placeholder: a quiet pulsing fill that holds the shape of content that has not
+* arrived yet, so the layout does not jump when it does. Replaces 1.x `TextShimmer` and
+* `AvatarShimmer`.
+*
+* Two modes, switched by the presence of `children`:
+* - **Standalone** (`<Skeleton variant={…} size={…} />`) draws a shape sized from the control
+*   rungs: text lines (`TEXT`, the rung's line height), a circle (`CIRCLE`, the rung height), or
+*   a rectangle (`RECT`, at least the rung height, filling a parent with a definite height).
+*   `TEXT` and `RECT` fill their parent's width; size them with the parent.
+* - **Wrapper** (`<Skeleton isLoading>{content}</Skeleton>`) hides the content while `isLoading`
+*   and paints the placeholder over exactly the content's box. When loading ends it returns
+*   `children` unwrapped.
+*
+* Always `aria-hidden`: the loading region sets `aria-busy="true"` on itself and, if the wait
+* should be announced, holds one `Spinner`. Not an unmeasured "working" indicator (`Spinner`) and
+* not progress (`ProgressBar`, `ProgressCircle`).
+*/
+/** Canonical rungs; the member names the control rung the placeholder stands in for. */
+var SkeletonSize = /* @__PURE__ */ function(SkeletonSize) {
+	/** 20px rung: `TEXT` 12px line (`caption`), `CIRCLE` 20px, `RECT` 20px. */
+	SkeletonSize["X_SMALL"] = "X_SMALL";
+	/** 24px rung: `TEXT` 16px line (`body_sm`), `CIRCLE` 24px, `RECT` 24px. */
+	SkeletonSize["SMALL"] = "SMALL";
+	/** 32px rung: `TEXT` 16px line (`body_md`), `CIRCLE` 32px, `RECT` 32px. The default. */
+	SkeletonSize["MEDIUM"] = "MEDIUM";
+	/** 36px rung: `TEXT` 20px line (`body_lg`), `CIRCLE` 36px, `RECT` 36px. */
+	SkeletonSize["LARGE"] = "LARGE";
+	/** 40px rung: `TEXT` 20px line (`body_lg`), `CIRCLE` 40px, `RECT` 40px. */
+	SkeletonSize["X_LARGE"] = "X_LARGE";
+	return SkeletonSize;
+}({});
+/** Shape of the placeholder (Constitution V-A local mode set: TEXT / CIRCLE / RECT). */
+var SkeletonVariant = /* @__PURE__ */ function(SkeletonVariant) {
+	/** One or more text lines. The default. */
+	SkeletonVariant["TEXT"] = "TEXT";
+	/** A circle: an avatar, a round icon. */
+	SkeletonVariant["CIRCLE"] = "CIRCLE";
+	/** A rectangle: a control, an image, a block. */
+	SkeletonVariant["RECT"] = "RECT";
+	return SkeletonVariant;
+}({});
+/** All `span`s (phrasing content), so a Skeleton is valid inside a `<button>`. */
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Skeleton-r1mbj6xy",
+	propsAsIs: false
+});
+/** One text line: the line height minus 4px, so it sits 2px inside its line box. */
+var Bar = /*#__PURE__*/ styled("span")({
+	name: "Bar",
+	class: "gx-Skeleton-Bar-b16jbogi",
+	propsAsIs: false
+});
+/**
+* Wrapper mode's content holder: lays out as if absent (`display: contents`), keeps its box, is
+* not painted, and leaves the tab order and the accessibility tree (`visibility: hidden`).
+*/
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-Skeleton-Content-cya5pft",
+	propsAsIs: false
+});
+/**
+* The 1.x opacity pulse (0.75 → 0.25 → 0.75), 2.4s. The keyframes are global, so the name is
+* `gx-` prefixed. `REDUCED_MOTION` stops it at `opacity: 0.75`.
+*/
+var PULSE_CSS = "gx-Skeleton-PULSE_CSS-p1rhnmpm";
+/** Sets the rung's text line height and control height as custom properties on the root. */
+var SKELETON_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Skeleton-X_SMALL-x1skcjsy",
+	["SMALL"]: "gx-Skeleton-SMALL-s44fhjo",
+	["MEDIUM"]: "gx-Skeleton-MEDIUM-m575bv0",
+	["LARGE"]: "gx-Skeleton-LARGE-lrnwudx",
+	["X_LARGE"]: "gx-Skeleton-X_LARGE-x1ocp1hc"
+};
+/** Standalone shapes. `TEXT` is a column of `Bar`s exactly `lines × line height` tall. */
+var SKELETON_VARIANT_TO_CSS_MAP = {
+	["TEXT"]: "gx-Skeleton-TEXT-t1l8sj4g",
+	["CIRCLE"]: "gx-Skeleton-CIRCLE-c152d2f9",
+	["RECT"]: "gx-Skeleton-RECT-r1eoumjp"
+};
+/** Wrapper mode's corner radius by variant: text inline, circle round, rectangle a control. */
+var SKELETON_VARIANT_TO_RADIUS_CSS_MAP = {
+	["TEXT"]: "gx-Skeleton-TEXT-tz7uzak",
+	["CIRCLE"]: "gx-Skeleton-CIRCLE-c4pgw74",
+	["RECT"]: "gx-Skeleton-RECT-r14qcxh7"
+};
+/** Wrapper mode while loading: hugs the content's box, filled. */
+var WRAPPER_CSS = "gx-Skeleton-WRAPPER_CSS-w1rlj9la";
+/** Wrapper mode `fillWidth`: stretch to the parent's width. */
+var FILL_WIDTH_CSS = "gx-Skeleton-FILL_WIDTH_CSS-fkhva6f";
+/** One stable key per line: `lines` floored, at least 1 (a non-finite value renders 1). */
+function toLineKeys(lines) {
+	const count = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 1;
+	return Array.from({ length: count }, (_, index) => `line-${index + 1}`);
+}
+/** A pulsing placeholder in the shape of text lines, a circle or a rectangle, or of `children`. */
+var Skeleton = forwardRef(function Skeleton({ variant = "TEXT", size = "MEDIUM", lines = 1, isLoading = false, children, fillWidth = false, id, className, style, ...rest }, ref) {
+	if (children !== void 0) {
+		if (!isLoading) return /* @__PURE__ */ jsx(Fragment$1, { children });
+		return /* @__PURE__ */ jsx(Root, {
+			...rest,
+			"aria-hidden": "true",
+			ref,
+			id,
+			className: cx(PULSE_CSS, WRAPPER_CSS, SKELETON_VARIANT_TO_RADIUS_CSS_MAP[variant], fillWidth && FILL_WIDTH_CSS, className),
+			style,
+			children: /* @__PURE__ */ jsx(Content, { children })
+		});
+	}
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		"aria-hidden": "true",
+		ref,
+		id,
+		className: cx(PULSE_CSS, SKELETON_SIZE_TO_CSS_MAP[size], SKELETON_VARIANT_TO_CSS_MAP[variant], className),
+		style,
+		children: variant === "TEXT" ? toLineKeys(lines).map((lineKey) => /* @__PURE__ */ jsx(Bar, {}, lineKey)) : null
+	});
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { SkeletonSize, SkeletonVariant, Skeleton as default };