@fairgarden/design 0.1.0-alpha.0

package/components/Meter/Meter.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { type VariantProps } from 'class-variance-authority';
+export declare const meter: (props?: ({
+    kind?: "ordinal" | "bar" | "steps" | "ring" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The status part: a §1.5.4 glyph plus a word, in the status scale [D129]. */
+export declare const meterStatus: (props?: ({
+    status?: "warning" | "success" | "danger" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MeterVariants = VariantProps<typeof meter>;
+/** A status beside the value: `warning` ▲ "Near limit", `danger` ◆ "Over limit", `success` ●. */
+export type MeterStatus = 'success' | 'warning' | 'danger';
+/** Props for Meter: Base UI Meter Root props plus the kind and color axes, the label, stops, threshold and status. */
+export type MeterProps = Omit<BaseMeter.Root.Props, 'children' | 'value'> & {
+    /** The measured value, between `min` and `max`; for `ordinal`, the index of the active stop. */
+    value: number;
+    /**
+     * `bar` (default): an outlined 8 px track with a solid indicator. `steps`:
+     * one outlined 12 px cell per unit (`max` − `min` cells). `ordinal`: a
+     * 1 px track with a tick and a caps label per stop, the active stop bold,
+     * larger and pointed to. `ring`: a 2 px arc beside its value.
+     */
+    kind?: MeterVariants['kind'];
+    /**
+     * Primary Radix scale: track, indicator, ticks, stops and text. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: MeterVariants['primary'];
+    /** Secondary Radix scale: unused, so a meter never reads as a chart series. Never defaulted. */
+    secondary?: MeterVariants['secondary'];
+    /** The label, in caps (`type-label`); author it in sentence case. */
+    label?: React.ReactNode;
+    /** Formats the visible value (`type-data`): "62%", "4.2 of 10 GB". Default: the Base UI formatted value. */
+    formatValue?: (formattedValue: string, value: number) => React.ReactNode;
+    /**
+     * `ordinal` only: the stop labels in order (author them in sentence case;
+     * CSS sets the caps). `min` becomes 0 and `max` the last index.
+     */
+    stops?: readonly React.ReactNode[];
+    /** A limit, drawn as a --ds-space-12 tick at --border-size-2 across the track (`bar`). */
+    threshold?: number;
+    /** The status beside the value; always with `statusText`. */
+    status?: MeterStatus;
+    /** The status word: "Near limit", "Over limit". In a form it is also the Field description. */
+    statusText?: React.ReactNode;
+};
+/**
+ * A Base UI Meter drawn in ink only: every part is `--primary12` on the
+ * ground; the value is always in text. In print, linear and segmented
+ * indicators turn to a 45° hatch inside their outline, closed by an edge at
+ * the value; rings and ordinal scales print as line.
+ */
+export declare function Meter(props: MeterProps): React.JSX.Element;
+/** Props for MeterPanel: `div` props. */
+export type MeterPanelProps = React.ComponentPropsWithRef<'div'>;
+/**
+ * A meter or scale panel: stacks its meters and is the `meter-panel`
+ * container, so each meter sets label | track | value in one row from
+ * 768 px of the panel's width, and stacks below it.
+ */
+export declare function MeterPanel(props: MeterPanelProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Meter.d.ts.map

package/components/Meter/Meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqCjE,eAAO,MAAM,KAAK;;;;8EAehB,CAAA;AAEF,+EAA+E;AAC/E,eAAO,MAAM,WAAW;;;8EAStB,CAAA;AAEF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,iGAAiG;AACjG,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE1D,sHAAsH;AACtH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC1E,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC,gGAAgG;IAChG,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IACtC,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,SAAS,EAAE,CAAA;IAClC,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,+FAA+F;IAC/F,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAyJtC;AAaD,yCAAyC;AACzC,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAEhE;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAMhD"}

package/components/Meter/Meter.js

@@ -0,0 +1,145 @@
+'use client';
+import * as React from 'react';
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { cva } from 'class-variance-authority';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusScales } from '../../utils/StatusGlyph';
+import styles from './meter.module.css';
+/*
+ * Meter (§10.18; what it draws, §8.9): a measured value in a known range —
+ * storage used, strength, a level on an ordinal scale. Never for an
+ * unbounded value.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: meter.module.css; CVA function `meter`.
+ * - Axes: `kind` → bar | steps | ordinal | ring → `bar`, `steps`,
+ *   `ordinal`, `kindRing` (axis-prefixed: `ring` is also a part) [D155];
+ *   `primary`, `secondary` → scales module classes (both; `secondary`
+ *   unused).
+ * - Compound variants: none.
+ * - Defaults: kind bar; color axes none [D133].
+ * - Color fallback: inherits the scope. The `status` part takes the status
+ *   scale of its `status` as its secondary.
+ * - States: none (value only); thresholds are a tick plus a status glyph
+ *   and word, never an indicator color swap.
+ * - Parts: base, label, value, readout, track, indicator, threshold, cell
+ *   (cellFilled), stop (stopActive), arrow, stops, stopLabel
+ *   (stopLabelActive), ring, ringTrack, ringArc, status (its own CVA
+ *   function `meterStatus`: `status` → success | warning | danger),
+ *   statusGlyph, statusText; MeterPanel's `panel`.
+ * - Scope: none.
+ * - Container: none; inherits its context. `MeterPanel` is the
+ *   `meter-panel` container: label | track | value rows from 768 px of it;
+ *   baseline without support: label and value above a full-width track,
+ *   rows from --md-n-above. Below 360 px of the panel, ordinal labels wrap,
+ *   all kept.
+ */
+export const meter = cva(styles.base, {
+    variants: {
+        kind: {
+            bar: styles.bar,
+            steps: styles.steps,
+            ordinal: styles.ordinal,
+            ring: styles.kindRing,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'bar',
+    },
+});
+/** The status part: a §1.5.4 glyph plus a word, in the status scale [D129]. */
+export const meterStatus = cva(styles.status, {
+    variants: {
+        status: {
+            success: styles.success,
+            warning: styles.warning,
+            danger: styles.danger,
+        },
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A Base UI Meter drawn in ink only: every part is `--primary12` on the
+ * ground; the value is always in text. In print, linear and segmented
+ * indicators turn to a 45° hatch inside their outline, closed by an edge at
+ * the value; rings and ordinal scales print as line.
+ */
+export function Meter(props) {
+    const { kind, primary, secondary, label, formatValue, stops, threshold, status, statusText, getAriaValueText, className, value, min: minProp = 0, max: maxProp = 100, ...rest } = props;
+    const scope = useScopeAttributes();
+    const statusId = React.useId();
+    const resolvedKind = kind ?? 'bar';
+    const ordinalStops = resolvedKind === 'ordinal' ? (stops ?? []) : null;
+    const min = ordinalStops ? 0 : minProp;
+    const max = ordinalStops ? Math.max(ordinalStops.length - 1, 1) : maxProp;
+    const fraction = clamp((value - min) / (max - min || 1));
+    const variants = { kind, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => meter({ ...variants, className: extra }));
+    const activeIndex = Math.round(value);
+    const activeStop = ordinalStops?.[activeIndex];
+    const ariaValueText = getAriaValueText ??
+        (ordinalStops && (typeof activeStop === 'string' || typeof activeStop === 'number')
+            ? () => String(activeStop)
+            : undefined);
+    let track;
+    let after = null;
+    if (resolvedKind === 'ring') {
+        track = (React.createElement("svg", { className: styles.ring, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false" },
+            React.createElement("circle", { className: styles.ringTrack, cx: "10", cy: "10", r: "9" }),
+            React.createElement("circle", { className: styles.ringArc, cx: "10", cy: "10", r: "9", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 10 10)" })));
+    }
+    else if (resolvedKind === 'steps') {
+        const count = Math.max(0, Math.round(max - min));
+        const filled = Math.round(fraction * count);
+        track = (React.createElement(BaseMeter.Track, { className: styles.track }, Array.from({ length: count }, (_, index) => (React.createElement("span", { key: index, className: index < filled ? `${styles.cell} ${styles.cellFilled}` : styles.cell })))));
+    }
+    else if (ordinalStops) {
+        const count = ordinalStops.length;
+        const scale = { '--meter-stops': count };
+        track = (React.createElement(BaseMeter.Track, { className: styles.track, style: scale },
+            ordinalStops.map((_, index) => (React.createElement("span", { key: index, className: index === activeIndex ? `${styles.stop} ${styles.stopActive}` : styles.stop, style: { '--meter-stop-index': index } }))),
+            React.createElement("svg", { className: styles.arrow, viewBox: "0 0 12 8", "aria-hidden": "true", focusable: "false", style: { '--meter-stop-index': activeIndex } },
+                React.createElement("path", { d: "M1 1h10L6 7z" }))));
+        after = (React.createElement("ol", { className: styles.stops, style: scale, "aria-hidden": "true" }, ordinalStops.map((stop, index) => (React.createElement("li", { key: index, className: index === activeIndex ? `${styles.stopLabel} ${styles.stopLabelActive}` : styles.stopLabel }, stop)))));
+    }
+    else {
+        track = (React.createElement(BaseMeter.Track, { className: styles.track },
+            React.createElement(BaseMeter.Indicator, { className: styles.indicator }),
+            threshold == null ? null : (React.createElement("span", { className: styles.threshold, style: {
+                    '--meter-threshold': `${clamp((threshold - min) / (max - min || 1)) * 100}%`,
+                } }))));
+    }
+    return (React.createElement(BaseMeter.Root, { ...rest, ...scope, value: value, min: min, max: max, getAriaValueText: ariaValueText, "aria-describedby": status ? statusId : rest['aria-describedby'], className: resolvedClassName },
+        label == null ? null : React.createElement(BaseMeter.Label, { className: styles.label }, label),
+        track,
+        after,
+        React.createElement("span", { className: styles.readout },
+            ordinalStops ? null : (React.createElement(BaseMeter.Value, { className: styles.value }, (formatted, current) => (formatValue ? formatValue(formatted, current) : formatted))),
+            status ? (React.createElement(MeterStatusPart, { id: statusId, status: status }, statusText)) : null)));
+}
+function MeterStatusPart(props) {
+    const { id, status, children } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement("span", { ...scope, id: id, className: meterStatus({ status, secondary: statusScales[status] }) },
+        React.createElement(StatusGlyph, { status: status, label: null, className: styles.statusGlyph }),
+        children == null ? null : React.createElement("span", { className: styles.statusText }, children)));
+}
+/**
+ * A meter or scale panel: stacks its meters and is the `meter-panel`
+ * container, so each meter sets label | track | value in one row from
+ * 768 px of the panel's width, and stacks below it.
+ */
+export function MeterPanel(props) {
+    const { className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement("div", { ...rest, ...scope, className: className ? `${styles.panel} ${className}` : styles.panel }));
+}
+function clamp(fraction) {
+    return Math.min(1, Math.max(0, fraction));
+}
+//# sourceMappingURL=Meter.js.map

package/components/Meter/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","sourceRoot":"","sources":["../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"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"}

package/components/Meter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Meter';
+//# sourceMappingURL=index.d.ts.map

package/components/Meter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Meter/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/components/Meter/index.js

@@ -0,0 +1,2 @@
+export * from './Meter';
+//# sourceMappingURL=index.js.map

package/components/Meter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Meter/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/components/Meter/meter.module.css

@@ -0,0 +1,384 @@
+/*
+ * Meter (§10.18; constructions §8.9). CVA functions `meter` and
+ * `meterStatus`. Ink only: track edges, indicators, filled cells, ticks,
+ * the arrow and labels are --primary12; the track interior shows the
+ * ground; ring tracks are --role-hairline. No part uses the secondary, so a
+ * meter never reads as a chart series. Status glyphs take --role-status of
+ * their own status scale. Colors are role variables only.
+ *
+ * Print [D126]: the indicator and filled cells compose `patternHatch`. On
+ * screen its --primary12 marks sit on the part's own --primary12 fill and
+ * disappear into it; in print the fill drops and the 45° hatch (its layer
+ * carries `print-color-adjust: exact`) prints black inside the outline,
+ * closed by an edge at the value.
+ *
+ * Local properties (counts and positions, never colors):
+ *   --meter-stops, --meter-stop-index   ordinal geometry, set inline
+ *   --meter-threshold                   the threshold position, set inline
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.stopLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.indicator {
+  composes: patternHatch from '../../utils/pattern.module.css';
+}
+
+.cellFilled {
+  composes: patternHatch from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  /* Label and value above a full-width track (§8.9 responsive baseline). */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label readout'
+      'track track';
+    align-items: baseline;
+    gap: var(--size-px-1) var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  .readout {
+    grid-area: readout;
+    justify-self: end;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--size-px-1) var(--size-px-2);
+  }
+
+  .value {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
+  .track {
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    box-sizing: content-box;
+    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
+    border: var(--border-size-1) solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* Solid --primary12; its height is Base UI's inline `inherit`. Only the value edge prints as a line. */
+  .indicator {
+    display: block;
+    box-sizing: border-box;
+    border-width: 0;
+    border-inline-end-width: var(--border-size-1);
+    background-color: var(--primary12);
+  }
+
+  /* Threshold: a --ds-space-12 tick at --border-size-2 across the track (a border, so it prints). */
+  .threshold {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--meter-threshold);
+    inline-size: 0;
+    block-size: var(--ds-space-12);
+    margin-block-start: calc(var(--ds-space-12) / -2);
+    margin-inline-start: calc(var(--border-size-2) / -2);
+    border-inline-start: var(--border-size-2) solid var(--primary12);
+  }
+
+  /* Segmented: outlined --ds-space-12 cells, --border-size-1, 2 px apart; filled cells solid. */
+  .cell {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--ds-space-12);
+    block-size: var(--ds-space-12);
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .cellFilled {
+    background-color: var(--primary12);
+  }
+
+  /* Ordinal: a --border-size-1 track with stop ticks, caps labels under the stops. */
+  .stop {
+    position: absolute;
+    inset-block-start: var(--ds-space-12);
+    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
+    block-size: var(--size-px-2);
+    margin-inline-start: calc(var(--border-size-1) / -2);
+    border-inline-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  .stopActive {
+    margin-inline-start: calc(var(--border-size-2) / -2);
+    border-inline-start-width: var(--border-size-2);
+  }
+
+  /* The active stop's arrow-triangle: outlined, never filled (§1.5.8). */
+  .arrow {
+    display: none;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
+    inline-size: var(--ds-space-12);
+    block-size: var(--size-px-2);
+    margin-inline-start: calc(var(--ds-space-12) / -2);
+    overflow: visible;
+    fill: none;
+    stroke: var(--primary12);
+    stroke-width: var(--ds-stroke-1-25);
+    stroke-linejoin: round;
+  }
+
+  .stops {
+    grid-area: stops;
+    display: grid;
+    grid-template-columns: repeat(var(--meter-stops), minmax(0, 1fr));
+    column-gap: var(--size-px-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .stopLabel {
+    color: var(--primary12);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  /* The active label is bold and one step larger, so it never depends on the arrow alone. */
+  .stopLabelActive {
+    --type-weight: var(--font-weight-7);
+
+    font-weight: var(--type-weight);
+    font-size: var(--ds-font-size-caption);
+  }
+
+  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
+  .ring {
+    grid-area: track;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    overflow: visible;
+  }
+
+  .ringTrack,
+  .ringArc {
+    fill: none;
+    stroke-width: var(--border-size-2);
+  }
+
+  .ringTrack {
+    stroke: var(--role-hairline);
+  }
+
+  .ringArc {
+    stroke: var(--primary12);
+  }
+
+  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .success,
+  .warning,
+  .danger {
+    color: var(--primary12);
+  }
+
+  .statusGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .statusText {
+    color: var(--primary12);
+  }
+
+  /* The meter-panel container (§10.18): a stack of meters that reflow on its width. */
+  .panel {
+    container: meter-panel / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    display: grid;
+    gap: var(--size-px-5);
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .indicator,
+    .cellFilled {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .ringArc {
+      forced-color-adjust: none;
+      stroke: CanvasText;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  .steps .track {
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--border-size-2);
+    block-size: auto;
+    border-width: 0;
+  }
+
+  /* Ordinal: arrow, 4 px, ticks crossing the 1 px line; labels below; the value is the active label. */
+  .ordinal {
+    grid-template-areas:
+      'label readout'
+      'track track'
+      'stops stops';
+  }
+
+  .ordinal .track {
+    block-size: var(--size-px-4);
+    border-width: 0;
+  }
+
+  .ordinal .track::before {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(var(--ds-space-12) + var(--size-px-1));
+    inset-inline: calc(50% / var(--meter-stops));
+    border-block-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  .ordinal .arrow {
+    display: block;
+  }
+
+  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
+  .kindRing {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    grid-template-areas: 'label track readout';
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--size-px-2);
+  }
+
+  /* Viewport fallback: label | track | value in one row from --md-n-above… */
+  @media (min-width: 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas: 'label track readout';
+    }
+
+    /* The ordinal scale takes the track column, its labels under it. */
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas:
+        'label track readout'
+        '. stops .';
+    }
+  }
+
+  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
+  @container meter-panel (width < 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track';
+    }
+
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track'
+        'stops stops';
+    }
+  }
+
+  @container meter-panel (width >= 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas: 'label track readout';
+    }
+
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas:
+        'label track readout'
+        '. stops .';
+    }
+  }
+
+  /*
+   * Below 360 px of the panel, ordinal labels turn vertical (§10.18), all
+   * kept: each reads upward and hangs from its tick, so a long word never
+   * breaks mid-word in a narrow column.
+   */
+  @container meter-panel (width < 360px) {
+    .stopLabel {
+      justify-self: center;
+      writing-mode: sideways-lr;
+      text-align: end;
+      overflow-wrap: normal;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Linear and segmented values print as the 45° hatch (composed); the numeral and status stay. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}