@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/backgrounds/GridBackground.d.ts

@@ -0,0 +1,48 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** The mark the grid repeats. Component-owned (like `CodeBlockLanguage`, `SparklineMark`); not a variant. */
+export declare enum GridBackgroundPattern {
+    /** A 2px dot at the center of every cell (1.x `DotGridBackground`). The default. */
+    DOT = "DOT",
+    /** A small plus at the center of every cell (1.x `CrossGridBackground`). */
+    CROSS = "CROSS",
+    /** Ruled lines along every cell's top and left edges, like graph paper (1.x `CellGridBackground`). */
+    CELL = "CELL"
+}
+/** Canonical rungs; the member names the grid pitch, densest first. */
+export declare enum GridBackgroundSize {
+    /** 8px pitch. */
+    X_SMALL = "X_SMALL",
+    /** 12px pitch. */
+    SMALL = "SMALL",
+    /** 24px pitch. The default (1.x `spacing` / `cellSize` 24). */
+    MEDIUM = "MEDIUM",
+    /** 32px pitch. */
+    LARGE = "LARGE",
+    /** 48px pitch. */
+    X_LARGE = "X_LARGE"
+}
+export interface GridBackgroundProps extends AriaAttributes {
+    /**
+     * The mark repeated across the grid: dots, small crosses at the intersections, or ruled cells.
+     * @default GridBackgroundPattern.DOT
+     */
+    pattern?: GridBackgroundPattern;
+    /**
+     * Grid pitch: 8 / 12 / 24 / 32 / 48px for `X_SMALL` … `X_LARGE`. The marks scale with it.
+     * @default GridBackgroundSize.MEDIUM
+     */
+    size?: GridBackgroundSize;
+    /** Content shown over the pattern, centered horizontally and vertically. */
+    children?: ReactNode;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A dot, cross or cell grid painted behind centered content. */
+declare const GridBackground: import("react").ForwardRefExoticComponent<GridBackgroundProps & import("react").RefAttributes<HTMLDivElement>>;
+export default GridBackground;

package/dist/backgrounds/GridBackground.js

@@ -0,0 +1,146 @@
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { match } from "ts-pattern";
+//#region src/backgrounds/GridBackground.tsx
+/**
+* A quiet, repeating grid pattern (dots, small crosses, or ruled cells) painted behind centered
+* content: an empty canvas, an onboarding hero, a drop zone, a preview stage. It fills its parent
+* and paints only the pattern; the surface, corners, border and clipping come from the parent
+* (`Box`). The marks are an inline SVG `<pattern>` filled with `currentColor` from an `opacity.fg*`
+* token, so the pattern follows the theme through CSS alone, with the same
+* markup on the server and the client. Decoration only: not interactive, no semantics.
+*
+* Replaces 1.x `DotGridBackground`, `CrossGridBackground` and `CellGridBackground` (`pattern`;
+* `spacing` / `cellSize` → `size`; the color, opacity, stroke, radius and fill props are gone).
+*/
+/** The mark the grid repeats. Component-owned (like `CodeBlockLanguage`, `SparklineMark`); not a variant. */
+var GridBackgroundPattern = /* @__PURE__ */ function(GridBackgroundPattern) {
+	/** A 2px dot at the center of every cell (1.x `DotGridBackground`). The default. */
+	GridBackgroundPattern["DOT"] = "DOT";
+	/** A small plus at the center of every cell (1.x `CrossGridBackground`). */
+	GridBackgroundPattern["CROSS"] = "CROSS";
+	/** Ruled lines along every cell's top and left edges, like graph paper (1.x `CellGridBackground`). */
+	GridBackgroundPattern["CELL"] = "CELL";
+	return GridBackgroundPattern;
+}({});
+/** Canonical rungs; the member names the grid pitch, densest first. */
+var GridBackgroundSize = /* @__PURE__ */ function(GridBackgroundSize) {
+	/** 8px pitch. */
+	GridBackgroundSize["X_SMALL"] = "X_SMALL";
+	/** 12px pitch. */
+	GridBackgroundSize["SMALL"] = "SMALL";
+	/** 24px pitch. The default (1.x `spacing` / `cellSize` 24). */
+	GridBackgroundSize["MEDIUM"] = "MEDIUM";
+	/** 32px pitch. */
+	GridBackgroundSize["LARGE"] = "LARGE";
+	/** 48px pitch. */
+	GridBackgroundSize["X_LARGE"] = "X_LARGE";
+	return GridBackgroundSize;
+}({});
+/** Fills the parent and centers the children; a stacking context so the layer sits under them. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-GridBackground-rnv4fab",
+	propsAsIs: false
+});
+/** The pattern layer: above the parent's surface, below the children, never hit by the pointer. */
+var Layer = /*#__PURE__*/ styled("svg")({
+	name: "Layer",
+	class: "gx-GridBackground-Layer-lvvo1cl",
+	propsAsIs: false
+});
+/** The mark color per pattern, on the layer only (never inherited by the children). */
+var GRID_BACKGROUND_PATTERN_TO_CSS_MAP = {
+	["DOT"]: "gx-GridBackground-DOT-d1ezsakb",
+	["CROSS"]: "gx-GridBackground-CROSS-cl21ufg",
+	["CELL"]: "gx-GridBackground-CELL-c1kmjr1q"
+};
+/** Grid pitch per rung, in px (SVG user units); every pitch is a value of the spacing scale. */
+var GRID_BACKGROUND_SIZE_TO_PITCH_MAP = {
+	["X_SMALL"]: 8,
+	["SMALL"]: 12,
+	["MEDIUM"]: 24,
+	["LARGE"]: 32,
+	["X_LARGE"]: 48
+};
+/** The plus's arm span per rung: about a third of the pitch, odd so it is symmetric around its 1px stroke. */
+var GRID_BACKGROUND_SIZE_TO_CROSS_SPAN_MAP = {
+	["X_SMALL"]: 3,
+	["SMALL"]: 5,
+	["MEDIUM"]: 9,
+	["LARGE"]: 11,
+	["X_LARGE"]: 17
+};
+/** The marks of one cell; every coordinate is an integer, so 1px lines and 2px dots stay crisp. */
+function renderMarks(pattern, size) {
+	const pitch = GRID_BACKGROUND_SIZE_TO_PITCH_MAP[size];
+	const center = pitch / 2;
+	const span = GRID_BACKGROUND_SIZE_TO_CROSS_SPAN_MAP[size];
+	const half = (span - 1) / 2;
+	return match(pattern).with("DOT", () => /* @__PURE__ */ jsx("circle", {
+		cx: center,
+		cy: center,
+		r: 1,
+		fill: "currentColor"
+	})).with("CROSS", () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+		x: center - half,
+		y: center,
+		width: span,
+		height: 1,
+		fill: "currentColor",
+		shapeRendering: "crispEdges"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: center,
+		y: center - half,
+		width: 1,
+		height: span,
+		fill: "currentColor",
+		shapeRendering: "crispEdges"
+	})] })).with("CELL", () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+		x: 0,
+		y: 0,
+		width: pitch,
+		height: 1,
+		fill: "currentColor",
+		shapeRendering: "crispEdges"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: 0,
+		y: 0,
+		width: 1,
+		height: pitch,
+		fill: "currentColor",
+		shapeRendering: "crispEdges"
+	})] })).exhaustive();
+}
+/** A dot, cross or cell grid painted behind centered content. */
+var GridBackground = forwardRef(function GridBackground({ pattern = "DOT", size = "MEDIUM", children, className, style, ...rest }, ref) {
+	const patternId = `gx-grid-background-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+	const pitch = GRID_BACKGROUND_SIZE_TO_PITCH_MAP[size];
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		className,
+		style,
+		children: [/* @__PURE__ */ jsxs(Layer, {
+			"aria-hidden": true,
+			focusable: "false",
+			className: GRID_BACKGROUND_PATTERN_TO_CSS_MAP[pattern],
+			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
+				id: patternId,
+				width: pitch,
+				height: pitch,
+				patternUnits: "userSpaceOnUse",
+				children: renderMarks(pattern, size)
+			}) }), /* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				fill: `url(#${patternId})`
+			})]
+		}), children]
+	});
+});
+GridBackground.displayName = "GridBackground";
+//#endregion
+export { GridBackgroundPattern, GridBackgroundSize, GridBackground as default };

package/dist/beacons/Beacon.d.ts

@@ -1,37 +1,101 @@
-/** Dot diameter. */
+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 dot sits beside (or the label's step). */
 export declare enum BeaconSize {
+    /** 4px, beside `caption` (12px line); a label is `caption` with a 4px gap. */
+    X_SMALL = "X_SMALL",
+    /** 4px, beside `body_sm` (16px line); a label is `body_sm` with a 6px gap. 1.x `SMALL` (4.2px). */
     SMALL = "SMALL",
+    /** 6px, beside `body_md` (16px line); a label is `body_md` with an 8px gap. The default; 1.x `MEDIUM` (5.6px). */
     MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
+    /** 8px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. 1.x `LARGE` (7px). */
+    LARGE = "LARGE",
+    /** 10px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. */
+    X_LARGE = "X_LARGE"
 }
-/** Dot color — the status being signalled. Also colors the pulse ring. */
+/** Dot color role (Constitution V-A color set). Resolves to `color.text.*`. */
 export declare enum BeaconVariant {
-    BASE = "BASE",
+    /** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
     PRIMARY = "PRIMARY",
+    /** `text.secondary`. */
     SECONDARY = "SECONDARY",
+    /** `text.tertiary`. */
     TERTIARY = "TERTIARY",
+    /** `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color (`currentColor`). */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
     SUCCESS = "SUCCESS",
-    ERROR = "ERROR",
+    /** Status: warning, `text.warning`. */
     WARNING = "WARNING",
-    LIME = "LIME",
-    YELLOW = "YELLOW",
-    BLUE = "BLUE",
-    ORANGE = "ORANGE",
-    PINK = "PINK",
-    PURPLE = "PURPLE",
-    TEAL = "TEAL",
-    DISABLED = "DISABLED"
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
 }
-export interface BeaconProps {
-    /** @default BeaconSize.MEDIUM */
+interface BeaconBaseProps extends AriaAttributes {
+    /**
+     * The state in a word or two ("Running", "Failed"), drawn after the dot in the dot's color. It
+     * truncates with a tooltip when its box is narrower. Omit it for the dot alone.
+     */
+    label?: string;
+    /**
+     * The rung of the text the dot sits beside (or of the label). Dot 4 / 4 / 6 / 8 / 10px for
+     * `X_SMALL` … `X_LARGE`; label `caption` / `body_sm` / `body_md` / `body_lg` / `body_lg`.
+     * @default BeaconSize.MEDIUM
+     */
     size?: BeaconSize;
-    /** @default BeaconVariant.BASE */
-    variant?: BeaconVariant;
-    /** Duration of one pulse cycle in seconds. @default 2 */
-    speed?: number;
-    /** Add an expanding ring around the dot. Off means a static dot. */
+    /** Raw dot color for data-driven colors. Discouraged: it does not follow the theme. Overrides `variant` and `color`. */
+    hex?: Hex;
+    /**
+     * Repeats an expanding ring around the dot to mark a live, in-progress state. Static under reduced motion.
+     * @default false
+     */
     isPulse?: boolean;
+    /**
+     * Accessible name when the dot carries meaning on its own (no `label`, no adjacent text); without
+     * it the dot is decorative (`aria-hidden`). Ignored with a `label`, which is the content.
+     */
+    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. Merged after `--gx-beacon-hex`. */
+    style?: CSSProperties;
+}
+/** A dot colored by meaning (`variant`), or the default `PRIMARY`. */
+interface BeaconVariantProps {
+    /**
+     * Color role of the dot, its pulse ring and the label: a neutral step or a status.
+     * `INHERIT` uses the parent's `currentColor`. Not with `color`.
+     * @default BeaconVariant.PRIMARY
+     */
+    variant?: BeaconVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A dot colored by category (`color`). */
+interface BeaconColorProps {
+    /**
+     * Color role of the dot, its pulse ring and the label: a neutral step or a status.
+     * `INHERIT` uses the parent's `currentColor`. Not with `color`.
+     * @default BeaconVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the dot, ring and label take
+     * `text.<family>`, the way a status variant renders. For categories; meanings take `variant`.
+     * Not with `variant`.
+     */
+    color: PaletteColor;
 }
-/** A status dot, optionally pulsing. Live connections, unread state, health. */
-declare const Beacon: ({ variant, size, speed, isPulse, }: BeaconProps) => import("react").JSX.Element;
+/** Beacon props. Passing both `variant` and `color` is a type error. */
+export type BeaconProps = BeaconBaseProps & (BeaconVariantProps | BeaconColorProps);
+/**
+ * A status dot, alone or with its `label`; its color is a role (`variant`), a category (`color`) or
+ * data (`hex`), and it can pulse.
+ */
+declare const Beacon: import("react").ForwardRefExoticComponent<BeaconProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Beacon;

package/dist/beacons/Beacon.js

@@ -1,71 +1,194 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/beacons/Beacon.tsx
-/** Dot diameter. */
+/**
+* A small round status dot that can pulse. It marks the live state of one thing beside its label:
+* a source that is syncing, a run that succeeded or failed, a stream that is "Live". The adjacent
+* text carries the meaning; the dot carries the color.
+*
+* With a `label` it is the whole status: the dot and a word ("Running", "Synced", "Failed") in one
+* inline row, both in the same color, the word at the type step of the rung (`caption` …
+* `body_lg`) and truncating with a tooltip. Without one it is the dot alone, beside text you
+* compose. Either way there is no fill, no border, no role and no live region: a host that must
+* announce a change owns the live region. Anything a wrapper injects (a `Tooltip`'s handlers)
+* lands on the root, so `<Tooltip body={reason}><Beacon label="Failed" … /></Tooltip>` works.
+*
+* Color is CSS, not JS: `BEACON_VARIANT_TO_CSS_MAP` (or `BEACON_COLOR_TO_CSS_MAP` for a categorical
+* `color`) sets `color` from `color.text.*` and the fill
+* reads `currentColor` (the Icon and Circle pattern), so `INHERIT` and `hex` share one path and a
+* theme switch needs no re-render. `hex` is set as the `--gx-beacon-hex` custom property
+* in `style` and read by a block switched on only when the prop is set.
+*
+* `isPulse` repeats an expanding ring (the root's `::after`, in the dot's own color) to say "this is
+* happening now". It stops under `prefers-reduced-motion` and `GalaxyProvider reducedMotion`. Not a
+* legend key (`Circle`), not a tag or category word (`Chip`), not a count (`Chip count`), not a
+* message to act on (`Alert`), not interactive.
+*/
+/** Canonical rungs; the member names the rung of the text the dot sits beside (or the label's step). */
 var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
+	/** 4px, beside `caption` (12px line); a label is `caption` with a 4px gap. */
+	BeaconSize["X_SMALL"] = "X_SMALL";
+	/** 4px, beside `body_sm` (16px line); a label is `body_sm` with a 6px gap. 1.x `SMALL` (4.2px). */
 	BeaconSize["SMALL"] = "SMALL";
+	/** 6px, beside `body_md` (16px line); a label is `body_md` with an 8px gap. The default; 1.x `MEDIUM` (5.6px). */
 	BeaconSize["MEDIUM"] = "MEDIUM";
+	/** 8px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. 1.x `LARGE` (7px). */
 	BeaconSize["LARGE"] = "LARGE";
+	/** 10px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. */
+	BeaconSize["X_LARGE"] = "X_LARGE";
 	return BeaconSize;
 }({});
-/** Dot color — the status being signalled. Also colors the pulse ring. */
+/** Dot color role (Constitution V-A color set). Resolves to `color.text.*`. */
 var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
-	BeaconVariant["BASE"] = "BASE";
+	/** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
 	BeaconVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. */
 	BeaconVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. */
 	BeaconVariant["TERTIARY"] = "TERTIARY";
+	/** `text.disabled`. */
+	BeaconVariant["DISABLED"] = "DISABLED";
+	/** The parent's color (`currentColor`). */
+	BeaconVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
 	BeaconVariant["SUCCESS"] = "SUCCESS";
-	BeaconVariant["ERROR"] = "ERROR";
+	/** Status: warning, `text.warning`. */
 	BeaconVariant["WARNING"] = "WARNING";
-	BeaconVariant["LIME"] = "LIME";
-	BeaconVariant["YELLOW"] = "YELLOW";
-	BeaconVariant["BLUE"] = "BLUE";
-	BeaconVariant["ORANGE"] = "ORANGE";
-	BeaconVariant["PINK"] = "PINK";
-	BeaconVariant["PURPLE"] = "PURPLE";
-	BeaconVariant["TEAL"] = "TEAL";
-	BeaconVariant["DISABLED"] = "DISABLED";
+	/** Status: error, `text.error`. */
+	BeaconVariant["ERROR"] = "ERROR";
 	return BeaconVariant;
 }({});
-var _exp2 = () => ({ $size }) => match($size).returnType().with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
-var BeaconWrapper = /*#__PURE__*/ styled("div")({
-	name: "BeaconWrapper",
-	class: "bjccs5e",
-	propsAsIs: false,
-	vars: { "bjccs5e-0": [_exp2()] }
+/**
+* The root is the dot: phrasing content, so it is valid inside `Text`, a `<button>` or a `<label>`.
+* The fill is `currentColor`; `forced-color-adjust: none` keeps it visible in high contrast. The
+* pulse ring is `::after`, invisible at rest.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Beacon-rjccs5e",
+	propsAsIs: false
 });
-var _exp3 = () => ({ $speed }) => $speed ?? 2;
-var _exp4 = () => ({ $variant, theme }) => {
-	return match($variant).returnType().with("BASE", () => theme.color.icon.primary).with("PRIMARY", () => theme.color.icon.primary).with("SECONDARY", () => theme.color.icon.secondary).with("TERTIARY", () => theme.color.background.tertiaryAlt).with("SUCCESS", () => theme.color.border.success).with("ERROR", () => theme.color.border.error).with("WARNING", () => theme.color.border.warning).with("LIME", () => theme.color.border.lime).with("YELLOW", () => theme.color.border.yellow).with("BLUE", () => theme.color.border.blue).with("ORANGE", () => theme.color.border.orange).with("PINK", () => theme.color.border.pink).with("PURPLE", () => theme.color.border.purple).with("TEAL", () => theme.color.border.teal).with("DISABLED", () => theme.color.border.disabled).exhaustive();
+/**
+* The labeled row: the dot and the word, inline. It carries the color (the dot and the label both
+* inherit it). No `overflow: hidden`, so the pulse ring is never clipped; only the label truncates.
+*/
+var LabeledRoot = /*#__PURE__*/ styled("span")({
+	name: "LabeledRoot",
+	class: "gx-Beacon-LabeledRoot-larhcbn",
+	propsAsIs: false
+});
+/** Diameter per rung; every diameter is even, so the dot centers on whole pixels beside any UI line. */
+var BEACON_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Beacon-X_SMALL-xv9nmr4",
+	["SMALL"]: "gx-Beacon-SMALL-s1hvjf6u",
+	["MEDIUM"]: "gx-Beacon-MEDIUM-m131y2q5",
+	["LARGE"]: "gx-Beacon-LARGE-l1b16gix",
+	["X_LARGE"]: "gx-Beacon-X_LARGE-x1dg7hpp"
+};
+/** Dot-to-label gap per rung; every gap is wider than the pulse ring's overflow, so the ring never paints over the label. */
+var BEACON_SIZE_TO_GAP_CSS_MAP = {
+	["X_SMALL"]: "gx-Beacon-X_SMALL-xs7l5ip",
+	["SMALL"]: "gx-Beacon-SMALL-s1puhe0v",
+	["MEDIUM"]: "gx-Beacon-MEDIUM-m4sv20b",
+	["LARGE"]: "gx-Beacon-LARGE-lpeaf5b",
+	["X_LARGE"]: "gx-Beacon-X_LARGE-xoex4vi"
+};
+/** The label's type step per rung (Constitution III-A.4). */
+var BEACON_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
+};
+/** Sets `color`; the dot and ring read it. Block for block the same as `ICON_VARIANT_TO_CSS_MAP`. */
+var BEACON_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Beacon-PRIMARY-piy6lav",
+	["SECONDARY"]: "gx-Beacon-SECONDARY-sm47yol",
+	["TERTIARY"]: "gx-Beacon-TERTIARY-t1vu4dw9",
+	["DISABLED"]: "gx-Beacon-DISABLED-dj9dd8i",
+	["INHERIT"]: "gx-Beacon-INHERIT-iuqkrqv",
+	["SUCCESS"]: "gx-Beacon-SUCCESS-so04qwb",
+	["WARNING"]: "gx-Beacon-WARNING-w1d27vzd",
+	["ERROR"]: "gx-Beacon-ERROR-eshtlvu"
 };
-var BeaconPulse = withTheme(/*#__PURE__*/ styled("span")({
-	name: "BeaconPulse",
-	class: "barhcbn",
-	propsAsIs: false,
-	vars: {
-		"barhcbn-0": [_exp3(), "s"],
-		"barhcbn-1": [_exp4()]
-	}
-}));
-var _exp5 = () => ({ $variant, theme }) => {
-	return match($variant).returnType().with("BASE", () => theme.color.background.baseAlt).with("PRIMARY", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondaryAlt).with("TERTIARY", () => theme.color.background.tertiaryAlt).with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).with("WARNING", () => theme.color.icon.warning).with("LIME", () => theme.color.icon.lime).with("YELLOW", () => theme.color.icon.yellow).with("BLUE", () => theme.color.icon.blue).with("ORANGE", () => theme.color.icon.orange).with("PINK", () => theme.color.icon.pink).with("PURPLE", () => theme.color.icon.purple).with("TEAL", () => theme.color.icon.teal).with("DISABLED", () => theme.color.border.disabled).exhaustive();
+/** Categorical `color`: `text.<family>`, the way a status variant renders. */
+var BEACON_COLOR_TO_CSS_MAP = {
+	red: "gx-Beacon-red-r1nxs4in",
+	orange: "gx-Beacon-orange-o1dc3rbq",
+	amber: "gx-Beacon-amber-adasyys",
+	yellow: "gx-Beacon-yellow-y1rjlf72",
+	lime: "gx-Beacon-lime-lfhdj80",
+	green: "gx-Beacon-green-g1lpbbc5",
+	emerald: "gx-Beacon-emerald-e1wxkqi6",
+	teal: "gx-Beacon-teal-t9ukjzr",
+	cyan: "gx-Beacon-cyan-c1be6eig",
+	sky: "gx-Beacon-sky-smvjtgh",
+	blue: "gx-Beacon-blue-bkh8tqf",
+	indigo: "gx-Beacon-indigo-i1e21vro",
+	violet: "gx-Beacon-violet-vxwnre2",
+	purple: "gx-Beacon-purple-p1qbmqgn",
+	fuchsia: "gx-Beacon-fuchsia-fdn9ked",
+	pink: "gx-Beacon-pink-p1tc1xnc",
+	rose: "gx-Beacon-rose-rgzv1cm"
 };
-var BeaconDot = withTheme(/*#__PURE__*/ styled("span")({
-	name: "BeaconDot",
-	class: "bv9nmr4",
-	propsAsIs: false,
-	vars: { "bv9nmr4-0": [_exp5()] }
-}));
-/** A status dot, optionally pulsing. Live connections, unread state, health. */
-var Beacon = ({ variant = "BASE", size = "MEDIUM", speed, isPulse }) => /* @__PURE__ */ jsxs(BeaconWrapper, {
-	$size: size,
-	children: [isPulse && /* @__PURE__ */ jsx(BeaconPulse, {
-		$variant: variant,
-		$speed: speed
-	}), /* @__PURE__ */ jsx(BeaconDot, { $variant: variant })]
+/** Declared after the variant and color maps so `hex` wins over them. */
+var HEX_CSS = "gx-Beacon-HEX_CSS-h1marsuc";
+/**
+* One pulse every thirteen `duration.base` steps (1.95s, the 1.x 2s default), linear, forever: the
+* ring grows from the dot's edge to 2.5× while it fades from 0.5 to 0. Paint-only (`transform`), so
+* the line box never moves. The keyframes are global, so the name is `gx-` prefixed.
+* `REDUCED_MOTION` stops it and the ring falls back to its resting `opacity: 0`.
+*/
+var PULSE_CSS = "gx-Beacon-PULSE_CSS-p1ikfn3f";
+/**
+* A status dot, alone or with its `label`; its color is a role (`variant`), a category (`color`) or
+* data (`hex`), and it can pulse.
+*/
+var Beacon = forwardRef(function Beacon({ label, size = "MEDIUM", variant = "PRIMARY", color, hex, isPulse = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const variables = {};
+	if (hex !== void 0) variables["--gx-beacon-hex"] = hex;
+	const colorCss = cx(color !== void 0 ? BEACON_COLOR_TO_CSS_MAP[color] : BEACON_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS);
+	if (label) return /* @__PURE__ */ jsxs(LabeledRoot, {
+		...rest,
+		ref,
+		id,
+		className: cx(BEACON_SIZE_TO_GAP_CSS_MAP[size], colorCss, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: [/* @__PURE__ */ jsx(Root, {
+			"aria-hidden": true,
+			className: cx(BEACON_SIZE_TO_CSS_MAP[size], BEACON_VARIANT_TO_CSS_MAP["INHERIT"], isPulse && PULSE_CSS)
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: BEACON_SIZE_TO_TEXT_SIZE_MAP[size],
+			variant: TextVariant.INHERIT,
+			lineClamp: 1,
+			shouldTooltipOnOverflow: true,
+			children: label
+		})]
+	});
+	return /* @__PURE__ */ jsx(Root, {
+		...ariaLabel === void 0 ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": ariaLabel
+		},
+		...rest,
+		ref,
+		id,
+		className: cx(BEACON_SIZE_TO_CSS_MAP[size], colorCss, isPulse && PULSE_CSS, className),
+		style: {
+			...variables,
+			...style
+		}
+	});
 });
+Beacon.displayName = "Beacon";
 //#endregion
 export { BeaconSize, BeaconVariant, Beacon as default };

package/dist/brand/GalaxyFilamentWordmark.d.ts

@@ -0,0 +1,30 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyFilamentWordmarkProps extends AriaAttributes {
+    /**
+     * Height of the wordmark in px. The width follows the aspect ratio (≈ 3.76 × height).
+     * @default 20
+     */
+    size?: number;
+    /**
+     * For a wordmark on an inverted fill (`text.primary`): paints `background.base`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Accessible name. Pass `""` to make it decorative (`aria-hidden`) when the name is already in
+     * the surrounding text.
+     * @default Filament
+     */
+    ariaLabel?: string;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`. */
+    style?: CSSProperties;
+}
+/** Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`. */
+declare const GalaxyFilamentWordmark: import("react").ForwardRefExoticComponent<GalaxyFilamentWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyFilamentWordmark;

package/dist/brand/GalaxyFilamentWordmark.js

@@ -0,0 +1,39 @@
+import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyFilamentWordmark.tsx
+/**
+* Filament's product wordmark: the word "filament" in the slanted Galaxy display lettering, as one
+* inline SVG. It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS
+* variables, and is SSR-safe. 1.x swapped a dark
+* and a light svgr asset by reading the theme in JS (and its JSDoc called it "The Galaxy wordmark").
+*/
+/** Width ÷ height of the artwork (its viewBox, `0 0 4513 1200`). */
+var GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO = 4513 / 1200;
+/** The `d` of the single `<path>` of the 1.x `galaxy-filament-wordmark-dark.svg`, verbatim. */
+var GALAXY_FILAMENT_WORDMARK_PATH = "M181.814 1141.98L159.701 1200L0 985.717L292.377 210.999L363.136 151.659H701.801L660.525 253.856H517.432L468.053 385.708H617.534L579.697 487.246H429.725L181.814 1141.98ZM720.432 336.273L766.622 212.318H1005.44L958.942 336.273H720.432ZM505.694 910.552L701.758 384.404H941.065L745.001 910.552H505.694ZM825.912 910.552L1109.45 151.659L1131.06 92.978L1290.77 307.262L1065.71 910.552H825.912ZM1452.44 720.004L1419.51 808.356H1510.91L1544.32 720.004H1452.44ZM1582.16 617.808L1630.81 487.259H1539.41L1510.41 563.743H1271.11L1316.32 443.085L1359.56 384.404H1864.71L1886.33 443.085L1711.4 910.552H1185.61L1163.99 851.872L1250.96 617.808H1582.16ZM2016.67 910.552H1788.05L1983.62 385.063H2742.33L2763.95 443.085L2590 910.552H2361.38L2519.61 487.259H2457.44L2299.21 910.552H2082.28L2240.01 487.259H2173.91L2016.67 910.552ZM2998.33 664.621L2943.8 808.356H3034.7L3075 703.522H3314.3L3258.29 852.531L3215.04 910.552H2709.9L2688.27 852.531L2840.6 443.085L2883.84 385.063H3388.99L3410.62 443.085L3330.03 665.281H3090.23V664.621H2998.33ZM3128.07 563.083L3155.09 487.259H3063.2L3035.68 563.083H3128.07ZM3553.12 910.552H3313.32L3508.9 385.063H4033.2L4054.83 443.085L3880.38 910.552H3640.59L3798.81 487.259H3710.36L3553.12 910.552ZM4120.38 481.326L4158.22 379.788L4243.72 149.681L4265.34 91L4425.04 304.625L4397.53 379.788H4513L4470.74 481.326H4359.69L4237.83 808.356H4343.2L4299.17 910.552H4197.24H4003.92L3980.82 854.51L4120.38 481.326Z";
+/** Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`. */
+var GalaxyFilamentWordmark = forwardRef(function GalaxyFilamentWordmark({ size = 20, isInverse = false, ariaLabel = "Filament", id, className, style, ...rest }, ref) {
+	const aria = brandMarkAriaProps(ariaLabel);
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 4513 1200",
+		width: size * GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO,
+		height: size,
+		fill: "currentColor",
+		focusable: "false",
+		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
+		style,
+		children: /* @__PURE__ */ jsx("path", { d: GALAXY_FILAMENT_WORDMARK_PATH })
+	});
+});
+GalaxyFilamentWordmark.displayName = "GalaxyFilamentWordmark";
+//#endregion
+export { GalaxyFilamentWordmark as default };