@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/shapes/Circle.js

@@ -1,26 +1,128 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/shapes/Circle.tsx
-var _exp2 = () => ({ $size }) => getCssSizeValue($size);
-var _exp3 = () => ({ theme, $hex }) => $hex ?? theme.color.text.tertiary;
-var CircleWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "CircleWrapper",
-	class: "cmbdg2q",
-	propsAsIs: false,
-	vars: {
-		"cmbdg2q-0": [_exp2()],
-		"cmbdg2q-1": [_exp3()]
-	}
-}));
-/** A filled dot. Used for status indicators and legend swatches. */
-var Circle = ({ size, hex }) => {
-	return /* @__PURE__ */ jsx(CircleWrapper, {
-		$size: size,
-		$hex: hex
-	});
+/**
+* A small, static, filled round mark beside a label: a chart-legend or tooltip series dot, a
+* categorical color key, the color preview of a user-defined category. The adjacent text carries
+* the meaning; the dot carries the color.
+*
+* Color is CSS, not JS: `CIRCLE_VARIANT_TO_CSS_MAP` (or `CIRCLE_COLOR_TO_CSS_MAP` for a categorical
+* `color`) sets `color` from `color.text.*` and the fill
+* reads `currentColor` (the Icon pattern), so `INHERIT` and `hex` share one path and a theme
+* switch needs no re-render. `hex` is set as the `--gx-circle-hex` custom property in
+* `style` and read by a block switched on only when the prop is set.
+*
+* `size` names the rung of the text the dot sits beside. Every diameter leaves an even gap to its
+* paired line height, so a dot centered beside its `Text` lands on whole pixels. Not live status
+* (`Beacon`), not a loading shape (`Skeleton`), not an avatar. `Square` is its square sibling with
+* the same API.
+*/
+/** Canonical rungs; the member names the rung of the text the dot sits beside. */
+var CircleSize = /* @__PURE__ */ function(CircleSize) {
+	/** 6px, beside `caption` (12px line). */
+	CircleSize["X_SMALL"] = "X_SMALL";
+	/** 8px, beside `body_sm` (16px line). */
+	CircleSize["SMALL"] = "SMALL";
+	/** 10px, beside `body_md` (16px line). The default. */
+	CircleSize["MEDIUM"] = "MEDIUM";
+	/** 10px, beside `body_lg` (20px line). */
+	CircleSize["LARGE"] = "LARGE";
+	/** 12px, beside `body_lg` (20px line). */
+	CircleSize["X_LARGE"] = "X_LARGE";
+	return CircleSize;
+}({});
+/** Fill color role (Constitution V-A color set). Resolves to `color.text.*`. */
+var CircleVariant = /* @__PURE__ */ function(CircleVariant) {
+	/** `text.primary`. */
+	CircleVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. */
+	CircleVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. The default (the 1.x fill). */
+	CircleVariant["TERTIARY"] = "TERTIARY";
+	/** `text.disabled`. */
+	CircleVariant["DISABLED"] = "DISABLED";
+	/** The parent's color (`currentColor`). */
+	CircleVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
+	CircleVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning, `text.warning`. */
+	CircleVariant["WARNING"] = "WARNING";
+	/** Status: error, `text.error`. */
+	CircleVariant["ERROR"] = "ERROR";
+	return CircleVariant;
+}({});
+/**
+* Phrasing content, so a dot is valid inside `Text`, a `<button>` legend item or a `<label>`.
+* The fill is `currentColor`; `forced-color-adjust: none` keeps it visible in high contrast.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Circle-rmbdg2q",
+	propsAsIs: false
+});
+/** Diameter per rung; the even gap to the paired line height keeps the dot on whole pixels. */
+var CIRCLE_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Circle-X_SMALL-xw6jv09",
+	["SMALL"]: "gx-Circle-SMALL-s1v67l5n",
+	["MEDIUM"]: "gx-Circle-MEDIUM-m1ql9cyi",
+	["LARGE"]: "gx-Circle-LARGE-l18slym0",
+	["X_LARGE"]: "gx-Circle-X_LARGE-x1huwzff"
+};
+/** Sets `color`; the fill reads it. Block for block the same as `ICON_VARIANT_TO_CSS_MAP`. */
+var CIRCLE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Circle-PRIMARY-p82kobq",
+	["SECONDARY"]: "gx-Circle-SECONDARY-sgdyoo",
+	["TERTIARY"]: "gx-Circle-TERTIARY-tqd9fl4",
+	["DISABLED"]: "gx-Circle-DISABLED-d1yji9a2",
+	["INHERIT"]: "gx-Circle-INHERIT-i18k7fem",
+	["SUCCESS"]: "gx-Circle-SUCCESS-s1uz27m2",
+	["WARNING"]: "gx-Circle-WARNING-w1wd9i5w",
+	["ERROR"]: "gx-Circle-ERROR-e4bqin2"
 };
+/** Categorical `color`: `text.<family>`, the way a status variant renders. */
+var CIRCLE_COLOR_TO_CSS_MAP = {
+	red: "gx-Circle-red-risghat",
+	orange: "gx-Circle-orange-ornyxi5",
+	amber: "gx-Circle-amber-amlehi9",
+	yellow: "gx-Circle-yellow-yx4zu59",
+	lime: "gx-Circle-lime-lmm7dfa",
+	green: "gx-Circle-green-g15qmdzt",
+	emerald: "gx-Circle-emerald-e1p4fg4l",
+	teal: "gx-Circle-teal-t6eszpj",
+	cyan: "gx-Circle-cyan-c1kmyxwu",
+	sky: "gx-Circle-sky-sr4sdq5",
+	blue: "gx-Circle-blue-bw9vccf",
+	indigo: "gx-Circle-indigo-i1rmact7",
+	violet: "gx-Circle-violet-vyv0gwd",
+	purple: "gx-Circle-purple-pdx6kbq",
+	fuchsia: "gx-Circle-fuchsia-f1j11685",
+	pink: "gx-Circle-pink-pgz62lk",
+	rose: "gx-Circle-rose-re429ux"
+};
+/** Declared after the variant and color maps so `hex` wins over them. */
+var HEX_CSS = "gx-Circle-HEX_CSS-h1h7hg24";
+/** A filled dot beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
+var Circle = forwardRef(function Circle({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
+	const variables = {};
+	if (hex !== void 0) variables["--gx-circle-hex"] = hex;
+	return /* @__PURE__ */ jsx(Root, {
+		...ariaLabel === void 0 ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": ariaLabel
+		},
+		...rest,
+		ref,
+		id,
+		className: cx(CIRCLE_SIZE_TO_CSS_MAP[size], color !== void 0 ? CIRCLE_COLOR_TO_CSS_MAP[color] : CIRCLE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		style: {
+			...variables,
+			...style
+		}
+	});
+});
+Circle.displayName = "Circle";
 //#endregion
-export { Circle as default };
+export { CircleSize, CircleVariant, Circle as default };

package/dist/shapes/Square.d.ts

@@ -1,9 +1,85 @@
-export interface SquareProps {
-    /** Side length. A number is px. */
-    size: number | string;
-    /** Fill color. @default theme.color.text.tertiary */
-    hex?: string;
-}
-/** A filled square. Used for legend swatches and color chips. */
-declare const Square: ({ size, hex }: SquareProps) => import("react").JSX.Element;
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the member names the rung of the text the mark sits beside. */
+export declare enum SquareSize {
+    /** 6px, beside `caption` (12px line). */
+    X_SMALL = "X_SMALL",
+    /** 8px, beside `body_sm` (16px line). */
+    SMALL = "SMALL",
+    /** 10px, beside `body_md` (16px line). The default. */
+    MEDIUM = "MEDIUM",
+    /** 10px, beside `body_lg` (20px line). */
+    LARGE = "LARGE",
+    /** 12px, beside `body_lg` (20px line). */
+    X_LARGE = "X_LARGE"
+}
+/** Fill color role (Constitution V-A color set). Resolves to `color.text.*`. */
+export declare enum SquareVariant {
+    /** `text.primary`. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary`. The default (the 1.x fill). */
+    TERTIARY = "TERTIARY",
+    /** `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color (`currentColor`). */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
+    SUCCESS = "SUCCESS",
+    /** Status: warning, `text.warning`. */
+    WARNING = "WARNING",
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
+}
+interface SquareBaseProps extends AriaAttributes {
+    /**
+     * The rung of the text the mark sits beside. Side 6 / 8 / 10 / 10 / 12px for `X_SMALL` …
+     * `X_LARGE`.
+     * @default SquareSize.MEDIUM
+     */
+    size?: SquareSize;
+    /** Raw fill color for data-driven colors (chart series, user categories). Discouraged otherwise: it does not follow the theme. Overrides `variant` and `color`. */
+    hex?: Hex;
+    /** Accessible name when the mark carries meaning on its own; without it the mark is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** 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. */
+    style?: CSSProperties;
+}
+/** A mark colored by meaning (`variant`), or the default `TERTIARY`. */
+interface SquareVariantProps {
+    /**
+     * Fill color role: a neutral step or a status, following the theme. `INHERIT` fills
+     * with the parent's `currentColor`. Not with `color`.
+     * @default SquareVariant.TERTIARY
+     */
+    variant?: SquareVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A mark colored by category (`color`). */
+interface SquareColorProps {
+    /**
+     * Fill color role: a neutral step or a status, following the theme. `INHERIT` fills
+     * with the parent's `currentColor`. Not with `color`.
+     * @default SquareVariant.TERTIARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): fills with `text.<family>`, the way a
+     * status variant renders. For categories (a series, a source type); meanings take `variant`.
+     * Not with `variant`.
+     */
+    color: PaletteColor;
+}
+/** Square props. Passing both `variant` and `color` is a type error. */
+export type SquareProps = SquareBaseProps & (SquareVariantProps | SquareColorProps);
+/** A filled square mark beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
+declare const Square: import("react").ForwardRefExoticComponent<SquareProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Square;

package/dist/shapes/Square.js

@@ -1,26 +1,129 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/shapes/Square.tsx
-var _exp2 = () => ({ $size }) => getCssSizeValue($size);
-var _exp3 = () => ({ theme, $hex }) => $hex ?? theme.color.text.tertiary;
-var SquareWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SquareWrapper",
-	class: "s1ibzzfh",
-	propsAsIs: false,
-	vars: {
-		"s1ibzzfh-0": [_exp2()],
-		"s1ibzzfh-1": [_exp3()]
-	}
-}));
-/** A filled square. Used for legend swatches and color chips. */
-var Square = ({ size, hex }) => {
-	return /* @__PURE__ */ jsx(SquareWrapper, {
-		$size: size,
-		$hex: hex
-	});
+/**
+* A small, static, filled square mark beside a label: the legend key of a bar, area or heatmap
+* series, or a categorical color key. The adjacent text carries the meaning; the mark carries the
+* color. The square sibling of `Circle`, with the identical API, size ladder and color mapping: a
+* circle keys a line or point series, a square keys a filled area or bar.
+*
+* Color is CSS, not JS: `SQUARE_VARIANT_TO_CSS_MAP` (or `SQUARE_COLOR_TO_CSS_MAP` for a categorical
+* `color`) sets `color` from `color.text.*` and the fill
+* reads `currentColor` (the Icon pattern), so `INHERIT` and `hex` share one path and a theme
+* switch needs no re-render. `hex` is set as the `--gx-square-hex` custom property in
+* `style` and read by a block switched on only when the prop is set.
+*
+* `size` names the rung of the text the mark sits beside. Every side leaves an even gap to its
+* paired line height, so a mark centered beside its `Text` lands on whole pixels with crisp edges.
+* Not a loading shape (`Skeleton`), not a swatch picker (`ColorInput`).
+*/
+/** Canonical rungs; the member names the rung of the text the mark sits beside. */
+var SquareSize = /* @__PURE__ */ function(SquareSize) {
+	/** 6px, beside `caption` (12px line). */
+	SquareSize["X_SMALL"] = "X_SMALL";
+	/** 8px, beside `body_sm` (16px line). */
+	SquareSize["SMALL"] = "SMALL";
+	/** 10px, beside `body_md` (16px line). The default. */
+	SquareSize["MEDIUM"] = "MEDIUM";
+	/** 10px, beside `body_lg` (20px line). */
+	SquareSize["LARGE"] = "LARGE";
+	/** 12px, beside `body_lg` (20px line). */
+	SquareSize["X_LARGE"] = "X_LARGE";
+	return SquareSize;
+}({});
+/** Fill color role (Constitution V-A color set). Resolves to `color.text.*`. */
+var SquareVariant = /* @__PURE__ */ function(SquareVariant) {
+	/** `text.primary`. */
+	SquareVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. */
+	SquareVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. The default (the 1.x fill). */
+	SquareVariant["TERTIARY"] = "TERTIARY";
+	/** `text.disabled`. */
+	SquareVariant["DISABLED"] = "DISABLED";
+	/** The parent's color (`currentColor`). */
+	SquareVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
+	SquareVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning, `text.warning`. */
+	SquareVariant["WARNING"] = "WARNING";
+	/** Status: error, `text.error`. */
+	SquareVariant["ERROR"] = "ERROR";
+	return SquareVariant;
+}({});
+/**
+* Phrasing content, so a mark is valid inside `Text`, a `<button>` legend item or a `<label>`.
+* Square corners (no radius). The fill is `currentColor`; `forced-color-adjust: none` keeps it
+* visible in high contrast.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Square-r1ibzzfh",
+	propsAsIs: false
+});
+/** Side per rung; the even gap to the paired line height keeps the mark on whole pixels. */
+var SQUARE_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Square-X_SMALL-x1mk1al0",
+	["SMALL"]: "gx-Square-SMALL-su4ir9p",
+	["MEDIUM"]: "gx-Square-MEDIUM-m11phim5",
+	["LARGE"]: "gx-Square-LARGE-lu4nw1i",
+	["X_LARGE"]: "gx-Square-X_LARGE-xecg556"
+};
+/** Sets `color`; the fill reads it. Block for block the same as `ICON_VARIANT_TO_CSS_MAP`. */
+var SQUARE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Square-PRIMARY-p1eax1en",
+	["SECONDARY"]: "gx-Square-SECONDARY-sukiakq",
+	["TERTIARY"]: "gx-Square-TERTIARY-t1txfoow",
+	["DISABLED"]: "gx-Square-DISABLED-d13w422z",
+	["INHERIT"]: "gx-Square-INHERIT-ixcfyqb",
+	["SUCCESS"]: "gx-Square-SUCCESS-sqjbow8",
+	["WARNING"]: "gx-Square-WARNING-w1jcu9g9",
+	["ERROR"]: "gx-Square-ERROR-e1a9qgv5"
 };
+/** Categorical `color`: `text.<family>`, the way a status variant renders. */
+var SQUARE_COLOR_TO_CSS_MAP = {
+	red: "gx-Square-red-r44keg",
+	orange: "gx-Square-orange-o1czb11g",
+	amber: "gx-Square-amber-a11m2avz",
+	yellow: "gx-Square-yellow-y1dycb8",
+	lime: "gx-Square-lime-l13w32o7",
+	green: "gx-Square-green-gflvbdc",
+	emerald: "gx-Square-emerald-e1wrg0mj",
+	teal: "gx-Square-teal-tbmrs5y",
+	cyan: "gx-Square-cyan-c1229390",
+	sky: "gx-Square-sky-sylmgp4",
+	blue: "gx-Square-blue-bgnvnom",
+	indigo: "gx-Square-indigo-iqzrj1i",
+	violet: "gx-Square-violet-vx1evfg",
+	purple: "gx-Square-purple-p1bh3ofr",
+	fuchsia: "gx-Square-fuchsia-f15n3xo4",
+	pink: "gx-Square-pink-p1qvour9",
+	rose: "gx-Square-rose-r1g6v6vx"
+};
+/** Declared after the variant and color maps so `hex` wins over them. */
+var HEX_CSS = "gx-Square-HEX_CSS-h1u3b7de";
+/** A filled square mark beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
+var Square = forwardRef(function Square({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
+	const variables = {};
+	if (hex !== void 0) variables["--gx-square-hex"] = hex;
+	return /* @__PURE__ */ jsx(Root, {
+		...ariaLabel === void 0 ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": ariaLabel
+		},
+		...rest,
+		ref,
+		id,
+		className: cx(SQUARE_SIZE_TO_CSS_MAP[size], color !== void 0 ? SQUARE_COLOR_TO_CSS_MAP[color] : SQUARE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		style: {
+			...variables,
+			...style
+		}
+	});
+});
+Square.displayName = "Square";
 //#endregion
-export { Square as default };
+export { SquareSize, SquareVariant, Square as default };

package/dist/styles/mixins.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Strips native control chrome (`button`, `a`) so a DLS control starts from a plain box.
+ * Interpolate it first in a template so the rules after it (a border, a background) win.
+ */
+export declare const INTERACTIVE_RESET = "appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;";
+/** The DLS hairline: a `0.5px` `border.primary` border on every side. */
+export declare const HAIRLINE_BORDER: string;
+/**
+ * The focus treatment: a `1px` `border.focused` outline on keyboard focus only (a neutral one step
+ * stronger than `border.hovered`). Components never write their own
+ * `:focus` styles, except field frames (inputs, selects, textareas, the code editor), which use
+ * `FIELD_FOCUS` on any focus (Mitch's request, 2026-10-04).
+ */
+export declare const FOCUS_RING: string;
+/**
+ * Field-frame focus (docs/theming.md → Focus): `border.focused` at 1px drawn **inside**
+ * the frame (the hairline plus an inset outline), so nothing shifts and there is no outer ring.
+ * Declarations only: put it inside the frame's focus (and open) selector. An error frame keeps
+ * `border.error` in every state by also setting `outline-color: border.error`.
+ */
+export declare const FIELD_FOCUS: string;
+/**
+ * Single-line text that ends in an ellipsis and may shrink inside a flex or grid track. Clips the
+ * inline axis only (`overflow-x: clip`, which unlike `hidden` leaves `overflow-y` visible), so
+ * glyph ink above or below the line box (descenders, accents, a fallback font's taller metrics)
+ * is never cut.
+ */
+export declare const TRUNCATE = "overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; min-width: 0;";
+/** Removed from the visual layout, still read by screen readers. */
+export declare const VISUALLY_HIDDEN = "position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;";
+/**
+ * Stops transitions and animations under `prefers-reduced-motion: reduce`. `GalaxyProvider`
+ * applies it globally; components add it only for their own keyframes.
+ */
+export declare const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }";

package/dist/styles/mixins.js

@@ -0,0 +1,60 @@
+import { t } from "../theme/tokens/t.js";
+/* empty css                 */
+//#region src/styles/mixins.ts
+/**
+* Shared style mixins (Constitution IV.6). Each export is a CSS-text fragment (a plain string,
+* evaluated at build time by wyw): interpolate it inside a `styled` or `css` template instead of
+* re-declaring the rules. Never compose a mixin with `cx(...)`; it is not a class name.
+*
+* ```tsx
+* const Root = styled.button`
+*   ${INTERACTIVE_RESET}
+*   ${HAIRLINE_BORDER}
+*   ${FOCUS_RING}
+*   border-radius: ${t.radius.md};
+* `;
+* ```
+*
+* The module also carries the package reset (the `:global()` block below), so the library
+* build ships it inside `styles.css`.
+*/
+/**
+* Strips native control chrome (`button`, `a`) so a DLS control starts from a plain box.
+* Interpolate it first in a template so the rules after it (a border, a background) win.
+*/
+var INTERACTIVE_RESET = `appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;`;
+/** The DLS hairline: a `0.5px` `border.primary` border on every side. */
+var HAIRLINE_BORDER = `border: 0.5px solid ${t.color.border.primary};`;
+/**
+* The focus treatment: a `1px` `border.focused` outline on keyboard focus only (a neutral one step
+* stronger than `border.hovered`). Components never write their own
+* `:focus` styles, except field frames (inputs, selects, textareas, the code editor), which use
+* `FIELD_FOCUS` on any focus (Mitch's request, 2026-10-04).
+*/
+var FOCUS_RING = `
+  &:focus-visible { outline: 1px solid ${t.color.border.focused}; outline-offset: 1px; }
+  &:focus:not(:focus-visible) { outline: none; }
+`;
+/**
+* Field-frame focus (docs/theming.md → Focus): `border.focused` at 1px drawn **inside**
+* the frame (the hairline plus an inset outline), so nothing shifts and there is no outer ring.
+* Declarations only: put it inside the frame's focus (and open) selector. An error frame keeps
+* `border.error` in every state by also setting `outline-color: border.error`.
+*/
+var FIELD_FOCUS = `border-color: ${t.color.border.focused}; outline: 1px solid ${t.color.border.focused}; outline-offset: -1px;`;
+/**
+* Single-line text that ends in an ellipsis and may shrink inside a flex or grid track. Clips the
+* inline axis only (`overflow-x: clip`, which unlike `hidden` leaves `overflow-y` visible), so
+* glyph ink above or below the line box (descenders, accents, a fallback font's taller metrics)
+* is never cut.
+*/
+var TRUNCATE = `overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; min-width: 0;`;
+/** Removed from the visual layout, still read by screen readers. */
+var VISUALLY_HIDDEN = `position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;`;
+/**
+* Stops transitions and animations under `prefers-reduced-motion: reduce`. `GalaxyProvider`
+* applies it globally; components add it only for their own keyframes.
+*/
+var REDUCED_MOTION = `@media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }`;
+//#endregion
+export { FIELD_FOCUS, FOCUS_RING, HAIRLINE_BORDER, INTERACTIVE_RESET, REDUCED_MOTION, TRUNCATE, VISUALLY_HIDDEN };