@cloudgrid-io/ui 0.4.0 → 0.6.0

package/README.md

@@ -3,7 +3,7 @@
 The CloudGrid design system: CSS custom properties, a Tailwind v4 theme, self-hosted
 fonts, and the same values as machine-readable JSON.
 
-46 React components, built on [Base UI](https://base-ui.com), styled only through tokens
+47 React components, built on [Base UI](https://base-ui.com), styled only through tokens
 and carrying no hardcoded colour.
 
 ## Install

package/dist/blocks/onboarding-question.d.ts

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { PageHeading } from "./page-heading.js";
+/**
+ * A question screen: a heading, a line saying how to answer it, a set of
+ * selectable option cards, and the button that moves on.
+ *
+ * The shape the console's onboarding asks every question in (#119). Read from
+ * Figma, the four channel flows reuse five screens and three of them are this
+ * one — "How did you find us", "What you usually build", "Let's know each other
+ * better" — differing in exactly one respect: whether you may pick more than
+ * one. So this is one component with a `mode`, not three screens and not two
+ * components. Everything else about them is identical, and duplicating it would
+ * mean a designer retuning the option card in two places and finding one.
+ *
+ * ## Presentation only
+ *
+ * The same line #117 drew for the entity card. This component carries no
+ * CloudGrid question, no channel logic and no idea what comes next. It knows
+ * nothing about "invite link" or "website"; it renders the options it is handed
+ * and reports what was picked. The strings, the sequence, the persistence and
+ * the meaning all stay in the console.
+ *
+ * ## One `mode`, two ARIA patterns
+ *
+ * These are not the same control with a different limit, and that is why they
+ * are Base UI's rather than a `role` attribute and a `keydown` handler:
+ *
+ * | | `single` | `multi` |
+ * |---|---|---|
+ * | container | `role="radiogroup"` | `role="group"` |
+ * | option | `role="radio"` | `role="checkbox"` |
+ * | tab stops | ONE for the group | one per option |
+ * | keys | arrows move and select, Space selects | Space toggles the focused one |
+ *
+ * A radio group has a single tab stop and roving focus; a checkbox group does
+ * not. Hand-rolling that reads correct in review and ships a group a keyboard
+ * cannot traverse, with nothing anywhere going red.
+ *
+ * ## The option IS the library's OptionCard
+ *
+ * Each option renders through `OptionCard` as Base UI's `render` element, so the
+ * card a designer tunes in `option-card.tsx` is the card this screen shows, and
+ * the selection behaviour is layered on top rather than a second card being
+ * grown here. `OptionCard` itself stays what it is — a static card or a link —
+ * because "a card that navigates" and "a card that holds an answer" are
+ * different controls, and a `selected` prop on the former would mean nothing
+ * most of the time.
+ *
+ * ## Selection is never colour alone
+ *
+ * Three independent signals, because the palette alone cannot carry it. Each
+ * option has an indicator that changes SHAPE when picked — an empty ring gains a
+ * dot, an empty box gains a tick — drawn in `currentColor`, which is `text-ink`
+ * and therefore legible on every surface. The card's border goes from hairline
+ * to strong. `aria-checked` carries the same fact to assistive tech.
+ *
+ * ## Surfaces, and the token that would have broken this
+ *
+ * On the panel scope `tokens.css` declares text, three line colours, the focus
+ * ring, a transparent card, the link pair and the state palette, and nothing
+ * else. `--cg-border-accent` is NOT among them, so it inherits `:root`, which is
+ * `var(--cg-primary)` — the panel's own purple. A selected card outlined in the
+ * accent is invisible on the panel, and looks perfect everywhere anyone would
+ * check. `--cg-primary-tint` is base-only and would paint near-white on purple.
+ *
+ * So the selected state is `--cg-border-strong` (ink on the page, white on both
+ * dark surfaces) plus the drawn indicator. No accent border, no tint, no fill.
+ */
+export interface OnboardingOption {
+    /** What `onValueChange` reports. Stable, and never shown. */
+    value: string;
+    /** The words on the card. */
+    label: string;
+    /**
+     * An outline SVG at 26 to 30px — `OptionCard`'s glyph contract, unchanged.
+     * Icons in this system are monoline: never filled, never on a chip.
+     */
+    icon?: React.ReactNode;
+    /** A line under the label, when the label alone is not enough. */
+    description?: string;
+    disabled?: boolean;
+}
+/** Two columns is the Figma arrangement. One reads as a list, three as a picker. */
+declare const COLUMNS: {
+    readonly 1: "grid-cols-1";
+    readonly 2: "grid-cols-1 sm:grid-cols-2";
+    readonly 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+};
+/** Everything both modes share. The mode-specific half is the union below. */
+type OnboardingQuestionBaseProps = Omit<React.ComponentProps<"section">, "ref" | "title" | "defaultValue" | "onChange"> & {
+    title: string;
+    /** How to answer it: "Pick one", "Pick all that apply". */
+    sub?: string;
+    eyebrow?: string;
+    options: OnboardingOption[];
+    columns?: keyof typeof COLUMNS;
+    /** Forwarded to `PageHeading`. `h2` for a question inside a larger page. */
+    level?: 1 | 2;
+    headingSize?: React.ComponentProps<typeof PageHeading>["size"];
+    continueLabel?: string;
+    onContinue?: () => void;
+    /**
+     * Overrides when the button is live. Left alone it enables as soon as there is
+     * an answer, which is the only rule this component can know. Anything else —
+     * a minimum, a question that may be skipped — is the console's to decide.
+     */
+    canContinue?: boolean;
+    /** Under the button. The console puts "Skip for now" here. */
+    footer?: React.ReactNode;
+    /** Submitted with a surrounding form, when there is one. */
+    name?: string;
+};
+type OnboardingQuestionProps = OnboardingQuestionBaseProps & ({
+    /** One answer. A radio group: one tab stop, arrows move and select. */
+    mode?: "single";
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    /** Any number of answers. A checkbox group: each option is a tab stop. */
+    mode: "multi";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+declare function OnboardingQuestion(props: OnboardingQuestionProps): React.JSX.Element;
+export { OnboardingQuestion };
+//# sourceMappingURL=onboarding-question.d.ts.map

package/dist/blocks/onboarding-question.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-question.d.ts","sourceRoot":"","sources":["../../src/blocks/onboarding-question.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,oFAAoF;AACpF,QAAA,MAAM,OAAO;;;;CAIH,CAAA;AAsFV,8EAA8E;AAC9E,KAAK,2BAA2B,GAAG,IAAI,CACrC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAC/B,KAAK,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC9C,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC9B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,uBAAuB,GAAG,2BAA2B,GACxD,CACI;IACE,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,GACD;IACE,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CACJ,CAAA;AAEH,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBA8GzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/blocks/onboarding-question.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { CheckIcon } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { OptionCard } from "./option-card.js";
+import { PageHeading } from "./page-heading.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/** Two columns is the Figma arrangement. One reads as a list, three as a picker. */
+const COLUMNS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+};
+/**
+ * The card, in both modes. Every class here is a utility over a `--cg-*` token,
+ * so the whole thing flips with the surface.
+ *
+ * `group` is what lets the indicator inside react to the root's `data-checked`.
+ * `pe-11` reserves the indicator's corner so a long label cannot run under it;
+ * tailwind-merge resolves it against `OptionCard`'s own `p-5` rather than
+ * fighting it.
+ */
+const OPTION_CLASS = cn("group relative cursor-pointer pe-11 text-start transition-colors select-none", "hover:border-line", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", "data-checked:border-line-strong data-checked:ring-1 data-checked:ring-(--cg-border-strong)", "data-disabled:pointer-events-none data-disabled:opacity-50");
+/** The indicator's frame. Round for one-of, square for many-of: shape says which. */
+const INDICATOR_CLASS = cn("pointer-events-none absolute end-4 top-4 flex size-4 shrink-0 items-center justify-center", "border border-line text-ink transition-colors group-data-checked:border-line-strong");
+function OnboardingQuestionOption({ option, mode, name, }) {
+    // `render` rather than children: Base UI merges its own role, aria-checked,
+    // data-checked, tabIndex, handlers and ref INTO this element, so the option is
+    // literally an OptionCard with radio or checkbox semantics rather than a
+    // lookalike. className is concatenated, and OptionCard runs the result through
+    // cn() last, so these utilities win the conflicts they are meant to win.
+    const card = (_jsx(OptionCard, { title: option.label, body: option.description, glyph: option.icon }));
+    if (mode === "multi") {
+        return (_jsx(Checkbox.Root, { value: option.value, name: name, disabled: option.disabled, "data-slot": "onboarding-question-option", className: OPTION_CLASS, render: card, children: _jsx("span", { "aria-hidden": "true", "data-slot": "onboarding-question-indicator", className: cn(INDICATOR_CLASS, "rounded-[4px]"), children: _jsx(Checkbox.Indicator, { className: "flex [&>svg]:size-3", children: _jsx(CheckIcon, { strokeWidth: 3 }) }) }) }));
+    }
+    return (_jsx(Radio.Root, { value: option.value, disabled: option.disabled, "data-slot": "onboarding-question-option", className: OPTION_CLASS, render: card, children: _jsx("span", { "aria-hidden": "true", "data-slot": "onboarding-question-indicator", className: cn(INDICATOR_CLASS, "rounded-pill"), children: _jsx(Radio.Indicator, { className: "size-2 rounded-pill bg-current" }) }) }));
+}
+function OnboardingQuestion(props) {
+    // Narrowed on the discriminant BEFORE destructuring, which is what keeps the
+    // value types honest: `single` answers with `string | null` and `multi` with
+    // `string[]`, and a consumer never has to narrow what came back. Destructuring
+    // first would collapse both into one union and hand the console a value it has
+    // to unpick at every call site.
+    const isMulti = props.mode === "multi";
+    const { title, sub, eyebrow, options, columns = 2, level = 1, headingSize = "md", continueLabel = "Continue", onContinue, canContinue, footer, name, className, 
+    // Held back so they cannot reach the DOM as attributes.
+    mode: _mode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, ...rest } = props;
+    // A mirror, kept for ONE reason: to know whether the button should be live.
+    // The group below stays the source of truth in both directions — controlled
+    // through `value`, uncontrolled through `defaultValue` — so this never becomes
+    // a second place the answer lives. `canContinue` overrides it outright.
+    const [picked, setPicked] = React.useState(() => {
+        const initial = props.value ?? props.defaultValue;
+        if (initial == null)
+            return [];
+        return Array.isArray(initial) ? initial : [initial];
+    });
+    const answered = (props.value !== undefined
+        ? Array.isArray(props.value)
+            ? props.value
+            : props.value == null
+                ? []
+                : [props.value]
+        : picked).length > 0;
+    // The group is labelled by the whole lockup, deliberately. The subline is the
+    // instruction — "Pick all that apply" — and a group's label is exactly where a
+    // screen reader user needs to hear it. Labelling by the title alone would drop
+    // the one sentence that says how many answers are allowed.
+    const headingId = React.useId();
+    const grid = cn("grid gap-4", COLUMNS[columns]);
+    return (_jsxs("section", { "data-slot": "onboarding-question", className: cn("flex flex-col gap-8", className), ...rest, children: [_jsx(PageHeading, { id: headingId, eyebrow: eyebrow, title: title, sub: sub, size: headingSize, level: level }), isMulti ? (_jsx(CheckboxGroup, { "aria-labelledby": headingId, "data-slot": "onboarding-question-options", className: grid, defaultValue: props.defaultValue ?? undefined, value: props.value, onValueChange: (next) => {
+                    setPicked(next);
+                    props.onValueChange?.(next);
+                }, children: options.map((option) => (_jsx(OnboardingQuestionOption, { option: option, mode: "multi", name: name }, option.value))) })) : (_jsx(RadioGroup, { "aria-labelledby": headingId, "data-slot": "onboarding-question-options", className: grid, name: name, defaultValue: props.defaultValue ?? undefined, value: props.value === null ? "" : props.value, onValueChange: (next) => {
+                    const answer = typeof next === "string" && next !== "" ? next : null;
+                    setPicked(answer == null ? [] : [answer]);
+                    props.onValueChange?.(answer);
+                }, children: options.map((option) => (_jsx(OnboardingQuestionOption, { option: option, mode: "single" }, option.value))) })), _jsxs("div", { "data-slot": "onboarding-question-actions", className: "flex flex-col items-start gap-4", children: [_jsx(Button, { type: "button", size: "lg", "data-slot": "onboarding-question-continue", onClick: onContinue, disabled: !(canContinue ?? answered), children: continueLabel }), footer] })] }));
+}
+export { OnboardingQuestion };
+//# sourceMappingURL=onboarding-question.js.map

package/dist/blocks/onboarding-question.js.map

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

package/dist/blocks/page-heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK;;;;;CAKD,CAAA;AAEV,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAW,EACX,KAAe,EACf,KAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACd,+BA8BA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK;;;;;CAKD,CAAA;AAEV,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAW,EACX,KAAe,EACf,KAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACd,+BAuCA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/page-heading.js

@@ -24,7 +24,7 @@ const SIZES = {
 };
 function PageHeading({ eyebrow, title, sub, size = "lg", align = "start", level = 1, className, ...props }) {
     const Heading = level === 1 ? "h1" : "h2";
-    return (_jsxs("header", { "data-slot": "page-heading", className: cn("flex flex-col gap-3", align === "center" && "items-center text-center", className), ...props, children: [eyebrow ? (_jsx("p", { className: "text-label font-medium text-faint", children: eyebrow })) : null, _jsx(Heading, { className: cn("font-display font-heavy tracking-display uppercase leading-display text-balance text-brand", SIZES[size]), children: title }), sub ? _jsx("p", { className: "text-body-lg text-body", children: sub }) : null] }));
+    return (_jsxs("header", { "data-slot": "page-heading", className: cn("flex flex-col gap-3", align === "center" && "items-center text-center", className), ...props, children: [eyebrow ? (_jsx("p", { className: "text-label font-medium text-faint", children: eyebrow })) : null, _jsx(Heading, { className: cn("font-display font-heavy tracking-display uppercase leading-display text-balance text-(--cg-text-accent)", SIZES[size]), children: title }), sub ? _jsx("p", { className: "text-body-lg text-body", children: sub }) : null] }));
 }
 export { PageHeading };
 //# sourceMappingURL=page-heading.js.map

package/dist/blocks/page-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-heading.js","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAA;AAEV,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAST;IACC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAEzC,OAAO,CACL,+BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,KAAK,KAAK,QAAQ,IAAI,0BAA0B,EAChD,SAAS,CACV,KACG,KAAK,aAER,OAAO,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAC/D,CAAC,CAAC,CAAC,IAAI,EAIR,KAAC,OAAO,IACN,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,KAAK,CAAC,IAAI,CAAC,CACZ,YAEA,KAAK,GACE,EACT,GAAG,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,wBAAwB,YAAE,GAAG,GAAK,CAAC,CAAC,CAAC,IAAI,IACtD,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"page-heading.js","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAA;AAEV,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAST;IACC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAEzC,OAAO,CACL,+BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,KAAK,KAAK,QAAQ,IAAI,0BAA0B,EAChD,SAAS,CACV,KACG,KAAK,aAER,OAAO,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAC/D,CAAC,CAAC,CAAC,IAAI,EAaR,KAAC,OAAO,IACN,SAAS,EAAE,EAAE,CACX,yGAAyG,EACzG,KAAK,CAAC,IAAI,CAAC,CACZ,YAEA,KAAK,GACE,EACT,GAAG,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,wBAAwB,YAAE,GAAG,GAAK,CAAC,CAAC,CAAC,IAAI,IACtD,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export * from "./blocks/entity-status.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/plug-method.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,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,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;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,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;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -1,14 +1,14 @@
 // The public surface of @cloudgrid-io/ui.
 //
 // GENERATED shape, hand-committed: one `export *` per component module. Flat is
-// safe here — the exported names across all 46 components collide zero times,
+// safe here — the exported names across all 47 components collide zero times,
 // asserted by a test so a future addition cannot break it silently.
 //
 // Per-module re-exports rather than a bundle, deliberately. 20 of these carry a
 // "use client" directive, and the client boundary is a property of the MODULE.
 // tsc emits file-per-file and preserves the directive, so a React Server
 // Component consumer keeps exactly the boundaries the source declares. Bundling
-// them into one file would collapse 46 modules into a single client island.
+// them into one file would collapse 47 modules into a single client island.
 //
 // The CSS is NOT imported here. It ships as separate entry points
 // (@cloudgrid-io/ui/tokens.css and friends) so a consumer with no React — the
@@ -50,6 +50,7 @@ export * from "./blocks/entity-status.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/plug-method.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,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,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;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,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;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/dist/tokens/base.json

@@ -1138,5 +1138,58 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: taken from the Console so the system holds every value in\none place, 2026-08-24 (#96).\n\nPENDING A DESIGNER. These are adopted as-is, not designed. They are here so the\nConsole can stop carrying private copies and so there is a single thing to edit;\nthe values themselves are the Console's current ones and are expected to change.\nMeasurements are recorded beside each so the decision is informed rather than\ninherited.",
+    "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.",
+      "$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",
+      "$description": "Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that\nis comfortably legible.\n\nThis is NOT the state -ink that EntityStatus (#116) says the library lacks. That\nnote wants a foreground for the WORD on a state chip, and the arrangement it\nshipped instead — dot carries the colour, word is text-ink — already measures\n14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt\nand belongs to volt. Adding a state -ink is still a brand decision and still\nopen.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-volt-ink"
+        }
+      }
+    },
+    "scrim": {
+      "$value": "rgba(34, 34, 34, 0.4)",
+      "$type": "color",
+      "$description": "The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the\nConsole's (#16181d) — a scrim sits above content and belongs to the system, not\nto one surface's ink scale.\n\nDoes NOT flip per surface, deliberately: it composites over whatever is beneath\nit, so a panel-scoped override would darken a scrim that is already dark.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-scrim"
+        }
+      }
+    },
+    "hover": {
+      "$value": "rgba(34, 34, 34, 0.045)",
+      "$type": "color",
+      "$description": "The wash under a hovered row or control. The system had no hover token; components were each inventing one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-ink.json

@@ -213,5 +213,18 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: only hover flips. A dark wash is invisible on a dark ground.",
+    "hover": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "$description": "Translucent white — the base wash is a dark ink and would not register on the ink ground.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-panel.json

@@ -197,5 +197,18 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: only hover flips. A dark wash is invisible on a dark ground.",
+    "hover": {
+      "$value": "rgba(255, 255, 255, 0.10)",
+      "$type": "color",
+      "$description": "Translucent white — the base wash is a dark ink and would not register on the panel ground.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -302,6 +302,62 @@
   --cg-transition-control: background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out);
   --cg-lift-hover: translateY(-1px);
   --cg-press-scale: 0.985;
+
+  /* ---- indicator ----
+     indicator + chrome: taken from the Console so the system holds every value in
+     one place, 2026-08-24 (#96).
+
+     PENDING A DESIGNER. These are adopted as-is, not designed. They are here so the
+     Console can stop carrying private copies and so there is a single thing to edit;
+     the values themselves are the Console's current ones and are expected to change.
+     Measurements are recorded beside each so the decision is informed rather than
+     inherited. */
+  /*
+     The live/current INDICATOR — the dot in its halo, and the brand mark. Never
+     decorative, never a fill.
+
+     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
+     silently corrected: darkening it would change the Console's appearance, which
+     is a design decision and not a contrast fix.
+
+     Note it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one
+     the brand owns is the open question here.
+
+     It is also a second LIVE. state.online (#00a05c) is the same idea in the state
+     scale, and EntityStatus (#116) already paints the live dot with it. They are not
+     interchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a
+     surface must not swap one for the other on the assumption that both mean
+     'serving'. Which name the brand keeps for live belongs to the same open question,
+     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.
+
+     This is NOT the state -ink that EntityStatus (#116) says the library lacks. That
+     note wants a foreground for the WORD on a state chip, and the arrangement it
+     shipped instead — dot carries the colour, word is text-ink — already measures
+     14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt
+     and belongs to volt. Adding a state -ink is still a brand decision and still
+     open. */
+  --cg-volt-ink: #243d00;
+  /*
+     The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the
+     Console's (#16181d) — a scrim sits above content and belongs to the system, not
+     to one surface's ink scale.
+
+     Does NOT flip per surface, deliberately: it composites over whatever is beneath
+     it, so a panel-scoped override would darken a scrim that is already dark. */
+  --cg-scrim: rgba(34, 34, 34, 0.4);
+  /*
+     The wash under a hovered row or control. The system had no hover token; components were each inventing one. */
+  --cg-hover: rgba(34, 34, 34, 0.045);
 }
 
 [data-cg-surface='panel'] {
@@ -357,6 +413,12 @@
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
+
+  /* ---- indicator ----
+     indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
+  /*
+     Translucent white — the base wash is a dark ink and would not register on the panel ground. */
+  --cg-hover: rgba(255, 255, 255, 0.10);
 }
 
 [data-cg-surface='ink'] {
@@ -409,4 +471,10 @@
   --cg-pending-fill: var(--cg-expired-fill);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
+
+  /* ---- indicator ----
+     indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
+  /*
+     Translucent white — the base wash is a dark ink and would not register on the ink ground. */
+  --cg-hover: rgba(255, 255, 255, 0.06);
 }

package/dist/tokens.json

@@ -123,7 +123,12 @@
       "--cg-ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
       "--cg-transition-control": "background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out)",
       "--cg-lift-hover": "translateY(-1px)",
-      "--cg-press-scale": "0.985"
+      "--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)"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",
@@ -145,7 +150,8 @@
       "--cg-online-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-pending-fill": "var(--cg-expired-fill)",
-      "--cg-danger-fill": "rgba(255, 255, 255, 0.16)"
+      "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-hover": "rgba(255, 255, 255, 0.10)"
     },
     "ink": {
       "--cg-text-primary": "#ffffff",
@@ -169,7 +175,8 @@
       "--cg-online-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-pending-fill": "var(--cg-expired-fill)",
-      "--cg-danger-fill": "rgba(255, 255, 255, 0.08)"
+      "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-hover": "rgba(255, 255, 255, 0.06)"
     }
   }
 }

package/package.json

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