@cloudgrid-io/ui 0.11.0 → 0.13.0

package/dist/blocks/sign-in-options.d.ts

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { Button } from "../ui/button.js";
+/**
+ * The sign-in methods, in one place.
+ *
+ * ## Why this exists (#129)
+ *
+ * The console rendered its sign-in options in four separate places and they
+ * diverged: the invitation-accept screen offered ONLY Google, so an invitee
+ * without a Google account could not accept an invitation at all — no error, no
+ * fallback, on the one screen whose whole purpose is to let an invited person
+ * in. A fifth hand-written list would be the same mistake with a larger blast
+ * radius. So the list renders through one component, and adding a provider is
+ * one edit at the call site that owns the list rather than four that can
+ * silently disagree.
+ *
+ * ## Presentation only
+ *
+ * The same line #117 / #119 / #121 / #126 drew. This block holds no auth logic,
+ * no provider SDK, no redirect and no token; it renders the methods it is
+ * handed and never implies a provider that does not exist. Starting Google
+ * OAuth needs a session code the page mints — so that is a callback the page
+ * owns. The email option is a LINK, deliberately: middle-click and "open in new
+ * tab" work, and the target is visible in the status bar.
+ *
+ * ## The one thing it does own: `carry`
+ *
+ * Sign-in must not lose state that rides the URL — where to land afterwards
+ * (`return_to`), the onboarding path a NEW user should walk (`arrival`), and
+ * for the device flow the code being authorized (`code`) and the client that
+ * started it (`source`). Forgetting one is not a visual bug and shows up
+ * nowhere: sign-in succeeds and the person silently lands somewhere generic or
+ * walks the wrong flow. That has happened three times (`ai_tool`, `invite`,
+ * `watermark`).
+ *
+ * So the page declares what must survive ONCE, in `carry`, and the block
+ * applies it to every method uniformly: appended to each link method's `href`,
+ * handed to each action method's `onSelect`. The block never knows what the
+ * keys mean — the page wires, the block carries.
+ *
+ * One obligation stays with the caller, loudly: **validate `return_to` before
+ * handing it in.** The console keeps its `isSafePostAuthReturn` allowlist and
+ * this package cannot import it; an unvalidated `return_to` is an open
+ * redirect. Pass the value already validated with the same allowlist the
+ * post-auth resolver uses, so there is one thing to audit rather than two.
+ *
+ * ## Methods are groups
+ *
+ * `methods` is an array of GROUPS: buttons within a group stack tight, and the
+ * divider — "OR" unless `divider` says otherwise — renders between groups.
+ * `[[google], [email]]` is the console's current screen; a second OAuth
+ * provider joins the first group with no API change. The grouping is what lets
+ * the divider sit "between the providers and email" without the block knowing
+ * which method is which.
+ *
+ * ## Icons are handed in
+ *
+ * Every mark in this package is flattened to `currentColor` and the literal
+ * gate keeps it that way, so the four-colour Google G cannot live here without
+ * a brand decision. Consumers pass their own marks (`icon`), which the block
+ * hides from assistive tech: the accessible name is exactly `label`.
+ *
+ * @example
+ * ```tsx
+ * <SignInOptions
+ *   methods={[
+ *     [{ id: "google", label: "Continue with Google", icon: <GoogleIcon />, onSelect: startGoogle }],
+ *     [{ id: "email", label: "Continue with Email", icon: <Mail />, href: "/auth/email" }],
+ *   ]}
+ *   carry={{ return_to: safeReturn, arrival, code, source }}
+ *   renderLink={(p) => <Link {...p} />}
+ * />
+ * ```
+ */
+interface SignInMethodBase {
+    /** Stable, never shown. Lands on the button as `data-method`. */
+    id: string;
+    /** The words on the button, and its exact accessible name. */
+    label: string;
+    /**
+     * The method's mark, ~20px inside a fixed 5-unit slot at the inline start.
+     * Hidden from assistive tech here, so any mark keeps the name = `label`.
+     */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * Exactly one of `href` (a link method: a real anchor, `carry` appended) or
+ * `onSelect` (an action method: the page owns what selecting it starts, and
+ * receives the carried entries). The union is enforced in the types because a
+ * method with both would hide which one wins, and a method with neither is a
+ * button that cannot sign anyone in — worse than an absent one.
+ */
+export type SignInMethod = (SignInMethodBase & {
+    href: string;
+    onSelect?: never;
+}) | (SignInMethodBase & {
+    href?: never;
+    onSelect: (carried: Readonly<Record<string, string>>) => void;
+});
+export interface SignInOptionsProps {
+    /** Groups of methods. The divider renders between groups, never inside one. */
+    methods: ReadonlyArray<readonly SignInMethod[]>;
+    /**
+     * What every method must carry through sign-in — `return_to`, `arrival`,
+     * device `code`, `source`, whatever the page cannot afford to lose. Entries
+     * that are `null`, `undefined` or empty are dropped, so query params can be
+     * passed straight through. Appended to link methods' `href`; handed to
+     * action methods' `onSelect`.
+     */
+    carry?: Readonly<Record<string, string | null | undefined>>;
+    /** Replaces the "OR" between groups. The rule itself stays. */
+    divider?: React.ReactNode;
+    /**
+     * Renders the anchor for link methods, for consumers with a framework link —
+     * `(p) => <Link {...p} />`. Defaults to a plain `<a>`, which works
+     * everywhere; the framework link is an optimisation, not a requirement.
+     */
+    renderLink?: (props: {
+        href: string;
+    }) => React.ReactElement;
+    className?: string;
+}
+/**
+ * One full-width method row: the library `Button` (`variant="outline"` — white
+ * fill, hairline border, ink label) sized up to the ~52px onboarding rhythm.
+ * The icon sits at the inline start, positioned absolute so the label stays
+ * centered rather than being pushed off-center.
+ *
+ * Exported so a surface composing its own screen (the console's styleguide
+ * pilot) renders the same row `SignInOptions` does, instead of keeping a
+ * private twin. Every remaining prop passes through to `Button`.
+ */
+export declare function SignInMethodButton({ icon, label, className, ...props }: Omit<React.ComponentProps<typeof Button>, "children"> & {
+    icon?: React.ReactNode;
+    label: string;
+}): React.JSX.Element;
+export declare function SignInOptions({ methods, carry, divider, renderLink, className, }: SignInOptionsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=sign-in-options.d.ts.map

package/dist/blocks/sign-in-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in-options.d.ts","sourceRoot":"","sources":["../../src/blocks/sign-in-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAI7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,UAAU,gBAAgB;IACxB,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAA;IACV,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACvD,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,CAAA;CAC9D,CAAC,CAAA;AAEN,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,OAAO,EAAE,aAAa,CAAC,SAAS,YAAY,EAAE,CAAC,CAAA;IAC/C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,CAAA;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuBD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,qBAsBA;AAmBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,qBAoDpB"}

package/dist/blocks/sign-in-options.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../ui/button.js";
+import { Separator } from "../ui/separator.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/** `carry` with the empty entries dropped, in declaration order. */
+function carriedEntries(carry) {
+    if (!carry)
+        return [];
+    return Object.entries(carry).filter((entry) => typeof entry[1] === "string" && entry[1] !== "");
+}
+/** `href` with the carried entries appended, hash kept at the end. */
+function withCarried(href, entries) {
+    if (entries.length === 0)
+        return href;
+    const hashAt = href.indexOf("#");
+    const base = hashAt === -1 ? href : href.slice(0, hashAt);
+    const hash = hashAt === -1 ? "" : href.slice(hashAt);
+    const joined = new URLSearchParams(entries).toString();
+    return `${base}${base.includes("?") ? "&" : "?"}${joined}${hash}`;
+}
+/**
+ * One full-width method row: the library `Button` (`variant="outline"` — white
+ * fill, hairline border, ink label) sized up to the ~52px onboarding rhythm.
+ * The icon sits at the inline start, positioned absolute so the label stays
+ * centered rather than being pushed off-center.
+ *
+ * Exported so a surface composing its own screen (the console's styleguide
+ * pilot) renders the same row `SignInOptions` does, instead of keeping a
+ * private twin. Every remaining prop passes through to `Button`.
+ */
+export function SignInMethodButton({ icon, label, className, ...props }) {
+    return (_jsxs(Button, { variant: "outline", "data-slot": "sign-in-method", className: cn("relative h-[52px] w-full justify-center rounded-xl text-body-md font-medium", className), ...props, children: [icon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "absolute left-4 flex size-5 items-center justify-center [&_svg]:size-5", children: icon })), label] }));
+}
+/** The "OR" rule between method groups. Decorative, and hidden as such. */
+function SignInOptionsDivider({ children }) {
+    return (_jsxs("div", { "data-slot": "sign-in-options-divider", "aria-hidden": "true", className: "my-5 flex items-center gap-3", children: [_jsx(Separator, { className: "flex-1" }), _jsx("span", { className: "text-caption font-medium text-faint", children: children ?? "OR" }), _jsx(Separator, { className: "flex-1" })] }));
+}
+export function SignInOptions({ methods, carry, divider, renderLink, className, }) {
+    const entries = carriedEntries(carry);
+    const carried = Object.fromEntries(entries);
+    const groups = methods.filter((group) => group.length > 0);
+    return (_jsx("div", { "data-slot": "sign-in-options", className: className, children: groups.map((group, index) => (
+        // Groups have no identity of their own — position is what they mean.
+        // eslint-disable-next-line react/no-array-index-key
+        _jsxs(React.Fragment, { children: [index > 0 && _jsx(SignInOptionsDivider, { children: divider }), _jsx("div", { className: "grid gap-3", children: group.map((method) => method.href !== undefined ? (
+                    /*
+                      A real anchor rather than an onClick. Base UI's Button warns
+                      when the rendered element is not a <button>, hence
+                      `nativeButton={false}`, and it stamps `role="button"` on a
+                      non-native target — put back to `link`, because this one
+                      really does navigate.
+                    */
+                    _jsx(SignInMethodButton, { "data-method": method.id, render: renderLink?.({ href: withCarried(method.href, entries) }) ?? (_jsx("a", { href: withCarried(method.href, entries) })), nativeButton: false, role: "link", icon: method.icon, label: method.label, disabled: method.disabled }, method.id)) : (_jsx(SignInMethodButton, { "data-method": method.id, icon: method.icon, label: method.label, disabled: method.disabled, onClick: () => method.onSelect(carried) }, method.id))) })] }, index))) }));
+}
+//# sourceMappingURL=sign-in-options.js.map

package/dist/blocks/sign-in-options.js.map

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

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/quote.js";
 export * from "./blocks/rich-text.js";
+export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/step-item.js";
 export * from "./blocks/tool-logo.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -59,6 +59,7 @@ export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/quote.js";
 export * from "./blocks/rich-text.js";
+export * from "./blocks/sign-in-options.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/step-item.js";
 export * from "./blocks/tool-logo.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/theme.css

@@ -66,6 +66,10 @@
   --color-page: var(--cg-surface-page);
   --color-page-alt: var(--cg-surface-page-alt);
   --color-subtle: var(--cg-surface-subtle);
+  /* The neutral raised ground (#151). `subtle` is the lavender tint and `card`
+     is white, so before this there was no name for "one step off white, no
+     hue" and a raised panel had to flatten or take a cast. */
+  --color-raised: var(--cg-surface-raised);
   --color-control: var(--cg-surface-control);
   --color-panel: var(--cg-surface-panel);
   --color-code: var(--cg-surface-code);
@@ -137,6 +141,24 @@
   --color-expired-fill: var(--cg-expired-fill);
   --color-danger-fill: var(--cg-danger-fill);
 
+  /* The other two rungs of the chip (#149, #150). `-fill` is the ground, the
+     bare name is the dot, `-border` is the hairline and `-strong` is the word.
+     Mapped in the same pass as the tokens, for the reason the block above
+     gives: a token whose utility lands a release later is a token the first
+     consumer reaches for and does not find.
+
+     There is no --color-danger-border or --color-unhealthy-border, because
+     there is no such token — the same shape as --color-offline-fill, and the
+     `state` group's own note carries the reason. */
+  --color-online-border: var(--cg-online-border);
+  --color-online-strong: var(--cg-online-strong);
+  --color-expired-border: var(--cg-expired-border);
+  --color-expired-strong: var(--cg-expired-strong);
+  --color-pending-border: var(--cg-pending-border);
+  --color-pending-strong: var(--cg-pending-strong);
+  --color-unhealthy-strong: var(--cg-unhealthy-strong);
+  --color-danger-strong: var(--cg-danger-strong);
+
   /* ---- lines ---- */
   --color-hairline: var(--cg-border-hairline);
   --color-line: var(--cg-border-control);

package/dist/tokens/base.json

@@ -52,7 +52,7 @@
     }
   },
   "state": {
-    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.",
+    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.\n\nTHREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a\nhairline around it, a dot and a word, and until now the set carried only the\nfirst two of those four. -border is the hairline and -strong is the word; the\nbare name stays the dot it has always been.\n\n  <status>-fill     the chip ground\n  <status>-border   the hairline around it, a pale tint\n  <status>          the dot. An indicator, so 3:1, never text\n  <status>-strong   the word on the fill. Text, so 4.5:1\n\nThe values are the Console's, measured and shipped, not new ones: #149 asked\nfor the rung and console#579 had already been forced to leave two bands as\nliterals for the want of it. Only unhealthy-strong and danger-strong are\nderived, each for a stated reason in its own note.\n\nNo --cg-danger-border and no --cg-unhealthy-border. Neither has ever been drawn\nby any surface — StatusChip's error state has no edge and unhealthy has no band\nat all — so a value here would be invented to complete a grid rather than to\nserve a chip. Same call as --cg-offline-fill above, and the same remedy: add\nthem when something needs them, with the number that made the choice.\n\noffline has no -border and no -strong either, and for the reason it has no\nfill: an unplugged chip sits on the card ground with border-control, and its\nword is --cg-text-primary. Absence of state still does not need a colour.\n\nOn the panel and on ink, -border resolves to the surface's own hairline and\n-strong to its own primary text. A dark ground has no darker rung to reach for,\nand the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's\nchip fill, which is a dot and not a word. Worth knowing before retuning: on ink\nthe tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who\nwants the word tinted there changes five entries in surface-ink.json. On the\npanel it is not available at any value — white is 4.31:1 on that fill and white\nis the lightest colour there is, so AA on a panel chip needs the FILL to move.",
     "online": {
       "$value": "#00a05c",
       "$type": "color",
@@ -149,6 +149,84 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "#abefc6",
+      "$type": "color",
+      "$description": "The hairline around an online chip. From the Console's OK band, where it has\nshipped as #abefc6 on #ecfdf3 (console#579).\n\nIts own rung rather than the tone, and console#579 is why. Both systems carried\n{tone, fill} pairs and no third value, so converting the band meant sending the\nborder AND the word to --cg-online. Measured, that is not a repaint: the word\nfell from 7.55:1 to 3.06:1 and the border went from this pale tint to full\nsaturation. The band stayed a literal instead. This token is what lets it move.\n\n1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so\nthere is no floor it has to clear; what it has to do is stay pale, which the\ncontrast guardrail holds with a ceiling rather than a floor.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "#fedf89",
+      "$type": "color",
+      "$description": "The hairline around an expired or pending chip. From the Console's WARN band,\nwhere it has shipped as #fedf89 on #fffaeb (console#579).\n\n1.18:1 against --cg-expired-fill. Same rung and same reasoning as\n--cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is\nthe tone doing the border's job.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$description": "The hairline around a pending chip, aliased to expired's for the same reason the\ntone and the fill are. Splitting pending from expired later means editing the\nfour pending entries in this file and nothing else.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "#085d3a",
+      "$type": "color",
+      "$description": "The WORD on an online chip, and online as running text anywhere. From the\nConsole's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.\n\nThis is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on\nwhite and 3.06:1 on its own fill, which is an indicator and not a foreground, so\nthe component paints the dot with the tone and the word with --cg-text-primary,\nand its own note says a state foreground is a brand decision rather than a\ncomponent's to take. This is that decision, made with a value the Console has\nalready shipped rather than a new one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "#7a3d0a",
+      "$type": "color",
+      "$description": "The word on an expired chip, and expired as running text. From the Console's\nWARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$description": "The word on a pending chip. Aliased to expired's, like every other pending rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "#5d5401",
+      "$type": "color",
+      "$description": "The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on\nwhite.\n\nDERIVED, not adopted. unhealthy is the one tone here the Console never had, so\nthere is no shipped literal to take. This is --cg-unhealthy darkened along its\nown hue and saturation until it reaches the band the two adopted words already\noccupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather\nthan stopped at the first value that clears 4.5:1, so the words read as one set\ninstead of three matched and one nearly failing.\n\nThe tone is not simply reused because it does not clear the bar: --cg-unhealthy\nmeasures 4.46:1 on this fill. Four hundredths under the floor is under it.\n\ndE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from\nonline-strong. The tightest pair in the whole rung is expired-strong against\ndanger-strong at 19.8, above the 16.5 floor this palette was measured against.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "#c42828",
+      "$type": "color",
+      "$description": "The word on a danger chip, and danger as running text. 5.02:1 on\n--cg-danger-fill and 5.70:1 on white.\n\n--cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own\nfill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails\nas a sentence. The token is deliberately NOT moved to fix that: every fill,\nborder and icon already consuming it would repaint, and the error is that danger\nhad no word rung, not that its tone is wrong.\n\nThe Console's retired --color-error #d42b2b is where this starts and is not\nwhere it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still\nunder the floor on the exact chip that needs it. This is that red darkened along\nits own hue and saturation until it clears 5:1 on the fill, which is the\nsmallest move that holds on both grounds.\n\nKept lighter than the other three words on purpose. It is already the closest\npair in the rung, dE2000 19.8 from expired-strong, and darkening it into their\n7:1 band closes that to 16.6 — a failed chip and an expiring one should not\nconverge.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "brand-derived": {
@@ -210,6 +288,16 @@
         }
       }
     },
+    "neutral-50": {
+      "$value": "#f4f6f8",
+      "$type": "color",
+      "$description": "SOURCE: the Console's --color-canvas, the recessed ground behind a card.\n\nNot a pure grey. It carries a slight blue cast where the rest of this ramp is\nneutral, and that is recorded rather than corrected because the value is what\nlegacy raised panels already render and matching them is the point (#151).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-neutral-50"
+        }
+      }
+    },
     "neutral-100": {
       "$value": "#f1f1f1",
       "$type": "color",
@@ -304,6 +392,15 @@
         }
       }
     },
+    "surface-raised": {
+      "$value": "{neutrals.neutral-50}",
+      "$description": "A neutral ground one step off white, for a panel that should read as lifted off\nthe page rather than flat on it.\n\n#151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,\nso a raised panel had no value-preserving target and every consumer faced the\nsame three-way choice with no right answer — flatten it to white, tint it\nlavender, or pin a literal. This is the fourth answer, and it is the Console's\nown #f4f6f8 rather than a new value.\n\nDeclared at :root only, like --cg-surface-subtle and --cg-surface-control. The\nneutral grounds do not flip: inside a purple panel or on ink, depth is carried\nby --cg-surface-card and the hairline instead. Making it flip is one entry in\neach of the two surface sets.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-raised"
+        }
+      }
+    },
     "surface-control": {
       "$value": "{neutrals.neutral-200}",
       "$extensions": {
@@ -1164,23 +1261,13 @@
     "volt": {
       "$value": "#b6ff2e",
       "$type": "color",
-      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nMEASURED 1.21:1 on white, which is below every bar there is. It works on the\npanel (4.82:1) and on ink (13.13:1); on the page ground it reads only because\nit is paired with the ring and, in a pill, with volt-ink. Recorded rather than\nsilently corrected: darkening it would change the Console's appearance, which\nis a design decision and not a contrast fix.\n\nNote it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one\nthe brand owns is the open question here.\n\nIt is also a second LIVE. state.online (#00a05c) is the same idea in the state\nscale, and EntityStatus (#116) already paints the live dot with it. They are not\ninterchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a\nsurface must not swap one for the other on the assumption that both mean\n'serving'. Which name the brand keeps for live belongs to the same open question,\nand until it is answered volt is the Console's brand mark and online is the\nentity's state.",
+      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nMEASURED 1.21:1 on white, which is below every bar there is. It works on the\npanel (4.82:1) and on ink (13.13:1); on the page ground it reads only because\nit is paired with volt-ink in a pill. Recorded rather than\nsilently corrected: darkening it would change the Console's appearance, which\nis a design decision and not a contrast fix.\n\nNote it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one\nthe brand owns is the open question here.\n\nIt is also a second LIVE. state.online (#00a05c) is the same idea in the state\nscale, and EntityStatus (#116) already paints the live dot with it. They are not\ninterchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a\nsurface must not swap one for the other on the assumption that both mean\n'serving'. Which name the brand keeps for live belongs to the same open question,\nand until it is answered volt is the Console's brand mark and online is the\nentity's state.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-volt"
         }
       }
     },
-    "volt-ring": {
-      "$value": "rgba(182, 255, 46, 0.32)",
-      "$type": "color",
-      "$description": "The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above.",
-      "$extensions": {
-        "io.cloudgrid": {
-          "css": "--cg-volt-ring"
-        }
-      }
-    },
     "volt-ink": {
       "$value": "#243d00",
       "$type": "color",

package/dist/tokens/surface-ink.json

@@ -134,7 +134,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#5FD99A",
       "$type": "color",
@@ -232,6 +232,70 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens/surface-panel.json

@@ -118,7 +118,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#C8F5DC",
       "$type": "color",
@@ -216,6 +216,70 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens.css

@@ -107,7 +107,41 @@
      brighter gold on the same ramp as the amber rather than a new hue family,
      because green/amber/red is the traffic light an operator already reads and
      'serving but degraded' is its middle rung. Its own note carries the numbers
-     and the three families that were measured and rejected. */
+     and the three families that were measured and rejected.
+
+     THREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a
+     hairline around it, a dot and a word, and until now the set carried only the
+     first two of those four. -border is the hairline and -strong is the word; the
+     bare name stays the dot it has always been.
+
+       <status>-fill     the chip ground
+       <status>-border   the hairline around it, a pale tint
+       <status>          the dot. An indicator, so 3:1, never text
+       <status>-strong   the word on the fill. Text, so 4.5:1
+
+     The values are the Console's, measured and shipped, not new ones: #149 asked
+     for the rung and console#579 had already been forced to leave two bands as
+     literals for the want of it. Only unhealthy-strong and danger-strong are
+     derived, each for a stated reason in its own note.
+
+     No --cg-danger-border and no --cg-unhealthy-border. Neither has ever been drawn
+     by any surface — StatusChip's error state has no edge and unhealthy has no band
+     at all — so a value here would be invented to complete a grid rather than to
+     serve a chip. Same call as --cg-offline-fill above, and the same remedy: add
+     them when something needs them, with the number that made the choice.
+
+     offline has no -border and no -strong either, and for the reason it has no
+     fill: an unplugged chip sits on the card ground with border-control, and its
+     word is --cg-text-primary. Absence of state still does not need a colour.
+
+     On the panel and on ink, -border resolves to the surface's own hairline and
+     -strong to its own primary text. A dark ground has no darker rung to reach for,
+     and the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's
+     chip fill, which is a dot and not a word. Worth knowing before retuning: on ink
+     the tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who
+     wants the word tinted there changes five entries in surface-ink.json. On the
+     panel it is not available at any value — white is 4.31:1 on that fill and white
+     is the lightest colour there is, so AA on a panel chip needs the FILL to move. */
   /*
      Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white. */
   --cg-online: #00a05c;
@@ -162,6 +196,90 @@
   /*
      From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one. */
   --cg-danger-fill: #fceded;
+  /*
+     The hairline around an online chip. From the Console's OK band, where it has
+     shipped as #abefc6 on #ecfdf3 (console#579).
+
+     Its own rung rather than the tone, and console#579 is why. Both systems carried
+     {tone, fill} pairs and no third value, so converting the band meant sending the
+     border AND the word to --cg-online. Measured, that is not a repaint: the word
+     fell from 7.55:1 to 3.06:1 and the border went from this pale tint to full
+     saturation. The band stayed a literal instead. This token is what lets it move.
+
+     1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so
+     there is no floor it has to clear; what it has to do is stay pale, which the
+     contrast guardrail holds with a ceiling rather than a floor. */
+  --cg-online-border: #abefc6;
+  /*
+     The hairline around an expired or pending chip. From the Console's WARN band,
+     where it has shipped as #fedf89 on #fffaeb (console#579).
+
+     1.18:1 against --cg-expired-fill. Same rung and same reasoning as
+     --cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is
+     the tone doing the border's job. */
+  --cg-expired-border: #fedf89;
+  /*
+     The hairline around a pending chip, aliased to expired's for the same reason the
+     tone and the fill are. Splitting pending from expired later means editing the
+     four pending entries in this file and nothing else. */
+  --cg-pending-border: var(--cg-expired-border);
+  /*
+     The WORD on an online chip, and online as running text anywhere. From the
+     Console's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.
+
+     This is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on
+     white and 3.06:1 on its own fill, which is an indicator and not a foreground, so
+     the component paints the dot with the tone and the word with --cg-text-primary,
+     and its own note says a state foreground is a brand decision rather than a
+     component's to take. This is that decision, made with a value the Console has
+     already shipped rather than a new one. */
+  --cg-online-strong: #085d3a;
+  /*
+     The word on an expired chip, and expired as running text. From the Console's
+     WARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white. */
+  --cg-expired-strong: #7a3d0a;
+  /*
+     The word on a pending chip. Aliased to expired's, like every other pending rung. */
+  --cg-pending-strong: var(--cg-expired-strong);
+  /*
+     The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on
+     white.
+
+     DERIVED, not adopted. unhealthy is the one tone here the Console never had, so
+     there is no shipped literal to take. This is --cg-unhealthy darkened along its
+     own hue and saturation until it reaches the band the two adopted words already
+     occupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather
+     than stopped at the first value that clears 4.5:1, so the words read as one set
+     instead of three matched and one nearly failing.
+
+     The tone is not simply reused because it does not clear the bar: --cg-unhealthy
+     measures 4.46:1 on this fill. Four hundredths under the floor is under it.
+
+     dE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from
+     online-strong. The tightest pair in the whole rung is expired-strong against
+     danger-strong at 19.8, above the 16.5 floor this palette was measured against. */
+  --cg-unhealthy-strong: #5d5401;
+  /*
+     The word on a danger chip, and danger as running text. 5.02:1 on
+     --cg-danger-fill and 5.70:1 on white.
+
+     --cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own
+     fill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails
+     as a sentence. The token is deliberately NOT moved to fix that: every fill,
+     border and icon already consuming it would repaint, and the error is that danger
+     had no word rung, not that its tone is wrong.
+
+     The Console's retired --color-error #d42b2b is where this starts and is not
+     where it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still
+     under the floor on the exact chip that needs it. This is that red darkened along
+     its own hue and saturation until it clears 5:1 on the fill, which is the
+     smallest move that holds on both grounds.
+
+     Kept lighter than the other three words on purpose. It is already the closest
+     pair in the rung, dE2000 19.8 from expired-strong, and darkening it into their
+     7:1 band closes that to 16.6 — a failed chip and an expiring one should not
+     converge. */
+  --cg-danger-strong: #c42828;
 
   /* ---- brand-derived ----
      brand derived (interaction only) */
@@ -174,6 +292,13 @@
   --cg-neutral-0: #ffffff;
   /* SOURCE: alternate page wash */
   --cg-lavender-50: #f2f1f7;
+  /*
+     SOURCE: the Console's --color-canvas, the recessed ground behind a card.
+
+     Not a pure grey. It carries a slight blue cast where the rest of this ramp is
+     neutral, and that is recorded rather than corrected because the value is what
+     legacy raised panels already render and matching them is the point (#151). */
+  --cg-neutral-50: #f4f6f8;
   /* SOURCE: hairline / card border */
   --cg-neutral-100: #f1f1f1;
   /* SOURCE: control border, inactive pill fill */
@@ -192,6 +317,21 @@
   --cg-surface-page-alt: var(--cg-lavender-50);
   --cg-surface-card: var(--cg-neutral-0);
   --cg-surface-subtle: var(--cg-lavender-50);
+  /*
+     A neutral ground one step off white, for a panel that should read as lifted off
+     the page rather than flat on it.
+
+     #151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,
+     so a raised panel had no value-preserving target and every consumer faced the
+     same three-way choice with no right answer — flatten it to white, tint it
+     lavender, or pin a literal. This is the fourth answer, and it is the Console's
+     own #f4f6f8 rather than a new value.
+
+     Declared at :root only, like --cg-surface-subtle and --cg-surface-control. The
+     neutral grounds do not flip: inside a purple panel or on ink, depth is carried
+     by --cg-surface-card and the hairline instead. Making it flip is one entry in
+     each of the two surface sets. */
+  --cg-surface-raised: var(--cg-neutral-50);
   --cg-surface-control: var(--cg-neutral-200);
   --cg-surface-panel: var(--cg-primary);
   --cg-surface-code: var(--cg-ink);
@@ -353,7 +493,7 @@
 
      MEASURED 1.21:1 on white, which is below every bar there is. It works on the
      panel (4.82:1) and on ink (13.13:1); on the page ground it reads only because
-     it is paired with the ring and, in a pill, with volt-ink. Recorded rather than
+     it is paired with volt-ink in a pill. Recorded rather than
      silently corrected: darkening it would change the Console's appearance, which
      is a design decision and not a contrast fix.
 
@@ -368,9 +508,6 @@
      and until it is answered volt is the Console's brand mark and online is the
      entity's state. */
   --cg-volt: #b6ff2e;
-  /*
-     The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above. */
-  --cg-volt-ring: rgba(182, 255, 46, 0.32);
   /*
      Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that
      is comfortably legible.
@@ -423,7 +560,9 @@
   --cg-danger: #FFDAD6;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override. */
   --cg-online: #C8F5DC;
@@ -458,6 +597,14 @@
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-border: var(--cg-border-hairline);
+  --cg-pending-border: var(--cg-expired-border);
+  --cg-online-strong: var(--cg-text-primary);
+  --cg-expired-strong: var(--cg-text-primary);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
@@ -496,7 +643,9 @@
   --cg-danger: #FF8A80;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint. */
   --cg-online: #5FD99A;
@@ -523,6 +672,14 @@
   --cg-unhealthy-fill: rgba(255, 255, 255, 0.08);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-border: var(--cg-border-hairline);
+  --cg-pending-border: var(--cg-expired-border);
+  --cg-online-strong: var(--cg-text-primary);
+  --cg-expired-strong: var(--cg-text-primary);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */

package/dist/tokens.json

@@ -18,12 +18,21 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "#fdf6df",
       "--cg-danger-fill": "#fceded",
+      "--cg-online-border": "#abefc6",
+      "--cg-expired-border": "#fedf89",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "#085d3a",
+      "--cg-expired-strong": "#7a3d0a",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "#5d5401",
+      "--cg-danger-strong": "#c42828",
       "--cg-primary-press": "#4b39db",
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
       "--cg-neutral-0": "#ffffff",
       "--cg-lavender-50": "#f2f1f7",
+      "--cg-neutral-50": "#f4f6f8",
       "--cg-neutral-100": "#f1f1f1",
       "--cg-neutral-200": "#e3e3e3",
       "--cg-neutral-400": "#acacac",
@@ -34,6 +43,7 @@
       "--cg-surface-page-alt": "var(--cg-lavender-50)",
       "--cg-surface-card": "var(--cg-neutral-0)",
       "--cg-surface-subtle": "var(--cg-lavender-50)",
+      "--cg-surface-raised": "var(--cg-neutral-50)",
       "--cg-surface-control": "var(--cg-neutral-200)",
       "--cg-surface-panel": "var(--cg-primary)",
       "--cg-surface-code": "var(--cg-ink)",
@@ -127,7 +137,6 @@
       "--cg-lift-hover": "translateY(-1px)",
       "--cg-press-scale": "0.985",
       "--cg-volt": "#b6ff2e",
-      "--cg-volt-ring": "rgba(182, 255, 46, 0.32)",
       "--cg-volt-ink": "#243d00",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)"
@@ -155,6 +164,14 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "var(--cg-text-primary)",
+      "--cg-expired-strong": "var(--cg-text-primary)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.10)"
     },
     "ink": {
@@ -182,6 +199,14 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "var(--cg-text-primary)",
+      "--cg-expired-strong": "var(--cg-text-primary)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.06)"
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",