rift-ds 1.0.0

package/components/MapLegend/MapLegend.css

@@ -0,0 +1,88 @@
+/* ============================================
+   MAP LEGEND COMPONENT
+   The corner block of a map: name, one line on
+   what it shows, and the key to its markers.
+   ============================================ */
+
+/* Base */
+
+.ds-map-legend {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  max-width: 32ch;
+  font-family: var(--font-family-code);
+  color: var(--color-text-primary);
+}
+
+/* Parts */
+
+.ds-map-legend__title {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-map-legend__description {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Key */
+
+.ds-map-legend__key {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  margin: 0;
+  margin-top: var(--gap-100);
+}
+
+.ds-map-legend__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+}
+
+.ds-map-legend__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.ds-map-legend__glyph svg {
+  display: block;
+  overflow: visible;
+}
+
+.ds-map-legend__glyph path,
+.ds-map-legend__glyph rect {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+.ds-map-legend__arc-stop-start {
+  stop-color: var(--color-chart-series-7);
+}
+
+.ds-map-legend__arc-stop-end {
+  stop-color: var(--color-chart-series-5);
+}
+
+.ds-map-legend__label {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}

package/components/MapLegend/MapLegend.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** One row of the key. */
+export interface MapLegendItem {
+    /**
+     * The marker the row explains. `point` and `anchor` draw Globe's cross and
+     * square; `arc` draws a short stroke of the arc gradient; a `line` is a flat
+     * rule in `color`; any React node renders as given.
+     */
+    glyph: 'point' | 'anchor' | 'arc' | 'line' | React.ReactNode;
+    /** What the marker means. */
+    label: React.ReactNode;
+    /** Colour for the `line` glyph (and the `arc` glyph, replacing its gradient). Any CSS colour. */
+    color?: string;
+}
+/** Props owned by MapLegend itself — everything else falls through to the root `<div>`. */
+type MapLegendOwnProps = {
+    /**
+     * The map's name, set above the key. Intentionally shadows the native
+     * `title` tooltip attribute, which MapLegend does not expose.
+     */
+    title?: string;
+    /** One or two lines saying what the map shows. */
+    description?: React.ReactNode;
+    /** The key itself: one row per marker kind. */
+    items?: MapLegendItem[];
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MapLegendProps extends MapLegendOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MapLegendOwnProps | 'children'> {
+}
+/**
+ * MapLegend — the block in the corner of a map: its name, a line on what it
+ * shows, and the key to its markers. The built-in glyphs are drawn on the
+ * same geometry Globe draws its markers with; WorldMap's dot and outlined
+ * square are its own, so a flat-map key passes its glyphs as React nodes.
+ * Pure markup, no hooks, so it renders from a Server Component; the key is
+ * a `<dl>`, glyph as term and meaning as description.
+ */
+export declare const MapLegend: React.ForwardRefExoticComponent<MapLegendProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MapLegend/MapLegend.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MapLegend.css";
+const GLYPH_SIZE = 12;
+const half = GLYPH_SIZE / 2;
+const mark = 3.5;
+const builtInGlyph = (item, gradientId) => {
+  switch (item.glyph) {
+    case "point":
+      return /* @__PURE__ */ jsx("path", { d: `M${half - mark} ${half}H${half + mark}M${half} ${half - mark}V${half + mark}` });
+    case "anchor":
+      return /* @__PURE__ */ jsx("rect", { x: half - mark, y: half - mark, width: mark * 2, height: mark * 2 });
+    case "arc":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M1 ${GLYPH_SIZE - 2}Q${half} -${half} ${GLYPH_SIZE - 1} ${GLYPH_SIZE - 2}`,
+          style: { stroke: item.color ?? `url(#${gradientId})` }
+        }
+      );
+    case "line":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M1 ${half}H${GLYPH_SIZE - 1}`,
+          style: item.color ? { stroke: item.color } : void 0
+        }
+      );
+    default:
+      return null;
+  }
+};
+const isBuiltIn = (glyph) => glyph === "point" || glyph === "anchor" || glyph === "arc" || glyph === "line";
+const MapLegend = React.forwardRef(
+  ({ title, description, items = [], className = "", ...rest }, ref) => {
+    const baseClass = "ds-map-legend";
+    const gradientId = React.useId();
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+      items.length > 0 && /* @__PURE__ */ jsx("dl", { className: `${baseClass}__key`, children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+        /* @__PURE__ */ jsx("dt", { className: `${baseClass}__glyph`, "aria-hidden": "true", children: isBuiltIn(item.glyph) ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${GLYPH_SIZE} ${GLYPH_SIZE}`,
+            width: GLYPH_SIZE,
+            height: GLYPH_SIZE,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            children: [
+              item.glyph === "arc" && !item.color && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${gradientId}-${i}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", className: `${baseClass}__arc-stop-start` }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", className: `${baseClass}__arc-stop-end` })
+              ] }) }),
+              builtInGlyph(item, `${gradientId}-${i}`)
+            ]
+          }
+        ) : item.glyph }),
+        /* @__PURE__ */ jsx("dd", { className: `${baseClass}__label`, children: item.label })
+      ] }, i)) })
+    ] });
+  }
+);
+MapLegend.displayName = "MapLegend";
+export {
+  MapLegend
+};

package/components/MessageActions/MessageActions.css

@@ -0,0 +1,85 @@
+/* ============================================
+   MESSAGE ACTIONS COMPONENT
+   The icon-button row under a chat message:
+   copy, retry, feedback. Ghost buttons — no
+   border, no resting background — so the row
+   stays quiet until pointed at.
+
+   Stateless beyond hover: copy feedback is the
+   consumer swapping an item's icon, never a
+   timer inside the row.
+   ============================================ */
+
+.ds-message-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-050);
+}
+
+/* ============================================
+   BUTTON
+   Ghost: transparent at rest, the passive
+   action ramp on hover and for the active item.
+   ============================================ */
+
+.ds-message-actions__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-100);
+  border: none;
+  border-radius: var(--radius-200);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-message-actions__button .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-message-actions__button:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ACTIVE
+   The selected item, e.g. the chosen feedback
+   thumb — held on the pressed step of the ramp.
+   ============================================ */
+
+.ds-message-actions__button--active {
+  background-color: var(--color-action-passive-bg-active);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-message-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-message-actions__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-message-actions .material-symbols-rounded {
+  color: inherit;
+}

package/components/MessageActions/MessageActions.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+/** One action in the row: a stable id, a glyph, and an accessible name. */
+export interface MessageAction {
+    /** Stable identifier passed to `onActionClick`. */
+    id: string;
+    /** Button glyph — Material Symbol name (string) or custom element (ReactNode). */
+    icon: string | React.ReactNode;
+    /** Accessible name, also shown as the tooltip. */
+    label: string;
+    /** Marks the action as selected, e.g. the chosen feedback thumb. */
+    active?: boolean;
+    /** Disables just this action. */
+    disabled?: boolean;
+}
+/** Props owned by MessageActions itself — everything else falls through to the root element. */
+type MessageActionsOwnProps = {
+    /** The actions, rendered left to right. */
+    items: MessageAction[];
+    /** Fires with the pressed action's id. */
+    onActionClick?: (id: string) => void;
+    /** Wrap each button in a Tooltip showing its label. The label stays as `aria-label` either way. */
+    showTooltips?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MessageActionsProps extends MessageActionsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageActionsOwnProps> {
+}
+/**
+ * MessageActions is the icon-button row for message-level actions: copy,
+ * retry, feedback. It slots into ChatMessage's `actions` prop, which reveals
+ * it on hover and keyboard focus.
+ *
+ * The row is stateless beyond hover — copy feedback is the consumer swapping
+ * an item's `icon` (content_copy → check) and flipping it back, so the row
+ * never owns a timer or a clipboard call.
+ */
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageActions/MessageActions.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import "./MessageActions.css";
+import "../../fonts/material-symbols.css";
+const MessageActions = React.forwardRef(
+  ({ items, onActionClick, showTooltips = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-message-actions";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: items.map((item) => {
+      const button = /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            `${baseClass}__button`,
+            item.active ? `${baseClass}__button--active` : ""
+          ].filter(Boolean).join(" "),
+          "aria-label": item.label,
+          "aria-pressed": item.active !== void 0 ? item.active : void 0,
+          disabled: item.disabled,
+          onClick: () => onActionClick?.(item.id),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: typeof item.icon === "string" ? "material-symbols-rounded" : void 0,
+              "aria-hidden": "true",
+              children: item.icon
+            }
+          )
+        }
+      );
+      return showTooltips ? /* @__PURE__ */ jsx(Tooltip, { content: item.label, children: button }, item.id) : /* @__PURE__ */ jsx(React.Fragment, { children: button }, item.id);
+    }) });
+  }
+);
+MessageActions.displayName = "MessageActions";
+export {
+  MessageActions
+};

package/components/MessageCard/MessageCard.css

@@ -0,0 +1,163 @@
+/* ============================================
+   MESSAGE CARD COMPONENT
+   Structured rich content inside a chat turn:
+   media on top, a title/meta/description body,
+   and an actions footer.
+
+   Not the navigation Card — this is content
+   furniture inside a conversation, sized by the
+   bubble or turn that holds it. It shares Card's
+   cover geometry and the chat bubbles' 24px
+   shell, so cards read the same across surfaces.
+   ============================================ */
+
+.ds-message-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--ds-message-card-max-width, 100%);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  overflow: hidden;
+}
+
+/* ============================================
+   MEDIA
+   Inset, not full bleed: 12px of card around a
+   12px-radius slot keeps the corners concentric
+   with the card's 24px shell — the exact
+   geometry of Card's case-study cover, and the
+   same rule the Composer follows.
+   ============================================ */
+
+.ds-message-card__media {
+  display: block;
+  margin: var(--padding-300) var(--padding-300) 0;
+  border-radius: var(--radius-300);
+  overflow: hidden;
+  /* The slot carries its own surface, so drawn media — a chart, an SVG —
+     reads as the same image-shaped panel a photo would. The page tone, not
+     the container ramp: lightest in light mode, darkest in dark, so the
+     slot recedes behind the drawing instead of tinting it. */
+  background-color: var(--color-bg-page-primary);
+}
+
+.ds-message-card__media img {
+  display: block;
+  width: 100%;
+}
+
+/* A Chart in the slot sheds its own panel chrome — the card is already the
+   panel, and the slot's page tone is the brightest surface in light mode and
+   the darkest in dark, so the drawing keeps maximum contrast against its
+   ground instead of sitting on a second container tone. */
+.ds-message-card__media .ds-chart {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: var(--padding-200) var(--padding-200) 0 0;
+}
+
+/* ============================================
+   BODY
+   The vertical rhythm is deliberately even: the
+   media-to-body distance (--padding-400) equals
+   the body-to-actions distance (--padding-200 on
+   each side of the seam), so the copy sits
+   centred between the image and the CTA row.
+   ============================================ */
+
+.ds-message-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  padding: var(--padding-400) var(--padding-500) var(--padding-200);
+}
+
+/* Without an actions footer the body closes the card, so it takes the full
+   bottom padding back. */
+.ds-message-card__body:last-child {
+  padding-bottom: var(--padding-400);
+}
+
+/* Title and meta form one unit, tucked closer together than the body's
+   stack gap so the meta reads as the title's subline. */
+.ds-message-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-message-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-message-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-icon-primary);
+}
+
+.ds-message-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-message-card__title {
+  min-width: 0;
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-message-card__meta {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-message-card__description {
+  margin: 0;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   ACTIONS
+   Mirrors ToolCall's actions footer exactly, so
+   approvals on a tool call and link actions on
+   a card read as the same row. Whitespace alone
+   separates it from the body — no rule.
+   ============================================ */
+
+.ds-message-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-200);
+  padding: var(--padding-200) var(--padding-500) var(--padding-400);
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-message-card .material-symbols-rounded {
+  color: inherit;
+}

package/components/MessageCard/MessageCard.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/** Props owned by MessageCard itself — everything else falls through to the root element. */
+type MessageCardOwnProps = {
+    /** Card heading. */
+    title?: string;
+    /** One or two lines under the title. */
+    description?: string;
+    /** Top media slot — an image or chart, inset from the card edges with its own rounded corners. */
+    media?: React.ReactNode;
+    /** Small leading icon beside the title — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. a domain or date, so callers keep their own formatting. */
+    meta?: string;
+    /**
+     * Action row rendered in a footer outside the body — small secondary or
+     * tertiary Buttons, mirroring ToolCall's actions footer.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Body content between the description and the footer — rich content, a Prose block, a DocumentChip row. */
+    children?: React.ReactNode;
+};
+export interface MessageCardProps extends MessageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageCardOwnProps> {
+}
+/**
+ * MessageCard is a structured rich-content card embedded in a chat message:
+ * media, title, body, and an actions row, for link previews, search results,
+ * and booking-style rich responses inside an assistant turn or bubble.
+ *
+ * It is not the navigation Card — this is content furniture inside a
+ * conversation, sized by the bubble or turn that holds it.
+ */
+export declare const MessageCard: React.ForwardRefExoticComponent<MessageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageCard/MessageCard.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MessageCard.css";
+import "../../fonts/material-symbols.css";
+const MessageCard = React.forwardRef(
+  ({ title, description, media, icon, meta, actions, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-message-card";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const hasBody = Boolean(title || icon || meta || description || children);
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      media && /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children: media }),
+      hasBody && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        (title || icon || meta) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          (title || icon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__title-row`, children: [
+            icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+            title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+          ] }),
+          meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+        children
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+MessageCard.displayName = "MessageCard";
+export {
+  MessageCard
+};

package/components/Meter/Meter.css

@@ -0,0 +1,98 @@
+/* ============================================
+   METER COMPONENT
+   Level indicator for a known quantity
+   ============================================ */
+
+.ds-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  width: 100%;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-meter__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap-400);
+}
+
+.ds-meter__label {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-meter__value {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  margin-left: auto;
+}
+
+/* ============================================
+   TRACK + FILL
+   ============================================ */
+
+.ds-meter__track {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-tertiary);
+  overflow: hidden;
+}
+
+.ds-meter--compact .ds-meter__track {
+  height: 4px;
+}
+
+.ds-meter__fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  transition: width var(--motion-duration-base) var(--motion-ease-standard);
+  /* Grows to the current level on mount — the single keyframe animates to
+     the inline width, and the duration token collapses under reduced motion. */
+  animation: ds-meter-grow var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-meter-grow {
+  from {
+    width: 0;
+  }
+}
+
+/* ============================================
+   STATUS VARIANTS
+   The strong border-weight status colour, not
+   the tinted bg — the fill is a thin ribbon
+   and needs the full-strength hue to read.
+   ============================================ */
+
+.ds-meter--info .ds-meter__fill {
+  background-color: var(--color-status-info-border);
+}
+
+.ds-meter--positive .ds-meter__fill {
+  background-color: var(--color-status-positive-border);
+}
+
+.ds-meter--warning .ds-meter__fill {
+  background-color: var(--color-status-warning-border);
+}
+
+.ds-meter--error .ds-meter__fill {
+  background-color: var(--color-status-error-border);
+}
+
+.ds-meter--neutral .ds-meter__fill {
+  background-color: var(--color-status-neutral-border);
+}